jQuery Mobileプログラミングの基本
jQuery Mobileの基本1 - 画面構成
ここからjQuery Mobileでスマホ画面を作成する場合の基本的なタグ記述について説明しますが、ここで見ていく内容だけでも一通りのスマホ画面は作成できるはずです。ただしこの連載は、jQuery Mobileを特に扱う趣旨ではないので、もっと詳しい内容については関連書籍などを参照してください。
図3はjQuery Mobileで基本的なマークアップだけを使用した画面です。jQuery Mobileでは画面上黒枠で表示されているヘッダとフッタ、その間に図で本文1～本文2を表示している本文から構成するのが基本になっています。
<!DOCTYPE html>
<html> （1）
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> （2）
<title>jQuery Mobile入門</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> （3）
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- ページ の定義-->
<div data-role="page"> （4）
<!-- ヘッダ の定義-->
<div data-role="header"> （4）
<h1>jQuery Mobileヘッダ</h1>
</div>
<!-- コンテンツ の定義-->
<div data-role="content"> （4）
<p>jQuery Mobile 本文1</p>
<p>jQuery Mobile 本文2</p>
</div>
<!-- フッタ の定義-->
<div data-role="footer"> （4）
<h3>jQuery Mobileフッタ</h3>
</div>
</div>
</body>
</html>
jQuery Mobileページの基本
（1）HTML5のフォーマットでタグを記述する
jQuery Mobileを使用する場合、タグ記述はHTML5のフォーマットで行います。HTML5ではリスト1の先頭1～4行から分かるように、文書型宣言（DOCTYPE）や<meta>タグによる文字コードの宣言が従来のHTML4.xなどよりシンプルになっています。
（2）スマートフォン用に画面サイズを指定する
画面サイズは「meta」タグの「name」属性で「viewport」属性値で指定します。
widthはコンテンツの幅を指定しますが、「width =device-width」でそれぞれスマートフォンの幅に合わせることができます。またピクセル値で指定することもできます。
initial-scaleは初回アクセス時の拡大率で、このサンプルでは initial-scale=1 で初期表示は拡大率1で表示します。
（3）jQuery Mobileを使用するために必要なライブラリをインポートする
jQuery Mobileを使用するためには、スタイルシートライブラリ1種類とJavaScript（JS）ライブラリ2種類をインポートしておく必要があり、JSではjQueryライブラリの指定後にjQuery Mobileを指定するようにします。
ライブラリはすべてjquery-1.6.4.min.jsのように「min」が含まてていますが、これはソース・コードからコメントや空白などを取り除いてファイル・サイズを最小にしたファイルで、軽量化のため必ずこのminが含まれたファイルを使用するようにしてください。
外部ライブラリはダウンロード後フォルダ配置して使用することも、もちろんできますが、ここではURL指定でライブラリを使用しています（注4）。
（4）画面構成ではページの下にヘッダ、コンテンツ、フッタを配置して構成する
jQuery Mobileでは1つの画面をページで指定し、その下にヘッダ、コンテンツ、フッタを配置して画面構成を行います。表示イメージについては図3で見ていますが、タグ記述ではリスト1の（4）のようにdata-role属性で指定します。ただし、ヘッダとフッタは必要なければ省いても問題ありません。
jQuery関係のライブラリはCDN（コンテンツ・デリバリ・ネットワークで提供されています。CDNはWebコンテンツをインターネット経由で配信するために最適化されたネットワークのことで、配信用のサーバを複数の場所に地理的にも分散配置し、アクセスが集中した時でもレスポンス遅延を起こさない工夫がされています。
jQuery Mobileの基本2 - メニューからの画面表示
ここまで1つのページを構成するタグ記述の基本について見てきましたが、もちろんスマートフォンでも複数ページ間での画面遷移を行うことも必要になってきます。このような場合、jQuery Mobileでは1つのHTMLファイルで複数のページを表現することができます。
図4はjQuery Mobileのメニューページで、それぞれのメニュー項目をクリックすると、本文のページが表示されます。
図5はメニュー画面で「jQuery Mobileページ1」をタッチした時に表示されるページ画面で、図の画面上部左の「< メニュー」をクリックするとメニューページに戻ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>営業状況報告</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.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/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- メイン ページ -->
<div data-role="page" id="menu">
<div data-role="header" data-theme="d">
<h1>メインページ</h1>
</div>
<div data-role="content" data-theme="c">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">メニュー</li>
<li><a href="#page1"><h3>jQuery Mobile ページ1</h3></a></li>
<li><a href="#page2"><h3>jQuery Mobile ページ2</h3></a></li>
<li><a href="#page3"><h3>jQuery Mobile ページ3</h3></a></li>
</ul>
</div>
<div data-role="footer" data-theme="e">
<h3>フッター</h3>
</div>
</div>
<!-- ページ1 -->
<div data-role="page" id="page1" data-title="jQuery Mobile ページ1">
<div data-role="header" data-theme="d">
<a href="#menu" data-icon="arrow-l" data-direction="reverse">メニュー</a>
<h1>jQuery Mobile ヘッダ1</h1>
</div>
<div data-role="content">
<p>jQuery Mobile ページ1 本文1</p>
<p>jQuery Mobile ページ1 本文2</p>
</div>
<div data-role="footer" data-theme="d">
<h3>jQuery Mobile フッタ1</h3>
</div>
</div>
<!-- ページ2 -->
<div data-role="page" id="page2" data-title="jQuery Mobile ページ2">
<div data-role="header" data-theme="d">
<a href="#menu" data-icon="arrow-l" data-direction="reverse">メニュー</a>
<h1>jQuery Mobile ヘッダ2</h1>
</div>
<div data-role="content">
<p>jQuery Mobile ページ2 本文1</p>
<p>jQuery Mobile ページ2 本文2</p>
</div>
<div data-role="footer" data-theme="d">
<h3>jQuery Mobile フッタ2</h3>
</div>
</div>
<!-- ページ3 -->
<div data-role="page" id="page3" data-title="jQuery Mobile ページ3">
<div data-role="header" data-theme="d">
<a href="#menu" data-icon="arrow-l" data-direction="reverse">メニュー</a>
<h1>jQuery Mobile ヘッダ3</h1>
</div>
<div data-role="content">
<p>jQuery Mobile ページ3 本文1</p>
<p>jQuery Mobile ページ3 本文2</p>
</div>
<div data-role="footer" data-theme="d">
<h3>jQuery Mobile フッタ3</h3>
</div>
</div>
</body>
</html>
jQuery Mobileでは複数のページを1つのHTMLファイルで作ることができ、ページ間の遷移がスムーズに行くようになっています。ただし、その分サーバからのページロードで時間が多くかかりますが、スマートフォンのページはPC用に比べてタグも少なく、それほど気にはならないでしょう。
リスト4ではメニューページとメニューから表示される3つのメインページ、合計4種類のページは1つのHTMLファイルに記述されています。
（1）各ページの指定は、divタグのdata-role属性（注5）で指定され、id属性値 menu、page1、page2、page3でメニュー画面と3種類のページ（表示画面）が指定されています。
（2）ページ内での画面構成は、これもdata-role属性でheader、content、footerのレイアウト領域から構成され、図5の画面では、画面上下の青色の部分がヘッダ（header）とフッタ（footer）で、その間のライトグレーの部分に本文（content）が表示されています。
（3）各レイアウト領域ではdata-theme属性値で配色テーマを指定することができ、a～eの属性（プロパティ）値で、スクリーン配色を指定することができます。
このようにjQuery Mobileでは1つのHTMLファイルで複数のページを定義・記述できますが、data-roleやidの属性値は1つのHTMLファイルでユニークに、つまり複数ページをまたがってユニークに定義する必要があります。
HTML5ではタグ記述を、分かりやすく直感的に理解できる工夫がされていますが、data-role属性もその一つで言葉の意味のとおりに「データの役割」を示しています。つまりdata-roleで指定された属性値（page、header等）を見れば、そこの記述されているデータ（タグ）の役割がおおよそ分かるようになっています。
jQuery Mobileの基本3 - UIコンポーネント
jQuery Mobileではさまざまな種類のUIエレメントがサポートされています。図6はjQuery Mobileでサポートされている主なUIコンポーネントを示しています。ツールバー、ボタン、リストビュー、タブ、ポップアップメニュー、ダイアログ、トランジションエフェクト、編集パネル、フォーム要素がサポートされています。すべてとは言わないまでも、モバイルWebアプリケーションに必要なほとんどのUI要素が用意されています。
在庫管理システム、特に部品・原材料の在庫管理や、製品の工程での在庫管理にバーコードが使用できれば作業がかなり楽になり、またキー入力に比べて入力ミスも少なくなります。
このサンプルでは取り上げませんでしたが、AndroidにはQRコード読み込みアプリがあり、インストールすればAndroidスマホでバーコードやQRコードを読みとることができます。
