Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 本連載では、業務アプリケーション開発を行う熱血若手エンジニアのために、面倒な作業が楽になる便利なツールをご紹介します。「定時になったらスマートに帰社してアフター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ストアアプリをどんどんサポートしてくれるようになると筆者としては嬉しい限りです。


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

著者プロフィール

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

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

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

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

バックナンバー

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

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5