あやぽんRSS!を非同期処理に!ブログパーツ重くて遅い場合は読み込みタイミングをjQueryで遅らせてみよう

ノウハウトップ　>　あやぽんRSS!を非同期処理に!ブログパーツ重くて遅い場合は読み込みタイミングをjQueryで遅らせてみよう

ノウハウ本文
編集する
履歴

あやぽんRSS!を非同期処理に!ブログパーツ重くて遅い場合は読み込みタイミングをjQueryで遅らせてみよう

作成日時：2010-09-10 11:08:34

お気に入りに追加するには、[無料登録]ください。

ブログパーツ、重くて遅い場合、非同期処理で読み込みタイミングを遅らせてみる。
サンプルとして、色々なブログでよく見る「あやぽんRSS!」と「ACR WEB」を非同期にしてみる！
現在、正常に動いているんだけど、きちんと設置できるまでに
四苦八苦あったので、色々悩んで解決した経過を書いておきます。
文才が無いので、すっげー読みづらいと思いますけど、勘弁してちょ。設置環境は当ブログのFC2ブログ。
使用したライブラリは、
jQuery、
LazyDocWrite(jQuery拡張プラグイン)、
改造LazyDocWrite(右クリ保存 g7_jquery_lazydocwrite.js)。
大事なことなんだけど、動作テストする時は「プレビュー」ではなく、
「設定」や「更新」をして本番に反映させた上でブログ上で確認してください。
「プレビュー」では修正が反映されていない時が多々あります。

まず試しに「ACR WEB」のアクセスランキングを非同期処理にしてみる。
アクセスランキングはサイドバーのプラグイン1グループに入れてある。
「ACR WEB」での例が載っているここのコードを参考に、
<head></head>内に下記をコピペし、
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="http://blog-imgs-43.fc2.com/g/e/i/geinou77777/jquery_lazydocwrite.js"></script>
対象プラグインの「フリーエリア内容の変更」に下記をコピペしてみる。
表示させるセレクタ(ID)名：acr_linkranking
アクセスランキングソースURL：http://rranking6.ziyu.net/js/geinou77777.js
<script type="text/javascript">

</script>
<div id="acr_linkranking">ロード中・・・</div>
正常に動けば、ロード中がちょっと表示され、
ランキングに切り替わるはずなんだけど、
ロード中のままでランキングが表示されない・・・。
jQueryが正常に動作するかを確認する。
ページ読み込み後、正常に動いていれば、
「ロード中」の箇所が「あいうえお」に変わってるはず。
<script type="text/javascript">

</script>
<div id="acr_linkranking">ロード中・・・</div>
変わらなーい。
ということはjQueryが正常に動いてないってことになる。
ここすげー悩んだ。
「フリーエリア内容の変更」の上に、上級者向けの設定として、
「プラグインの改造」というのがあり、
そこの「HTMLの編集」を押すと、またコードが書けるエリアが開く。
ここに上記の<script>〜</script>を移してみる。
<div id="acr_linkranking">ロード中・・・</div>はそのまま。
要するに、
「プラグインの改造」に<script>〜</script>、
「フリーエリア内容の変更」に<div id="acr_linkranking">ロード中・・・</div>
ページ更新。
変わった。
なぜー。
イベントも動作するか確認してみる。
「ロード中」をクリックすれば、
「かきくけこ」に変わるはず。
<script type="text/javascript">

</script>
<div id="acr_linkranking">ロード中・・・</div>
変わった。
「フリーエリア内容の変更」に戻すと、動かなーい。
なぜー。
よく判らないけど動いてるから深く考えない。
では、再度アクセスランキング設置。
「プラグインの改造」
<script type="text/javascript">

</script>
「フリーエリア内容の変更」
<div id="acr_linkranking">ロード中・・・</div>
キターーーー！
・・・・・
文字化けー。
ランキングが全く読めないよー。
あー、そういえば「ACR WEB」のscriptタグってcharsetオプション入ってたなーと思い、
jQueryでスクリプトを呼び出す時の文字コードの設定の仕方を確認。
$.ajaxSetup({scriptCharset:'文字コード'});
ACRはshift_jisが設定されていたから、
$.ajaxSetup({scriptCharset:'shift_jis'});
となる。

