PhoneGap と Cordova

1. コンピューターに Node.js(英語) があることを確認してください。

2. 設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。

3. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブに Cordova プラグインをインストールして有効にします。

4. ターゲットプラットフォームと使用するオペレーティングシステムに応じて、エミュレータツールをダウンロードしてインストールします。 Cordova(英語) の公式 Web サイトから詳細を学びましょう。

5. iOS(英語) プラットフォームをエミュレートするには、 ios-sim(英語) および ios-deploy(英語) コマンドラインツールをグローバルにインストールします。

   コマンドラインシェルまたは組み込み ターミナル （Alt+F12 ）を開いて、入力してください：

   npm install -g ios-sim

   npm install -g ios-deploy

コマンドライン シェルまたは埋め込まれた ターミナル （Alt+F12 ）で、次のいずれかのコマンドを入力します：

• npm install -g phonegap@latest

  PhoneGap 公式サイト(英語)の詳細を参照してください。

• npm install -g cordova

  Cordova オフィシャル Web サイト(英語)の詳細を参照してください。

テンプレートからアプリケーションを作成する

1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 プロジェクト ダイアログが開きます。

2. 左側のペインで、 Cordova を選択します。

3. 右側のペインで、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。 実行可能ファイルの場所を指定します。 オペレーティングシステムとターゲットプラットフォームに応じて、これは phonegap 、 phonegap.cmd 、 cordova または cordova.cmd になります。

4. 作成 をクリックすると、WebStorm はフレームワーク固有の構造を持つアプリケーションのスケルトンを生成します。

プロジェクトで PhoneGap または Cordova を構成する

1. 設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript | Cordova に進みます。

2. WebStorm が実行可能ファイルを自動検出しなかった場合は、実行可能ファイルの場所を確認するか、そのパスを指定します。 これは、オペレーティングシステムと選択したフレームワークに応じて、 phonegap 、 phonegap.cmd 、 cordova または cordova.cmd になります。

   WebStorm はインストールされているバージョンを検出し、それを Cordova バージョン 読み取り専用フィールドに表示します。

3. Cordova 作業ディレクトリ フィールドで、実行するアプリケーションファイルが格納されているフォルダーを指定します。

4. デフォルトでは、WebStorm は platforms または www ディレクトリを自動的に 除外として扱い、プロジェクトの分析、解析、コード補完時に無視します。詳細は コンテンツルートのフォルダーの設定を参照してください。

   このデフォルトの動作を維持するには、 作業ディレクトリ ('platforms'、'www' for ionic) を自動的に除外する チェックボックスが選択されていることを確認してください。

実行構成の作成

1. 実行 | 実行構成の編集 に進みます。 開いた 構成の編集 ダイアログで、ツールバーの をクリックし、コンテキストメニューから Cordova を選択します。

2. 開いている Run/Debug Configuration: Cordovaダイアログで、次を指定します：

   1. 設定の名前。

   2. Cordova 実行可能ファイル​ フィールドで、オペレーティングシステムと選択したフレームワークに応じて、実行可能ファイル phonegap 、 phonegap.cmd 、 cordova または cordova.cmd の場所を指定します。

   3. Cordova 作業ディレクトリ フィールドで、実行するアプリケーションファイルが格納されているフォルダーを指定します。

   4. コマンド リストから、実行するコマンドを選択してください。 リストの内容は、実際に使用されているフレームワーク、つまり Cordova 実行可能ファイル​ フィールドで指定されている実行可能ファイルによって異なります。 利用可能なオプションは次のとおりです：

      • PhoneGap の場合:

        • emulate

        • 実行

        • 準備

        • serve

        • remote build

        • リモート実行

        PhoneGap 特有のコマンドのリストについては、 PhoneGap CLI(英語) を参照してください。

      • Cordova の場合:

        • emulate

        • 実行

        • 準備

        • serve

        Cordova 特有のコマンドのリストについては、 Cordova CLI(英語) を参照してください。

   5. プラットフォーム リストから、アプリケーションが対象とするプラットフォームを選択します。

      利用可能なオプションは次のとおりです：

      • Android（アンドロイド）​

      • iOS（アイオーエス）​ このプラットフォームをエミュレートするには、 ios-sim(英語) および ios-deploy(英語) コマンドラインツールをグローバルにインストールします。

        コマンドラインシェルまたは組み込み ターミナル （Alt+F12 ）を開いて、入力してください：

        npm install -g ios-sim

        npm install -g ios-deploy

      • ブラウザー

      • amazon-fireos

      • firefoxos

      • blackberry10

      • ubuntu

      • wp8

      • windows

      • windows8

      プラットフォームガイド(英語)のターゲットプラットフォームの詳細を参照してください。

   6. Cordova の場合、アプリケーションを実行する対象の仮想または物理 Android デバイスを指定します。 ターゲットを指定する チェックボックスを選択し、リストから必要なデバイスを選択します。

      リストには、マシンに現在構成されているすべての仮想デバイスと物理デバイスが表示されます。 Cordova オフィシャル Web サイト(英語)からのエミュレーターのセットアップについて詳しく学びましょう。

      WebStorm に次のエラーメッセージが表示される場合： パスに ios-sim が見つかりません、 ios-sim がインストールされていることを確認し、 始める前に を参照してください。

アプリケーションの実行

• メインツールバーのリストから新しく作成した実行構成を選択し、 をクリックします。