解決させたいこのサイトのシステムの問題点

このwebサイトは、昔ながらの
「ホームページビルダーみたいなソフトでHTMLを構築してFTPでサーバーにアップする」
という手法で更新されているのではなく、
「PHPとデータベースを使用して動的に生成する」
という、ちょっと小難しいことをしています。

なので、何か新しい記事を更新するときは
管理画面にログインして、そこのフォームに記事を書いて送信すると
webサイトの方にも反映される。という、
まぁ、ブログみたいなものを自前で構築しています。

こういうシステム構築自体は、元々僕の本業でもあるので
これくらいのwebサイトであればちゃちゃっと作れるのですが、
細かいバグというか、期待通りに動いていないところもいくつかあります。

せっかくプログラミング系の記事も書こうと決めたので、
現在の問題点と、それを解決させる過程を記事として残していこうと思います。
なんかプログラム系サイトっぽい！

～～～～～～～～～～

さて、現在の問題点は以下の3点です。

・管理画面で入力した文章に自動で<br />タグをつけると、javascriptと相性が悪い

・記事内にHTMLのソースコードを書きたいときにHTML特殊文字のエスケープがめんどくさい

・テキストエリア内でタブキーを押すと、タブが入力されずにカーソルがテキストエリアを出ちゃう

こんな感じです。

まずは
・管理画面で入力した文章に自動で<br />タグをつけると、javascriptと相性が悪い
の方を解決させてみましょう。

現在、このwebサイトの各記事の本文は、管理画面内のテキストエリアに

テストです。
ウェーイ。

こんな感じで入力しています。

んで、実際に表示する場合にはPHPの nl2br() という関数を使用して自動的に<br />タグを付けています。

すると、HTMLソース的には

テストです。<br />
ウェーイ。<br />

こんな感じになって、正しく改行が反映されるわけですね。

しかし、記事の中に

テストです。
ウェーイ。
<script>
　　console.log("テストですよ");
</script>

こんな感じでjavascriptを記述したい場合、さっきの処理だと

テストです。<br />
ウェーイ。<br />
<script><br />
　　console.log("テストですよ");<br />
</script><br />

というふうに変換されてしまい、javascriptがエラーを起こしてしまいます。

<script>～</script>の中の改行は<br />タグにならないようにしないといけないわけですね。

今のところは突貫工事で、テキストエリア内に

テストです。
ウェーイ。
<script>\
　　console.log("テストですよ");\
</script>\

こんな感じ<br />タグに変換したくない改行の前に「\」マークを付けて、
PHPでは

$body = nl2br( $body );
$body = str_replace( "\\<br />", "", $body );

こんな処理をしています。

こうすることで、期待通りに

テストです。<br />
ウェーイ。<br />
<script>
　　console.log("テストですよ");
</script>

こんな感じのHTMLを生成できるわけですね。

が、いまいち美しくありません。

「\」マークをいちいち付けるのは面倒くさいですし、絶対に付けるの忘れますし、
逆に行の末尾に「\」マークを記述したい場面で「あれ？なんだこれ？」となることは請け合いです。

ということで、元々の

テストです。
ウェーイ。
<script>
　　console.log("テストですよ");
</script>

この書き方で、<br />タグもjavascriptも理想的に実装できる方法を考えてみたいと思います。

というわけで、次回は解決編です。
ちなみに、現在の段階では具体的な解決案は思い付いていません。これから考えます！

次回をお楽しみに☆

■解決させたいこのサイトのシステムの問題点