ブログ記事の保存について

Question

お世話になっております。

現在Webサイトを構築しているのですが、ブログを設けようと思っております。

teratailのように改行や太字、画像貼り付けや引用などをブログに反映させるために、
ブログ投稿画面で入力された文字や画像を保存したいのですが、このような記事を保存する方法はどのような方法で保存しているのでしょうか？
保存にはGoogle Cloud PlatformのDatastoreやCloud Storageを使用する予定です。

ページを開くとブログ記事を表示し、改行や太字、画像などを記事を書いた時のようにそっくりそのまま展開したいと思っております。

このようにHTMLのように自由に表記できる記事はどのように保存しているのでしょうか？
HTMLタグを文字列で保存し、パースしているのでしょうか？

またteratailは書き込む画面はtextareaで構成されているようですが、単純な文字列で保存しているのでしょうか？
プレビュー画面は<p>で構成されており、その中に文字列、改行には<br>を差し込んでいるようです。

宜しくお願いいたします。

Answer 1

HTML を直接保存したほうが自由度が高く、
ただの文字列 (プレーンテキスト) を保存して表示するときに HTML に変換したほうが安全性は高いでしょう。世の中にはおそらく両方の形式が存在します。

実際のソースコードは確認のしようがないのでなんともいえませんが、表面上の動きを見る限り、
teratail はプレーンテキストを保存して後から変換する方式、
ブログの例として、 Tumblr は HTML で保存していると思います。

というのも、Tumblr は投稿段階で書式付き編集画面 (WYSIWYG エディタと呼ばれるもの) を提供していますが、その場で変換結果の HTML に切り替え、HTML の方を編集して保存することができます。

teratail の方の編集画面は厳密には WYSIWYG エディタではないかもしれませんね。
markdown 入力支援機能付きプレーンテキスト入力欄といったところでしょうか。

入力 → HTML 変換は両方行っていますが、 teratail のほうはこの変換システムが対応していないコードを表示することはできません。(例えば iframe を埋め込むとか)
だからこそ、不特定多数が書き込むシステムではそのほうが安全だともいえます。
また、後から変換する方式なら、すでに掲載されてしまった悪質なコードにも対策ができます。

一方 Tumblr は、変換後に編集できるので、HTML で表現できるあらゆるコードを掲載できます。
管理人しか書き込まないと分かっているなら自由度が高い HTML 形式がいいかもしれません。

Answer 2

自前で実装すればどういう形にでも出来ますが質問していると言う事はわからないと言う事だと思いますので、まずは汎用の物を使用して理解するのが良いかと思います。

ckeditorやTinyMCE等を利用する事でテキストエリアをいわゆるワープロチックなテキストを選択して色を付けたり、フォントを変更したりサイズを変更したり・・が可能になります。
ワードプレスを利用した事があるのでしたらあの投稿画面だと思ってもらえれば良いかと思います。

実際はほぼHTMLの様にタグで囲んで実現している訳ですので、対応させたTEXTAREAのテキストをそのまま保存。
今度は読み出して、HTMLとして表示させれば色が付いたり太くなったり・・が再現される訳です。

画像についてはその中でアップロードや選択をさせたいのか、単純にリンクした画像が表示できれば良いのかで変わります。
その場でアップロードなどもしたければそれぞれのエディタに対応したアップローダー兼画像管理ソフトもありますので探して下さい。

まずはどういう形で実現されているのかを理解して、そのままで良ければそのまま利用。
理解した上で、こういう機能が欲しいんだとかが出たら自前で実装すれば良いかと思いますので。

一度見てみて下さい。