概要

Monaca クラウド IDE は、ブラウザベースの開発環境です。 Web ブラウザから、アプリ開発を行うことができます。このページでは、Monaca クラウド IDE の Graphic User Inteface (GUI) について説明します。

メニューバー

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

メニュー	説明
ファイル	ファイル サブメニューを開きます。
編集	編集 サブメニューを開きます。
表示	表示 サブメニューを開きます。
実行	実行 サブメニューを開きます。
ビルド	ビルド サブメニューを開きます。
プロジェクト	プロジェクト サブメニューを開きます。
設定	設定 サブメニューを開きます。
ヘルプ	ヘルプ項目を表示します。

ファイル

メニューアイテム	説明
新規ファイル	新しいファイルを作成します。
保存	現在開いているファイルを保存します。
すべて保存	現在開いている、すべてのファイルを保存します。
アップロード	選択されているフォルダーにファイルをアップロードします。

編集

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

表示

メニューアイテム	説明
デバッガー タブ	デバッガー タブの表示を切り替えます。
レイアウトをリセット	IDE のレイアウトをデフォルトにリセットします。

実行

メニューアイテム	説明
プレビュータブを表示	プレビュータブを表示します。
実機で実行	Monaca デバッガーでプロジェクトを実行します。
デバッガーの説明とインストール	端末に Monaca デバッガーをインストールします。

ビルド

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

プロジェクト

メニューアイテム	説明
コミット	Monaca クラウド IDE 上で行った変更をコミットします ( ローカルコミットと呼ばれています )。
プッシュ	Monaca クラウド IDE 上で行った変更をリモートサーバー ( リモートリポジトリ ) 側へプッシュします。
プル	リモートサーバー ( リモートリポジトリ ) 側から最新情報をプルします。
リモートのコミット履歴	リモートサーバー ( リモートリポジトリ ) 側のコミット履歴を表示します。
バージョン管理設定	リモートリポジトリを設定します。
共有	プロジェクトに Monaca ユーザーを参加させることができます。
エクスポート	Monaca プロジェクトをエクスポートします。
公開	現在のプロジェクトを公開します。詳しくは、プロジェクトを公開する を参照してください。

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

設定

メニューアイテム	説明
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 プロジェクトを自分のアカウントに直接インポートすることができます。公開時に生成されたリンク先へアクセスすると、次のページが表示されます。［ インポート ］ ボタンをクリックすると、現在ログインしているアカウントにプロジェクトがインポートされます。

デバッガー タブ

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

プレビューログ タブ

プレビューログ タブは、プレビューでコンテンツを提供するための HTTP サービスを実行するためのターミナルウィンドウです。

プレビュー

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

プレビュー タブでは、次の処理を行えます。

• プレビューの更新

• 端末のオリエンテーションの変更および使用する機種の選択。使用可能な機種には、iPad、iPhone、Pixel 等があります。

• プレビューの切り離し・組み込み

プレビューの制限

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

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

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

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

共有設定

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

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

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

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

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

  2. 2つ目の協同開発方法として、Monaca Localkit または Monaca CLI を使用して、ローカルで開発を行い、バージョン管理システム上で、共有を行います。バージョン管理システムなどの知識が必要になりますが、協同開発の方法としては、導入しやすいかと思います。
• プロジェクトを協同で検証。参加メンバーには、権限として、「 テスター 」 を割り当てる必要があります。

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

プロジェクトの共有方法

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

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

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

コードエディター

Monacaは、次のような理由から Monaco Editor を使用しています。

• 言語サーバーを使用して拡張できる自動補完システム。Monaca が提供する言語には、HTML、JavaScript、TypeScript、Onsen UI があります。React や Vue も対応予定です。
• 基本的な構文の色付け。

• 高機能なインテリセンスと検証。

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

現在のエディタで検索する場合は、 cmd+f または Ctrl+fを押します。 次にダイアログが表示されます。