CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/03/14 14:00
目次

Monaca IDEの使い方

 プロジェクトが作成されると、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の追加設定
jQuery Mobileの追加設定

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

  • jquery.mobile-1.3.js
  • jquery.mobile-1.3.css
jQuery Mobileの設定
jQuery Mobileの設定

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

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:目指せ、定時退社! スマートなエンジニアのためのお役立ちツール

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5