Visual Studio 2013でCordovaでHelloWorldを作ってみよう。 (Multi-Device Hybrid Apps)

はじめに

Visual Studio 2013 Update2からApache Cordovaを使用して、

Android/iPhone/Windows Phoneで同一のHTML5ベースのプログラムで動作するローカルアプリを作成できます。

ローカルアプリなので、各モバイル端末のセンサー、カメラ等も使用できます。各種モバイル端末の差異はフレームワークが吸収してくれます。

さらに、Visual Studioなら強力なデバッガーTypeScriptを使用して、JavaScriptC#のように安全で簡単に開発できます。

※HTML5ベース開発なので、HTML+CSS(Twitter Bootstrap等), JavaScript(JQuery等)使用できます。

※実行するまでに、AndroidのパスやAndroid SDKのインストール等ですこしはまりました!!

 

注意 (2014/07/06):プロジェクトがクラッシュしてVisual Studioが再起動する場合

現在Hybrid App CTP1.1がプレビューなので、しかたないのですが。ツールの相性などがあるようです。

Visual Studio 2013 Pro Update2 + Multi-Device Hybrid Apps (Preview)に

Web Essentials 2013 for Update 2をインストールするとCordovaプロジェクト起動時にVisual Studioがクラッシュして再起動します。

以下の人と同じ症状

Crash in the CTP when opening “Blank App (Apache Cordova)” with Web Essentials for Update 2

対策

とりあえず、現時点では、Web Essentail アンインストール

[Visaul Studio2013][menu][Extensions and Updates] ※英語Verのメニュー

Web Essentialsのアンインストールをする。

WebEssentail

概念図

Cordova0020

 

Building Multi-Device Apps with the New Visual Studio Tooling for Apache Cordova

TechEd 2014 の紹介ビデオ

iPhone/Android での写真やローケションアプリの作成や、VSだけでなくCordovaでできることがわかります。

Androidエミュレータでの実行結果

以下のようにAndroidアプリ(HelloWorld)がVisaulStudioで実行/デバックできます。

  • Cordova0110

Cordovaの解説(MSDNより)

HTML5だけではなく、何故ハイブリッドアプリが必要なのか?を分かりやすく書いてあります。

http://msdn.microsoft.com/ja-jp/magazine/hh975345.aspx

Apache Cordova の概要

JavaScript と HTML5 コンテンツを備えたパブリックな Web ページを作成し、ユーザーをホスティング先の URL にリダイレクトすれば、HTML5 ベースのモバイル アプリを作成できます。しかし、この方法にはいくつか問題があります。最初の問題は、オンライン マーケットプレースやオンライン ストアを利用する配布モデルです。作成した Wep アプリをホストする URL をマーケットプレースへ提出することはできません。そのため、このアプリから収益を上げる方法が問題です。もう 1 つは、スマートフォンのハードウェアにアクセスする方法が問題です。スマートフォン上の連絡先、通知、カメラ、センサーなどにアクセスするための幅広いサポートを提供するブラウザー API はありません。Apache Cordova (以下、簡潔にするため Cordova とします) は、こうした問題を解決する無償のオープン ソース フレームワークです。

Helloworldを作ってみよう。

1. インストール

2. とりあえず新規にTypeScriptプロジェクトを新規作成してみる。

※JavaScriptのプロジェクトでもよい。

  • menu-[ファイル]-[新規作成]-[プロジェクト]
  • [テンプレート]-[TypeScript]-[Multi-Device Hybrid Apps]
  • Cordova0030

3. 実行してみる。(F5を押してもよい)

  • 赤枠の[Ripple – Nexus(Galaxy)]をクリックして実行する
  • Cordova0040

4. なぜか以下のエラーになる

  • コマンド “”C:\Users\snoro\AppData\Roaming\npm\node_modules\vs-mda\vs-cli” prepare –platform Android –configuration Debug –projectDir . –projectName “BlankCordovaApp1″” はコード
  • C:\Users\snoro\.cordova\lib\android\cordova\3.4.0\bin\create.bat: Command failed with exit code 8
  • An error occurred while listing Android targets
  • Cordova0050

5. Androidのパスを通す

Androidのパスを通せとみつけたので、通してみる

  • JAVA_HOME(わたしの環境は既に自動的に設定済みでした)
    • C:\Program Files (x86)\Java\jdk1.7.0_55
  • ADT_HOME
    • C:\Users\snoro(自分のPCにあわせてください)\AppData\Local/Android/android-sdk
    • Cordova0060
  • ANT_HOME(わたしの環境は既に自動的に設定済みでした)
    • C:\apache-ant-1.9.3
  • PATH: 環境変数(Sypstem Path)を編集する。
    • ;%ADT_HOME%\tools;%ADT_HOME%\platform-tools
    • Cordova0070

6. パソコンを再起動する。

7. 再度、実行してみる。(F5を押してもよい)、

エラー内容が変わった。

  • コマンド “”C:\Users\snoro\AppData\Roaming\npm\node_modules\vs-mda\vs-cli” prepare –platform Android –configuration Debug –projectDir . –projectName “BlankCordovaApp2″” はコード 8 で終了しました。
  • Please install Android target 19 (the Android newest SDK). Make sure you have the latest Android tools installed as well. Run “android” from your command-line to install/update any
  • C:\Users\snoro\.cordova\lib\android\cordova\3.4.0\bin\create.bat: Command failed with exit code 8
  • Cordova0080

8. Android SDKのインストールする。

Please install Android target 19 (the Android newest SDK)」とあるのでAndroid SDK(API 19)インストールする。

  • Android SDK Managerを起動する。
  • パスが通っているので、コマンドラインから [Android]とすると起動してくる。
  • Android SDK(API 19)をインストールする。
  • Cordova0090

9. 再々度、実行してみる。(F5を押してもよい)、

  • VIsual Studio でうまくコンパイルがされて実行される。
  • Windows ファイアーウォールで通信がブロックされるので、アクセス許可をする。
  • Cordova0100
  • HelloWorldが表示されました!!
  • Cordova0110

参考文献

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です