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

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

　本連載では、業務アプリケーション開発を行う熱血若手エンジニアのために、面倒な作業が楽になる便利なツールをご紹介します。「定時になったらスマートに帰社してアフター5を存分に楽しみたい！」や「設計書やレビューの準備に煩わされるのは嫌だ、コーディングに集中したい！」などを実現してくれる便利なツールやソフトウエアを、サンプルコードを交えて説明します。

はじめに

　普段、設計書をもとに業務アプリケーションを開発したり、単体テストや連結テストに追われて忙しい日々を過ごしたりしていると、たまには気分転換で、なにかおもしろいモバイルアプリを手軽に作りたいなということはありませんか？ しかし、いざ時間の取れる週末にアプリを作ろうと思ってみたものの、自宅のパソコンに開発環境を用意したり、開発に必要なライブラリなどをダウンロードしたり設定したりしていると、それだけであっという間に時間が過ぎてしまいます。また、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で開発したアプリに引けを取らないモバイルアプリが手軽に作成できます。

［参考］MonacaでのWindowsストアアプリの開発について

　Monacaは、Windows 8を搭載したタブレットなどで動く「Windowsストアアプリ」の開発も可能です。しかしながら執筆時点では、Windowsストアアプリはデバッグビルドとしての開発しか対応していないため、モバイルアプリを作ってもWindowsストアに公開することができません。また、便利な機能である「Monacaバックエンド」にも対応していません。

　さらに、Monacaで用意されているテンプレートは「最小限のプロジェクト」と「RSSリーダー for Windows 8」のみとなっており、フォーラムなどでの技術情報も少なく、AndroidやiOSに比べると、やはり開発のサポートは多いとは言えません。

　そのため、本稿ではAndorid/iOSのモバイルアプリ開発について取り上げます。

　ただし、Windowsストアアプリは自体は、XAML/C#だけでなくHTML5/JavaScriptによる開発ができますので、Microsoft Visual Studio 2013などに作成したソースコードを移植すれば簡単にストアアプリを作成できます。

　筆者は、iPhone/Andoridタブレット/Windows 8タブレットをいつも持ち歩いてハイブリット（！？）に使用していますが、やはり業務でよく使うExcelやWordが自由に使えるWindowsタブレットを多用しています。MonacaがWindowsストアアプリをどんどんサポートしてくれるようになると筆者としては嬉しい限りです。