コンポーネントをダイナミックに操作する(5/5):jQuery Mobileによるスマートフォン用Webサイト作成入門

コンポーネントをダイナミックに操作する (5/5)

作成:2011-06-20 08:26
更新:2012-03-29 10:28

■Jsonデータから動的にリストを生成する

セレクトメニューやリストは、動的に項目を生成する使い方が良く用いられます。このようなとき、スクリプト内に生成する値を用意するよりも、サーバーから必要な情報を受け取り、それをもとにオブジェクトを生成する、というやり方のほうが一般的でしょう。

ここではごく簡単な例として、「JsonデータをサーバーからAjax通信で受け取り、それをもとにページのコンテンツを生成する」ということを行ってみましょう。生成するコンテンツは、ここでは「メッセージのテキスト表示とリストの項目」を用意することにします。このように内容の異なる複数の情報を処理する基本がわかれば、後は応用次第でさまざまなコンテンツを動的に生成できるようになるでしょうから。

では、まずサーバー側にJsonデータを用意しておきましょう。ここでは、メッセージのテキストと、リストの項目をもったJsonデータを考えます。HTMLファイルと同じ場所に「json.json」というファイルを用意し、下のリスト欄に掲載したJsonデータを記述してください。

このJsonデータでは、中に「data」というオブジェクトがあり、その中に更に「msg」と「list」というデータが保管されています。msgにはメッセージのテキストが値として保管され、listにはリストの項目として表示するテキストが配列としてまとめられています。

ここではそのまま静的なファイルとして用意しておきましたが、もちろん実際の開発などではサーバーサイドのプログラムから動的にJsonデータを生成し送信するような形になるでしょう。が、とりあえず静的ファイルでのロードという基本がわかれば、後はいくらでも応用できます。

続いてHTMLのコードの作成です。やはり下のリスト欄にあげた「HTMLソースコード」をHTMLファイルに記述してください。これは、ボタンを１つだけもつシンプルなページです。このボタンをクリックすると、サーバーのjson.jsonにアクセスし、データを受け取ってからその内容を元にメッセージとリストの項目を動的に生成し追加します。

AjaxによるJsonデータの取得は、jQueryの機能を使えば非常に簡単に行なえます。以下のような具合です。

$.getJSON( アクセス先 , コールバック関数 );

第１引数にはアクセス先のアドレスを、第２引数にはアクセス完了後に呼び出される関数をそれぞれ指定しておきます。コールバック関数は、引数に受け取ったJsonオブジェクトが渡されます。この引数のオブジェクトから必要な情報を取り出していき、処理をすればよいのです。ここでの処理を見ると、コールバック関数は以下のようになっていることが分かります。

function(data) {
    var obj = data.data;
    var msg = obj.msg;
    var list = obj.list;
    $('#msg').text(msg);
    for(key in list){
        $('<li>').text(list[key]).appendTo('#place');
    }
    $('#place').listview('refresh');
}

まずdataオブジェクトをとり出し、そこからmsgとlistの値をそれぞれ変数にとり出します。msgは、そのまま$('#msg').text(msg);でテキストとして表示させておきます。リストの方は、繰り返しを使い、配列から順に値を取り出しては$('<li>')を作ってappendTo('#place')していきます。

このように、サーバーから必要に応じてデータを受け取ることで、スマートフォンでもダイナミックな表示の生成が比較的簡単に行えるようになります。データ取得の仕組みさえわかれば、あとは色々と応用できます。それぞれで、さまざまなデータからコンテンツを生成するのに挑戦してみてください。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※json.jsonファイル
{
	"data":{
		"msg":"これは、サンプルデータのメッセージです。",
		"list":["One","Two","Three"]
	}
}


※HTMLソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

	<head>
	<meta http-equiv="content-type"
		content="text/html;charset=utf-8" />
	<title>Sample</title>

	<link rel="stylesheet" 
		href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" 
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" 
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

	<script type="text/javascript">
	$('#home').live('pagecreate',function(){
		$('#btn').bind('tap',doAction);
	});
	
	function doAction(){
		$('#place').html('');
		$.getJSON('json.json', function(data) {
			var obj = data.data;
			var msg = obj.msg;
			var list = obj.list;
			$('#msg').text(msg);
			for(key in list){
				$('<li>').text(list[key]).appendTo('#place');
			}
			$('#place').listview('refresh');
		});
	}
	</script>
	</head>
	
	<body>

	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Hello</h1>
		</div>
		<div data-role="content">
			<p id="msg">※サンプル。</p>
			<div data-role="fieldcontain">
				<ul id="place" data-role="listview"></ul>
			</div>
			<div data-role="fieldcontain">
				<input type="button" name="btn" id="btn" 
					value="Load" />
			</div>
		</div>
	</div>
	
	</body>
</html>

※関連コンテンツ

<< prev next >>

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る