Muiti-Device Hybrid Apps を使った Android、iOS アプリの開発


Professional エディション以上の Visual Studio 2013 に、Visual Studio 2013  Update 2 を適用し、Muiti-Device Hybrid Apps アドインをインストールすることにより、Apache Cordove を使用した Android、iOS 用アプリの開発が可能になります。

今回は、この Muiti-Device Hybrid Apps アドインを使った Android、iOS アプリの開発方法について紹介します。

なお、Muiti-Device Hybrid Apps アドインについてご存じない方は、この記事の前に以下の記事読まれることをお勧めします

Visual Studio 2013 で Android、iOS のアプリを開発するためのアドイン
http://blogs.msdn.com/b/osamum/archive/2014/06/16/visual-studio-2013-android-ios.aspx

Visual Studio 2013 への Multi-Device Hybrid Apps アドインのインストール
http://blogs.msdn.com/b/osamum/archive/2014/06/26/visual-studio-2013-multi-device-hybrid-apps.aspx

Muiti-Device Hybrid Apps プロジェクトの作成

Visual Studio 2003 で Cordove を使用した開発を行う Muiti-Device Hybrid Apps プロジェクトを作成するには以下の手順を実行します。

  1. Visual Studio 2013 のメニュー [ファイル] – [新規作成] – [プロジェクト] を選択します。

  2. [新しいプロジェクト] ダイアログボックスが表示されるので、同ダイアログボックス左のテンプレートツリーより[テンプレート] – [JavaScript] – [Muiti-Device Hybrid Apps ] を選択します。

    image

            (作成するプロジェクトを選択するダイアログボックス)

  3. 同ダイアログ中央のリストより、「Blank App(Apache Cordova)」を選択します。

    image

    (Apache Cordova用プロジェクト)

  4. ダイアログボックス下部の [参照] ボタンをクリックし、プロジェクトを保存する場所のパスをスペースや日本語を含まないものに変更し、[OK] ボタンをクリックします。

  5. Visual Studio 2013 の IDE にプロジェクトがロードされるので、ウィンドウ右の [ソリューションエクスプローラー] から index.html をダブルクリックします。

    image

    (ソリューションエクスプローラーでの index.html の選択)

  6. IDE のエディタに index.html の内容が展開されるので、</body> の上に一行あけます。

    「h1」とタイプし、[Tab] キーを押下すると div タグが挿入されるので、同タグ内に 「Hello World」と記述します。
    image

  7. ツールバーの実行ボタン横のリストから「Ripple – Nexus (Galaxy)」が選択されていることを確認し、クリックします。

    image

    (実行ボタンのデバイスリスト)

     

  8. Google Chrome が起動し、ウィンドウ内の Ripple エミュレーターに実行結果が表示されます。

    image

    (アプリの実行結果)

  9. 実行を終了するには Visual Studio 2013 のツールバー上の [デバッグの停止] ボタンをクリックします。

    image

    ([デバッグの停止]ボタン)

     

対象プラットフォームの切り替え

Muiti-Device Hybrid Apps プロジェクトの既定の対象プラットフォームは Android OS となっています。

ここでは、対象のプラットフォームを iOS に変更する手順を例に紹介します。

  1. Visual Studio 2013 のメニュー [ビルド] – [構成マネージャー] をクリックします。

  2. [構成マネージャー]  ダイアログボックスが表示されるので、[アクティブ ソリューション プラットフォーム]ドロップダウンリストから「iOS」を選択し、[閉じる] ボタンをクリックします。

    image

    (開発対象プラットフォームの一覧)

  3. 設定が完了するとツールバーの実行ボタン横のリストに iOS デバイスが表示されるので、任意のデバイスをクリックして実行します。

    image

    (テスト可能な iOS デバイス一覧)

     

  4. Google Chrome が起動し、ウィンドウ内の Ripple シミュレーターに実行結果が表示されます。
    なお、Ripple エミュレーターは、Mac OS 上で動作する iOS シミュレーターほど正確ではありませんので、アプリを提出する前にはかならず Mac OS 上の iOS エミュレーターか、できれば実機でテストすることをお勧めします。
    Visual Studio 2013 から、Mac OS 上の iOS シミュレーターにアプリを転送してリモート実行する方法については、以下のドキュメントの Remote Build & Simulation Agent for iOS [Optional] をご覧ください。  

    Document for Multi-Device Hybrid Apps for Visual Studio
    http://go.microsoft.com/fwlink/?LinkID=39771

 

まとめ

今回は Muiti-Device Hybrid Apps アドインを使用して Android、iOS 向けのアプリを開発する手順について紹介しました。

くりかえしになりますが、Windows ストア アプリもよろしくお願いいたしますね。

Real Time Analytics

Clicky

Comments (0)

Skip to main content