2009年02月 - ポエツ | poets

長いことブログを放置しておくと、たまに更新してもやっぱりほとんど見に来る人がいないことを痛感しています。

今回の課題は、ブログ内検索をAjax化する試みです。
前２回のスクリプト（「長年日記・拡張版」「TagHolder」）をベースにしてるので、今回はほとんど時間がかからず完成しました。
ひとまずシンプルにしておいて、また今後、いろいろギミックを施していこうと思います。

検索語を入力してボタンを押すと、画面遷移せずに検索結果だけをそのまま検索窓の下に表示させます。典型的なAjaxっぽい動作かと思います。
検索結果のページと通信して、記事タイトルなど必要な情報を取得してきます。
ページ全体がリロードされない分、いくぶん軽快です。ただアクセス解析など設置してる場合など、ブログ内でどういう検索語が使われたか集計しにくくはなります。

<input size="20" name="q" value="" id="searchbox" type="text">
<a style="padding:2px; border:1px solid #ccc; font-size:small;" onclick="ajaxsrh(0)">検索</a>
<script type="text/javascript" src="http://blog-imgs-24.fc2.com/p/o/e/poets/ajaxsearch01.js"></script>
<div id="applicable_items"></div>

上記のコードをプラグイン内にペーストするだけで動作します。
【追記】Windows（特にIE）だと、英数字以外はエンコードされちゃうみたいで検索できない…

FC2ブログのタグキーワード（ユーザタグ）は、記事編集画面では、使用累計数の上位10件しか入力候補に出てきません。
なので、過去の記事も付けたタグワードをまた使いたいなと言う時に、利便性がいまひとつでした。



このブックマークレット「タグホルダー」を使うと、これまで使ったユーザタグを必要なだけ入力候補として呼び出すことができます。

■ブックマークレット＞＞　tagholder


【ブックマークレットについて】
一応、「ブックマークレット」の説明をしますと、
上記の「tagholder」というテキストリンクを、右クリックやドラッグして、ブラウザのブックマーク（お気に入り）に登録します。
ブラウザに登録したら、使用するページ（今回で言えばブログの管理画面）で、このリンクを開きます。
サイトのURLを登録したブックマーク（お気に入り）だと違うページに移動しますが、ブックマークレットはそのページでJavaScriptが動作します。

【！ご注意！】
複数の環境でテストをして問題はありませんでしたが、環境によっては動作しないかもしれません。
ブログの記事を書く画面で使用するものなので、万一固まったり、記事が消えたりしないとも限らないので、始めに何回かテスト投稿で使用してみて下さい。


【動作確認した環境】
IE6、Safari3、Firefox3(Win/Macとも)、Opera(Mac)
私の持ってる環境ってだけなので、他でも動いたり、あるいは動かなかったりすると思います。

【動作仕様】
FC2ブログの記事編集画面（新規投稿、記事の編集いずれも可）のタグ入力フォームの上に、これまで使用しているタグワードを表示させます。

■従来のサジェスタと同じく、クリックで入力欄に入れ外しできます。

■クリックした（入力された）タグは、違う色でマークされるので視認しやすいです。
クリックして入力から外した場合は、マーカーも消えますが、
インプット欄から手動で消した場合にはマーカーだけは変化せず残ってしまうのは仕様です。

■title属性にタグの累計数を入れています。マウスポインタを載せて確認できます。

■手入力で記入したタグも、候補ワードの中に一時的に追加されます（保存はされません）。
同じようにクリックで外したり、入れ直しもできます。

■「&」や「'」（シングルクォーテーョン）など含むタグワードは候補から除外されます。
「\」などの記号がタグワードに含まれる場合も、正常にクリックできないことがあります。


【設　定】
初期値では、表示させるタグワード数の上限は「100」件に設定されていて、文字コード順にソートされるようになっています。
（おおまかに数字、アルファベット、かな、カナ、漢字　の順にソートされます）

ブックマークレットの値の設定を変えることで、これをお好みに調整することができます。
　※ブラウザに登録したあと、ブックマーク（お気に入り）の情報（プロパティ）を開いて編集できます。

