ツイッター・ウィジェットの非同期通信ダウンロード

ツイッターのサーバーが落ちるのは珍しくないが、もし自分のサイトでツイッター用ウィジェットを使用している場合は注意が必要だ。ウィジェットのjavascriptをホストしているサーバーが落ちると、当然ながらjavascriptファイルはダウンロード出来なくなる。もしサイトHTMLにそのままウィジェット用のスクリプトを張り付けているだけだと、多くの場合はHTMLが最後まで読み込まれなくなり、HTMLレイアウトに影響が出てしまう。先週末にツイッターサーバーが落ちたときは、、多くのサイトでコンテンツがまったく表示されないところがあった。ツイッター自身のホームページのレイアウトも壊れていたし、弊社のサイトでも若干レイアウトがおかしくなっていたので大きなことは言えないのだが、これを機にソリューションを考えてみる。

まず、なぜツイッターのサーバーが落ちるとレイアウトが崩れるかというと、ウィジェットjavascriptのダウンロード待ちになり、終了するまではHTMLがプロセスされないからだ。
逆に言えば、HTMLのロードがウィジェットjavascriptファイルのダウンロードに邪魔されなければ良いわけだ。そこで、javascriptファイルはHTMLのロードが終了してからダウンロードし、ダウンロードに成功したときにのみウィジェット表示用のスクリプトを実効するようにしてみる。これはlazy loadingと呼ばれるjavascriptのテクニックで、JQueryのajax機能を使えば簡単に実装出来る。コードにしてみると以下のような感じになる。

$(document).ready(function() {
  $.getScript('http://widgets.twimg.com/j/2/widget.js', function() {
    new TWTR.Widget({...}).render().setList('audia_jp', 'audia').start();
  });
});

解説をすると
1. $('document').ready(...)でDOMがロードされるのを待つ。
2. $.getScriptでツイッターウィジェット用javascriptファイルを非同期通信でダウンロード。
3. ダウンロードに成功したときのみ、ツイッターウィジェット表示用のスクリプトを実効。

これでツイッターのサーバーが落ちてもウィジェットが表示されなくなるだけなので、その他のサイトレイアウトに影響は出ない。
また、通常の場合でもツイッターサーバーのパフォーマンスにページロード時間が影響されることもなくなるので、一石二鳥だ。