PhoneGap と Cordova

PhoneGap(英語) と Apache Cordova(英語) は、単一の HTML、CSS、Javascript/Typescript コードベースを使用してモバイルアプリケーションを開発し、Android(英語) を含むさまざまなモバイルプラットフォームをターゲットにするためのフレームワークです。

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Cordova プラグインをインストールして有効にします。
ターゲットプラットフォームと使用するオペレーティングシステムに応じて、エミュレータツールをダウンロードしてインストールします。Cordova(英語) の公式 Web サイトから詳細を学びましょう。
iOS(英語) プラットフォームをエミュレートするには、ios-sim(英語) および ios-deploy(英語) コマンドラインツールをグローバルにインストールします。
埋め込みターミナル（Alt+F12）を開いて、次のように入力します。
npm install -g ios-sim
npm install -g ios-deploy

PhoneGap と Cordova のインストール

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

npm install -g phonegap@latest
PhoneGap 公式サイト(英語)の詳細を参照してください。
npm install -g cordova
Cordova オフィシャル Web サイト(英語)の詳細を参照してください。

新しい PhoneGap または Cordova アプリケーションの作成

アプリケーションがまだない場合は、ボイラープレートテンプレートから PhoneGap または Cordova 固有の構造を持つ WebStorm プロジェクトを生成できます。または、プロジェクトを作成の説明に従って空の WebStorm プロジェクトを作成し、その中で PhoneGap または Cordova サポートを構成します。

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

ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Cordova を選択します。
PhoneGap または iOS アプリケーションを開発する場合でも、Cordova を選択してください。これらのフレームワークは非常に類似したアプリジェネレーターを使用しているためです。
右側のペインで、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。実行可能ファイルの場所を指定します。オペレーティングシステムとターゲットプラットフォームに応じて、これは phonegap、phonegap.cmd、cordova または cordova.cmd になります。
作成をクリックすると、WebStorm はフレームワーク固有の構造を持つアプリケーションのスケルトンを生成します。

既存の PhoneGap または Cordova アプリケーションから開始

既存のアプリケーションの開発を続行するには、WebStorm でアプリケーションを開き、必要な依存関係をダウンロードして、プロジェクトで PhoneGap または Cordova サポートを構成します。

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

設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | JavaScript | Cordova に移動します。
WebStorm が実行可能ファイルを自動的に検出しなかった場合は、実行可能ファイルの場所を確認するか、ファイルへのパスを指定します。これは、オペレーティングシステムと選択したフレームワークに応じて、phonegap、phonegap.cmd、cordova または cordova.cmd になります。
WebStorm はインストールされたバージョンを検出し、それを Cordova バージョン読み取り専用フィールドに表示します。
Cordova 作業ディレクトリフィールドで、実行するアプリケーションファイルが格納されているフォルダーを指定します。
デフォルトでは、WebStorm は自動的に platforms または www ディレクトリを除外されたものとして扱い、インデックス作成、解析、コード補完中に無視します。コンテンツルートのフォルダーの設定を参照してください。
このデフォルトの動作を維持するには、作業ディレクトリを自動的に除外する ('platforms'、'www' for ionic) チェックボックスが選択されていることを確認してください。

プロジェクトのセキュリティ

WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

次のいずれかのオプションを選択します。

セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。
開かない : この場合、WebStorm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

PhoneGap および Cordova アプリケーションの実行

PhoneGap および Cordova アプリケーションは、専用の実行 / デバッグ構成に従って実行されます。

実行構成の作成

実行 | 実行構成の編集に進みます。開いた構成の編集ダイアログで、ツールバーのをクリックし、コンテキストメニューから Cordova を選択します。
開いている実行 / デバッグ構成: Cordova ダイアログで、次を指定します。
1. 設定の名前。
2. 実行可能な Cordova フィールドで、オペレーティングシステムと選択したフレームワークに応じて、実行可能ファイル phonegap、phonegap.cmd、cordova または cordova.cmd の場所を指定します。
3. Cordova 作業ディレクトリフィールドで、実行するアプリケーションファイルが格納されているフォルダーを指定します。
4. コマンドリストから、実行するコマンドを選択してください。リストの内容は、実際に使用されているフレームワーク、つまり実行可能な Cordova フィールドで指定されている実行可能ファイルによって異なります。利用可能なオプションは以下のとおりです。
  - PhoneGap の場合:
    - emulate
    - run
    - prepare
    - serve
    - remote build
    - remote run
    PhoneGap 特有のコマンドのリストについては、PhoneGap CLI(英語) を参照してください。
  - Cordova の場合:
    - emulate
    - run
    - prepare
    - 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 がインストールされていることを確認してください。始める前にを参照してください。

アプリケーションの実行

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

最終更新日: 2024 年 11 月 20 日

関連ページ：

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

プロジェクトを作成

WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用す...

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...

プロジェクト構造の設定

WebStorm では、コンテンツは現在作業しているファイルのコレクションであり、サブフォルダーの階層に編成されている可能性があります。プロジェクトの最上位フォルダーは、そのコンテンツルートです。プロジェクトの一部として任意のフォルダーを追加できます。これを行うには、複数のコンテンツルートで作業するに従って、このフォルダーをディレクトリページの新しいコンテンツルートとして追加します。コンテンツルートのフォルダーの設定：コンテンツルート内で、WebStorm は、編集したソースコードを含むフォル...

プロジェクトのセキュリティ

潜在的なセキュリティリスクを防ぐために、WebStorm では、プロジェクトのソースが不明な場合にプロジェクトをどのように操作するかを決定できます。WebStorm では、実行されるタスク、File Watchers、または webpack 構成について警告し、信頼できるソースを構成できます。不明なソースからプロジェクトを開く：WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定でき...

いいえ

WebStorm は、コードスキャフォールディング、モジュール境界の強制、自動更新、キャッシュとディストリビューションを備えた高度な CI 機能のためのツールが組み込まれており、モノレポ向けに最適化されたいいえビルドシステムと統合されます。WebStorm は、スクリプトの実行とデバッグを行うための専用の Nx コンソールツールウィンドウといいえ実行 / デバッグ構成を提供します。テストに Karma を使用している場合は、Karma 実行 / デバッグ構成で Nx パッケージを Karma パッケ...