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 固有の構造を持つ PhpStorm プロジェクトを生成できます。または、空の PhpStorm プロジェクトを作成し、その中で PhoneGap または Cordova サポートを構成します。
テンプレートからアプリケーションを作成する
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューから を選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Cordova を選択します。
右側のペインで、プロジェクト名と、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。実行可能ファイルの場所を指定します。オペレーティングシステムとターゲットプラットフォームに応じて、これは phonegap、phonegap.cmd、cordova または cordova.cmd になります。
作成をクリックすると、PhpStorm はフレームワーク固有の構造を持つアプリケーションのスケルトンを生成します。
既存の PhoneGap または Cordova アプリケーションから開始
既存のアプリケーションの開発を続行するには、PhpStorm でアプリケーションを開き、必要な依存関係をダウンロードして、プロジェクトで PhoneGap または Cordova サポートを構成します。
プロジェクトで PhoneGap または Cordova を構成する
設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
PhpStorm が実行可能ファイルを自動的に検出しなかった場合は、実行可能ファイルの場所を確認するか、ファイルへのパスを指定します。これは、オペレーティングシステムと選択したフレームワークに応じて、phonegap、phonegap.cmd、cordova または cordova.cmd になります。
PhpStorm はインストールされたバージョンを検出し、それを Cordova バージョン読み取り専用フィールドに表示します。
Cordova 作業ディレクトリフィールドで、実行するアプリケーションファイルが格納されているフォルダーを指定します。
デフォルトでは、PhpStorm は自動的に platforms または www ディレクトリを除外されたものとして扱い、インデックス作成、解析、コード補完中に無視します。コンテンツルートのフォルダーの設定を参照してください。
このデフォルトの動作を維持するには、作業ディレクトリを自動的に除外する ('platforms'、'www' for ionic) チェックボックスが選択されていることを確認してください。
プロジェクトのセキュリティ
PhpStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、PhpStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、PhpStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PhpStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、PhpStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が使用可能になることを意味します。
開かない : この場合、PhpStorm はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
PhoneGap および Cordova アプリケーションの実行
PhoneGap および Cordova アプリケーションは、専用の実行 / デバッグ構成に従って実行されます。
実行構成の作成
構成の編集ダイアログで、ツールバーの
に進みます。開いたをクリックし、コンテキストメニューから Cordova を選択します。
開いている実行 / デバッグ構成: Cordova ダイアログで、次を指定します。
設定の名前。
実行可能な Cordova フィールドで、オペレーティングシステムと選択したフレームワークに応じて、実行可能ファイル phonegap、phonegap.cmd、cordova または cordova.cmd の場所を指定します。
Cordova 作業ディレクトリフィールドで、実行するアプリケーションファイルが格納されているフォルダーを指定します。
コマンドリストから、実行するコマンドを選択してください。リストの内容は、実際に使用されているフレームワーク、つまり実行可能な Cordova フィールドで指定されている実行可能ファイルによって異なります。利用可能なオプションは以下のとおりです。
PhoneGap の場合:
emulate
run
prepare
serve
remote build
remote run
PhoneGap 特有のコマンドのリストについては、PhoneGap CLI(英語) を参照してください。
Cordova の場合:
emulate
run
prepare
serve
Cordova 特有のコマンドのリストについては、Cordova CLI(英語) を参照してください。
プラットフォームリストから、アプリケーションが対象とするプラットフォームを選択します。
利用可能なオプションは以下のとおりです。
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
プラットフォームガイド(英語)のターゲットプラットフォームの詳細を参照してください。
Cordova の場合、アプリケーションを実行する対象の仮想または物理 Android デバイスを指定します。ターゲットを指定するチェックボックスを選択し、リストから必要なデバイスを選択します。
リストには、マシンに現在構成されているすべての仮想デバイスと物理デバイスが表示されます。Cordova オフィシャル Web サイト(英語)からのエミュレーターのセットアップについて詳しく学びましょう。
PhpStorm に次のエラーメッセージが表示される場合: パスの ios-sim を検出できません、
ios-sim
がインストールされていることを確認してください。始める前にを参照してください。
アプリケーションの実行
メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。
関連ページ:

プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

プロジェクトのセキュリティ
潜在的なセキュリティリスクを防ぐために、PhpStorm では、プロジェクトのソースがわからない場合に、プロジェクトの操作方法を決定できます。PhpStorm は、実行されるタスクまたは構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く:プロジェクトを開くと、PhpStorm を使用すると、未知ソースコードを含むプロジェクトの処理方法をすぐに決定できます。プロジェクトを初めて開くたびに、IDE にプロジェクトを信頼ダイアログが表示されます。これは、...

実行 / デバッグ構成: Cordova
作成: このダイアログを使用して、PhoneGap および Apache Cordova フレームワークを使用して開発され、Android を含むさまざまなモバイルプラットフォームでの実行を目的としたアプリケーションを実行およびデバッグするための構成を作成します。始める前に:JetBrains マーケットプレイスからプラグインをインストールするの説明に従って、設定 | プラグインページのマーケットプレースタブで PhoneGap/Cordova プラグインをインストールします。PhoneGap または...

モジュールの依存関係ダイアグラム
PhpStorm を使用すると、JavaScript および TypeScript プロジェクトのコンテキスト内でのインポートとエクスポートの視覚化を行うことができます。モジュール依存関係ダイアグラムの作成:JavaScript、TypeScript、HTML ファイルのコンテキストメニュー、またはフォルダーのコンテキストメニューからを選択します。node_modules およびフォルダーでは、この操作は使用できません。複数の型のダイアグラムを作成できるフォルダーでアクションが呼び出された場合は...

Prettier
Prettier は、TypeScript、JavaScript、CSS、HTML、JSON などのさまざまな言語でファイルをフォーマットするツールです。PhpStorm では、Prettier で整形アクションを使用して、ファイルまたはディレクトリ全体だけでなく、選択したコードフラグメントもフォーマットできます。PhpStorm は、プロジェクト内の依存関係として、またはコンピューター上にグローバルに Prettier をインストールするとすぐに、このアクションを追加します。特定のファイルが変...