Ajax通信の初期設定のやり方らしいので、
LazyDocWrite前に呼んでやる。
<script type="text/javascript">

</script>
キターーー！
文字化けしてないー！
完璧ー！

次はあやぽんRSS!を非同期で読み込む。
あやぽんは最上部のプラグイン3グループに入れてある。
charsetはutf-8。
文字コードが違う・・・、なぁ〜んか嫌な予感が・・・。
まずはajaxSetup無しで試す。
「プラグインの改造」
<script type="text/javascript">

</script>
「フリーエリア内容の変更」
<div id="lazy_ayapon">ロード中・・・</div>
やっぱり動かな〜い。
文字化けすらしな〜い。
<script>〜</script>をさっきのアクセスランキングの「プラグインの改造」に追加で移す。
動いたー。
やっぱり文字化けー。
そりゃーACR用にshift_jisしてあるから、
utf-8のソースは化けるよねー、いうよねー。
つーか、なんであやぽんの「プラグインの改造」で動かなくて、
アクセスランキングの「プラグインの改造」で動くんだー。
わけわかんないけど、文字化けをどうにかしよう。
でもajaxSetupはACR用に一回呼んでるのに、もう一回呼んだらおかしな事になるだろうな・・・。
試してみる。
やっぱりなったー。
LazyDocWriteのソースを読んでみたけど、文字コードを含めajaxSetupなどは無いなー。
・・・・・
改造しますた。
右クリック保存で。
元のLazyDocWrite(jquery_lazydocwrite.js)と改造したLazyDocWrite(g7_jquery_lazydocwrite.js)
改造内容
LazyDocWriteに４番目の引数でajaxSetupの設定値(プロパティ)を取るようにしました。
コードとしては単純に、４番目に設定値があればajaxSetupしろや！ってしてるだけです。
引数の書き方はajaxSetupと一緒です。なので、文字コード以外も設定できるんじゃないかな。
やってないからわからないけど。
例
$('#acr_linkranking').LazyDocWrite('http://rranking6.ziyu.net/js/geinou77777.js',null,null,{scriptCharset:'shift_jis'});
$('#lazy_ayapon').LazyDocWrite('http://script.link-trade.net/site/021/349/rss.js', null, null, {scriptCharset:'utf-8'});
もちろんもうLazyDocWriteの前ではajaxSetupはしないように。
LazyDocWrite内でやれるので。

テンプレートに設定してあるACRページランキングも含め、最終的なソースコードと配置。
<head></head>内
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="http://blog-imgs-43.fc2.com/g/e/i/geinou77777/g7_jquery_lazydocwrite.js"></script>
アクセスランキングの「プラグインの改造」スクリプトはここに全て集結
<script type="text/javascript">

</script>

アクセスランキングの「フリーエリア内容の変更」
<div id="acr_linkranking">リンク元ローディング中・・・</div>
あやぽんRSS!の「フリーエリア内容の変更」

<div id="lazy_ayapon">RSS ローディング中・・・</div>
<noscript><a href="http://rss.link-trade.net/" title="RSS">あやぽんRSS</a></noscript>
<p id="ayaponrss"><a href="http://rss.link-trade.net/" title="あやぽんRSS" target="_blank">Powered by Ayapon RSS!</a> <img src="http://img.link-trade.net/pr/pr_in.gif" width="20" height="10" alt="オススメ" align="absmiddle" /> <a href="http://ameblo.jp/okuyami-news/" title="お悔やみニュース" target="_blank">お悔やみ</a> <a href="http://www.b-paradaise.com" title="ブランドパラダイス" target="_blank">ブランドパラダイス</a></p>


「テンプレート下部」記事表示の時のみ
<div id="acr_pageranking">ロード中・・・</div>

以上です。
どうでしょう、ブログの読み込みちょっとは速くなりましたか。