トップ > スポンサー広告 > [更新] あやぽんRSS!を非同期処理に!ブログパーツ重くて遅い場合は読み込みタイミングをjQueryプラグインLazyDocWriteで遅らせてみよう!文字化け対応トップ > RSSカスタマイズ > [更新] あやぽんRSS!を非同期処理に!ブログパーツ重くて遅い場合は読み込みタイミングをjQueryプラグインLazyDocWriteで遅らせてみよう!文字化け対応

人気サイト更新状況

画像は全てブログ上に表示。是非ソース元としてご紹介くださいませ。相互RSSもしてほちぃ!!
画RSS ローディング中・・・

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[更新] あやぽんRSS!を非同期処理に!ブログパーツ重くて遅い場合は読み込みタイミングをjQueryプラグインLazyDocWriteで遅らせてみよう!文字化け対応




ブログパーツ、重くて遅い場合は非同期処理で読み込みタイミングを遅らせてみる。

サンプルとして、色々なブログでよく見る「あやぽんRSS!」と「ACR WEB」を非同期にしてみる!

現在、正常に動いているんだけど、きちんと設置できるまでに
四苦八苦あったので、色々悩んで解決した経過を書いておきます。

管理人のプログラム能力
C言語 60%、PHP 30%、java 5%、javascript 4%、jQuery 1%。

文才が無いので、すっげー読みづらい上、C以外はさっぱり判らんという化石なので、
間違っているかもしれませんが、勘弁してちょ。ww


2010年9月22日 更新


あやぽんRSS!、更新されるようになりました。

現象
後読みコードにしたら、RSSの取得が出来ない。

原因
コードを改変していた為に、あやぽん側のチェックがNGになり、更新が止まってしまった。

対策
あやぽん側のチェックを通すため、コメントにした通常コードを書き足す。

lazyで後読みさせるコードの前後どちらかに、
下記のコードを書き足す。
<!--
<script language="javascript" type="text/javascript" src="http://script.link-trade.net/site/021/349/rss.js" charset="utf-8"></script>
-->



また、jQueryが実行されない原因と解決策が判りました。

現象
jQueryのコードを特定の箇所以外に書くと、実行されない。

原因
なんか色々バッティングしていた可能性がある。

対策
「jQuery()」で囲むようにした。

$('#lazy_ayapon').LazyDocWrite('http://script.link-trade.net/site/021/349/rss.js', null, null, {scriptCharset:'utf-8'});



jQuery(function($){
$('#lazy_ayapon').LazyDocWrite('http://script.link-trade.net/site/021/349/rss.js', null, null, {scriptCharset:'utf-8'});

これで、フリーエリア内容の変更、テンプレート、どこに書いても
実行されるようになりました。


2010年9月14日 更新


ごめんなさい。
あやぽんRSS!に関して、
紹介した下記コードではあやぽんRSS!側のプログラムチェックがNGになり
更新が止まってしまいました。

あやぽんRSS!の「フリーエリア内容の変更」
<!-- AYAPON RSS START site_id=021349 -->
<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>
<!-- AYAPON RSS END -->


現在、回避策を試していますので、
RSSの更新が再開されたら追記します。



2010年9月10日 新規作成


設置環境は当ブログの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">
<!--
$('#acr_linkranking).LazyDocWrite('http://rranking6.ziyu.net/js/geinou77777.js', null, null);
// -->
</script>
<div id="acr_linkranking">ロード中・・・</div>


正常に動けば、ロード中がちょっと表示され、
ランキングに切り替わるはずなんだけど、
ロード中のままでランキングが表示されない・・・。

jQueryが正常に動作するかを確認する。
ページ読み込み後、正常に動いていれば、
「ロード中」の箇所が「あいうえお」に変わってるはず。
<script type="text/javascript">
<!--
$("#acr_linkranking").html("<p>あいうえお</p>");
// -->
</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">
<!--
$('#acr_linkranking).click(function(){
$(this).html("<p>かきくけこ</p>");
});
// -->
</script>
<div id="acr_linkranking">ロード中・・・</div>


変わった。
「フリーエリア内容の変更」に戻すと、動かなーい。
なぜー。

よく判らないけど動いてるから深く考えない。

では、再度アクセスランキング設置。

「プラグインの改造」
<script type="text/javascript">
<!--
$('#acr_linkranking).LazyDocWrite('http://rranking6.ziyu.net/js/geinou77777.js', null, null);
// -->
</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">
<!--
$.ajaxSetup({scriptCharset:'shift_jis'});
$('#acr_linkranking).LazyDocWrite('http://rranking6.ziyu.net/js/geinou77777.js', null, null);
// -->
</script>


キタ━━━(゚(゚∀(゚∀゚(☆∀☆)゚∀゚)∀゚)゚)━━━!!!
文字化けしてないー!
完璧ー!


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

「プラグインの改造」
<script type="text/javascript">
<!--
$('#lazy_ayapon').LazyDocWrite('http://script.link-trade.net/site/021/349/rss.js', null, null);
// -->
</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に4番目の引数でajaxSetupの設定値(プロパティ)を取るようにしました。
コードとしては単純に、4番目に設定値があれば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">
<!--
$('#acr_linkranking').LazyDocWrite('http://rranking6.ziyu.net/js/geinou77777.js',null,null,{scriptCharset:'shift_jis'});
$('#acr_pageranking').LazyDocWrite('http://pranking.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'});
// -->
</script>


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


あやぽんRSS!の「フリーエリア内容の変更」
<!-- AYAPON RSS START site_id=021349 -->
<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>
<!-- AYAPON RSS END -->


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



以上です。
どうでしょう、ブログの読み込み ちょっとは速くなりましたか。
FC2ノウハウにも掲載されています


[広告] 関連性の高いお買い得商品

カテゴリ:RSSカスタマイズ

タグ: あやぽんRSS!, RSS, ブログパーツ, 非同期, javascript, jQuery, LazyDocWrite, ajaxSetup,

付けたタグの関連記事

関連エントリ抽出中...

アクセスの多い記事 期間別はこちら→日間週間月間

ページランキングロード中・・・
ブログ内検索
最新記事
人気記事ランキング
ページランキングロード中・・・
カテゴリ
芸能人の愛用品紹介 イチオシ記事
おすすめリンク集
プロフィール

geinou77777

Author:geinou77777
TVでやってたアレ何だっけ?と、思い出したくても思い出せない事を、画像付きで紹介しています。

最新の芸能情報はありません。

かゆいところに手が届く、孫の手のようなブログを目指しています。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。