検索
連載

jQuery Mobileを使って少し画面を書いてみる：はじめまして。JavaScript（2）（2/2 ページ）

JavaScriptを理解するために、分岐やループなどの基礎と、jQueryとjQuery Mobileを使って、少し画面を書いてみましょう。

[野村亮之，Jamlogic] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

画面をJavaScriptで動的に書いていく

　後半は、jQuery Mobileを使って、JavaScriptで画面を出力することをやってみましょう。まずは、jQuery Mobileの準備。インターネットにつながっている環境で、下記のプログラムを書いてみてください。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<script type="text/javascript">
	/**
	 * HTML全体が準備できた状態で実行される（アプリエントリポイント）
	 */
	$(document).ready(function(){
		console.debug(‘start’);
	});
	</script>
</head>
<body>
	<ul id="list" data-role="list"></ul>
</body>
</html>

　これで、startという出力がconsoleにされれば、スタートラインに立てました。jQuery Mobileは、マークアップをして、data-roleなどの属性を付けることにより、きれいな画面を作ってくれます。

　Webサービスの画面の場合、JSONやXMLで動的にデータを取ってきたものをリストに表示するというようなケースもあるかと思います。すぐに思い付かないかもしれませんが、今回説明した事柄を使っていくことにより、動的に出力が可能になってきます。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	
	<script type="text/javascript">
	/**
	 * HTML全体が準備できた状態で実行される（アプリエントリポイント）
	 */
	$(document).ready(function(){
		var el = $('#list'); //jQueryの記法で、IDがリストのものを取得
		var arr = ["apple", "orange", "pine"]; //配列を宣言
		for(var i = 0; i < arr.length; i++){
			el.append("<li>" + arr[i] + "</li>");
		}
		//リストを整形
		el.listview();
		return;
	});
	</script>
</head>
<body>
	<div data-role="content">
	<ul id="list" data-role="list" data-inset="true"></ul>
	</div>
</body>
</html>

　functionという見慣れないものが入ってきました、これに関しては次回お話しします。

　このプログラムは、日本語にしてみると、

  1. HTMLが準備できたら、readyで指定された関数を実行
  2. IDがlistのタグを取得して変数elに代入
  3. 配列arrを宣言して、3つの値を代入
  4. arrをループして、arr[i]（apple、orange、pine）をLIタグに整形して、変数el（ULタグ）に追加
  5. ULタグをリフレッシュして、リストを整形

　という流れです。

　arrのところが、Ajaxで呼び出されたJSONの配列に置き換われば、ネットワークから呼び出した値を動的に表示するということもできるようになってきます。少し幅が広がりそうですね。

　次回は、この新しく出てきた関数の考え方を説明し、より簡単にJavaScriptが書いていけるようになればと思います。

著者プロフィール

野村亮之（のむら あきゆき）

2004年 在学中に株式会社sus4を設立・取締役に就任。デザイン視点でのWebサービスの在り方をアプローチの基本として、さまざまなWebサービス構築に従事。2006年8月日本初のオンライン動画編集サービスClipCastを開発・運営開始。2009年7月動画解析サービスVideoAnalyticsを開発・運営開始。

2009年8月Ext Japan LLCにてSenior Software Architectに就任。

2011年4月(株)エムワープ（（株）マクロミル連結子会社）にて、レコメンデーションサービスとSNSを組み合わせたWebサービスPOPCORNをiPhoneで開始。2日でAppStore無料ランキング1位を獲得。6月にAndroid版を開始。2012年1月から同社最高技術責任者。

2012年5月からアポイ(株)CTO就任。(株)Jamlogic設立。(株)インタレストマーケティング取締役／CTO就任。

2011年8月より、ビジネス教育をベースとした実践型エンジニア／ディレクター育成ラボ「techGarage東京・福岡」を設立。学生のエンジニア・ディレクター教育を継続的に行っている。


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ |