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

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

Monaca IDEの使い方

　プロジェクトが作成されると、Monaca IDEと呼ばれている開発環境が表示されます。ここでは、このMonaca IDE簡単な操作を説明します。

　まず、Monaca IDEは次のような画面になっています。

Monaca IDEの構成

　画面を簡単に説明します。

1.メニューバー（赤い枠）

　ファイルの保存や編集を行ったり、作成したアプリをビルドしたりするメニューがあります。

2.プロジェクトパネル（青い枠）

　ファイルの構成を確認できます。またバックエンド機能を使う時はここで設定します。

3.デバッグパネル（紫の枠）

　デバック時のエラーなどが表示されます。

4.コードエディタ（緑の枠）

　コーディングを行う部分です。JavaScript/HTML5/CSS3のシンタックスハイライトに対応しています。

　このように、Monaca IDEではすべてブラウザ上で動作をしますので、画面を遷移するとダイアログがでます。

　それでは、早速サンプルアプリを作成してみましょう。

ハイブリットアプリの画面を作ろう

　Monacaでは、アプリケーションの起動時に表示される画面はindex.htmlになります。テンプレートで自動生成されているindex.htmlに必要なコーディングをしていきます。また、CSSファイルやJavaScriptのファイルは、メニューバーから自由に作成できます。

アプリの作成

　Monacaでプロジェクトを生成したときにできるindex.htmlは、次のような構成になっています。

基本となる画面（index.htmlの抜粋）

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <!-- 1. Monacaで必要なプラグイン/デザインを設定する-->
    <script src="plugins/plugin-loader.js"></script>
    <link rel="stylesheet" href="plugins/plugin-loader.css">
    <script>
        // 2. ビューポートの設定
        monaca.viewport({width: 640});
    </script>
</head>
<body>
// 3. ここにアプリケーションの画面を書きます
</body>
</html>

　1はMonacaで動作するために必要なプラグインの読み込み箇所で、プロジェクト作成時に自動で生成されます。この行がないとMonacaアプリが正しく動作しませんので、消さないでください。

　2はビューポートの設定をしています。ビューポートとは、アプリを表示する場所のことです。ご存知のとおり、モバイル端末はパソコンに比べて表示エリアが狭くなっています。そのため、画面の幅や高さを指定することで適切な大きさで文字やコントロールを表示できるようにしています。

　3はアプリケーションの画面を書く部分です。HTMLのbodyタグの中に、文字やコントロールを配置します。

jQuery Mobileのプラグイン設定

　せっかくモバイルアプリを作るのだから、操作性の高いかっこいいデザインのものにしたいですよね。そこで今回は、jQuery Mobileというモバイル端末に適したUIを作成するための部品を使います。

　ここで、jQuery Mobileについて簡単に説明します。jQuery MobileはiOSやAndroidだけではなくWindows PhoneやPCブラウザなど、さまざまな環境に対応したモバイルユーザーインターフェースを作成できるライブラリです。jQuery UIのモバイル端末版のようなものです。ボタンやフォームなどが部品化されていて、画面が小さく、指でタッチして操作することが多いモバイルアプリでも、快適な操作ができるようなUIが用意されています。

　早速、MonacaでこのjQueryとjQuery Mobileを使うための設定をします。

　Monaca IDEの［設定］－［プラグイン設定］を選択し、次の2つにチェックを入れます。

• jQuery
• jQuery Mobile

　また、jQuery Mobileの［追加の設定］のボタンをクリックします。

jQuery Mobileの追加設定

　ここでダイアログが出ますので、次の2つにチェックを入れてください。

• jquery.mobile-1.3.js
• jquery.mobile-1.3.css

jQuery Mobileの設定

　これで、jQuery Mobileで用意されているUI部品とモバイルアプリらしいデザインが使用できるようになります。なお、執筆時点では、jQuery MobileはVersion 1.4.0がリリースされていますが、Monacaで使用できるのは1.3または1.2です。バージョンが違うと、利用できるUIコントロールやサポートしているプラットフォームが異なりますので、注意してください。

　では、具体的に画面を作成していきましょう。jQuery Mobileを使うとさまざまな画面が作成できますが、ここでは代表的なものをいくつか簡単にご紹介します。