Multi-Device Hybrid Apps for Visual Studio CTP1.1 を試す

Microsoft Visual Studio は Cordova をサポートしています。といっても、まだ CTP (Community Technology Preview) ですけど。というわけで、 Multi-Device Hybrid Apps (Preview) を試してみました。

モノは Multi-Device Hybrid Apps for Visual Studio CTP1.1 です。どうでもよいことですが、これは "Multi-Device Hybrid Apps for Visual Studio" の CTP です。最初、 "Multi-Device Hybrid Apps" for "Visual Studio CTP" なのかと思ってました。 Visual Studio 2014 CTP にしか使えないのかなーって。でもそんなことはなく Visual Studio 2013 で使えます。そんな勘違いするのは、まぁ居ないかもだけれど。

CTP 版ですが (だから?) 、 PDF で 59 ページのドキュメントが付いてきます。さらっとでも目を通しておいたほうが良いかと。

まず、 Windows 8.1 に Visual Studio 2013 Update 2 (Professional, Premium, Ultimate) をインストールしたものが必要です。また、 Visual Studio 2013 には、 "Tools for Maintaining Store apps for Windows 8" と "Windows Phone 8.0 SDK" もインストールしておく必要があります。入っていなかったら、コントロールパネルの「プログラムと機能」で、 Visual Studio の変更を実行すれば追加できるそうです。 Express 版では動かないのかしらー (未確認) 。

インストールするか聞かれる third party softoware

Node.js

既にインストールしているのであれば、再度インストーする必要はありません。 PATH は通しておく必要があります。 C:\Program Files\nodejs と %APPDATA%\npm あたり。 PATH の設定は、 Node.js のインストーラーがよろしくやってくれるたはずです。

Apache Ant

C:\apache-ant-1.9.3 あたりにインストールされ、環境変数 ANT_HOME にセットされます。

既にインストールしているのであれば、再度インストーする必要はありません。 PATH は通しておく必要があります。

Oracle Java JDK 7

32bit 版がインストールされます。

既にインストールしているのであれば、再度インストーする必要はありません。環境変数 JAVA_HOME を設定し、また PATH は通しておく必要があります。

Android SDK

%LOCALAPPDATA%\Android\android-sdk にインストールされます。要は Get the Android SDK の DOWNLOAD FOR OTHER PLATFORMS にある SDK Tools Only の installer_rxx.x.x-windows.exe が使われます。このインストールディレクトリーを環境変数 ADT_HOME にセットし、 %ADT_HOME%\tools と %ADT_HOME%\platform-tools を PATH に追加してくれます。

既にインストールしているのであれば、再度インストーする必要はありません。 tools と platform-tools には PATH を通しておく必要があります。

Google Chrome

既にインストールされている場合は、インストールされないようです。入っているのが Canary だったりすると、入るかも。

自分は dev channel の 64bit 版 Chrome を使っていますが、特に問題はないみたい。

Git Command Line

msysGit が入ります。

既にインストールしているのであれば、再度インストーする必要はありません。 PATH は通しておく必要があります。

SQLite for Windows Runtime

Visual Studio 用の SQLite がインストールされます。 Visual Studio の Tools -> Extension and Updates... で確認。

iTunes

iOS 版のバイナリーを Visual Studio から iOS デバイスにデプロイするのに使うらしいです。その予定がないのであれば、インストールする必要はありません。 iTunes 入れちゃうと Bonjour とか Apple Mobile Device Support とか Apple Application Support とかも入っちゃいますし。

最低限必要なもの

Android の開発環境が入っていて、 Git も普通に使っていて、 Node.js も普通に使っているのであれば、最低限 SQLite for Windows Runtime と Ant あたりを入れればよさそうです。

プロジェクトを作って、 F5

Visual Studio を起動して FILE -> New -> Project... すると、プロジェクトテンプレートの JavaScritp と TypeScript の下に Multi-Device Hybrid App というのが増えています。

使用している third party softoware の関係で、プロジェクトの path にスペースが含まれると怒られます。なので、 path にスペースが入っていないところにプロジェクトを作ります。

試してないけど、英字/数字以外が入っていると問題出るかも。ユーザーアカウントが日本語とか。

ツールバーで、 Debug Target: Ripple - Nexus S, Solution Configurations: Debug, Solution Platforms: Android あたりを選択して F5 実行。初回実行時に、 Node.js のパッケージがぞろぞろとダウンロード/インストールされるので、じっくり待ちます。ほどなく、新しく Chrome が立ち上がって Ripple Emulator が起動します。 Visual Studio の DOM Explorer　で中を覗くことができます。

Debug Target で Android Emulator を選べば、 Ripple ではなくの Android の普通のエミュレーターも使えます。同じく DOM Explorer で覗けたりします。

Android ではなく iOS でも、ってなこともできますが、 OS X Maveriks が乗った Macintosh が必要です　(あとデバイスで動かすなら iOS Developer Program のアカウントも必要)。 Xcode 5.1 入れて、 Xcode command line tools 入れて、 Node.js 入れて、 npm で vs-mda-remote 入れて、 npm で ios-sim 入れて、リモートビルドができます。が、リモートデバッグは (現時点では) できないようです。

他に、 Solution Platforms で Windows を選ぶと、 Windows Store アプリ版のビルド/デバッグが可能になります。 Windows Phone を選ぶと、何やらエラーが出ちゃうんですが、原因は調べてませんです。ドキュメントに何か書いてあったっけか。

結語的な何か

ともあれ、 Visual Studio で Cordova ベースのアプリ開発がさっくり行えるのはうれしいかも。