fc2note - ポエツ | 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 形式でアクセスした場合は機能しません。あとで対応させるかも。
・（１）の「現在と同月日」で対象がなかった場合は、１年前の日付が近い記事を引き当てる拡張を構想中。

そういえば、ひとつ前のネタも「はてなダイアリーの機能を模倣する」でした。今回は「その場」インターフェイスに関して。

はてなダイアリー日記：はてなダイアリーに2つの「その場」インターフェースが加わりました
FC2ブログ ユーザーフォーラム：【要望】「その場編集」機能を実装してほしい

「その場」インターフェースとは、つまり管理画面側ではなく、閲覧する側のページからでも投稿や記事修正ができる機能です。
FC2ブログにカスタマイズで付ける方法についてですが、その前に…。はてなと違うところは、ログイン/ログアウト状態によって表示/非表示が変わる要素がない。ログイン/ログアウトしてるかどうか確認しにくい。最大の問題は、非ログイン状態＝ふつうの訪問者にも見えてしまうことです（使えないけど）。
ちなみに今回のメモは、旧管理画面仕様。新はまたの機会に。

１）テンプレートに組み込んでしまう。
「その場」感があるという点ではこれに勝るものはないです。コメントフォームのように投稿/修正フォームを設置するだけです。
△JavaScriptオフでも使える
▲テンプレートを変更するたびに改造する必要がある
▲投稿後は完了画面、つまり管理画面へ遷移してしまう

２）フォーム用テンプレートを作成して、ポップアップウィンドウで開く
例によって別テンプレ呼び出しです。
でも別窓開くんだったら、直行リンク（参照：FCafe）をタブで開いたほうが効率がいいような。
ポップアップで開いて、ポストした時に新ウィンドウは閉じて、元をリロードすれば一応「その場」っぽくはなる。
△ブックマークレットにすれば、テンプレ上の設置が不要
▲ブックマークレットだと、編集するにはそのパーマリンクへ行かなきゃならない
（location.hrefから記事ナンバーを取得するので）

３）インラインフレームにフォーム用テンプレートを読み込む
スクリプトで iframe を書き出して、フォーム用テンプレートを読み込む。一応、「その場」感はあるかと。

しかし、どれもログアウトしている状態だったとしても察知できません。
「編集画面直行リンク」と較べても、わざわざカスタマイズするほどの優位性が見出せない気がします。

【今回の発見】
記事番号を指定して投稿することができます。たしか欠番などは、インポートでもしないと埋めようがなかったのですが、この方法で可能です。もちろん、すでにある番号で投稿すると上書きされてしまいます。

はてなダイアリーに「長年日記」がついたとき、taigo さんが記事に取り上げられてたのですが、（参照：日記を書きたい、という欲だけはあるのです。）どんなときに役立つ機能なのかよく分からなかったんです。つまりは前年以前の同月同日に書かれた記事を参照できるようですが、（参照）１年以上ログがないと体験できません。
少し前に月太郎さんと「８月７日は”バナナ”の日」なんていう話をしていたら、すでに去年のバナナの日にもその話題を書いていたことが判明。（参照：40本のバナナを喰わされた泥棒）。たしかに「去年のいまごろはどんなことを書いていたな」と、パッとは思い出せませんし、かといって逐一探したりもしませんから、去年の同月同日が参照できると便利です。
日々の暮しを書いた日記やなおさらだし、時事ネタでない記事でも意外に当時の記憶がよみがえったりします。「Letter from Yochomachi」でも「今日は何の日」で過去の同日の記事を出してきてますし、こういう使い方にも活用できそう。

それで似たような形のものを作ってみました。 JavaScript で日時を取得し、インラインフレームに別テンプレートを読込んで、１年前の同月同日を表示させます。JS、iframeがＮＧだと機能しません。
トップページでは閲覧している現在時刻を取得し、１年前の同月同日の記事を探します。（サンプル）
過去１年皆勤だったら、１年間は毎日、去年のストックを参照してくれますから少しは更新がサボれる、かも？
記事個別ページでは、その投稿日から１年前の同月同日を参照します。（サンプル）

作成・設置手順
■別テンプレート
まず読込むテンプレートを作成します。記事タイトルだけのごく簡単なものです（html&cssファイル）
ヘッダ内にスタイルを記述しているので文字サイズなどはそちらで調整できます。
★「longtimediary」という名称で保存する必要があります。違う名前にする場合はスクリプトで読み込むテンプレート名も揃えて変更します。

<!--topentry-->
<p>
<a href="<%topentry_link>" title="<%topentry_discription>" target="_parent"><%topentry_title></a>
</p>
<!--/topentry-->

<script type="text/javascript">
if("<!--topentry--><%topentry_title><!--/topentry-->".length == 0){
document.write('<p><%sub_title>の投稿はありません</p>');}
</script>

記事タイトル部のリンクにtitle属性で記事概要を入れています。不要なら削除するか、あるいは（インラインフレームの幅を広げる必要がありますが） title属性でなく、テキストとして出してしまっていいかもしれません。
スクリプトは記事タイトルが空だった場合を、該当なしと判定して「投稿はありません」と表示させます。

■スクリプト
次に現在のテンプレートに設置するJavaScript部分。まずプラグインのフリーエリアとかにそのまま入れられる短い版。（ファイル）
１年前の同月同日をインラインフレーム内に読み込む仕組みですが、初年の記事を参照している場合だと、あきらかにそれより前年、というのはないわけです。
それで少し拡張してあるのがこちら。（ファイル：下記内容と同じ）

