BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）
BlogPeople やドリコム RSS がサービスとして提供しているリンクリスト。ご自身のページに直接HTMLでリンク集を作成するより、表示件数のカスタマイズやサイトの更新状況がわかる等、大変便利なサービスなので利用されている方はかなり多いと思います。
しかしながら、リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、少なからずタイムラグが発生します。
このタイムラグはHTMLページの表示に大きく影響します。その理由は次の通りです。
例えばIEでサイトを閲覧する場合、そのサイトのページはHTMLソースの先頭から記述された順番に表示されるようになっています *1。つまり、ページの最初や途中にこのリンクリストを表示するタグが記述されている場合、サーバの応答が返ってくるまでそれ以降のHTMLソースの内容が表示されないという問題があります。
サーバからの応答がある場合はまだ良いのですが、サーバダウン等といった不測の事態が発生すると、それ以降のページがしばらく表示されなくなる可能性もあり、閲覧者にとってはかなりのストレスになります。
したがって、リンクリストを表示する位置についてはページの（少なくとも本文より）後方やリンクリスト専用のページに配置したり、あるいは「中継君（関連記事）」を利用されているのではないでしょうか。
前置きが長くなりましたが、このエントリーではごく簡単な JavaScript を用いてリンクリスト表示のタイムラグを解消する方法をご紹介します。*2
仕組みを説明しますと、リンクリストのタグはとりあえずページの一番最後に埋め込み、それを JavaScript を使って別の位置に再表示するという作戦です。これだけではリストが2ヶ所に表示されてしまうため、ページの最後に埋め込んだ方のリストはCSSで非表示にします。
下記にサンプル（カスタマイズ前・後）がありますので、IEでページを表示した後、ブラウザをリロードして表示の違いを比べてみてください（ページサイズが小さいため、カスタマイズ前のものも比較的スムーズに表示されます。ご容赦ください）。
このスクリプトを用いることで、
- ページが速やかに表示される
- サーバ側のリンクリスト更新にリアルタイムに対応
- リンクリストのアクセス数がPV（ページビュー）単位にカウントされる
といったメリットを享受することができます。
ただし、リスト配布元のサーバがダウンしている場合等はリンクリストは表示されませんので、必ず表示したいということであれば中継君の利用をお勧めします。
またリストを非表示にすることについての妥当性についてはここでは言及しておりませんので、ご利用の判断はご自身で行ってください。なお当サイトでは以前（数ヶ月前）よりこの方法で表示しています。
以下、カスタマイズ方法です。
１．リンクリスト表示用タグの追加
次のような空要素（ここでは div）を、リンクリストを表示したい位置へ設定します。
<div id="blogpeople"></div>ここで重要なのは、id="xxx" という id 属性の記述です。ここでは属性値を "blogpeople" としておきます。
２．リンクリスト表示のスクリプト設定
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" とします。
３．表示用スクリプト設定
２項で設定したタグと </body> の間に、１項で設定したタグの位置に表示するためのスクリプトを記述します（青色）。
<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>赤色の部分が１項および２項で設定したid 属性値になります。１項・２項の id 属性値は任意ですが、設定した文字はこのサンプルのようにそれぞれ対応するよう反映させてください（id 属性値を変更する前にこのままお使いになることをお勧めします）。
４．CSS設定
スタイルシートに下記を追加します。
#linklist {
display: none;
}スタイルシートが編集できないブログサービスであればHTMLページの <head>～</head> の間に
<style type="text/css">
#linklist {
display: none;
}
</style>を追加すれば良いでしょう。
５．カスタマイズ
５．１ 他の情報を埋め込む場合
「私を登録」等のリンクやバナー等を表示する場合は、それらを２項のタグにまとめて記述しておくと良いでしょう。１項のタグに記述することもできますが、その場合は、元の div 要素の中ではなく、
<div id="blogpeople"></div>
[ここに記述]となります。スタイルを与える場合はさらに div 要素等で括ってください。
５．２ 複数のリンクリストを表示する場合
このカスタマイズは設定を加えることで複数のリンクリストを表示することができます。
例えばドリコム RSS のリンクリストをさらに追加する場合、１項の id 属性名を変えたタグ
<div id="drecom"></div>を作り、２項・３項の表示用スクリプトに下記の青色部分を追加します。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 は４項と同じもの（IDセレクタは #linklist2）を作ってください。3つ以上のリンクリストを表示する場合も同様の手順で追加します。
注：１項・２項の id 属性名はページ内で一意でなければいけません。
５．３ ローディング状態を表示
２項の設定に任意のテキスト文字、例えば、
<div id="blogpeople">Now loading...</div>としておけば、リンクリスト表示までの間はローディング状態を表示することができます。ただしサーバからの応答がない場合は表示がずっと残ってしまいますのでご注意ください。
*1：全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox／Opera ではストレスなく表示されます。
*2：IE以外での効果は未確認です。
*3：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
- 複数のsubmitボタンをonsubmitで判定する方法
- JavaScriptの時間を0パディングする方法
- JavaScriptでJSONデータを作る方法
- JavaScriptやjQueryで設定されたイベントの定義場所を調べる方法
- javascript:void(0)のまとめ
- setTimeout()やsetInterval()で引数を渡す方法
- JavaScriptのFormDataの使い方
- JavaScriptメールアドレスチェッカー
- PCのブラウザでiPhoneやAndroidのようなパスワードフォームを実現するJavaScriptライブラリ「FormTools」
- JavaScriptでフォーカスのあたっている要素を取得する「document.activeElement」
- 入力フォームの全角・半角を勝手に変換してくれるJavaScript
- JavaScriptエラーを表示・確認する方法のまとめ
- ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
- JavaScriptでCSSの擬似クラスを設定する方法
- JavaScriptの正規表現で文字列を抜き出す「グループ化」
≫ Permalinkとブログリスト表示の遅延解消 JavaScript from kisatonomori blog
●Permalink設置
記事タイトル、畳んでいるので記事のURLがリンクされてないので
記事末端にはこの記事のURLを載せてますが、
Permal... [続きを読む]
≫ リンクリストによる表示の遅延を解消する 小粋空間 from LiveMore International Inc.
私的に非常にタイムリーな話題を、小粋空間さんが BlogPeople等のリンクリストによる表示の遅延を解消する（その１：JavaScript編） として紹... [続きを読む]
≫ BlogPeople表示の遅延を解消 from Az ::clivia::
久しぶりのカスタマイズです♪今迄は「BlogPeople」「TB People」は同じページに置いておくと表示されるまで時間がかかることから別ページに表示... [続きを読む]
こんばんは。
こちらの記事を使わせていただきました。
以前よりかなり表示が速くなりました。
JavaScriptかAjaxかで迷いましたが
こちらの方が速いかなと思い埋め込みました。
どうもありがとうございました。
また、他の記事でもよろしくお願いします。
＞ヨンシマイさん
こんばんは。
ご利用ありがとうございます。
うまくできたようで良かったです。
ではでは！
