クラウド IDE の概要

Monaca クラウド IDE は、5 つの領域から構成されています。

  1. メニューバー
  2. プロジェクトパネル
  3. デバッグパネル
  4. ライブプレビュー
  5. コードエディター
Monaca Cloud IDE

プロジェクトを公開する

この機能を使用すると、オンライン上でプロジェクトを公開できます。プロジェクトの公開時に、プロジェクトへのアクセス用リンクが発行されるので、これを他のユーザーに対して公開・配布します。このリンクへアクセスすると、それぞれの Monaca アカウントにプロジェクトのコピーが作成されます。コピーしたプロジェクトは自由に編集できます。編集しても、オリジナルのプロジェクトへは反映されません。オリジナルとコピーのプロジェクト間での同期が行われないことが、従来の [ 共有設定・プロジェクトの共有 ] 機能とは異なる点です。

プロジェクトの公開は、次のようにして簡単に行うことができます。

  1. Monaca クラウド IDE メニューから、ファイル ‣ プロジェクトを公開する を選択します。

  2. 公開する ボタンをクリックします。

../../../_images/1410.png
  1. 他の Monaca ユーザーに対して生成されたリンクを公開・配布します。

../../../_images/1510.png

注釈

公開を停止する場合には、プロジェクトの公開時に表示されたダイアログ上で、プライベートにする ボタンをクリックします。

ダイレクトインポート

この機能を使用すると、公開された Monaca プロジェクトを自分のアカウントに直接インポートすることができます。公開時に生成されたリンク先へアクセスすると、次の画面が表示されます。[ インポート ] ボタンをクリックすると、現在ログインしているアカウントにプロジェクトがインポートされます。

../../../_images/162.png

プロジェクトパネル

このパネルでは、次のタブを提供しています。

  • プロジェクトツリー : プロジェクトのフォルダーとファイルを一覧表示します。フォルダーまたはファイルを右クリックすれば、ファイルの操作 ( 新規作成、コピー、名前変更、削除、アップロードなど ) も行えます。また、ファイルを編集する場合、対象ファイルをクリックすると、 コードエディター ( 中央の領域 ) 上で開けます。

  • 全文検索 : すべてのファイルから対象の文字列を検索できます ( 結果の出力形式は Unix の検索コマンドと類似 )。

  • Monaca バックエンド : プロジェクトに紐づけされているバックエンド設定を表示します。

../../../_images/335.png

プロジェクトツリー

../../../_images/436.png

全体検索

../../../_images/526.png

Monaca バックエンド

デバッグパネル

Monaca デバッガーと Monaca クラウド IDE の接続後、このパネル上で、Console でのデバッグと DOM の解析を行えます。詳細は、Monaca クラウド IDE と Monaca デバッガーとの連携 ( Web 経由 ) をご確認ください。

Debug

ライブプレビュー

ライブプレビュー機能を使用すれば、リアルタイムで、アプリのレイアウトを確認できます。また、実際の端末にインストールされているアプリのように操作もできるため、制限付きではありますが、動作確認も行えます ( カメラの使用、住所録の取得、クロスオリジンの Ajax リクエストなど、一部の機能は使用できません )。Monaca デバッガーと併用すれば、より効率的に、より洗練されたアプリの開発を行えます。

Preview タブでは、次の処理を行えます。

  • プレビューウィンドウの更新

  • 端末のオリエンテーションの変更および使用する機種の選択。Configure のアイコン ( 歯車のアイコン ) をクリックすると、適用可能なオリエンテーションと使用可能な機種が、ドロップダウンリスト形式で表示されます。使用可能な機種には、iPad、iPhone、Nexus があります。

  • プレビューウィンドウの切り離し・組み込み

Live Preview

ライブプレビューの制限

ライブプレビュー機能には、次の制限があります。

  • Cordova プラグインの API は、利用できません。

  • 同一生成元ポリシー ( Same Origin Policy ) による制限があるため、Ajax リクエストは行えません。ただし、サーバーからのレスポンスに、 “Access-Control-Allow-Origin” ヘッダーを追加した場合は、この限りではなく、クロスドメインの Ajax リクエストが行えます。

  • 実際の端末とは、ビューポートの外観が異なることがあります。

  • Monaca バックエンド API とプッシュ通知機能は、初期化できません。

