機能しているHTMLタグと、機能せずにそのまま表示されるHTMLタグを記事内で混在させる

さて、今回は
・記事内にHTMLのソースコードを書きたいときにHTML特殊文字のエスケープがめんどくさい
という問題に対応していきたいと思います。

このサイトは、よくあるブログみたいに管理画面上のテキストエリアに文章を入力することで
記事の更新を行っています。

んで、例えばテキストエリア内に

太文字にしてみます

と入力すると、文章内のHTMLタグはちゃんと機能して、実際の記事上では

太文字にしてみます

こんなふうに表示されるんですけど、
プログラミングの事を書こうとすると、どうしても記事内に

これは太文字になります
これは太字になりません

こんな感じで、HTMLタグをそのまま表示させたいニーズも出てきます。

そんなことは世界中のプログラマーの皆さんが思っていたことなので、すでに対応策が用意されています。
それは、テキストエリア内に

これは太字になりません

と記述することで、実際には

これは太字になりません

と表示させることができるというものです。

「<」を表示させたいところに「<」と入力し、
「>」を表示させたいところに「>」と入力すれば、
それは本来のHTMLタグの機能を持たず、ただの記号として表示することができるわけです。

こういう、本来の機能を失わせる記述の事を「エスケープ」って言うんですけど、
記事の更新をするときにいちいち「<」とか入力しているとめんどくさいので、
必要なタイミングでHTMLタグの有効化と無効化を切り替えられるようにしてみたいと思います。

結論から言っちゃうと、記事内に記述する特別な意味を持つ文字列を設定し、
それをHTMLタグの有効化／無効化のスイッチにしちゃうわけですね。

テキストエリアに以下の感じで入力します。

これは太字になります
!DECODE_OFF
これは太字になりません
!DECODE_ON
これは太字になるように戻っています

すると、記事上では

これは太字になります
これは太字になりません
これは太字になるように戻っています

こんな感じに表示されるようにPHPを改造しています。

多分これで「<」とか入力するよりもラクにHTMLのソースを記事上に表示できるようになったと思います。

取りあえずはこれで
・記事内にHTMLのソースコードを書きたいときにHTML特殊文字のエスケープがめんどくさい
という問題は解決できたと思うので、次回は
・テキストエリア内でタブキーを押すと、タブが入力されずにカーソルがテキストエリアを出ちゃう
の問題解決に取り組んでみたいと思います。

お楽しみに！

■機能しているHTMLタグと、機能せずにそのまま表示されるHTMLタグを記事内で混在させる