概要

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

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

メニューバー

バー上のメニューを解説します。

メニュー 説明
ファイル ファイル サブメニューを開きます。
編集 編集 サブメニューを開きます。
表示 表示 サブメニューを開きます。
デバッグ デバッグ サブメニューを開きます。
ビルド ビルド サブメニューを開きます。
バージョン管理 GitHub に接続して、プロジェクトのバージョン管理を行えます。
保存 現在開いているドキュメントを保存します。ドキュメントを開いていない場合、クリックできません。
プレビュー プレビューウィンドウを表示します。
実機デバッグ Monaca デバッガー上で、プロジェクトを実行します。
共有設定 他の Monaca ユーザーをプロジェクトに招待します。
設定 設定 サブメニューを開きます。

ファイル

メニューアイテム 説明
新規ファイル 新しいファイルを作成します。
新規フォルダー 新しいフォルダーを作成します。
保存 現在開いているファイルを保存します。
すべて保存 現在開いている、すべてのファイルを保存します。
アップロード 選択されているフォルダーにファイルをアップロードします。
削除 選択されているファイル・フォルダーを削除します。
名前の変更 選択されているファイル・フォルダーの名前を変更します。
ファイルを開く 選択したファイルを開きます。
ファイルのコピー 現在選択されているファイルをコピーします。
過去のバージョンを見る 現在選択されているファイルの過去のバージョンを確認できます。
プロジェクトをエクスポート Monaca プロジェクトをエクスポートします。
プロジェクトを公開する プロジェクトを公開します ( プロジェクトを公開する を参照のこと )。
エディター環境設定 エディターの環境設定を行います。
JS/CSS コンポーネントの追加と削除 JavaScript と CSS ライブラリーの追加または削除を、対象プロジェクトに対して行います。
Cordova プラグインの管理 Cordova プラグインの追加と削除を行います。

編集

メニューアイテム 説明
元に戻す 編集前の状態に戻します。
やり直す 取り消した編集をやり直します。
検索 現在開かれているファイルから対象の文字列を検索します。
次を検索 次の検索文字に移動します。
前を検索 前の検索文字に移動します。
対象文字列を、指定の文字で置き換えます。 現在開かれているファイル上で、指定した文字列を、他の文字列に置き換えします。
全置換 現在開かされているファイル上で、指定した文字列を、他の文字列にすべて置き換えします。
コメント化 選択された行をコメント化します。
コメントを外す コメント化された行のコメントを外します。

表示

メニューアイテム 説明
プロジェクトツリー プロジェクトツリーの表示/非表示を切り替えます。
エディターの最大化 エディター画面の表示サイズを切り替えます。
全体検索 対象の文字列をすべてのファイルから検索します ( 結果の出力形式は Unix の検索コマンドと類似 )。
バックエンド Monaca バックエンド 設定画面に移動します。

デバッグ

メニューアイテム 説明
プレビュー プレビューウィンドウを開きます。
実機デバッグ Monaca デバッガー上で、プロジェクトを実行します。
デバッガーの説明とインストール Monaca デバッガーを端末にインストールします。

ビルド

メニューアイテム 説明
Android アプリのビルド Android 端末用のアプリをビルドします。
iOS アプリのビルド iOS 端末用のアプリをビルドします。
Windows アプリのビルド Windows 端末用のアプリをビルドします。
ビルド履歴一覧 ビルドの結果一覧を表示します。
継続的インテグレーション結果一覧 継続的インテグレーションの結果一覧を表示します。

バージョン管理

メニューアイテム 説明
コミット Monaca クラウド IDE 上で行った変更をコミットします ( ローカルコミットと呼ばれています )。
プッシュ Monaca クラウド IDE 上で行った変更をリモートサーバー ( リモートレポジトリ ) 側へプッシュします。
プル リモートサーバー ( リモートレポジトリ ) 側から最新情報をプルします。
リモートのコミット履歴 リモートサーバー ( リモートレポジトリ ) 側のコミット履歴を表示します。
コミット履歴 Monaca クラウド IDE 側のコミット履歴を表示します。
設定 リモートレポジトリを設定します。

バージョン管理機能の詳細は、バージョン管理 をご確認ください。

設定

メニューアイテム 説明
Android アプリ設定 Android アプリの情報を設定します。詳細は、 Android アプリ設定 をご確認ください。
Android キーストア設定 Android のキーストアを設定します。詳細は、 Android キーストア設定 をご確認ください。
iOS アプリ設定 iOS アプリの情報を設定します。詳細は、 iOS アプリ設定 をご確認ください。
iOS ビルド設定 iOS 向けのビルド設定を行います。詳細は、 iOS ビルド設定 をご確認ください。
Windows アプリ設定 Windows アプリのビルドに必要な情報を設定します。詳細は、Windows アプリのビルド をご確認ください。
Cordova プラグインの管理 Cordova プラグインを有効化・無効化します ( 対象は、現在開いているプロジェクトです )。詳細は、Cordova プラグイン をご確認ください。
JS/CSS コンポーネントの追加と削除 JavaScript と CSS ライブラリーを追加または削除します ( 対象は、現在開いているプロジェクトです )。詳細は、JS・CSS コンポーネント をご確認ください。
外部サービスとの連携 Monaca プロジェクトに組み込める、サードパーティー製の各種サービスを確認できます ( プラグインとして、プロジェクトに追加します )。詳細は、外部サービスとの連携 をご確認ください。
継続的インテグレーション ビルド処理と配信/配布 ( デプロイ ) 処理のサイクルを自動化します ( Monaca CI を参照のこと )
デプロイサービス デプロイ支援サービスを Monaca CI 用に追加または削除します ( 検証版アプリなどの配信/配布支援サービス ( デプロイサービス ) を参照のこと )。
エディター環境設定 コードエディターの環境設定を行います。

プロジェクトを公開する

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

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

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

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

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

ダイレクトインポート

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

プロジェクトパネル

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

  • プロジェクトツリー: プロジェクトのフォルダーとファイルを一覧表示します。フォルダーまたはファイルを右クリックすれば、ファイルの操作 ( 新規作成、コピー、名前変更、削除、アップロードなど ) も行えます。また、ファイルを編集する場合、対象ファイルをクリックすると、 コードエディター ( 中央の領域 ) 上で開けます。
  • 全文検索: すべてのファイルから対象の文字列を検索できます ( 結果の出力形式は Unix の検索コマンドと類似 )。
  • Monaca バックエンド: プロジェクトに紐づけされているバックエンド設定を表示します。

    ファイル Tree, 全体検索 & Monaca バックエンド

デバッグパネル

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

ライブプレビュー

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

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

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

ライブプレビューの制限

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

  • 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 つです。また、ドロップダウンメニューから参加メンバーに割り当てる権限 ( 開発者またはテスター ) を選択できます。入力後、ユーザーを追加する ボタンをクリックして、メンバーを追加します ( 通知メールを送信する場合には、[ 通知メールを送信する ] にチェックを入れます )。

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

コードエディター

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

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

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

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

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

  • ヘルプ アイコンをクリックすると、Monaca ドキュメントを表示できます。
  • 設定 アイコンをクリックすると、次の 3 つのメニューを表示します。
    1. 以前のバージョンを見る : 現在選択しているプロジェクトの旧バージョンを閲覧できます。
    2. エディター環境設定 : エディターの環境設定を開きます。
    3. エディターショートカット : キーボード ショートカット一覧を開きます。
  • 文字列を検索します ( タブが選択されているファイルが対象 )。