MS Access Tips/Sample and VBA and Blog customize etc...

ブログに関連記事リストを自動表示するスクリプト

気づかれている方もいるかと思いますが、記事の個別表示のときに、下部に関連記事というのを表示しています。例えば、「帳票フォームの複数コンボボックスで絞り込み」という記事だと、

relative_entries.jpg

というように表示されてます。(タイトルの後の数字は関連度を表します。)

訪問者が外部から検索で跳んできて記事を読んだら、関連する記事も読んでくれてページビューが増えるかもしれません。

今回はこのリストを表示する自作スクリプトについてです。

難易度:

既存のものを探してみた。

一番確実で精度が高いのは、記事毎に自分でリストを作成して記事内に埋め込むことでしょう。しかし、かなりの労力が必要です。新規記事に埋め込むだけならまだいいですが、過去の記事に関連する新規記事を投稿したときに、関連する過去記事のリストも変更しようとすると、もう大変な労力になります。

で、関連記事を自動で楽に表示したいという要望は多いようで、検索してみるといろいろ見つかります。

「FC2ブログで関連エントリーリスト」
「カンレンえんとり~ず」
サーバーにプログラムをおいて、そこでリストを生成して表示させるタイプです。前者は、個人運営のため、現在は停止しているようです。後者も試してみましたが、なぜか私のブログだと関連記事は「見つかりませんでした」となってしまいます。他のブログでは動いていますが、それを見ると、あまり関連度の精度は高くないように思えます。また、広告が表示されるのも気になります。

「カンジェネ」
「関連エントリーリストジェネレーター」
サイト上で、ブログのURLとキーワードを入力すると関連記事を探して、HTMLコードを生成してくれるタイプです。このHTMLコードを記事の最後に貼り付ければリストが表示されます。このタイプは、一度貼りつけたリストは固定なので過去の記事のリストも更新しようと思うとまた大変な労力になります。

「FC2ブログのタグとGoogle AJAX Feed APIを使用した関連エントリー」
「Google AJAX Feed APIを使ったタブの表示方法の変更」
「関連記事(関連エントリー)FC2プラグイン設置説明」
Google AJAX Feed APIを利用して、RSSで記事のタグと同じタグを設定してある記事を読み込んでそれを表示するというタイプです。タブでタグ毎のリストを切り替えて表示します。関連記事と言うよりタグ別最新記事一覧表示ですね。タグが多いとタブも多くなり、表示される記事が多すぎて混乱しそうで、関連記事リストの私のイメージとは違います。

ということで自分で作ってしまおうと思い立ちました。

自作スクリプトの仕様

現在の記事のユーザタグと、各記事毎にユーザータグが一致する数を取得して、それが多いほど関連度が高いことにします。で、関連度が高い順、同じランク内では投稿日の新しい順に指定件数になるまで取り出して表示する、というような仕様にすることにしました。

さて、全記事のユーザータグを調べる必要がでてきます。これをどうするか、RSSで読み込む方法では件数に制限があります。そこで、考えたのが、スクリプト内に配列として格納しておく、という単純な方法です。非常に単純な発想だと思うのですが、調べた限りではこのような方法をとっているブログは見つかりませんでした。

配列には記事番号、ユーザータグ、記事タイトル、を格納しておきます。記事新規記事を投稿するたびに、この配列にデータを追加してファイルアップロードします。完全自動とは行きませんが、スクリプトファイルを編集して、ファイルアップロードするのは慣れれば、1分ほどでできます。

関連性の精度は手入力並み、表示速度は現状の80件程度なら非常に高速、過去の記事にも自動で新規記事を関連記事として表示できる、また、自分でキーワードを入力するのでユーザータグ以外に独自にキーワードを入力することもできる、などメリットは多いと思います。デメリットは、新規記事を投稿するたびにスクリプトファイルにデータ追加する一手間かかることでしょうか。

スクリプトコード

テキストエディタ等で下記のようなコードを記述して、blogdata.js というファイル名で保存します。

1行目はご自分のブログのURLに変更してください。

3行目以降は、

[0,記事番号,"ユーザータグ or キーワード","記事タイトル"],
という書式で, 投稿順の新しい記事から順に記述してください。ただし、最後の行の最後の ,(カンマ)はつけません。これを忘れると正常動作しませんので注意してください。

すでに記事が多い方は面倒だと思いますので、後で自動でこの部分のテキストを取得する方法を紹介します。とりあえず、動作テストのために5件ほどのデータを作成してください。

上記のファイルを、FC2ブログの管理画面の「ファイルアップロード」でアップロードします。このときアップロード先のURLが赤字で表示されるので控えておいてください。

テンプレートHTMLの設定

テンプレートのHTMLの記事の最後の辺りに下記のコードを挿入します。<!--/more-->の直後でおそらくいいかと思います。

1行目は見出しですので、ご自分のブログのスタイルに合わせてタグや見出しを変更してください。
2行目の**********の部分はファイルをアップロードしたURLにしてください。charset="Shift_JIS" の部分はメモ帳などのエディタで普通にファイルを保存した場合はこのままでいいと思います。エディタで保存するときに文字コード EUC-JP で保存した場合はこの部分は不必要になります。
4行目の 5 は表示する記事リストの件数です。キーワードが一致する記事が指定した件数に満たない場合は、その件数までしか表示されません。

"ユーザータグ or キーワード"の部分で一致する部分の件数で一致度を判断しますので、ユーザータグ(or キーワード)を記述するとき考慮してください。大文字/小文字/全角/半角 は区別しますので、正確に記述してください。

なお、上記の3行目のjsファイル読み込みコードは、HTMLの HEADエリア内に記述した方がいいかもしれません。

これで「更新」してスクリプト内に記述した記事を個別表示させてみてください。関連記事のタイトルリストが表示されたら成功です。"ユーザータグ or キーワード" には共通するワードを入れておいてくださいね。ないと表示されませんので。

2010/11/17追記:上記のHTMLコードでは、個別記事のみに関連記事リストが表示される設定ですが、先頭の <!--permanent_area--> と最後の <!--/permanent_area--> を削除すると、個別記事以外のページでも表示させることができます。

長くなったので今回はここまで、
記事データを自動で取得する方法は次回で紹介します。

拍手する

2 Comments

hatena says..."エラーが出る場合"

上の管理人限定モードでのコメントですが、IEでエラーが出るとの報告でした。スクリプトのコードを見させてもらいましたが、記事データの最後の行のカンマが余分なようです。
記事でも説明していたのですが気がつきにくいので、赤字で強調しておきました。

2009.07.04 18:24 | URL | #- [edit]
ちゃーむ says..."解決しました"

お返事ありがとうござます!

ご指摘のとおり、私の見落としでした。
早速修正したところ、IEでも無事に表示させることができました。

凡ミスにお手を煩わせてすみませんでした・・。
動作がとても速く、精度も高いので今後とも愛用させていただくつもりです。
お世話おかけしました。

2009.07.05 18:18 | URL | #d/CpiV46 [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/88-9c754e6e
該当の記事は見つかりませんでした。