CodeZine(コードジン)

特集ページ一覧

Monacaで作るHTML5/JavaScriptでのハイブリットモバイルアプリ(その1)

目指せ、定時退社! スマートなエンジニアのためのお役立ちツール(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/03/14 14:00
目次

アプリ画面の全体構成

 jQuery Mobileでは、div要素にdata-role属性を指定することでその要素の役割(なにを表しているのか)を記述できます。このdata-role属性は、HTML5の独自データ属性で、例えば、data-role属性に"page"を指定するとアプリの画面を定義したことになります。

 タイトルなどヘッダ情報にはdata-role属性に"header"、フッタ情報には"footer"を指定します。そうすると、ヘッダ上とフッタを画面の上下に自動で配置してくれます。

 アプリで表示するコンテンツはrole属性に"main"、class属性に"ui-content"を組み合わせたdiv要素内に配置します。

 図で表すと、次のとおりです。

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

 メニューを追加したいときは、div要素のdata-role属性に"navbar"を指定します。

 また、ヘッダやフッタの位置は固定されたほうが見栄えが良いので、その場合はdata-positionを"fixed"に設定します。

 次のプログラムは、mainPageというIDの画面上下にヘッダとフッタを固定で配置し、ヘッダに「ログイン」と「ヘルプ」の2つのメニューを表示したときの例です。

ヘッダとフッタの指定(index.htmlの抜粋)
<div id="mainPage" data-role="page">
  <div data-role="header" data-position="fixed">
    <h3>Monacaでモバイルアプリを作ろう</h3>
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active">ログイン</a></li>
        <li><a href="#">ヘルプ</a></li>
      </ul>
    </div>
   </div>
  
  <div role="main" class="ui-content">  
  </div>

  <div data-role="footer" data-position="fixed">
    WINGS Project
  </div>
</div>

UIコンテンツの配置

 モバイルアプリでは入力フィールドやボタンを指で操作することが多いので、クリックしやすいUIを配置するとアプリの操作性が高くなります。

 ここでは、サンプルとして簡単なユーザ認証フォームを作成します。ボタンのclass属性の値は"ui-btn"に設定します。

ボタンや入力ボックスの配置(index.htmlの抜粋)
<div role="main" class="ui-content">  
  <div class="ui-field-contain">
    <label for="username">ID:</label>
    <input type="text" id="username">
  </div>
  <div class="ui-field-contain">
    <label for="password">パスワード:</label>
    <input type="password" id="password">
  </div>
  <div class="ui-field-contain">
    <button id="loginBtn" class="ui-btn">ログイン</button>
    <button id="cancelBtn" class="ui-btn">キャンセル</button>
  </div>
</div>
認証フォーム
認証フォーム

 ボタンや入力フィールド以外にも、jQuery MobileにはいろいろなUIコントロールがあります。

 すべて、指で操作しやすいよう大きめで分かりやすいデザインになっています。こちらのサイトにデモがありますので、使いたいUIコントロールがあればソースコードと併せて確認してみてください。

画面を確認しよう

 Monacaでは、作成した画面を確認することができます。ファイルメニューの[プレビュー]を選択すると画面の確認画面が出ますので、レイアウトやバランスを確認してください。

Monacaでのプレビュー
Monacaでのプレビュー

おわりに

 本記事では、AndroidアプリやiOSアプリなどのモバイルアプリの開発がはじめての方に、普段使い慣れたHTML5/JavaScriptを使ったハイブリットアプリケーションを作成する方法をご紹介しました。今回は画面の作成まで終わりましたので、次回はこの画面を使ってユーザ認証機能を作成する方法をご紹介します。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:目指せ、定時退社! スマートなエンジニアのためのお役立ちツール

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5