BlogPeople のリンクリストは､カスタマイズも出来てなおかつ、
更新サイトの表示もしてくれるので､以前から利用しています｡
『小粋空間』様によると､
「リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、
少なからずタイムラグが発生します。
このタイムラグは HTML ページの表示に大きく影響します。」
とのことです｡
言われてみれば､そりゃそうだなと思いました｡
私の場合､そんなに多くリンクしているわけでもないし､
バナー類やその他を数多く貼り付けているので､
どこまで効果があるのかわかりませんが､
面白そうなので､挑戦してみました｡
今回参考にさせていただいたのは､もちろん『小粋空間』様です
どうも､ありがとうございます｡
どうやら手段として､
1 ： ｢中継君｣なる CGI での対策｡
2 ： JavaScript での対策｡
3 ： Ajax と CGI の組み合わせでの対策。
が可能みたいです｡
『小粋空間』様の記事をじっくり読んでみましたが､
3 番目の Ajax を使うやつにしてみました｡
だって､今時っぽい感じがしたもので・・・｡
Ajax って、今まで「アジャックス」って読んでました｡
「エィジャックス」だったんですね・・・。
仕組みは、リンクリスト表示用タグを好きなところに埋め込み、
そこから Ajax（bp.js） を起動し、さらに CGI（bp.cgi） を起動し、
CGI 経由で BlogPeople リンクリストを取得。
Ajax 起動なので、HTML 表示と BlogPeople リンクリスト取得は並列処理。
リンクリストが取得できた時点で HTML に反映。
すごいっす！
先ずは、スクリプトをダウンロードさせてもらいます。
『小粋空間』様より､以下の 3 つをいただきます｡
bp.zip/ bp.lzh （リンクリスト取得スクリプト：解凍した中にある bp.cgi を使用）
bp.js （Ajax起動スクリプト）
ajax-loader.gif （ローディング画像）
さらに、「Prototype JavaScript Framework」から、
prototype.js をいただきます｡
次に、bp.js を修正します。
『小粋空間』様では､1行目､2行目の
var script = 'bp.cgi';
var image = 'ajax-loader.gif';
の赤文字部分を修正となっているのですが､
bp.js は、
function getLinkList(url) {
var script = 'bp.cgi';
var params = 'url=' + url;
$('linklist').setAttribute('class', 'bp_loading');
$('linklist').setAttribute('className', 'bp_loading');
$('linklist').innerHTML = '<
img src="ajax-loader.gif" /
>';
new Ajax.Updater({success: 'linklist'},
script, {
method: 'get',
parameters: params,
onFailure: errorLinkList,
onSuccess: endLinkList
});
return false;
}
function endLinkList() {
// class 属性値を書き換える
$('linklist').setAttribute('class', 'bp_loaded');
$('linklist').setAttribute('className', 'bp_loaded');
}
function errorLinkList() {
// 通信NG処理
// $('linklist').style.display = 'none';
$('linklist').innerHTML = 'Server error.';
}
となっており､ちょっと？？だったのですが､
とにかく
bp.cgi と
ajax-loader.gif のパスさえ通せば良いみたいでした｡
http://～ の記述にしました｡
必要な 4 ファイルをサーバーへアップロードします｡
bp.cgi のパーミッションを 755 にしました。
リンクリスト表示用タグを記述｡
<div id="linklist"></div>
<script type="text/javascript">
getLinkList('[BlogPeopleリンクリストのURL]');
</script>
上記のタグを､好みの場所に書き込みます｡
[BlogPeopleリンクリストのURL]
とは、
Blogpeople のリンクリストコードの下記青色部分です｡
<script language="javascript" type="text/javascript"
src="http://www.blogpeople.net/display/usr/
○○○○○○○.js"></script>
スクリプトをインクルードします。
表示したいテンプレートの <head>～</head> 部分に、
<script type="text/javascript" src="http://パスを通す/prototype.js"></script>
<script type="text/javascript" src="http://パスを通す/bp.js"></script>
を､記述します｡
最後に､下記スタイルシートを追加します｡
/* リンクリスト全体 */
#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;
}
以上で､完了です｡
うちのサイトでは､違いが良くわかりません｡
BlogPeople のサーバーダウン何かがあると､よくわかるのでしょうけどね｡
≪ 続きを隠す
