特集

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

無料のVisual Studioで始めるタッチアプリ作成術 後編

 前編に引き続き、「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」を利用してクロスプラットフォームアプリ開発にチャレンジしてみてほしい。

Xamarinを使えばC#でスマートフォンのアプリが作れる

 「Visual Studio 2015」では、“Xamarin”と呼ばれるモバイル環境向けのフレームワークにも対応している。Xamarinは、iOSやAndroidなどで.NET環境を実現するためのフレームワークで、C#を使ってiOSやAndroidデバイス向けのアプリを作ることができるものだ。つまり、iOS対応のアプリを作るためにObjective-Cを覚えなくてもいいし、Android対応のアプリを作るためにJavaを勉強する必要もない、日ごろ慣れ親しんだ開発環境と言語を使って、それぞれのプラットフォーム向けのアプリを作れるようになるのだ。「Visual Studio 2015」でXamarinを利用したプログラミングをするためには、Businessエディション以上のXamarinライセンスが必要になるが、興味があるならぜひとも試して欲しい。

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

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

【定価】
1,800円+税
【発売日】
2015/05/28
【ページ数】
160
【サイズ】
B5変形判
【著者】
広野 忠敏 著/岩永 信之 著/できるシリーズ編集部 著
【ISBN】
978-4-8443-3821-5

目次

第1章 アプリを作る準備をしよう

レッスン1 Visual Studioってなに?

レッスン2 Visual Studioで作れるアプリとは

レッスン3 Visual Studioに必要なものを確認しよう

レッスン4 Visual Studioをインストールするには

第2章 Visual Studioでアプリを動かそう

レッスン5 Visual Studioを起動するには

レッスン6 Visual Studioの画面構成を確認しよう

レッスン7 アプリのファイルを開くには

レッスン8 アプリを試しに動かしてみるには

レッスン9 Visual Studioの作業を終了するには

第3章 Windowsタブレットアプリを作ろう

レッスン10 タブレットアプリを作るには

レッスン11 新しいプロジェクトを作るには

レッスン12 アプリで使う画像を用意するには

レッスン13 アプリの画面全体に画像を表示させるには

レッスン14 プロジェクトを保存するには

レッスン15 タップすると画像が変わるようにするには

レッスン16 タップすると用意した順に画像が変わるようにするには

レッスン17 タップすると音声が鳴るようにするには

レッスン18 画像と音声のデータを定義するには

レッスン19 定義したデータを使って画像と音声を変えるには

レッスン20 一定時間たったら元の表情に戻すには

レッスン21 タップ位置によって得点を変えるには

レッスン22 ゲーム開始のボタンを追加するには

レッスン23 ゲームオーバーの処理を追加するには

レッスン24 メソッドを抽出してコードを整理するには

レッスン25 スプラッシュスクリーンとタイルを設定するには

レッスン26 Windowsストアに公開するには

レッスン27 Windows Phoneアプリを作るには

第4章 アプリの不具合を修正しよう

レッスン28 アプリの動作を確認して修正するには

レッスン29 アプリの動きを観察するには

レッスン30 任意の位置でアプリを停止させるには

レッスン31 変数やプロパティを確認するには

レッスン32 コードを一行ずつ実行するには

第5章 AndroidやiOSのアプリを作ってみよう

レッスン33 AndroidやiOSアプリを作るには

レッスン34 Androidアプリのプログラミングを始めるには

レッスン35 Androidアプリを試しに動かすには

レッスン36 Playストアに申請するには

レッスン37 iOSアプリのプログラミングを始めるには

レッスン38 iOSアプリを試しに動かすには

レッスン39 App Storeに申請するには

付録 Visual StudioからGitHubを使う

用語集

索引

(広野 忠敏)