jQuery Mobileで「はてなハイクビューアー」を作りました。

いきなりのタイトル詐欺なんですが、jQuery Mobileを触るのは初めてだったので、
あくまで習作という感じです。
まだまだビューアーとしての実用的なツールには遠い…。

作っていて引っかかった部分をTips的に書いていきます。

Web API（はてなハイク API）の呼び出し

$.ajax({
	url : "http://h.hatena.ne.jp/api/statuses/public_timeline.json",
	data : {
		format : 'json'
	},
	dataType : 'jsonp',
	jsonp : 'callback',
	complete : function(){
		alert("complete!");
	},
	success : function(data, status){
		alert(data);
	}
});

JavaScriptでは異なるドメインのURLを直接呼び出すことが出来ませんが、
JSONPで記述することでクロスドメインな通信が行えます。
（なんで？って方はこちらとかを参考にしてください。
第11回 JSONP入門：これでできる！クロスブラウザJavaScript入門｜gihyo.jp … 技術評論社）
この例では、dataの中にJSON形式ではてなハイク投稿データが入ります。

Listviewのテキストを省略せずに表示する

デフォルトの設定では画面に入りきらなかった部分は、以下のように↓

…に置き換えられてしまいます。

この表示では今回のような用途に使う場合に向いていないので、
以下のように書きます。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<style type="text/css">
/* CSSを読み込んだ後に記述して（上書き）して、
Listviewのテキストを省略せずに表示するように設定 */
.ui-li-desc
{
	overflow: visible;
	white-space: normal;
}
</style>

これでちゃんと省略されずに表示されるようになります。

Listviewのサムネイル画像のサイズ・位置を変更する

こちらもCSSを書き換えることで実装できます。
もともとのCSSを書き換えてもいいですが、以下のようにすると
その要素だけに設定を適用できます。

<ul data-role="listview">
<li><img src="icon.jpg" style="width:50px;height:50px;
	max-width:80px;max-height:80px;top:2;left:4;" class="ui-li-icon"></li>
</ul>

最上部・最下部へのスクロールを実装する

// ボタンイベント
$('#up').live('click', function(){
	// 最上部へのスクロール
	$.mobile.silentScroll(-$.mobile.activePage.context.height);
});

// ボタンイベント
$('#down').live('click', function(){
	// 最下部へのスクロール
	$.mobile.silentScroll($.mobile.activePage.context.height);
});

iPhoneでは、バーをタッチすれば最上部へスクロールするので別に不要という気も…。

ラジオボックスを動的に作成する

// dataははてなハイク投稿のJSONオブジェクトです。
var content = '<div data-role="controlgroup">';
for(var i in data) {
	// <!> ここで指定する name 要素を一致させないとチェックボックスのような動作になるので注意
	content += '<input type="radio" name="recommend_users_radio' + 
				'" id="recommend_users_' + i + '" value="' + data[i].user.id + '"/>';
	content += '<label for="recommend_users_' + i +'">' + data[i].user.name + '</label>';
}
content += '</div>';
$("#recommend_users").empty().append(content).trigger("create");

ラジオボックスの選択イベントを拾う

$("input[name='recommend_users_radio']").live("change", function(event, ui) {
	// これで選択された value の値がとれます
	var select = $(this).val();
	alert(select);
});

jQuery Mobileのボタンでアイコンのみを表示したい

<!-- アイコンのみ表示したい時はdata-iconpos="notext"とする -->
<a href="#" id="down" data-icon="arrow-d" class="ui-btn-left" data-iconpos="notext"></a>

ボタンイベントの発火（発行？）

// テストボタン
<a href="#" id="test" data-role="button">Test</a>

// id名 + clickでOK。直感的！
$("#test").click();

子要素をすべて削除する

jQuery Mobileなしでは以下のように書けそうですが

function clearChildAll(element) {
	while(element.firstChild){
		element.removeChild(element.firstChild);
	}
}

var element document.getElementById('timeline');
clearChildAll(element);

jQuery MobileではこれでOK

$("#timeline").empty();

要素の表示/非表示を切り替える

今回作ったビューアーでは、タイムラインを表示するページは
1つだけなので、ナビゲーションバーのボタンが押されて
必要になったタイミングで各要素の表示/非表示を切り替えています。

<div id="search_keyword_field">
	<input type="search" name="search_keyword" id="search_keyword" value="" data-mini="true"/> 
	<div id="users_collapsible" data-role="collapsible" data-mini="true">
		<h3>おすすめキーワード</h3> 
		...
	</div> 
</div>

// 簡単便利！
// 表示
$("#search_keyword_field").show();
// 非表示
$("#search_keyword_field").hide();

今回、はじめてjQuery Mobileを触って、
へーと思うことがかなりたくさんあった気がするのですが
Tips的に列挙してみると結構少なかったですね；
また思い出したら追記していきます。

Web API（はてなハイクAPI）の呼び出し