こんにちは、エンジニアにょけん（@nyoken_box）です。
Monacaでアプリ開発するにあたって、「jQuery Mobile」は導入していますか？
「jQuery Mobile」は、スマホに特化したページを作成するためのツールで、スマホアプリ開発に非常に役立ちます。
本記事では、Monacaを使う方に向けて「jQuery Mobileの概要・導入方法・使い方」を解説しています。
「Monacaってなんやねん」
「Monaca自体は知っているけど、どうやって使うの…？」
というあなたは、まずは以下の記事をご覧ください
jQuery Mobileとは？
前述しましたが、スマホに特化したWebページを作るためのツールです。
もう少し具体的に説明しましょう。
パソコンとスマホを比較すると、以下のような違いがあります。
- パソコン→「マウス操作」「画面が大きい」
- スマホ→「タッチ操作」「画面が小さい」
この違いによって、パソコン用のWebサイトをスマホで閲覧すると操作しにくいって現象が、ときおり発生します。
スマホでWebを見ながら「ボタン押しにくいなぁ…」「縮尺が微妙に大きい…」などと感じたこと、あなたもありませんか？
そこで活躍するのが「jQuery Mobile」です。
タッチ操作とスマホ画面の大きさを念頭に置いているるため、スマホで見やすいWebページを作成できるんですね〜。
これをMonacaに導入すれば、スマホでの操作性に優れたアプリを開発することができるわけです。
せっかく開発したアプリが、パソコンとスマホで操作性や見え方が違ったら嫌ですよね？
次の章で「jQuery Mobile」を導入して、このジレンマを解決しちゃいましょう！
jQuery Mobileの導入方法
まずは、MonacaIDEを開き、jQuery Mobileの導入向けに新しくプロジェクトを作成します。
1.Monacaにログイン
まずは、Monacaへログインしましょう。
2.「新しいプロジェクトを作る」を選択
※「プロジェクト＝アプリ」と考えていただければOKです
3.「最小限のテンプレート」を選択
4.プロジェクト名をつけて、「作成」を選択
※プロジェクト名は、わかりやすい名前が良いでしょう。（jQuery Mobileの導入など）
5.上記で作成したアプリを選んで、「クラウドIDEで開く」を選択
6.「設定タブ」→「JS/CSSコンポーネントの追加と削除」を選択
7.jQuery Mobile（Monaca Version）の横の「追加」ボタンを選択
8.バージョン「1.3.1」を選び、「インストール」ボタンを押下
9.下記赤枠の通りチェックを入れて、「保存」ボタンを押下
10.更新ボタンを押下して、「jQuery Mobileフォルダ」が作成されていることを確認
これで、「jQuery Mobile」の導入は完了です。
jQuery Mobileの使い方（Monacaアプリ作成）
導入が完了したので、このままjQuery Mobileでサンプルアプリを開発してみましょう。
「Monacaの基本的な使い方」で解説したのと同じアプリを作ってみます。
上記の記事を見ていただいた方は、「Monacaの基本的な使い方（実践編）」の章で編集したアプリと同じコードを、マルッとコピペしていただければOKです。
jQuery Mobileを導入した場合としていない場合で、どのような変化があるのでしょうか。
1.「jQuery Mobileの導入」を選び、「クラウドIDEで開く」を選択
2.<body>〜</body>間を編集
まずは、先ほど赤枠で囲っていた部分（<boddy>〜<body>）の中にある部分を編集します。
以下のように変えてみてください。
変更前
<body> <br /> This is a template for Monaca app. </body>
↓
変更後
<body> <h1>Monacaお試し</h1> <div><button onclick="test(1)">Monaca</button></div> </body>
3.<script>〜</script>間を編集
<body>〜</body>の少し上あたりに、<script>〜</script>もあります。
何も書かれていないと思うので、以下のコードを追加してみてください。
変更前
<script> </script>
↓
変更後
<script> function test(inflag){ console.log("in:"+inflag); if(inflag == 1){ alert("Monaca"); } } </script>
ここまでできたら、保存しましょう。
- Windows：「Ctrl」キー+「S」キー
- Mac：「Command」キー+「S」キーです。
- 共通：「ファイル」→「保存」
4.プレビュー画面の確認
中身は、こんな感じになっているはずです。
右側のプレビュー画面を見ると、「Monacaお試し」という太文字と、「Monaca」と書いてあるボタンがありますか？
これは、手順2で行なった<body>〜</body>間の編集結果です。
ただ、注目は「Monacaボタン」の大きさ。
以下に、jQuery Mobileを導入した場合・していない場合を載せてみます。
ちょっと見比べてください。
コメント