Meteor
Meteor(英語) は、クライアント側とサーバー側の両方で JavaScript を使用できるようにするフルスタックフレームワークです。 RubyMine は Meteor と統合されており、IDE 内から利用できます。 RubyMine の Meteor サポートには以下が含まれます:
.meteor フォルダーを検出し、プロジェクトから .meteor/local フォルダーを除外することで、Meteor プロジェクトを自動認識します。 詳細については、 除外されたファイルを隠すを参照してください。
定義済みの Meteor ライブラリをプロジェクトに自動的にアタッチします。 これにより、構文のハイライト、参照の解決、コード補完が有効になります。
if および 各ディレクティブの補完を伴う Handlebars を介したスペースバーのサポート。 RubyMine は Spacebars テンプレートを認識しますが、副作用として Meteor プロジェクトの HTML ファイルを
でマークします。 RubyMine は、 宣言へ移動 Ctrl+B を使って JavaScript ソースコードとテンプレート間のナビゲーションを提供します。1 つのデバッグセッション内でクライアント側とサーバー側のコードの両方をデバッグするための専用の複雑な Meteor 実行 / デバッグ構成については、 Meteor アプリケーションのデバッグを参照してください。
始める前に
Node.js をダウンロードしてインストールします。
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 Meteor および Handlebars/Mustache プラグインを 設定 | プラグイン ページの Marketplace タブにインストールします。
Meteor をインストールする
インストール手順は、使用しているオペレーティングシステムによって異なります。 Meteor オフィシャル Web サイト(英語)の詳細を参照してください。
Meteor オフィシャル Web サイト(英語)で LaunchMeteor.exe インストーラをダウンロードしてください。
組み込み ターミナル (Alt+F12) で次のように入力します。
$ curl https://install.meteor.com | /bin/sh
組み込み ターミナル (Alt+F12) で次のように入力します。
$ curl https://install.meteor.com | /bin/sh
新しい Meteor アプリケーションを作成する
まだアプリケーションがない場合は、Meteor ボイラープレートテンプレートから Meteor 固有の構造を持つ RubyMine プロジェクトを生成することができます。 または、空の RubyMine プロジェクトを作成し、下の 既存の Meteor アプリケーションから開始する説明に従って Meteor サポートを設定します。
定型テンプレートから Meteor プロジェクトを作成する
ウェルカム 画面で 新規プロジェクト をクリックするか、メインメニューから を選択します。 新規 プロジェクト ダイアログが開きます。
左側のペインで、 Meteor を選択します。
右側のペインで:
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
Meteor 実行可能ファイルの場所を指定します (Meteor のインストールを参照)。
テンプレート リストから、生成するサンプルを選択します。 基本的なプロジェクト構造を生成するには、 デフォルト オプションを選択します。
ファイル名 フィールドに、生成される相互に関連する .js 、 .html 、 .css ファイルの名前を入力します。 このフィールドは、 デフォルトサンプルタイプが テンプレート ドロップダウリストから選択されている場合にのみ使用できます。
空の RubyMine プロジェクトを作成する
ウェルカム 画面で 新規プロジェクト をクリックするか、メインメニューから を選択します。 新規 プロジェクト ダイアログが開きます。
左側のペインで、 空の プロジェクト を選択します。 右側のウィンドウで、アプリケーションフォルダーを指定し、 作成 をクリックします。
既存の Meteor アプリケーションから始める
既存の Meteor アプリケーションの開発を継続する場合は、RubyMine でそれを開き、Meteor を設定し、下記の Meteor 依存関係のダウンロード に従って必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム 画面で オープン をクリックするか、メインメニューから を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム 画面で リポジトリのクローン をクリックします。
あるいは、メインメニューから 、 、 を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例えば、 Mercurial または Perforce です。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする(クローン)を参照してください。
既存のプロジェクトで Meteor サポートを構成する
設定 ダイアログ(Ctrl+Alt+S )で に移動します。 Meteor ページが開きます。
Meteor 実行ファイルへのパスを指定します。 標準インストールプロシージャに従った場合、RubyMine はファイルを自動的に検出します。
.meteor/local フォルダーとその内容をプロジェクト分析に含めるには、 オープンプロジェクトの ".meteor/local" ディレクトリを自動的に除外 チェックボックスをオフにしてください。 詳細については、下記の 除外されたファイルを隠すを参照してください。
Meteor パッケージを外部ライブラリとして自動的にインポートする チェックボックスが選択されていることを確認してください。
チェックボックスが選択されていると、RubyMine は meteor/packages ファイルから外部パッケージを自動的にインポートします。 その結果、RubyMine はコーディング支援をフルで提供します。 Meteor の組み込み関数や
check(true)、サードパーティパッケージの関数への参照解決、適切な構文・エラーのハイライト、ソースマップ付きデバッグなどが利用できます。このチェックボックスをオフにすると、RubyMine は meteor/packages ファイルから外部パッケージを自動的にインポートしません。 その結果、コーディング支援は提供されません。 状況を改善するには、エディターで meteor/packages ファイルを開き、 パッケージをライブラリとしてインポートする リンクをクリックするか、
meteor --updateコマンドを実行します。
RubyMine がプロジェクトに Meteor ライブラリをアタッチしたことを確認してください。
設定 ダイアログ(Ctrl+Alt+S )で に移動します。
表示される 設定: JavaScript ライブラリ ページで、 ライブラリ リストの Meteor プロジェクトライブラリの横にあるチェックボックスが選択されていることを確認します。
プロジェクトのセキュリティ
RubyMine の外部で作成され、インポートされたプロジェクトを開くと、RubyMine はこのプロジェクトの馴染みのないソースコードの処理方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択してください:
セーフモードでプレビュー :この場合、RubyMine はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
RubyMine はエディター領域上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックするといつでもプロジェクトをロードできます。
プロジェクトを信頼 :この場合、RubyMine はプロジェクトを開いてロードします。 これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての RubyMine 機能が利用可能になることを意味します。
開かない :この場合、RubyMine はプロジェクトを開きません。
詳細は プロジェクトのセキュリティ をご覧ください。
Meteor パッケージをインポートする
基本的な Meteor 固有のコーディング支援を保証する定義済みの Meteor ライブラリに加えて、 .meteor/local/packages ファイルで定義されている追加の パッケージ(英語)をダウンロードできます。
追加の Meteor パッケージをダウンロードする
エディターで .meteor/local/packages ファイルを開きます。
画面の右上隅にある Meteor パッケージのインポート リンクをクリックします。
開いたダイアログで、プロジェクトで開発しようとしているアプリケーションの種類に応じてダウンロードするパッケージを指定します。
クライアント
サーバー
Cordova :このオプションを選択すると、iOS や Android 用の Meteor アプリケーション開発をサポートするパッケージがインポートされます。詳細については Meteor Cordova Phonegap Integration を参照してください。
RubyMine は、ビルド済みアプリケーションを保存するための .meteor/local フォルダーを 除外対象として自動的にマークしますが、プロジェクトツリーには表示されます。
.meteor/local フォルダーを非表示にする
プロジェクト ツールウィンドウ(Alt+1 )のツールバーにある
ボタンをクリックし、 除外ファイルの表示 オプションの横にあるチェックマークを外します。
Meteor アプリケーションを実行する
RubyMine は、 Meteor タイプの実行構成に従って Meteor アプリケーションを実行します。 ボイラープレートテンプレートからアプリケーションを作成した場合、RubyMine はこの実行構成を生成します。
Meteor 実行構成を作成する
ツールバーの 実行 / デバッグ構成 ウィジェットから 実行構成の編集 を選択し、 新規構成を追加 ボタン (
) をクリックして、リストから Meteor を選択して 構成設定を開きます。

