BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）
以前公開した「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」の第2弾で、Ajax と CGI の組み合わせでリンクリスト表示のタイムラグを解消する方法です（下記のスクリーンショットは表示イメージ）。
仕組みは、リンクリストの表示用タグ（リスト 3.1）はお好きな位置に埋め込み、そこから Ajax（bp.js） を起動し、さらに CGI（bp.cgi） を起動し、CGI 経由で BlogPeople のリンクリストを取得します。Ajax 起動なので、HTMLページ表示と BlogPeople のリンクリスト取得は並列に処理され、リンクリストが取得できた時点で HTMLに反映されます。
上記の基本的な動作に加え、ここでは下記の動作も加えた、少し凝った作りにしています。
- リンクリストが表示されるまではローディング画像を表示（IE6では初回しか表示されないようです）
- リンクリスト取得に失敗した場合は、ローディング画像を消去して、リスト表示位置に "Server Error" または非表示
下記にサンプルを用意してますので、動作をご確認ください。なお Ajax の特徴を分かりやすくするよう、リンクリスト表示までに1秒かかるよう、スクリプトを改変しています。Firefox で閲覧されると良く分かります。
このカスタマイズは設定がやや複雑ですので、自信がない方は前述した下記の方法をお勧めします。
BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）
それでは以下、設定方法です。CGI および外部ファイルが扱えるブログやホームページであれば利用可能と思われます。また特定のブログに依存する記述ではありませんので、予めご了承ください。
１．スクリプトのダウンロード
下記のファイルをダウンロードしてください（右クリックして「対象を保存」を選択してください）。
- bp.zip/ bp.lzh （リンクリスト取得スクリプト）
- bp.js （Ajax起動スクリプト）
- ajax-loader.gif （ローディング画像）
bp.zip（または bp.lzh）は解凍した中にある bp.cgi を使用します。
また、上記の他、Ajax ライブラリの prototype.js をダウンロードしてください。
Prototype JavaScript Framework
上記のサイトの Download the latest version のリンクをクリックし、アーカイブをダウンロード。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
また、ajax-loader.gif はお好きな画像に変更して構いません。配布しているローディング画像は下記のサイトで作成したものです。
２．bp.js の修正
ダウンロードした bp.js を任意のエディタで開き、1行目・2行目（リスト 2.1）を修正します。
リスト 2.1 bp.js 変更箇所
var script = 'bp.cgi';
var image = 'ajax-loader.gif';bp.cgi の部分は URL 記述に変更してください。当サイトを例にすると、メインページと同じディレクトリに bp.cgi をアップロードしたのであれば、
リスト 2.2 bp.js 変更例
var script = 'http://www.koikikukan.com/bp.cgi';という風に書き換えます。
ajax-loader.gif の部分も同じ要領で変更しますが、bp.js と異なるパスにアップロードする場合のみ、URL 記述に変更してください。bp.js と同じディレクトリであればこのままで問題ありません。
３．スクリプトのアップロード
１項でダウンロードしたファイルをサーバにアップロードします。bp.cgi はアップロード後、パーミッションを 755 または 777 に変更します（パーミッションの値はレンタルサーバによって異なる場合がありますので適宜確認してください）。
各ファイルのアップロードディレクトリは任意ですが、例えば Movable Type であれば、メインページと同じディレクトリが良いでしょう。CGI スクリプト（bp.cgi）はレンタルサーバによって実行可能ディレクトリの制限があるので、例えば cgi-bin ディレクトリ等になる場合があります。
４．リンクリスト表示用タグの追加
リスト 4.1 の内容を、リンクリストを表示したい位置へ設定します。
リスト 4.1 リンクリスト表示用タグ
<div id="linklist"></div>
<script type="text/javascript">
getLinkList('[BlogPeopleリンクリストのURL]');
</script>[BlogPeopleリンクリストのURL] には、リンクリストのコード生成で出力された script 要素の src 属性の内容（リスト 4.2 の青色部分）を設定します。
リスト 4.2 BlogPeopleリンクリスト表示コード
<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxxxxxxxxxxxx.js"></script>５．スクリプトのインクルード
リスト 5.1 の script 要素を、リスト 4.1 を設定したテンプレート（またはHTML）の <head>～</head> 部分に設定します。
リスト 5.1 script 要素
<script type="text/javascript" src="http://domain/path/prototype.js"></script>
<script type="text/javascript" src="http://domain/path/bp.js"></script>赤色の src 属性値は環境に合わせて適宜変更してください。
６．スタイルシート設定
リスト 6.1 をスタイルシートに追加します。
リスト 6.1 CSS
#linklist {
margin: 5px 1px 15px;
background: none;
color: #444444;
font-size: 10px;
_font-size: 9px;
line-height: 150%;
}
.bp_loading {
border: 1px solid #999999;
padding: 83px 0;
text-align: center;
}
.bp_loaded {
}
.blogpeople-main {
height:162px;
overflow: auto;
}
.blogpeople-powered-by {
text-align: left;
}
.bp_error {
padding: 83px 0 84px;
text-align: center;
}以下、CSS の各セレクタの説明です。
#linklist はリンクリスト全体のスタイルを設定しています。
.bp_loading はローディング画像を表示中のスタイルです。padding プロパティは、ローディング画像表示中の高さと、実際にリンクリストが表示されたときの高さを一致させるためのものです。ローディング画像のサイズによって高さが微妙に変わりますので、気になる場合は padding の値を適宜変更してください（Firefox で閲覧して高さが一致するようにしています）。
.bp_loaded はリンクリストが表示された時のリンクリスト全体のスタイルです。お好みに応じてプロパティを追加してください。
.blogpeople-main と .blogpeople-powered-by は「BlogPeople のリンクリストにスクロールバーをつける」のCSSと重複しています。すでにリンクリストのスクロール設定をされている場合はご注意ください。
.bp_error はリンクリスト取得失敗時のスタイルです。
７．リンクリストが表示されない場合
このカスタマイズのキモは「リンクリストが取得できるかどうか」ですが、それを確認するために、bp.cgi の下記の部分を変更して、bp.cgi をブラウザから直接実行してみると良いでしょう。
リスト 7.1 bp.cgi 変更箇所
my $url = $query->param('url');
↓
my $url = '[BlogPeopleリンクリストのURL]';[BlogPeopleリンクリストのURL]は３項と同じものです。成功すればブラウザ上にリンクリストが表示されます。
上記でリンクリストが表示された後、bp.cgi の内容を元に戻します。それで表示できない場合は、
- bp.js および prototype.js のパス誤り
- bp.js に記述した bp.cgi のパスが誤り
等が考えられます。
*1：全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox／Opera ではストレスなく表示されます。
- iPhoneで通信量を調べる方法
- Ajaxによるモジュール化（jQuery版）
- Movable Type 4.2 における mt.js の変更点（その1：Ajax 対応と window.onload の代替スクリプト）
- Ajax でキャッシュさせない方法
- Ajax によるモジュール化
- Safari の Ajax 文字化け対処
- 複数ブログで Ajax 月送りカレンダーを利用する方法
- はてなブックマークの「人気エントリー/注目エントリー」を Ajax + Perl でブログに表示する
≫ Ajaxを利用して外部サービスを利用する from 101Webdesign
BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Aja... [続きを読む]
≫ Ajaxを導入してみた from sky line blog
このブログにAjaxを導入してみました。 具体的には、サイドバーのBlogPeo... [続きを読む]
いつも関心しながら拝見させて貰ってます。
bp.jsの変更箇所で、
var script = 'bp.cgi';
var image = 'ajax-loader.gif';
の部分を修正となっていますが、ダウンロードした修正前のbp.jsには
var image = 'ajax-loader.gif';
の一行がありません。これは追加するということでしょうか？
追加してアップしてbp.cgiの動作と各ファイルへのパスも確認しましたが、どうしてもローディング画像以外表示されないのはこれのせいでしょうか？
プログラミングに関して全く無知なので、教授頂けると幸いです。
＞jさん
こんにちは。
ご質問の件ですが、配布している bp.js の内容が誤っておりました。
ご迷惑おかけして申し訳ございません。
先ほど内容を修正致しましたので再度お試し頂けますでしょうか。
それではよろしくお願い致します。
いつも大変参考にさせていただいております。
このエントリーを参考に、私のブログでもBlogPeopleの部分にAjaxを導入してみました。
文字コードはブログ・BlogPeople出力設定ともにUTF-8にしているのですが、Safariで確認した場合のみ、BlogPeopleのリンクリストが文字化けしてしまっているようです。
Firefox (2.0 WinXP, 1.5 Mac OS X)、IE (6.0 WinXP, 7.0 WinXP, 5.2 Mac OS X) では問題なく表示されるため、原因がよく分かりません。
対策などお分かりでしたらご教授頂けると幸いです。
よろしくお願い致します。
＞takさん
こんばんは。
ご利用ありがとうございます。
ご質問の件につきまして、下記のスクリプトをダウンロードして、お使いの bp.js と入れ替えてお試し頂けますでしょうか（当方 Mac を持っていないので動作確認できません）。
http://www.koikikukan.com/samples/20061123_2/bp.js
（このURLに対処したつもりのサンプルもあります）
すでにお読みになっているかもしれませんが下記に関連サイトを挙げておきます。
http://kawa.at.webry.info/200511/article_9.html
http://jsgt.org/mt/archives/01/000287.html
http://www.bricklife.com/weblog/000628.html
以上です。
それではよろしくお願い致します。
ご回答ありがとうございます。
ご提示のスクリプトに差し替えてみたところ、Safariでも文字化けしないのを確認致しました。
また、先述の他ブラウザでも、変わらず正常に表示されていました。
ありがとうございます！
取り急ぎお礼と報告をさせていただきます。
＞takさん
ご連絡ありがとうございました。
うまく表示されたようでホッとしました。
ではでは！
