Visual Studio“だけ”でiOSとAndroidアプリが作れる「Monaca for Visual Studio」

さらに使いやすく便利になった「Visual Studio」を始めよう！ 第5回

　iPhoneやAndroidといったスマートデバイスが普及するにつれ、モバイルアプリの開発ニーズが高まっています。しかしながら、iOSやAndroidのアプリ開発には、それぞれのOSに対応したネイティブ言語（Objective-C、Swift、Android Javaなど）と、個別の開発環境が必要です。

　しかし最近では、この分野に大きな変化が起きています。そのきっかけが、マルチプラットフォーム開発を可能にするHTML5ハイブリッドアプリの登場です。HTML5ハイブリッドアプリとはWeb技術であるHTML5を用いて作られるネイティブアプリで、プラットフォームに依存しない「クロスプラットフォーム」であることが最大の特徴です。

　Visual Studioでも、このHTML5ハイブリッドアプリの開発の対応がどんどん進んでいます。Visual Studioの優れた開発環境を使い、iOSやAndroid向けのネイティブアプリが開発できます。そこで本稿では、Visual Studio上でHTML5ハイブリッドアプリ開発を実現する「Monaca for Visual Studio」を紹介し、実際にアプリ開発をしていきたいと思います。

対象読者

　今回の対象読者は、以下のとおりです。

• JavaScriptによるクライアントサイド開発に携わってきた方
• iOSやAndroidアプリ開発に興味のある方

必要な環境

• Visual Studio Community 2013、またはProfessional以上のエディション（注1）
• 動作テストに使用する実機（iOSまたはAndroid端末）

注1

　Community以外のエディションで使用する場合は、MonacaのGoldプラン以上が必要です。

HTML5ハイブリッドアプリとは

　HTML5ハイブリッドアプリとは、HTML5の技術を用いてネイティブアプリ（デバイス上で直接実行されるアプリ）を開発する技術です。HTML5ハイブリッドアプリの構造は図1のようになります。ネイティブ層とHTML5層に分かれており、ブリッジという仕組みを通じてHTML5からネイティブAPIを呼ぶことができます。

図1：HTML5ハイブリッドアプリの構造

　HTML5ハイブリッドアプリがネイティブAPIを呼び出せることは、ブラウザ上で動くWebアプリと異なる大きな特徴です。カメラや加速度センサーといったデバイスAPIにアクセスしたり、アプリ内課金などのOSの機能を活用したアプリは、ネイティブでコードを書く必要があります。HTML5ハイブリッドアプリを使うと、そういったネイティブ部分はJavaScript APIとして提供されるため、新たな言語を覚えることなくネイティブアプリを作成することができるのです。

　そのHTML5ハイブリッドアプリでは、Apache Cordova（以下、Cordova）というフレームワークがデファクトスタンダードです。Cordovaはオープンソースで公開されており、Webサーバーで有名なApache Foundationのプロジェクトの一つです。Cordovaは、今回紹介するMonacaだけでなく、アドビPhoneGapなどさまざまな製品で採用されています。

「Monaca for Visual Studio」と「Visual Studio Tools for Apache Cordova」

　さて、Visual StudioでCordovaを使いたい場合、下記の2つの製品があります。

• Monaca for Visual Studio
• Visual Studio Tools for Apache Cordova

　Monacaは、筆者が所属するアシアル株式会社が開発しているクラウドベースの開発プラットフォームです。Visual Studio Tools for Apache Cordovaはマイクロソフトが開発しています。どちらもHTML5ハイブリッドアプリ開発に対応し、iOSとAndroid向けのアプリ開発ができる点では同じですが、いくつかの違いがあります（表1）。ここでは大きく異なる点について説明します。

表1：「Monaca for Visual Studio」と「Visual Studio Tools for Apache Cordova」の違い

	Monaca	Visual Studio Tools for Apache Cordova
開発ベンダー	アシアル	マイクロソフト
価格	無料～	無料
ベースフレームワーク	Apache Cordova	Apache Cordova
開発環境	Visual Studio クラウドIDE ローカル開発	Visual Studio
実機でのデバッグ	Monacaデバッガー	なし
デバッグ機能	USBデバッグで対応	Visual Studioに統合
ビルド機能	クラウドビルド	ローカル環境のセットアップが必要
サポート	技術サポート 日本語フォーラム	コミュニティベース
ドキュメント	日本語	英語

ビルドの仕組みの違い

　iOSとAndroidのビルドには、OSごとのプラットフォームSDKなどのビルド環境をセットアップしておく必要があります。さらに、iOSのビルドにはMacとその上で動く開発環境であるXcodeが必要です。

　Monaca for Visual Studioでは、こうしたビルドはMonacaが持つクラウドサービスが行います。Visual StudioとMonacaクラウドが連携することで、MacやSDKをセットアップすることなく、アプリのビルドを行うことができます。

　一方、Visual Studio Tools for Apache Cordovaを使用する場合は、iOSのビルドのためにMacが別途必要になります。また、開発するPCにもAndroidのビルド環境をセットアップしておく必要があります。

デバッグの方法の違い

　開発時の動作チェックの方法も大きく異なります。Monacaでは、開発中に実機で動作を確認するためのデバッグツールが提供されます。デバイスAPIなどのネイティブ処理についても確認することができます。

　Visual Studio Toolsの場合は、Windowsマシン上でシミュレータが起動します。実機が必要ないという利点はありますが、動作の再現性が低い可能性があります。