「構成 」タブで、インストールに従って Meteor 実行可能ファイルへのパスを指定します (「Meteor のインストール 」を参照)。
実行するアプリケーションファイルが保存されているフォルダーを指定します。 このフォルダーはルートに .meteor サブフォルダーを持っている必要があり、そうすることで RubyMine はアプリケーションを Meteor プロジェクトとして認識します。
デフォルトでは、作業ディレクトリはプロジェクトのルートフォルダーです。
オプション
必要に応じて、 プログラムの引数 フィールドで、起動時に実行可能ファイルに渡されるコマンドラインの追加パラメーターを指定します。 これらは、たとえば、
--dev、--test、--prodであり、アプリケーションが実行されている環境(開発、 テスト 、または 実稼働環境)を示し、起動時にさまざまなリソースがロードされます。デフォルトでは、RubyMine は 実行 ツールウィンドウでアプリケーションの出力を表示します。 クライアント側のコード実行の結果を表示するには、 ブラウザー / Live Edit タブで 起動後の処理 チェックボックスを選択し、リストから開くブラウザーを選択します。 下のフィールドに、アプリケーションを開くための URL アドレスを指定します。 デフォルト値は http://localhost:3000 です。
Meteor アプリケーションを実行する
上で説明したように実行 / デバッグ構成を作成するを選択するか、既存のものを変更してダイアログで 実行 をクリックします。
あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。
アプリケーションの起動時にブラウザーを開くように構成した場合は、 実行 ツールウィンドウまたはブラウザーでアプリケーション出力を表示します。 上記の説明を参照。
Meteor アプリケーションをデバッグする
RubyMine を使うと、1 回のデバッグセッションで Meteor JavaScript コードの client-side と server-side の両方をデバッグできます。 デバッグセッションは、専用の Meteor 実行構成を通じてのみ開始されます。
技術的には、異なるアプリケーションを実装する複数の Meteor プロジェクトを単一の RubyMine プロジェクト内にまとめることができます。 これらのアプリケーションを独立して実行してデバッグするには、それぞれに関連する作業ディレクトリを使用して個別の実行構成を作成します。 ポートの競合を避けるために、これらの実行構成では異なるポートを使用する必要があります。 プログラムの引数 フィールドで、 --port=<port_number> の形式で各実行構成に別のポートを指定します。
必要に応じて、コード内に ブレークポイントを設定します。
Meteor 実行 / デバッグ構成を 上記の説明に従って作成します。 「ブラウズ / ライブ編集 」タブで、「起動後 」チェックボックスを選択し、リストから「Chrome 」を選択して、 JavaScript デバッガーを使用 チェックボックスを選択します。
デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある
をクリックするか、メインメニューから を選択します。
Debug ツールウィンドウが開き、サーバーサイドコードをデバッグするための
でマークされたタブと、クライアントサイドコードをデバッグするための
でマークされたタブが表示されます。停止中のプログラムを調べ、 プログラムをステップ実行します。
必要に応じて、 以下で説明するように、その場でアプリケーションへの変更をプレビューします。
ブラウザーで変更をプレビューする
デバッグセッション中は、HTML、CSS、JavaScript コードの変更をその場でプレビューできます。 編集したページのライブ内容は、 デバッグツールウィンドウ の 要素 タブに表示されます。 更新ポリシーは、アプリケーションのどの部分を編集しているかによって異なります。
クライアント側のコードへの変更をプレビューする
<構成名> JavaScript
タブに切り替え、ツールバーの
をクリックします。Meteor ページの Meteor ホットコードプッシュを有効にする チェックボックスを選択して、アップデートの自動アップロードを設定します。 詳細は Meteor オフィシャル Web サイト をご覧ください。
サーバー側のコードへの変更をプレビューする
<構成名>
タブに切り替え、ツールバーの
をクリックします。Live Edit 機能による自動アップロードは、 HTML、CSS、JavaScript でのライブ編集 の説明に従って設定してください。 ホットスワップが失敗した場合は再起動 チェックボックスを ページ で選択すると、RubyMine は変更の適用に失敗した場合、自動的にページの再読み込みを試みます。