表示数は　keep　の値を変えることで増減ができます。
また、タグをソートさせない場合は　tagsort　の値を 0 にすれば、タグの使用日順（タグをつけた記事の投稿日順）になります。

javascript:(function(){keep=100; tagsort= 1;
var%20s=document.createElement("script");s.charset="EUC-JP";s.src="http://blog-imgs-24.fc2.com/p/o/e/poets/tagsug.js";document.body.appendChild(s)})();

「長年日記っぽい」拡張版の解説です。
本来は「同月日」の記事を引き当てる機能で、「去年の今ごろはどんなことを書いていたかな」と年余にわたってブログを更新した際の楽しみとなるものです。
今回は拡張した結果「FC2ブログ　関連エントリサジェスタ」的になりました。
外部スクリプトにしてますので、今後機能を変更してしまうかもしれませんが、現行の仕様について以下に記載します。
（機能が更新されたくない場合は、スクリプトソースをコピーして自分のブログに上げ直してくださってもOKです。）


まず、”「長年日記っぽい」拡張版・関連エントリサジェスタ”を公開することになったきっかけ、出人さんの記事から。
耳呈さんの「LongTimeDiary」（仮称）を試す～同一月日の過去記事（２）

＞テンプレートを作ったことがない側には「別テンプレートを作る」ってところからして、すでにハードルが高かったりします

＞わたしがそもそも欲しいと思ったものは、１年前に限定する必要はなく、過去の記事を全部を対象にしているもの

今回、この２点の問題は解消しています。

前の「長年日記っぽい」には、２つモデルがありました。
ひとつは公開したタイプの、「いま表示させてる１年前の記事を引き当てる」ものです。
FC2ブログではあまり使われてませんが、実は日別参照用のURLがあります。
blog-date-yyyymmdd.html　と言う形式の、月別アーカイブに「日」の分を追加した書式です。
この「yyyy」から１引いたURLにアクセスすれば、ちょうど１年前の同月同日の記事は引き当てられます。
利点は非常にシンプルなことですが、年を跨いで同月同日を探すことができないのが欠点です。

もうひとつは、全記事リスト（achives.html）から、同月同日に投稿された記事を引き当てる方法です。
これなら年を跨いだエントリも抽出できるのですが、欠点は全記事ぶんのデータを取得するので動作が重いことと、上限2000件なので、それより多くの記事を投稿してるブログでは、足切り分が出てしまうことです。

今回のスクリプトでは後者の全記事リストから引き当てをする方式です。
iframe に別のテンプレートを読み込んで…　という方法も、上記で指摘されたように手間がかかるので、スクリプトを貼るだけで稼働する方法を検討しました。
それとiframeだと、読み込んだタイトルなどのテキスト文字数が収まるように、幅・高さを調整するのが難しい面でも、この方式は採用しませんでした。

［設置方法］
前回の記事（blog-entry-283.html）に掲載してるコードを、テンプレートのHTML内、もしくはプラグインのHTMLに貼るだけです。
投稿記事内に入れても動作しません。

［動作仕様］
【１】
JavaScript で現在の年月日を取得して、投稿日が同月日の記事を引き当てます。
【２】
記事個別ページ（blog-entry-xxx.html）では、その表示している記事の投稿日と同月日の記事を引き当てます。
（１）（２）　いずれも未来・過去の同月日が対象です。「同年」の記事は除外しています。

【３】
（２）がなかった場合、同じ月、もしくは前後の月に投稿された、同カテゴリの記事を引き当てます。
これが、今回追加された「関連記事サジェスタ」です。
「日付＋カテゴリ」の条件で抽出してるので、カテゴリやタグだけから表示させる関連エントリよりは精度の高いものが出るかも。
逆に前後の月にも投稿されてないようなのだと何も出てきません。

［その他］
・いま気づいたんですが、個別記事に　?no=xxx 形式でアクセスした場合は機能しません。あとで対応させるかも。
・（１）の「現在と同月日」で対象がなかった場合は、１年前の日付が近い記事を引き当てる拡張を構想中。