TopサービスBlogPeople > 2006年11月
2006年11月23日

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

November 23,2006 3:33 AM
Tag:[, , ]
Permalink

BlogPeopleドリコム RSS がサービスとして提供しているリンクリスト。ご自身のページに直接HTMLでリンク集を作成するより、表示件数のカスタマイズやサイトの更新状況がわかる等、大変便利なサービスなので利用されている方はかなり多いと思います。

しかしながら、リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、少なからずタイムラグが発生します。
このタイムラグはHTMLページの表示に大きく影響します。その理由は次の通りです。

例えばIEでサイトを閲覧する場合、そのサイトのページはHTMLソースの先頭から記述された順番に表示されるようになっています *1。つまり、ページの最初や途中にこのリンクリストを表示するタグが記述されている場合、サーバの応答が返ってくるまでそれ以降のHTMLソースの内容が表示されないという問題があります。
サーバからの応答がある場合はまだ良いのですが、サーバダウン等といった不測の事態が発生すると、それ以降のページがしばらく表示されなくなる可能性もあり、閲覧者にとってはかなりのストレスになります。

したがって、リンクリストを表示する位置についてはページの(少なくとも本文より)後方やリンクリスト専用のページに配置したり、あるいは「中継君関連記事)」を利用されているのではないでしょうか。

このエントリーは、その解消策として、以前公開した「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 ではストレスなく表示されます。

Comments [6] | Trackbacks [2]
2006年11月 2日

BlogPeople 1200 被リンク達成&2004年の BlogPeople トップページ

November 2,2006 1:12 AM
Tag:[]
Permalink
BlogPeople 1200被リンク本日、おかげさまをもちまして BlogPeople の被リンク数が1200被リンクに到達しました。以前投稿した「BlogPeople 1000被リンク達成」から6ヶ月弱で辿り着くことができました。
ということで、この場をお借りして被リンクくださった皆様にお礼申し上げます。ありがとうございました。

「1200 被リンク」というのは個人的にひとつの節目でした。というのは、ブログピープルのクレジットバナーは、被リンク数が 100 - 300 - 600 という区切りで新しいバナーが管理画面に追加されることになってまして、最高ランクのバナーは 600 被リンクです。下記にノーマルおよび各被リンク数によるクレジットバナーを掲載します。

ノーマル1 ノーマル1
ノーマル2 ノーマル2
100被リンク 被リンク数100以上の方限定
300被リンク 被リンク数300以上の方限定
600被リンク 被リンク数600以上の方限定

が、以前出版された「ブログのもと」のバナー変遷の話で、たしか「もうひとつバナーを作るかもしれない」というようなことが書かれており、「じゃ、1200 被リンクを目指そう!」と思った次第です。

ということで、新たなバナーが出ることを密かに期待しています。
また、ソーシャルブックマークや RSS といった Web2.0 系サービスの台頭でリンクリストの影が薄くなっている気がしなくてもないですが、リンクリストは今後もマイペースで増やし続ける予定です。

2004年のBlogPeople話は変わって、私が BlogPeople に登録した当時(2004年6月)の BlogPeople トップページは現在のような華やかなページではなく、スクリーンショットのようなシンプルなページでした。
スクリーンショットをクリックすると、世界中の Webサイトが保存されていることで有名な「インターネット・アーカイブ」で保存されている BlogPeople のページ(2004年3月)を見ることができます。懐かしく思われる方も結構いらっしゃるのではないでしょうか。

あと、当ブログで過去にエントリーした BlogPeople 関連記事を下記に再掲しておきます。

Comments [4] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3