昨日のブログで一応宣言してしまったので、記事作成支援ツールのプロトタイプを作ってみた。使っている言語はJavaScriptのみ。ただし画像イメージのみ紹介。

検索は「楽天アフィリエイト」と「Google」に対応させた。キーワードを入れて検索ボタンを押すと、新しいウィンドウに検索結果ページが表示されるだけ。Googleの場合UTF-8にエンコーディングしなければならないが、そこはぐぐるなびマップで利用している関数を流用した。検索窓はJavaScriptで表示/非表示がコントロールできる。

メイン部分は3カラム構成にしている。左のカラムは未実装だが、気になるキーワードでgooかどこかのBlogサーチをして、結果に出てくるRSSをAjaxの要領で取得して表示させようか計画中。これによって、簡単にトラックバック先や引用先を探せるのではないかと踏んでいる。

中央のカラムは記事を各部分だ。URLってところは、ライブドアのブログでも使われている機能のインスパイア。選択された文字列を、指定URLの値の入ったアンカータグで囲むという機能だ。ライブドアでは「target="_blank"」が入らないので、このツールではそれを入れるようにした。また、JavaScriptのプロンプトは使ってない。

右のカラムはプレビューを表示する部分。単純にgetElementById()のinnerHTMLメソッドで記事部分を代入すると、改行がbrタグに置換されずに表示されてしまう。JavaScriptでなんとか「改行」を「<br>」に置換する方法を調べなければ。で、色々と調べてみると、escape関数で改行コードが%0Aや%0Dになることが分かった。これを利用して、記事をいったんescape関数でエンコードして、エンコードされた記事内の%0Aをreplaceメソッドでescape('<br>')に置換し、その結果をさらにunescape関数にかけてデコードするという方法を取った。これで改行文字をbrタグに置き換えて、きちんとプレビューできる。

まだAmazonアソシエイトのリンク作成とか、左カラムのRSS取得部分など実装したい機能が残っているが、それはまた明日以降に。