「Visual Studio」と“Apache Cordova”でAndroid/iOSアプリを作る！

　前編に引き続き、「Visual Studio 2015 Community RC」（以下、「Visual Studio 2015」）でアプリ作成を体験してみよう。後編となる今回は、お待ちかねスマートフォンアプリ開発を紹介しよう。ほんの入口までの案内ではあるが、「これなら自分にもできそう！」感は十分味わっていただけると思う。

クロスプラットフォームに対応した最新の開発環境

　「Visual Studio 2015」の大きな特徴の一つに、クロスプラットフォーム開発とモバイル環境向けの開発機能が充実していることがあげられる。クロスプラットフォーム開発とは、1つのソースコードでWindowsだけではなく、Windows以外のプラットフォームで動作するアプリを作成することで、「Visual Studio 2015」では、iOSデバイスとAndroidデバイス用のアプリを作ることができるようになっている。具体的には、“Apache Cordova”と“Xamarin”と呼ばれる2つのモバイル環境向けフレームワークに対応しているのが特徴だ。これらのフレームワークを利用すればWindowsをターゲットにしたアプリだけではなく、iPhoneやiPadといったiOSデバイスや、AndroidスマートフォンやタブレットなどのAndroidデバイス向けのアプリを「Visual Studio 2015」で作ることができる。

　それでは、さっそくiOSやAndroidスマートフォンのアプリの作り方を体験してみることにしよう。まだ「Visual Studio 2015」をインストールしていない場合は、以下のマイクロソフトのサイトから入手してインストールして欲しい。

［クロスプラットフォーム モバイル開発］を選択する

　「Visual Studio 2015」でiOSやAndroidデバイスのアプリを作るためには、インストールするときに“クロスプラットフォーム モバイル開発”ツールのインストールが必要になる。インストーラーを起動したら［カスタム］を選択し、［クロスプラットフォーム モバイル開発］にチェックを付けてインストールしよう。すでに「Visual Studio 2015」をインストールしているなら、コントロールパネルの［プログラムのアンインストール］から［Microsoft Visual Studio Community 2015 RC］を選択して［変更］をクリックすれば、現在インストールされている「Visual Studio 2015」に［クロスプラットフォーム モバイル開発］を追加できる。

　ちなみに、Windows以外のデバイスのアプリをPC上で実行するためには、一定以上のスペックが必要になる。具体的には、OSに64bit版のWindows 8.1 Pro Update以上、CPUはIntel VTもしくはAMD-Vといった仮想化技術をサポートし、メモリは8GB以上を搭載していないと、プログラミングはできてもPC上でアプリを実行できない場合があるので注意してほしい。

Apache Cordovaフレームワークで動作するアプリを作ってみよう

　Apache Cordovaは、HTML/CSSとJavaScriptやTypeScriptといったWebベースのテクノロジーだけでスマートフォンやタブレット用のアプリを作ることができる、モバイル環境向けのアプリを作成するためのフレームワークだ。TypeScriptは耳慣れない人もいるかもしれないが、JavaScriptをベースにマイクロソフトによって拡張されたプログラミング言語で、コンパイルするとJavaScriptに変換され互換性が保たれるようになっている。そのため、すでにWebベースのテクノロジーについて知っている人ならば、新しいプログラミング言語を覚えることなく、自分が知っている知識だけでスマートフォンやタブレットのアプリを作れるというメリットがある。もちろん、GPSや加速度計などの各種センサー、端末のアドレス帳など端末固有の機能を使うこともできるようになっている。

Apache CordovaはJavaScriptかTypeScriptを選ぶ

　ではさっそくApache Cordovaでアプリを作ってみよう。「Visual Studio 2015」を起動したら、［ファイル］メニューの［新規作成］－［プロジェクト］から新しいプロジェクトを作成する。JavaScriptを利用したいときは［JavaScript］－［Apache Cordova Apps］－［空のアプリ］、TypeScriptを利用したいときは［TypeScript］－［Apache Cordova Apps］－［空のアプリ］でプロジェクトを作成する。

ソリューションエクスプローラーにはHTMLファイルやCSSファイルが並ぶ

　プロジェクトを作成したら、ソリューションエクスプローラーを使って、どんなファイルが作成されたのかを見てみよう。［www］フォルダーを開くと“index.html”、さらに［css］フォルダーを開くと“index.css”といった、Web開発でおなじみのファイルが生成されているのがわかるハズだ。アプリの画面は“index.html”や“index.css”で作成し、アプリの動作は［scripts］フォルダーの“index.js”（TypeScriptの場合は“index.ts”）に記述していけばよい。

　さて、前回同様サンプルアプリを用意してあるので、次のURLからダウンロードしてビルドしてみよう。

※第5章、レッスン38の［ダウンロード（約7MB）］をクリックしてサンプルをダウンロードする。ダウンロードページに記されているように、ファイルのプロパティから［ブロックを解除］をクリックしてからZIPファイルを展開して利用してほしい。

　ダウンロードしたサンプルを開いたら、さっそく実行してみよう。「Visual Studio 2015」にはクロスプラットフォームのアプリを実行するために、ターゲットのOSごとに適したエミュレーターが用意されている。ターゲットを［iOS］にしたときは、Google Chromeベースの“Rippleエミュレーター”、ターゲットを［Android］にしたときは、“Rippleエミュレーター”に加えて“Androidエミュレーター”やHyper-Vベースで高速に動作する“VS Emulator”などで実行することが可能だ。また、ターゲットを［Windows］や［Windows Phone］にすればWindowsのストアアプリやWindows Phoneアプリの動作確認をすることもできる。

ターゲットに［Android］を指定した場合に選択できるエミュレーターは、Androidエミュレーター、Ripple、VS Emulatorがある

ターゲットに［iOS］を指定した場合に選択できるエミュレーターはRippleのみ、シミュレーターはMacのiOS開発環境が必要になる

VS Emulator上でAndroidアプリを実行した場合

Chrome上のRippleでiOSアプリを実行した場合

　いかがだろうか？　自分のPC上でWindowsはもちろん、つい先日発売が発表されたばかりのWindows Phone、おなじみのAndroidやiOSなどのデバイス用アプリが動くさまを見るだけでも、ワクワクしてもらえたのではないだろうか。すでにWebアプリを開発している人はもちろん、これからWebアプリを作ろうという人も、ぜひ「Visual Studio 2015」を利用してクロスプラットフォームアプリ開発にチャレンジしてみてほしい。

編集部より：書籍プレゼントのお知らせ！

　本記事で紹介した書籍『できるVisual Studio 2015 Windows/Android/iOS アプリ対応』を、抽選で5名様にプレゼントいたします。編集部注：書籍のプレゼントは締め切りました。たくさんのご応募をありがとうございました。