TopJavaScript > 2006年10月
2006年10月18日

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

October 18,2006 12:25 AM
Tag:[]
Permalink

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 ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

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

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

AMN
Categories
Monthly Archives
2020年
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