libro
www.tuyano.com
PhoneGapによるAndroid/iPhoneアプリ開発入門

PhoneGapの環境を整えよう！ (5/5)

作成:2012-03-05 08:04
更新:2012-03-05 08:13

■jQuery Mobileでスマートフォンらしくする

とりあえず、これでプロジェクトを作ってアプリを動かすことは出来ました。が、正直いって、アプリといっても「ただのテキスト」です。いわゆるアプリらしい画面表示ではありません。

ネイティブなアプリ開発の場合、iPhoneやAndroidに用意されているボタンなどの部品を配置していけば、それぞれのOSらしい」GUIが構築されます。が、PhoneGapの場合、そうしたネイティブな部品は使えません。なにしろ、画面の表示はただのHTMLですから、ボタンなどを作ってもただのHTMLのボタンとして表示されるだけです。

そこで、PhoneGapでスマートフォンらしいアプリ作成を支援してくれるものとして「jQuery Mobile」の導入をオススメします。これはスマート向けのWebサイトを構築するためのJavaScriptライブラリで、これを利用することで簡単にスマートフォンらしいGUIが作れるのです。

では、先ほど作ったサンプルアプリにjQuery Mobileを導入してみましょう。まず、「AndroidManifest.mf」の修正を行います。XMLのソースコードを開くと、上から６～７行目あたりにこういう文が見えるはずです。
<uses-sdk android:minSdkVersion="○○" />
○○には選んだバージョン番号が入っています。この後に、以下の文を追記してください。
<uses-permission android:name="android.permission.INTERNET" />
これは、アプリでインターネットへのアクセスを許可するためのパーミッション設定です。これにより、オンライン経由でjQuery Mobileのライブラリがロードできるようになります。

続いて、index.htmlを修正して、jQuery Mobileを利用する形にしてみましょう。下にindex.htmlのソースコードを下のリスト欄のように書き換えてください。修正したら、またプロジェクトを実行して動作を確認してみましょう。ヘッダーとテキスト、プッシュボタンといったものからなる画面が表示されます。HTMLをそのままで使うより、だいぶスマートフォンっぽい画面になっているはずです。

jQuery Mobileを利用するには、<head>タグに以下の3行を追記するだけです。（なお、ここではjQuery Mobile 1.0.1を前提にしてあります）
<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>
アプリに限らず普通のWebサイトでも、この3行を記述してやることでjQuery Mobileの機能が使えるようになります。なおjQuery Mobileの使い方については別途入門を用意してあるのでそちらを参考にしてください。


※jQuery Mobileによるスマートフォン用Webサイト作成入門
http://libro.tuyano.com/index2?id=624006

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

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

●プログラム・リスト●

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Sample</h1>
		</div>
		<div data-role="content">
			<h2>Sample Page</h2>
			<p id="msg">※これはサンプルで作ったページです。</p>
			<button>click</button>
		</div>
	</div>
</body>
</html>
※関連コンテンツ

「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る