HTML5 Enterprise Seminar 2017レポート（5）「HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発」

先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は日本マイクロソフト株式会社 エバンジェリスト物江 修 氏による「HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発」の内容を紹介します。

本日様々な方に語ってもらっていました、HTML5を使ってスマートフォンアプリを開発していこうという話をします。この話の中でApache Cordovaというソフトウェアを使うのですが、さらにそれを快適に使うためのVisual StudioのCordova開発環境、そして検証環境についてお話しします。

まずApache Cordovaについてです。Apache CordovaとはHTMLとJavaScriptを使ってスマートフォンやタブレットアプリを開発できるフレームワークになります。Webブラウザで実行するのに比べて、プラットフォームが持っているリソース（例えば予定表やカメラ、連絡先、バイブレーションなど）へアクセスできるようになります。そして作成したソフトウェアはスマートフォンアプリになりますので、アプリストアから配布できるようになります。

さらに大きなメリットとしてシングルコード、一つのコードでAndroidやiOSといった複数のプラットフォームに対応させることができます。通常、AndroidであればJava、iOSであればObjective-CやSwiftを使ってそれぞれのプラットフォーム向けに言語を分けなければなりませんが、Apache Cordovaであれば使い慣れたWeb技術だけで両プラットフォームに対応したアプリが開発できます。

Apache Cordovaは元々PhoneGapと呼ばれていました。ニトビソフトウェアという会社がオープンソースで開発していましたが、2010年Adobe社が買収しました。PhoneGapは今もAdobe社が保有していますが、そのソースコードをApache財団に提供し、Apache Cordovaとして開発が続けられています。Cordovaを使うとiOS/Android/Windowsなどのアプリケーションが開発できます。

PhoneGapではいわゆるハイブリッドアプリと呼ばれる仕組みになっています。WebViewを使ったHTML/JavaScriptで作られたWebアプリケーションをネイティブコードでラッピングし、動作します。さらにプラグインと呼ばれるネイティブコードが書かれた仕組みを使うことによってプラットフォームの持つ様々なリソースにアクセスすることができます。昔はパッケージドアプリと呼ばれる、アプリ内にあるファイルしか呼び出せなかったのですが、最近ではホスティッドアプリというWebサイトで提供されているコードも使えるようになっています。これによってメンテナンスをWebサイト側だけにまとめられるようになっています。

続いてApache Cordovaの開発に際してVisual Studioがなぜ良いのかという話をしていきたいと思います。Visual Studioはマイクロソフトがリリースしている統合開発環境になります。かつてはWindowsプラットフォーム上で動作するアプリやドライバー、Webシステムなどを開発するのに用いられてきましたが、現在はiOSやAndroidアプリ開発などマルチプラットフォームで動作するソフトウェアを開発できるようになっています。さらに最近では.NET Coreをオープンソース化したことで、macOSやLinux上でも.NETアプリが実行できるようになっています。

そしてCordovaに対してですが、Visual Studio向けにTools for Apache Cordovaを提供しています。これはCordovaビルド環境、プロジェクトテンプレート、シミュレータ、macOS用リモートエージェントなどが合わさったツールになります。つまりTools for Apache Cordovaを使えばCordova向けの開発がほぼまかなえるようになっています。

一番大きいのはCordovaビルド環境ではないでしょうか。通常はNode.jsやJava、Android SDK、Cordovaのインストールが必要になります。さらにそれぞれのライブラリについて、アップデートを管理しなければなりません。Visual Studioを使うと、これらのインストールをGUI上でまとめて行ってくれるようになります。アップデートの管理もVisual Studio上でまとめて行えます。

どういったものがビルドできるかと言いますと、Android 2.33+（4.4推奨）、iOS6以上、Windows8/8.1、Windows Phone 8/8.1、Windows 10となっています。ビルドはAndroidまたはWindowsアプリ、デバッグについてはAndroid 4.4以上、Windows 10、Windows 8/8.1（Phone含む）に対して行えます。最新の環境に対応していると言えます。iOSについてはmacOSでしかビルドできないという問題はありますが、Cordova向けの開発では一つの環境に対してきちんとデバッグを行っておけば、他の環境に対しても殆ど問題になることはありません。

エミュレータについては、AndroidはHyper-Vを使ったエミュレーション機能に対応しており、実際の端末に近いテストが行えます。もっと軽い動作確認用としてはRippleという仕組みを使ったエミュレータも用意しています。iOS向けにはリモートエージェントをmacOSにインストールすると、Visual StudioからmacOS上のiOSシミュレータに信号を送ってコントロールできるようになります。従ってmacOSにWindowsの仮想環境をインストールしている場合、一台でVisual Studioを使った開発が実現できるようになります。

後はHTML、JavaScriptさらにプラグインに関しては優れたコード補完が組み込まれています。JavaScriptは大文字小文字を区別しますし、存在しないプロパティに対してアクセスしてもエラーにはなりません。そうしたミスを防ぐためにもコード補完が役立ちます。

さらにCordovaアプリからスマートフォンやタブレットのハードウェアリソースにアクセスするためにはプラグインを使います。このプラグインを使うためにはXMLを編集する必要があるのですが、Visual StudioだとGUIで設定ができます。かつプラグインのIDやGitリポジトリから取得できるので開発生産性が高く、ミスが少ないのが利点です。

そしてここから実際の開発を行うデモを紹介してくれました。今回は特に既存のSPA（シングルページアプリケーション）からスマートフォンアプリにどう変換するかについて重点が置かれていました。

Visual Studioを使うと既存のWeb資源を簡単にスマートフォンアプリに展開できますのでぜひ試してみてください。

最後に検証環境について紹介します。まずChromiumをベースにしたRippleという環境があります。さらにHyper-Vを使ったエミュレータで、こちらはハードウェアをエミュレートするのでより高度な検証が可能です。さらにアシアル株式会社が提供するMonacaではMonacaデバッガーというアプリがあります。Monacaではビルド環境をクラウドで提供しており、WindowsでもiOSアプリの開発、ビルドができるようになっています。Monacaデバッガーでは開発者ライセンスを持っていなくとも、Visual Studioで作ったコードを実機で動かせるようになります。さらにWindows Phone用のエミュレータも用意されています。このエミュレータではSDカードへのアクセス、位置情報、ネットワークの状態、バッテリーなど様々な状態を変更してテストを行えるようになっています。

初期では2種類しかインストールされていませんが、Visual Studioエミュレータ for Androidというソフトウェアを起動すると、様々なエミュレータが表示されます。Androidのバージョンや機種ごとにダウンロードして試すことができます。

Visual Studioを使いますとApache Cordovaを使ったスマートフォンアプリが簡単に行えるようになります。Apache Cordovaは本日見てきた様々なセッションの中で語られていたHTML5を使ったアプリケーションをWebブラウザだけではなく、スマートフォンのアプリとして幅広く使えるようになります。例えば業務アプリなど、スマートフォン向けのちょっとしたアプリを作る際にも、高度なプログラミング言語を覚える必要なく、すでに知っているWeb技術で開発できるようになります。

本セッションの資料はSlideShareで公開されています。こちらもぜひご覧ください。