【Monacaアプリ作り方】まずはjQueryとjQuery Mobileで土台を作ろう

スポンサーリンク

 

こんにちは、エンジニアにょけん(@nyoken_box)です。

困ったマン
Monaca導入してみたけど、いざ開発しようと思うと何から初めていいかわからん…
困ったさん
Monacaの名前は聞くけど、どんな風に便利なのかイマイチ想像できないなぁ)

こういった疑問に答えます。

今回は、サンプルとして「訪れたレストランを記録するアプリ」を想定し、アプリの基礎となる以下のような土台画面を開発していきますね。

 

一覧表示画面(TOP)

 

位置情報表示画面

 

アプリ説明画面

まずは、このような土台となる画面を作ることが大事です。

機能の追加は、そのあとに詰めていきましょう。

 

スポンサーリンク

Monacaでプロジェクトを作成する

まずは、Monacaで新しいプロジェクトを作成します。

Monacaにログイン後、ダッシュボード画面から「プロジェクトの作成」をクリックしましょう。

テンプレートは「最小限のテンプレート」を選択してください。

プロジェクト名・説明は適当でOKです。

そもそもこの辺がわからないという方は、以下の記事をご覧ください。

>>参考:Monacaの基本操作とデバッガーの使い方

 

スポンサーリンク

jQueryとjQuery Mobileを追加する

続いて、作成したプロジェクトに「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)

 

位置情報表示画面

 

アプリ説明画面

こちらの3ページを作っていくのですが、ここで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>

 

デバッガー等を用いて、予想通りの画面が表示されているかをご確認ください。

デバッガーの使い方がわからない場合は、こちらをどうぞ。

>>参考:Monacaの基本操作とデバッガーの使い方

次章で、コードの解説をチラッとします。

 

index.htmlコード解説

data-role="page"という属性を持たせたタグ内(ピンク色にした部分)で、1ページを表しています。

<div data-role="page" id="topPage">
(中略)
</div>

つまり先ほどのコードでは、TOP(一覧)ページと、画面下部の「Map」「About」をクリックした時に遷移するページの「計3ページ」を作成したことになりますね。

 

次も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フォローしてね!!!

有益な無益をつぶやくよ↓↓↓

にょけん

スポンサーリンク