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

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

Posted at October 18,2006 12:25 AM
Tag:[JavaScript]

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

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

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

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

前置きが長くなりましたが、このエントリーではごく簡単な JavaScript を用いてリンクリスト表示のタイムラグを解消する方法をご紹介します。*2
仕組みを説明しますと、リンクリストのタグはとりあえずページの一番最後に埋め込み、それを JavaScript を使って別の位置に再表示するという作戦です。これだけではリストが2ヶ所に表示されてしまうため、ページの最後に埋め込んだ方のリストはCSSで非表示にします。

下記にサンプル(カスタマイズ前・後)がありますので、IEでページを表示した後、ブラウザをリロードして表示の違いを比べてみてください(ページサイズが小さいため、カスタマイズ前のものも比較的スムーズに表示されます。ご容赦ください)。

  • サンプル1:リンクリストタグをHTMLの前方に記述・表示
  • サンプル2:リンクリストタグを後方に記述して前方に表示

このスクリプトを用いることで、

  • ページが速やかに表示される
  • サーバ側のリンクリスト更新にリアルタイムに対応
  • リンクリストのアクセス数がPV(ページビュー)単位にカウントされる

といったメリットを享受することができます。
ただし、リスト配布元のサーバがダウンしている場合等はリンクリストは表示されませんので、必ず表示したいということであれば中継君の利用をお勧めします。

またリストを非表示にすることについての妥当性についてはここでは言及しておりませんので、ご利用の判断はご自身で行ってください。なお当サイトでは以前(数ヶ月前)よりこの方法で表示しています。

以下、カスタマイズ方法です。

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

次のような空要素(ここでは div)を、リンクリストを表示したい位置へ設定します。

<div id="blogpeople"></div>

ここで重要なのは、id="xxx" という id 属性の記述です。ここでは属性値を "blogpeople" としておきます。

2.リンクリスト表示のスクリプト設定

div タグで括ったリンクリスト用のタグを、 </body> の直前に記述します(青色 *3)。ここでは BlogPeople のリンクリストを表示する例で示しています。

<div id="linklist"><script type="text/javascript" src="http://www.blogpeople.net/display/usr/0f0d42505b5dxxxx.js"></script></div>
</body>

ここでも外側の div 要素に任意の id 属性値を記述します。ここでは "linklist" とします。

3.表示用スクリプト設定

2項で設定したタグと </body> の間に、1項で設定したタグの位置に表示するためのスクリプトを記述します(青色)。

<div id="linklist"><script type="text/javascript" src="http://www.blogpeople.net/display/usr/0f0d42505b5dxxxx.js"></script></div>
<script type="text/javascript">
if(document.getElementById('blogpeople')){
    document.getElementById('blogpeople').innerHTML = document.getElementById('linklist').innerHTML;
}
</script>
</body>

赤色の部分が1項および2項で設定したid 属性値になります。1項・2項の id 属性値は任意ですが、設定した文字はこのサンプルのようにそれぞれ対応するよう反映させてください(id 属性値を変更する前にこのままお使いになることをお勧めします)。

4.CSS設定

スタイルシートに下記を追加します。

#linklist {
    display: none;
}

スタイルシートが編集できないブログサービスであればHTMLページの <head>~</head> の間に

<style type="text/css">
#linklist {
    display: none;
}
</style>

を追加すれば良いでしょう。

5.カスタマイズ

5.1 他の情報を埋め込む場合

「私を登録」等のリンクやバナー等を表示する場合は、それらを2項のタグにまとめて記述しておくと良いでしょう。1項のタグに記述することもできますが、その場合は、元の div 要素の中ではなく、

<div id="blogpeople"></div>
[ここに記述]

となります。スタイルを与える場合はさらに div 要素等で括ってください。

5.2 複数のリンクリストを表示する場合

このカスタマイズは設定を加えることで複数のリンクリストを表示することができます。
例えばドリコム RSS のリンクリストをさらに追加する場合、1項の id 属性名を変えたタグ

<div id="drecom"></div>

を作り、2項・3項の表示用スクリプトに下記の青色部分を追加します。id 属性名にご注意ください。

<div id="linklist"><script type="text/javascript" src="http://www.blogpeople.net/display/usr/0f0d42505b5dxxxx.js"></script></div>
<div id="linklist2"><script type="text/javascript" src="http://list.blog.rss.drecom.jp/yujiro/" charset="UTF-8"></script></div>
<script type="text/javascript">
if(document.getElementById('blogpeople')){
    document.getElementById('blogpeople').innerHTML = document.getElementById('linklist').innerHTML;
}
if(document.getElementById('drecom')){
    document.getElementById('drecom').innerHTML = document.getElementById('linklist2').innerHTML;
}
</script>
</body>

CSS は4項と同じもの(IDセレクタは #linklist2)を作ってください。3つ以上のリンクリストを表示する場合も同様の手順で追加します。

注:1項・2項の id 属性名はページ内で一意でなければいけません。

5.3 ローディング状態を表示

2項の設定に任意のテキスト文字、例えば、

<div id="blogpeople">Now loading...</div>

としておけば、リンクリスト表示までの間はローディング状態を表示することができます。ただしサーバからの応答がない場合は表示がずっと残ってしまいますのでご注意ください。


*1:全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox/Opera ではストレスなく表示されます。
*2:IE以外での効果は未確認です。
*3:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

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


トラックバック

Permalinkとブログリスト表示の遅延解消 JavaScript from kisatonomori blog
●Permalink設置 記事タイトル、畳んでいるので記事のURLがリンクされてないので 記事末端にはこの記事のURLを載せてますが、 Permal... [続きを読む]

Tracked on October 21, 2006 1:10 PM

リンクリストによる表示の遅延を解消する 小粋空間 from LiveMore International Inc.
私的に非常にタイムリーな話題を、小粋空間さんが BlogPeople等のリンクリストによる表示の遅延を解消する(その1:JavaScript編) として紹... [続きを読む]

Tracked on October 22, 2006 7:19 AM

BlogPeople表示の遅延を解消 from Az ::clivia::
久しぶりのカスタマイズです♪今迄は「BlogPeople」「TB People」は同じページに置いておくと表示されるまで時間がかかることから別ページに表示... [続きを読む]

Tracked on March 11, 2008 8:26 AM

jsで表示遅延解消 from m'z Labo
BlogPeople 等のリンクリストによる表示の遅延を解消する(その1:JavaScript編) sidebarに使用しているdtreeの表示遅延... [続きを読む]

Tracked on December 17, 2009 6:51 PM
コメント

こんばんは。
こちらの記事を使わせていただきました。
以前よりかなり表示が速くなりました。
JavaScriptかAjaxかで迷いましたが
こちらの方が速いかなと思い埋め込みました。
どうもありがとうございました。
また、他の記事でもよろしくお願いします。

[1] Posted by ヨンシマイ : January 6, 2007 12:47 AM

>ヨンシマイさん
こんばんは。
ご利用ありがとうございます。
うまくできたようで良かったです。
ではでは!

[2] Posted by yujiro : January 8, 2007 2:52 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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