重複してページなんて作りたくない　パート２

jQTouch Google AJAX Feed API

重複してページなんて作りたくないでクロスドメインのRSSを取り込んでJQTouchで表示させることを考えていた。
　
前回のコードを延長させてページを表示させるときに画像付きのRSSを15個ぐらい引っ張ってくると、Safariのアドレスバーとタブがくるくるークルクルーと回りっぱなしになってしまった。ロード完了まで30秒も掛かっている。まずい。

　
まずはGoogle AJAX Feed APIを使ってRSSを読み込む部分を外部スクリプト化する・

//rssfeed_media.js
function rssfeed_media(id, title, url){
	google.load("feeds", "1",{nocss:1});//nocssはおまじない
	$(function() {
	var feed = new google.feeds.Feed(url);
	//取得するフィード数
	feed.setNumEntries(100);
	//実際に読む込む
	feed.load(function(result) {
		//読み込めたか判別
		if (!result.error) {
			//変数の初期化
			//カテゴリリスト
			var toolbar="";
			//詳細
			var uls="";
			toolbar+="<div id='media_category_"+id+"'>";
			toolbar+="<div class='toolbar'><h1>"+title+"</h1><a class='back' href='#media_category'>Back</a></div>\n<ul>";
			var groups = new Array();
			for(var j=0; j<result.feed.entries.length; j++){
				var entry = result.feed.entries[j];
				if(groups[entry.categories[0]]==undefined){
	            	groups[entry.categories[0]]="<li class='group'>"+entry.categories[0]+"</li>\n";
	            }
	            groups[entry.categories[0]]+="<li class='arrow'><a href='#media_category_"+id+"_"+j+"' class='nonws'>"+entry.title+"</a></li>\n";
	            uls+="<div id='media_category_"+id+"_"+j+"'><div class='toolbar'><h1>"+title+"</h1>";
	            uls+="<a class='back' href='#media_category_"+id+"'>"+title+"</a></div>\n";
	            uls+="<div class='advice'><p>このページ内のリンクは<br />「新規ページ」で開いて下さい。</p></div>";
				uls+="<h1 class='ajax_h1'>"+entry.title+"</h1>";
				uls+="<div class='ajax_layout'>"+entry.content+"</div></div>\n";
			}
			for(var k in groups){
				toolbar+=groups[k];
			}
			toolbar+="</ul></div>"+uls;
			$(toolbar).appendTo( document.body );
			}//if result.error
		});//feed.load
	});
}

このJSはbodyにdivのブロック要素を作成しておかなくても、「appendTo」でbody要素の後ろに作成したHTMLを挿入してくれるところが便利なのだ。（自画自賛〜）
　

最初の呼び出し例

すんごいことになるからお勧めしない例なり。

<!--Google AJAX Feed API  http://www.ajaxtower.jp/googleajaxfeed/ -->
//自分のコードをこの辺りに入れておく
//jqueryとかjqtouchとかもいれておく

<script type="text/javascript">
var feedArr = [
	{id: "num1", title: "自習室", url: "http://hoge.co.jp/num1/rss.xml"},
	{id: "num2", title: "コピー室", url: "http://hoge.co.jp/num2/rss.xml"},
	{id: "num3", title: "給湯室", url: "http://hoge.co.jp/num3/rss.xml"}
];
for(var i=0; i<feedArr.length; i++){
rssfeed_media(feedArr[i]["id"], feedArr[i]["title"], feedArr[i]["url"]);
}
</script>

すべてのRSSを読み込んでbodyに書き込み終わるまで「うりゃーっ！」ってCPUがブン回る。
　

ちょっと進んだ例

RSSを読み込むタイミングをずらしてみた。

//スクリプトの部分
<script type="text/javascript">
$(document).ready(function() {
$(function(){
var feedArr = [（省略）];

$("li#mc1").click(function(){
	var i="1";
	rssfeed_media(feedArr[i]["id"], feedArr[i]["title"], feedArr[i]["url"]);
});
$("li#mc2").click(function(){
（省略）
});

});
});
</script>

liのidがクリックされたら、RSSを読み込んでbodyに追加する。

<div id="media_category">
  <div class="toolbar">
    <h1>カテゴリから探す</h1>
    <a class="back" href="#home">Home</a>
  </div>
  <ul>
	<li class="arrow" id="mc1"><a href="#media_category_num1">自習室</a></li>
	<li class="arrow" id="mc2"><a href="#media_category_num2">コピー室</a></li>
	<li class="arrow" id="mc3"><a href="#media_category_num3">給湯室</a></li>
  </ul>
</div>

liのidとhrefのidは別にしないとダメだよ！
　
こいつの残念なところは、

  • 一回目のタップでRSSを読み込む
  • 二回目のタップでリンク先に飛ぶ

2回もタップするのがイケてない。
　

無理矢理な完成形

jquery.blockUIというのを見つける。
Demosを見るとかっこいい。
　
headにちょいと追加する。

<script type="text/javascript" src="iphone/js/jquery.blockUI.js"></script>
<script type="text/javascript">
function loading(){
/*読み込み中を表示させる*/
	$.blockUI({
		message: $('#loading_message'),
		css:{
			top: '0px',
			left: '0px',
			width: '100%',
			height: 'auto',
			border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px'
		}
	});
}

/*elemIDブロック要素がbodyに作成されたら、elemIDに移動する*/
function turnEffect(elemID){
	timerID = setInterval( function(){
		if(document.getElementById(elemID)){
			clearInterval(timerID);
			timerID = null;
			$.unblockUI();
			jQT.goTo($("#"+elemID), "slide");
		}
	},1000);
}
</script>
追記

blockUIのcssが適当すぎてイケてない

function loading(){
/*読み込み中を表示させる*/
	$.blockUI({
		message: $('#loading_message'),
		css:{
			height: 'auto',
			top: $(window).scrollTop()+'px',
			width: ($(window).width()-40)+'px',
			left: '0px',
			border: 'none', 
            　　　　　　padding: '15px', 
   　　　　　　         margin: '20px',
			'-webkit-border-radius': '10px', 
　　　　　　            '-moz-border-radius': '10px'
		},
		overlayCSS:{
			height: $(window).height()+'px',
			top: $(window).scrollTop()+'px'
		}
	});
}

こんな形で置き換える

そして「最初の1回だけクリックされたら実行する」に改造する

$("li#mc1").one("click",function(){
	var i="0";
	loading();
	rssfeed_media(feedArr[i]["id"], feedArr[i]["title"], feedArr[i]["url"]);
	turnEffect("media_category_num1");
}); 
//要素の数だけ作成する

loadingでBlockUIで「読み込み中」と表示させて、RSSを取得できたらgoToで移動する。
　
スタイルも追加する。クルクルを表示させたいから。

<style type="text/css">  
div.blockUI{
	clear: both;
	background: url(iphone/themes/jqt/img/loading.gif) no-repeat 10px 10px;
}
div.blockUI p{
	padding:10px 15px;
}
</style>


　
bodyに「読み込み中」を追加する。

<div id="loading_message">
<p>読み込み中だよ・・・</p>
</div>

　
満足なできあがりになったとおもう。
　
＜参考＞