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

はじめに

　普段、設計書をもとに業務アプリケーションを開発したり、単体テストや連結テストに追われて忙しい日々を過ごしたりしていると、たまには気分転換で、なにかおもしろいモバイルアプリを手軽に作りたいなということはありませんか？ しかし、いざ時間の取れる週末にアプリを作ろうと思ってみたものの、自宅のパソコンに開発環境を用意したり、開発に必要なライブラリなどをダウンロードしたり設定したりしていると、それだけであっという間に時間が過ぎてしまいます。また、Android用のアプリを作るならJava、iOS用のアプリを作るならObjective-Cを勉強して……というように、普段使い慣れていない言語を扱うことになると、なんとなく億劫になってしまいます。

　そこで、HTML5＋JavaScriptでAndroidアプリもiOSアプリも作成できるハイブリットモバイルアプリ開発をご紹介します。

対象読者

　本記事は、次の方を対象にしています。

• Android/iOSのモバイルアプリケーション開発がはじめての人
• HTML5/CSS/JavaScriptでWebサイトを作ったことがある人

必要な環境

　本連載で紹介する環境は次のとおりです。

• 開発環境
  • OS：Windows 8.1 Pro
  • IDE：Monaca IDE
• 実行環境
  • Android 4.0.4（AQUOS PHONE Xx 106SH）
  • iOS 7.0.4（Apple iPhone4）

ハイブリットアプリってなんだろう？

　通常、モバイルアプリを開発するときは、その端末に応じた環境や言語ごとに開発する必要があります。その際、同じ画面や機能であっても、プラットフォームごとにソースコードを書かなければなりません。

　また、アプリのバグの修正や機能追加する場合は、それぞれのプラットフォームごとにソースコードを異なる言語で修正する必要があります。

　ハイブリットアプリとは、1つのソースコードで作成したプログラムを複数のデバイスで動かすことができるアプリのことです。どのプラットフォームでも、1つのコードを開発/修正すればよいので開発生産性が高くなります。

　本記事でご紹介する「Monaca」は、開発言語にHTML5/JavaScript/CSSを使うモバイルアプリ開発のためのプラットフォームです。Monacaを使うと、Android/iOS/Windowsストア向けのネイティブアプリ開発ができます。

　また、開発環境を含むMonacaのすべての機能はクラウド上にあり、プログラマが各パソコンに環境をインストールしなくても、ブラウザだけでアプリを開発できます。

　さらに開発中のプログラムコードは、クラウド経由でモバイル端末に共有され、実機上でデバッグできます。

　Monacaは、次のようなイメージでアプリを開発します。

ネイティブアプリの概要

　Monacaで作成したプログラムは、iOSやAndroidでサポートされているWebViewコンポーネント上で動作します。Monacaは、ソースコードからOSの異なる複数のプラットフォームで動作するネイティブコードを生成します。そのためMonacaで作ったアプリケーションはマーケット（App Store/Google Playストアなど）に登録することができます。

　Monacaでは、端末固有の機能（ネイティブ機能）を使うためにPhoneGapを利用しています。PhoneGapとは、アドビシステムズ社により公開されているJavaScriptライブラリで、HTML5/JavaScriptがもともと得意なWebアプリケーションと、デバイス操作が多いモバイルアプリとの中間を埋めるためのライブラリです。

　このPhoneGapは、HTML5/JavaScriptのコードから各プラットフォームに対応したネイティブコードを生成する機能のほかにも、モバイルアプリ開発に欠かせない、カメラやGPS、センサーを使うためのAPIや、モバイル端末上のファイルを読み書きするためのAPIなどが数多く用意されています。

　またMonacaでは、jQuery Mobileというモバイル端末に適したUIを作成するためのフレームワークも使用できます。これを使うことで、使いやすくてかっこいい画面のアプリを簡単に作ることが可能です。

　このように、Monacaで開発を行うと、Webアプリケーションで培った知識をもとにJavaやObjective-Cで開発したアプリに引けを取らないモバイルアプリが手軽に作成できます。