SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Cloud SQLで学ぶ業務・基幹系アプリ再入門

スマートデバイスとCloud SQLのトランザクション制御で在庫管理

Cloud SQLで学ぶ業務・基幹系アプリ再入門(4)


  • X ポスト
  • このエントリーをはてなブックマークに追加

jQuery Mobileプログラミングの基本

jQuery Mobileの基本1 - 画面構成

 ここからjQuery Mobileでスマホ画面を作成する場合の基本的なタグ記述について説明しますが、ここで見ていく内容だけでも一通りのスマホ画面は作成できるはずです。ただしこの連載は、jQuery Mobileを特に扱う趣旨ではないので、もっと詳しい内容については関連書籍などを参照してください。

図3 jQuery Mobileの基本画面構成
図3 jQuery Mobileの基本画面構成

 図3はjQuery Mobileで基本的なマークアップだけを使用した画面です。jQuery Mobileでは画面上黒枠で表示されているヘッダとフッタ、その間に図で本文1~本文2を表示している本文から構成するのが基本になっています。

リスト1 画面構成(jQuery-Mobile1.htm)
<!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属性で指定します。ただし、ヘッダとフッタは必要なければ省いても問題ありません。

注4

 jQuery関係のライブラリはCDN(コンテンツ・デリバリ・ネットワークで提供されています。CDNはWebコンテンツをインターネット経由で配信するために最適化されたネットワークのことで、配信用のサーバを複数の場所に地理的にも分散配置し、アクセスが集中した時でもレスポンス遅延を起こさない工夫がされています。

jQuery Mobileの基本2 - メニューからの画面表示

 ここまで1つのページを構成するタグ記述の基本について見てきましたが、もちろんスマートフォンでも複数ページ間での画面遷移を行うことも必要になってきます。このような場合、jQuery Mobileでは1つのHTMLファイルで複数のページを表現することができます。

図4 メニュー画面
図4 メニュー画面

 図4はjQuery Mobileのメニューページで、それぞれのメニュー項目をクリックすると、本文のページが表示されます。

図5 メニュー画面から本文画面表示
図5 メニュー画面から本文画面表示

 図5はメニュー画面で「jQuery Mobileページ1」をタッチした時に表示されるページ画面で、図の画面上部左の「< メニュー」をクリックするとメニューページに戻ります。

リスト2 メニューと画面(jQuery-Mobile2.htm)
<!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ファイルでユニークに、つまり複数ページをまたがってユニークに定義する必要があります。

注5

 HTML5ではタグ記述を、分かりやすく直感的に理解できる工夫がされていますが、data-role属性もその一つで言葉の意味のとおりに「データの役割」を示しています。つまりdata-roleで指定された属性値(page、header等)を見れば、そこの記述されているデータ(タグ)の役割がおおよそ分かるようになっています。

jQuery Mobileの基本3 - UIコンポーネント

 jQuery Mobileではさまざまな種類のUIエレメントがサポートされています。図6はjQuery Mobileでサポートされている主なUIコンポーネントを示しています。ツールバー、ボタン、リストビュー、タブ、ポップアップメニュー、ダイアログ、トランジションエフェクト、編集パネル、フォーム要素がサポートされています。すべてとは言わないまでも、モバイルWebアプリケーションに必要なほとんどのUI要素が用意されています。

図6 jQuery MobileのUIコンポーネント
図6 jQuery MobileのUIコンポーネント
バーコードでの在庫管理

 在庫管理システム、特に部品・原材料の在庫管理や、製品の工程での在庫管理にバーコードが使用できれば作業がかなり楽になり、またキー入力に比べて入力ミスも少なくなります。

 このサンプルでは取り上げませんでしたが、AndroidにはQRコード読み込みアプリがあり、インストールすればAndroidスマホでバーコードやQRコードを読みとることができます。

図7 QRコード
図7 QRコード

次のページ
2. jQuery Mobileで在庫数量の更新画面を作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Cloud SQLで学ぶ業務・基幹系アプリ再入門連載記事一覧

もっと読む

この記事の著者

清野 克行(セイノ カツユキ)

慶應義塾大学工学部電子物理専攻卒。日本IBM、日本HPで、製造装置業を中心とした業務系/基幹業務系システムのSE/マーケティングや、分散アプリケーションによる社内業務システム開発などに携わる。現在は、クラウドやAjax関連の/ソフト開発/書籍執筆/セミナー講師/コンサルティング、などを行っている。情...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6738 2012/08/31 16:18

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング