BlogPeople 等のリンクリストによる表示の遅延を解消する(その2:Ajax編)

BlogPeople 等のリンクリストによる表示の遅延を解消する(その2:Ajax編)

Posted at November 23,2006 3:33 AM
Tag:[Ajax, BlogPeople, Customize]

以前公開した「BlogPeople 等のリンクリストによる表示の遅延を解消する(その1:JavaScript編)」の第2弾で、Ajax と CGI の組み合わせでリンクリスト表示のタイムラグを解消する方法です(下記のスクリーンショットは表示イメージ)。

BlogPeople リンクリストの Ajax 化

仕組みは、リンクリストの表示用タグ(リスト 3.1)はお好きな位置に埋め込み、そこから Ajax(bp.js) を起動し、さらに CGI(bp.cgi) を起動し、CGI 経由で BlogPeople のリンクリストを取得します。Ajax 起動なので、HTMLページ表示と BlogPeople のリンクリスト取得は並列に処理され、リンクリストが取得できた時点で HTMLに反映されます。

上記の基本的な動作に加え、ここでは下記の動作も加えた、少し凝った作りにしています。

  • リンクリストが表示されるまではローディング画像を表示(IE6では初回しか表示されないようです)
  • リンクリスト取得に失敗した場合は、ローディング画像を消去して、リスト表示位置に "Server Error" または非表示

下記にサンプルを用意してますので、動作をご確認ください。なお Ajax の特徴を分かりやすくするよう、リンクリスト表示までに1秒かかるよう、スクリプトを改変しています。Firefox で閲覧されると良く分かります。

BlogPeole の Ajax 化サンプル

このカスタマイズは設定がやや複雑ですので、自信がない方は前述した下記の方法をお勧めします。

BlogPeople 等のリンクリストによる表示の遅延を解消する(その1:JavaScript編)

それでは以下、設定方法です。CGI および外部ファイルが扱えるブログやホームページであれば利用可能と思われます。また特定のブログに依存する記述ではありませんので、予めご了承ください。

1.スクリプトのダウンロード

下記のファイルをダウンロードしてください(右クリックして「対象を保存」を選択してください)。

bp.zip(または bp.lzh)は解凍した中にある bp.cgi を使用します。

また、上記の他、Ajax ライブラリの prototype.js をダウンロードしてください。

Prototype JavaScript Framework

上記のサイトの Download the latest version のリンクをクリックし、アーカイブをダウンロード。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します(他は使いません)。

また、ajax-loader.gif はお好きな画像に変更して構いません。配布しているローディング画像は下記のサイトで作成したものです。

Ajaxload

2.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 と同じディレクトリであればこのままで問題ありません。

3.スクリプトのアップロード

1項でダウンロードしたファイルをサーバにアップロードします。bp.cgi はアップロード後、パーミッションを 755 または 777 に変更します(パーミッションの値はレンタルサーバによって異なる場合がありますので適宜確認してください)。

各ファイルのアップロードディレクトリは任意ですが、例えば Movable Type であれば、メインページと同じディレクトリが良いでしょう。CGI スクリプト(bp.cgi)はレンタルサーバによって実行可能ディレクトリの制限があるので、例えば cgi-bin ディレクトリ等になる場合があります。

4.リンクリスト表示用タグの追加

リスト 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.スクリプトのインクルード

リスト 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.スタイルシート設定

リスト 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 はリンクリスト取得失敗時のスタイルです。

7.リンクリストが表示されない場合

このカスタマイズのキモは「リンクリストが取得できるかどうか」ですが、それを確認するために、bp.cgi の下記の部分を変更して、bp.cgi をブラウザから直接実行してみると良いでしょう。

リスト 7.1 bp.cgi 変更箇所

my $url = $query->param('url');
      ↓
my $url = '[BlogPeopleリンクリストのURL]';

[BlogPeopleリンクリストのURL]は3項と同じものです。成功すればブラウザ上にリンクリストが表示されます。

上記でリンクリストが表示された後、bp.cgi の内容を元に戻します。それで表示できない場合は、

  • bp.js および prototype.js のパス誤り
  • bp.js に記述した bp.cgi のパスが誤り

等が考えられます。


*1:全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox/Opera ではストレスなく表示されます。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Ajaxを利用して外部サービスを利用する from 101Webdesign
BlogPeople 等のリンクリストによる表示の遅延を解消する(その2:Aja... [続きを読む]

Tracked on November 23, 2006 9:52 AM

Ajaxを導入してみた from sky line blog
このブログにAjaxを導入してみました。 具体的には、サイドバーのBlogPeo... [続きを読む]

Tracked on April 25, 2007 12:09 AM
コメント

いつも関心しながら拝見させて貰ってます。

bp.jsの変更箇所で、
var script = 'bp.cgi';
var image = 'ajax-loader.gif';
の部分を修正となっていますが、ダウンロードした修正前のbp.jsには
var image = 'ajax-loader.gif';
の一行がありません。これは追加するということでしょうか?
追加してアップしてbp.cgiの動作と各ファイルへのパスも確認しましたが、どうしてもローディング画像以外表示されないのはこれのせいでしょうか?

プログラミングに関して全く無知なので、教授頂けると幸いです。

[1] Posted by j : January 30, 2007 5:50 AM

>jさん
こんにちは。
ご質問の件ですが、配布している bp.js の内容が誤っておりました。
ご迷惑おかけして申し訳ございません。
先ほど内容を修正致しましたので再度お試し頂けますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro : February 1, 2007 11:40 AM

いつも大変参考にさせていただいております。

このエントリーを参考に、私のブログでも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) では問題なく表示されるため、原因がよく分かりません。

対策などお分かりでしたらご教授頂けると幸いです。
よろしくお願い致します。

[3] Posted by tak : April 26, 2007 2:14 AM

>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

以上です。
それではよろしくお願い致します。

[4] Posted by yujiro : April 29, 2007 1:36 AM

ご回答ありがとうございます。
ご提示のスクリプトに差し替えてみたところ、Safariでも文字化けしないのを確認致しました。
また、先述の他ブラウザでも、変わらず正常に表示されていました。

ありがとうございます!
取り急ぎお礼と報告をさせていただきます。

[5] Posted by tak : May 2, 2007 11:34 AM

>takさん
ご連絡ありがとうございました。
うまく表示されたようでホッとしました。
ではでは!

[6] Posted by yujiro : May 3, 2007 2:42 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)