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 のサーバーダウン何かがあると、よくわかるのでしょうけどね。
≪ 続きを隠す