<!--permanent_area-->
<script type="text/JavaScript"><!--
<!--topentry-->
if (<%topentry_year> > 2005){
document.write('<h3>１年前に書いた記事</h3><iframe src="/?style2=longtimediary&date='+ (<%topentry_year>-1) + '<%topentry_month><%topentry_day>" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none; width:100%; height:5em; overflow:hidden;" scrolling="no"></iframe>');}
else{
document.write('<h3>１年後に書いた記事</h3><iframe src="/?style2=longtimediary&date='+ (<%topentry_year>+1) + '<%topentry_month><%topentry_day>" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none; width:100%; height:5em; overflow:hidden;" scrolling="no"></iframe>');}
<!--/topentry-->
// --></script>
<!--/permanent_area-->

<!--not_permanent_area-->
<h3>１年前のきょうの記事</h3>
<script type="text/JavaScript"><!--
dd = new Date();
yy = dd.getFullYear() -1;
mm = dd.getMonth() + 1;
dd = dd.getDate();
if (mm < 10) { mm = "0" + mm; }
if (dd < 10) { dd = "0" + dd; }
document.write('<iframe src="/?style2=longtimediary&date=' + (yy) + (mm) + (dd) + '" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none; width:100%; height:5em; overflow:hidden;" scrolling="no"></iframe>');
// --></script>
<!--/not_permanent_area-->

たとえば、このブログだと2005年から書き始めているので、その１年前の2004年を探しても該当するものが出てきません。なので2005年の記事からは、１年「後」を参照するように変更しています。コードの始めの方にある　2005　をそのブログの初年に書き換えます。
そうすると「１年前のきょうの記事」という見出しで統一できないので、「１年後…」に見出しから変えています。これだと（プラグインタイトルがある関係で）フリーエリアにそのまま入れられません。面倒だと思う場合は、「長年日記」とか「同月同日エントリ」とか「きょうは何の日」など、共通できる見出しをつけて、「h3」部分を削除します。
フレームの高さは5emになっています。２件くらいまでは表示できるかと思うのですが、タイトルの長めなブログや、同月同日に複数件のエントリがあるようなら広げて下さい。（テンプレート側に sameday を入れて日付ネストする方法もあります。）

新機能FC2ブログ拍手。導入されたばかりなので仕様がどんどん変更されるでしょうけど、現状のメモ。

■アイコンを変える＆好きな位置に配置する方法

［参照］べーじゅのこころ：ブログ拍手アイコン変更♪
変数「deny_comment」で囲んでおけば、記事ごとに表示切り替えもできます。

■クイック拍手

いちいち画面遷移が面倒なんで、脊髄反射的にブラボーしたい場合。変数「topentry」内で有効。

<form method="post" action="http://blogvote.fc2.com/index.php">
<input type="submit" name="nologin" value="拍手">
<input type="hidden" name="mode" value="pickup">
<input type="hidden" name="mode2" value="vote">
<input type="hidden" name="id" value="ブログID">
<input type="hidden" name="eno" value="<%topentry_no>">
</form>

■サンプル

■クイック・メッセージ

「コメント欄があるのに、またコメント欄？」と思われないために、簡易メッセージ性を強化。 拍手と違って、じつはエントリごとではないので、ブログの固有番号を入れます。名前にはこっそりクッキーをかませてあるので注意！　匿名のつもりで誹謗するとえらいことになるかも。

<form method="post" action="http://blogvote.fc2.com/index.php">
<input type="hidden" name="name" size="10" value="<%cookie_name>">
<input type="hidden" name="status" value="1">
<input type="hidden" name="mode" value="pickup">
<input type="hidden" name="mode2" value="comment">
<input type="hidden" name="id" value="ブログID">
<input type="hidden" name="keyno" value="固有番号">
message:<input type="text" name="body" size="40" value="">
<input type="submit" value="投稿">
</form>

■サンプル（cookie無効なので名前を書いてね）

message:

投稿されたメッセージ一覧（http://blogvote.fc2.com/pickup/ブログID）

ここ最近、danielさんのところで連載している「Photoscope」開発日記がすごい。（参照：Plugin Photoscope）「はてな」だったらまずホットエントリになっていただろうなあ、と思う。もったいない。
いや、注目や人気がどうこうってことだけではないんです。danielさんご本人はそんなことに頓着せず作っているだろうし、FCafeを見てる閲覧者はもともと相当いるはずなので。

ただ「はてブ」は衆愚だの、ブクマ乞食だの言われながらも、価値のある記事を、それをふだん見ない人たちの前にも持ち上げて知らせることができる点で、かなりの役目を果たしていると思います。
まあ、やたらウェブ2.0 とか言って、むやみにソーシャルソーシャルとお仕着せがましくされるのには、ちょっと飽きてはいますが。

私がdanielさんに忖度して言ったら失礼ですけど、ひとりでものを作るのって行き詰まるところがあると思うのです。人ひとりの視点って限度があるので。
スクリプトを書くようなことに限らず、たとえば、なにげなく書いた短い記事に、コメントが付いたり、誰かが反論記事を書いてきたりして「じゃあ、もうちょっと突っ込んで続きを書いてみるか」と、当初よりもことがふくらみ、発展していくことだってあります。
実際、一連の「Photoscope」開発記事でもコメントが付いて、どんどん改良されていっています。

”アルファ”な方たちのところなんで、較べていいかわかりませんが、中島聡さんのブックマークレットに、小飼弾さんが提案をしたり。こういうのって素敵です。
Life is beautiful：シオレットに「すごい」Weblioを加えた

って、エラソーなこと書いといて、私が何もしないのもアレなんで、
え、と…　Safari でもばっちり動きました！　（js 勉強しよう…）