こんにちは、エンジニアにょけん（@nyoken_box）です。
こういった疑問に答えます。
今回は、サンプルとして「訪れたレストランを記録するアプリ」を想定し、アプリの基礎となる以下のような土台画面を開発していきますね。
一覧表示画面（TOP）
位置情報表示画面
アプリ説明画面
まずは、このような土台となる画面を作ることが大事です。
機能の追加は、そのあとに詰めていきましょう。
Monacaでプロジェクトを作成する
まずは、Monacaで新しいプロジェクトを作成します。
Monacaにログイン後、ダッシュボード画面から「プロジェクトの作成」をクリックしましょう。
テンプレートは「最小限のテンプレート」を選択してください。
プロジェクト名・説明は適当でOKです。
そもそもこの辺がわからないという方は、以下の記事をご覧ください。
jQueryとjQuery Mobileを追加する
続いて、作成したプロジェクトに「jQuery」と「jQuery Mobile」を追加していきます。
- jQuery→JavaScriptの便利な部分をまとめた機能群で、導入するだけでJavaScriptのコーディングがラクになる
- jQuery Mobile→jQueryを用いて、勝手にスマホアプリらしい見た目にしてくれる仕組み
追加方法はカンタンで、開発画面の「設定タブ」→「JS/CSSコンポーネントの追加と削除」から、jQueryとjQuery Mobileを見つけて「追加」をクリックするだけ。
この時、バージョンは以下を指定してください。
- jQuery→バージョン「1.9.0」
- jQuery Mobile→バージョン「1.3.1」
※読み込むファイルの選択画面では、1番上の「components/monaca-jquery-mobile/css/jquery.mobile.css」のみを選択
こちらも操作がわからない場合は、以下により詳しい詳細手順がありますのでご覧ください。
>>参考：「MonacaでjQuery Mobileを導入する方法・使い方」
これで、jQuery Mobileがプロジェクトに追加されました。
Monacaサンプルアプリの土台を作成する
もう一度、完成画面をご覧ください。
一覧表示画面（TOP）
位置情報表示画面
アプリ説明画面
こちらの３ページを作っていくのですが、ここでjQuery Mobileを導入したメリットが活かされます。
なんと、jQuery Mobileを使うと、複数のページを1つのHTMLファイルに全て記述できるんですよ。
つまり、ページごとにHTMLファイルを用意する必要がなく、「index.html」だけを編集すればOKなんです。
てわけで、画面下部の「List」「Map」「About」というメニューと、そのリンク先となる各ページを「index.html」に用意しましょう。
「index.html」を、コピペで以下に書き換えてください。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <!-- TOP（一覧）ページ --> <div data-role="page" id="topPage"> <header data-role="header" data-position="fixed"> <h1 id="hh1">レストラン一覧</h1> </header> <section data-role="content"> <p>今まで訪れたレストラン一覧です。</p> </section> <footer data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#topPage" data-icon="bars" data-transition="none" class="ui-btn-active ui-state-persist">List</a></li> <li><a href="#mapPage" data-icon="star" data-transition="none">Map</a></li> <li><a href="#aboutPage" data-icon="info" data-transition="none">About</a></li> </ul> </div> </footer> </div> <!-- 地図 ページ --> <div data-role="page" id="mapPage"> <header data-role="header" data-position="fixed"> <h1 id="hh1">レストラン位置</h1> </header> <section data-role="content"> <p>レストランの位置情報を表示します。</p> </section> <footer data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#topPage" data-icon="bars" data-transition="none">List</a></li> <li><a href="#mapPage" data-icon="star" data-transition="none" class="ui-btn-active ui-state-persist">Map</a></li> <li><a href="#aboutPage" data-icon="info" data-transition="none">About</a></li> </ul> </div> </footer> </div> <!-- About ページ --> <div data-role="page" id="aboutPage"> <header data-role="header" data-position="fixed"> <h1 id="hh1">本アプリについて</h1> </header> <section data-role="content"> <p>本アプリは、訪れたレストランの情報を記録するアプリです。</p> </section> <footer data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#topPage" data-icon="bars" data-transition="none">List</a></li> <li><a href="#mapPage" data-icon="star" data-transition="none">Map</a></li> <li><a href="#aboutPage" data-icon="info" data-transition="none" class="ui-btn-active ui-state-persist">About</a></li> </ul> </div> </footer> </div> </body> </html>
デバッガー等を用いて、予想通りの画面が表示されているかをご確認ください。
デバッガーの使い方がわからない場合は、こちらをどうぞ。
次章で、コードの解説をチラッとします。
index.htmlコード解説
data-role="page"という属性を持たせたタグ内（ピンク色にした部分）で、１ページを表しています。
<div data-role="page" id="topPage"> （中略） </div>
つまり先ほどのコードでは、TOP（一覧）ページと、画面下部の「Map」「About」をクリックした時に遷移するページの「計３ページ」を作成したことになりますね。
次もjQuery Mobileの記法になるのですが、作成した各ページ内に「ヘッダー」「コンテンツ（本文）」「フッター」の3種類を記述しています。（青色にした部分）
ここでは、TOP（一覧）ページを例にとってみましょう。
<!-- TOP（一覧）ページ --> <div data-role="page" id="topPage"> <header data-role="header" data-position="fixed"> <h1 id="hh1">レストラン一覧</h1> </header> <section data-role="content"> <p>今まで訪れたレストラン一覧です。</p> </section> <footer data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#topPage" data-icon="bars" data-transition="none" class="ui-btn-active ui-state-persist">List</a></li> <li><a href="#mapPage" data-icon="star" data-transition="none">Map</a></li> <li><a href="#aboutPage" data-icon="info" data-transition="none">About</a></li> </ul> </div> </footer> </div>
画面上部がヘッダー、画面下部のメニューバーがフッターになります。
コンテンツ（本文）はsectionタグの中に記載してありますね。
一覧表示画面（TOP）
まとめ：Monacaのアプリ開発では、まず土台を作ろう
本記事では、アプリの土台部分を作成してみました。
しかし、画面遷移だけでは実動作がなく、アプリとは呼べません。
次回、実際に訪れたレストランを保存できるようにします。
Twitterフォローしてね！！！
有益な無益をつぶやくよ↓↓↓
にょけん
コメント