プログラミング dk525p.ss

Monacaに「jQuery Mobile」を導入する方法・基本的な使い方は？

スポンサーリンク

 

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

Monacaでアプリ開発するにあたって、「jQuery Mobile」は導入していますか？

「jQuery Mobile」は、スマホに特化したページを作成するためのツールで、スマホアプリ開発に非常に役立ちます。

本記事では、Monacaを使う方に向けて「jQuery Mobileの概要・導入方法・使い方」を解説しています。

「Monacaってなんやねん」

「Monaca自体は知っているけど、どうやって使うの…？」

というあなたは、まずは以下の記事をご覧ください

【3分でわかる】Monacaとは何？メリットと開発環境構築の手順を解説

2018年9月29日

【Monaca開発入門】基本操作とデバッガーの使い方！

2018年10月1日

 

スポンサーリンク

jQuery Mobileとは？

前述しましたが、スマホに特化したWebページを作るためのツールです。

もう少し具体的に説明しましょう。

パソコンとスマホを比較すると、以下のような違いがあります。

  • パソコン→「マウス操作」「画面が大きい」
  • スマホ→「タッチ操作」「画面が小さい」

この違いによって、パソコン用のWebサイトをスマホで閲覧すると操作しにくいって現象が、ときおり発生します。

スマホでWebを見ながら「ボタン押しにくいなぁ…」「縮尺が微妙に大きい…」などと感じたこと、あなたもありませんか？

そこで活躍するのが「jQuery Mobile」です。

タッチ操作とスマホ画面の大きさを念頭に置いているるため、スマホで見やすいWebページを作成できるんですね〜。

これをMonacaに導入すれば、スマホでの操作性に優れたアプリを開発することができるわけです。

せっかく開発したアプリが、パソコンとスマホで操作性や見え方が違ったら嫌ですよね？

次の章で「jQuery Mobile」を導入して、このジレンマを解決しちゃいましょう！

 

スポンサーリンク

jQuery Mobileの導入方法

まずは、MonacaIDEを開き、jQuery Mobileの導入向けに新しくプロジェクトを作成します。

 

1.Monacaにログイン

まずは、Monacaへログインしましょう。

 

2.「新しいプロジェクトを作る」を選択

Monacaのログイン後画面

※「プロジェクト＝アプリ」と考えていただければ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を導入した場合・していない場合を載せてみます。

ちょっと見比べてください。

 

jQuery Mobileを導入した場合

 

jQuery Mobileを導入していない場合

 

 

どうでしょうか。

jQuery Mobuleを導入した場合の方が、Monacaボタンが大きく見やすいですね？

導入するだけでスマホに適したレイアウトにしてくれる。

これがjQuery Mobileの効果です。

すごい！！！

 

デバッガーでも確認してみよう

スマホアプリのデバッガーを開いて、「jQuery Mobileの導入」をタップします。

 

やはり、「Monacaボタン」が大きく表示されています。

jQuery Mobileを導入した場合

 

jQuery Mobileを導入していない場合

 

さらにスマホ特化した画面を作ってみよう！

めっちゃスマホっぽい画面にしていきます。

「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>
//ボタンを押した時の処理（JavaScript）
function Calltest(inflag){
   console.log("in:"+inflag);
   if(inflag == 1){
      alert("Monaca");
   }
}
</script>
</head>
<body>
   <div data-role="page">
   <div data-role="header" >
      <center>Monaca（jQuery Mobile導入）</center>
   </div>
   <div><button onclick="test(1)">Monaca</button></div>
   <div>マナーモード</div>
   <select name="flip-1" id="flip-1" data-role="slider">
      <option value="off">Off</option>
      <option value="on">On</option>
   </select>
   <div>Bluetooth</div>
   <select name="flip-2" id="flip-2" data-role="slider">
      <option value="off">Off</option>
      <option value="on" selected >On</option>
   </select>
   <div>設定</div>
   <ul data-role="listview">
      <li><a href="">画面の明るさ</a></li>
      <li><a href="">着信音</a></li>
      <li><a href="">セキュリティ</a></li>
   </ul>
   <label>音量レベル</label>
   <div data-role="rangeslider">
   <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40">
   <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80">
   </div>
   </div>
</body>
</html>

保存後、プレビュー画面でも確認できますが、せっかくなのでデバッガーでチェックしましょう。

めちゃめちゃスマホっぽい！！！

 

jQuery Mobileは、Monacaでのスマホアプリ開発に必須！

jQuery Mobileを導入すれば、スマホアプリの開発がかなり楽になるのが痛感できましたでしょうか？

実際、jQuery Mobile自体は複雑な仕組みですが、導入するだけで勝手に働いてくれるのでハードルが低いんですよね。

非常に便利なので、ぜひ活用してみてください！

スポンサーリンク

RECOMMENDこちらの記事も人気です。