共有設定

注釈

ご利用のプランにより、この機能は使用できない場合があります。詳細は、プランの詳細 をご確認ください。

共有設定 では、次のことができます。

  • チームメンバーの管理。共有プロジェクトへメンバーを招待できます。また、共有プロジェクトからメンバーを削除できます。

  • ソースコードの共有。参加メンバーには、権限として、「 開発者 」 を割り当てる必要があります。次に、プロジェクトの協同開発方法をいくつかご提案します。

    1. 1 つ目の協同開発方法として、Monaca クラウド IDE に実装されている 「 共有 」 機能を使用します。この機能を使用すれば、複数の開発者が、IDE 上で、同じプロジェクトを編集できます。なお、プロジェクトの更新時に、以前の内容と競合 ( conflict ) する場合には、最新の内容に上書きされます ( 上書き後も、「 過去のバージョンを見る 」 機能で、ファイルの更新履歴を確認できます )。

    2. 2 つ目の協同開発方法として、Monaca Localkit または Monaca CLI を使用して、ローカルで開発を行い、バージョン管理システム上で、共有を行います。バージョン管理システムなどの知識が必要になりますが、協同開発の方法としては、導入しやすいかと思います。

    3. 3 つ目の協同開発方法として、Monaca for Visual Studio を使用します。この場合、Visual Studio に実装されている 「 チーム エクスプローラー 」 機能を使用して、ファイルを管理します。Git、TFS、Visual Studio Online など、サポートされているバージョン管理システムであれば、併用もできます。

  • プロジェクトを協同で検証。参加メンバーには、権限として、「 テスター 」 を割り当てる必要があります。

注釈

個人向けプランをご利用の場合は、「 テスター 」 としてチームへの参加のみ行えます。

プロジェクトは、他の Monaca ユーザーと共有することができます。他の Monaca ユーザーを、プロジェクトに招待したり、プロジェクトから除外することもできます。プロジェクトの参加メンバーの管理方法は、次のとおりです。

  1. メニューバー上で、共有設定 をクリックします。

  2. [ チームメンバー管理 ] 画面が表示されます。ここから、参加メンバーを招待 ( 案内メールの送信 ) します。入力できるメールアドレスは、1 行あたり 1 つです。また、ドロップダウンメニューから参加メンバーに割り当てる権限 ( 開発者またはテスター ) を選択できます。入力後、ユーザーを追加する ボタンをクリックして、メンバーを追加します ( 通知メールを送信する場合には、[ 通知メールを送信する ] にチェックを入れます )。

../../../_images/914.png
  1. プロジェクトからメンバーを除外するには、 × のアイコンをクリックします。

../../../_images/1012.png

コードエディター

画面左側のプロジェクトツリーからファイルを選択すると、画面中央のコードエディター上で開かれ、編集することができます。preference のような設定もエディター上で変更できます。ファイルを開くと、エディター上にファイルごとにタブが表示されるので、ファイルを移動する場合には、タブを選択します。

エディターでは、JavaScript/HTML5/CSS3 のシンタックス ハイライト機能もサポートされています。他にも、JavaScript/CSS の自動補完機能、Emmet ( 旧 Zen Coding )TypeScript もサポートされています。

注釈

コードエディター上で利用できるショートカットキーに関しては、エディターのショートカット一覧 をご確認ください。

../../../_images/1214.png

エディター画面には、次のような、小型のメニューバーが表示されます。

../../../_images/1310.png

こちらのメニューバー上では、次の操作ができます。

  • ヘルプ アイコンをクリックすると、Monaca ドキュメントを表示できます。

  • 設定 アイコンをクリックすると、次の 3 つのメニューを表示します。

    1. 以前のバージョンを見る : 現在選択しているプロジェクトの旧バージョンを閲覧できます。

    2. エディター環境設定 : エディターの環境設定を開きます。

    3. エディターショートカット : キーボード ショートカット一覧を開きます。

  • 文字列を検索します ( タブが選択されているファイルが対象 )。