概要

Monaca for Visual Studio の開発及びメンテナンスは終了する予定です。現在、Visual Studio CodeでMonacaアプリを開発するための機能拡張を開発しています。詳細につきましては、サイトのお知らせ、ニュースレター等で別途お知らせ致します。

Monaca for Visual Studio は、拡張機能の 1 つです。この拡張機能を組み込めば、Microsoft Visual Studio IDE 上でも、Monaca アプリを開発できます。この拡張機能には、Monaca クラウド IDE の機能の一部を移植しているので、Monaca クラウド IDE さながらに、Visual Studio IDE ( Monaca for Visual Studio ) をご使用いただけます。

Monaca for Visual Studio

事前準備

Monaca for Visual Studio の使用前に確認する点を、次に記します。

  • Microsoft Visual Studio 2015 の Community、Professional エディション、または、それ以上 のバージョンがインストールされていること
  • 対応するプランへの加入 ( 料金プラン を参照のこと )

Monaca for Visual Studio のインストール

Monaca for Visual Studio を支障なく使用するためには、Visual Studio 上で、 Tools for Apache Corodva をインストールする必要があります。

Monaca for Visual Studio のインストール方法は、2 通りあります。

  1. Visual Studio からインストール
  2. Web からインストール

Visual Studio からインストール

  1. Visual Studio メニューから、 ツール → 拡張機能と更新プログラム を選択します。
  2. 左側の一覧から、 オンライン → Visual Studio ギャラリー を選択します。次に、右上の検索ボックスに、「 monaca 」 と入力します。
  3. Monaca for Visual Studio 2015 を選択して、ダウンロード をクリックします。ダウンロード後、インストールします。

    Onsen UI テンプレートを使用して、Visual Studio 上でプロジェクトを作成する場合には、Onsen UI Templates for Visual Studio 2015 をダウンロード・インストールします。
  4. インストール後、Visual Studio を再起動します。再起動後、Visual Studio メニュー上に MONACA メニューが追加されていることを確認します。

Web からインストール

  1. こちらのリンク ( Visual Studio ギャラリー ) から、Monaca for Visual Studio 2015 をダウンロードします。
  2. ダウンロードしたファイルを開き、インストールします。
  3. Visual Studio を起動して、メニュー上に MONACA メニューが追加されていることを確認します ( インストール時、Visual Studio を起動していた場合には、いったん再起動されます ) 。

Tools for Apache Cordova のインストール

  1. Visual Studio メニューから、 ファイル → 新規作成 → プロジェクト を選択します。
  2. インストール済み → テンプレート → JavaScript → Apache Cordova Apps を選択します。
  3. Install Tools for Apache Cordova Update 7 を選択して、OK をクリックします。

  4. インストール をクリックします。

  5. 更新処理がはじまる前に、Visual Studio をいったん終了させます。終了させない場合、次のダイアログが表示され、Visual Studio を終了させるように催促されます。

  6. 次へ ボタンをクリックします。

  7. Update ボタンをクリックします。インストールが完了するまで、しばらく待ちます。

Monaca for Visual Studio のアンインストール

Monaca for Visual Studio を完全にアンインストールする場合には、次の両方の手順を行います。

  1. Visual Studio からアンインストール
  2. Windows PC 上でアンインストール

Visual Studio からアンインストール

  1. Visual Studio メニューから、 ツール → 拡張機能と更新プログラム を選択します。
  2. インストール済み → ツール を選択します。
  3. Monaca を選択して、アンインストール を選択します。

Windows PC 上でアンインストール

  1. コントロール パネル → プログラム → プログラムのアンインストール を選択します。
  2. Monaca for Visual Studio を選択して、アンインストール をクリックします。

Monaca パネルの概要

Monaca のインストール後 ( Visual Studio IDE への組み込み後 )、Visual Studio IDE 上の Monaca パネルから、有効な Monaca アカウントを使用して、ログインします。

Monaca パネルでは、次の機能を使用できます。

デバイス上で実行

この機能は、最低限 1 つの Monaca デバッガー がホスト PC ( Visual Studio を実行中の PC ) に接続されている場合に使用できます。この機能を使用すれば、Monaca デバッガー上でプロジェクトを実行できます。Monaca for Visual Studio と Monaca デバッガー間の接続方法に関しては、こちら をご確認ください。

Monaca デバッガーと未接続 & Monaca デバッガーと接続中

ビルド設定

Monaca クラウド IDE に実装されている各プラットフォーム向けの [ ビルド設定 ] と同じように、この機能を使用すると、ビルド設定用のウィンドウが表示され、次のビルド設定を行えます ( 加えて、アプリ設定も行えます )。

ビルド

この機能を使用すると、ビルド用のウィンドウが表示され、お好みのプラットフォーム向けにプロジェクトのビルドができます ( 下のスクリーンショットを参照のこと )。

設定

Monaca デバッガーとホスト PC ( Visual Studio 上で Monaca を実行中の PC ) のペアリング時に使用する、HTTP サーバーのポートとプロキシーサーバーは、自由に設定することもできます。ペアリングの詳細は、こちら をご確認ください。

MONACA → 設定 を選択して、これらの設定を行います。

プロキシサーバーのアドレスは、次のように設定します。

  1. Basic 認証 ( 基本認証 ) をプロキシサーバーで使用している場合

    http://user:[email protected]:port
  2. Basic 認証 ( 基本認証 ) をプロキシサーバーで使用していない場合

    http://server-host:port