> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/products_guide/monaca_ide/overview.md).

# 概要

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

## メニューバー

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

| メニュー     | 説明                                 |
| -------- | ---------------------------------- |
| `ファイル`   | [ファイル](#fairu) サブメニューを開きます。        |
| `編集`     | [編集](#bian-ji) サブメニューを開きます。        |
| `表示`     | [表示](#biao-shi) サブメニューを開きます。       |
| `実行`     | [実行](#shi-hang) サブメニューを開きます。       |
| `ビルド`    | [ビルド](#birudo) サブメニューを開きます。        |
| `プロジェクト` | [プロジェクト](#purojekuto) サブメニューを開きます。 |
| `設定`     | [設定](#she-ding) サブメニューを開きます。       |
| `ヘルプ`    | ヘルプ項目を表示します。                       |

### ファイル

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

### 編集

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

### 表示

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

### 実行

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

### ビルド

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

### プロジェクト

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

バージョン管理機能の詳細は、[バージョン管理](/products_guide/monaca_ide/version_control.md) をご確認ください。

### 設定

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

## プロジェクトを公開する

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

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

1\. Monaca クラウド IDE から、**`プロジェクト → 公開`** を選択します。

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

![](/files/-MgilFNffPAmqPySMJIc)

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

![](/files/-MgilGw_2EwkcoacRZjK)

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

## ダイレクトインポート

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

![](/files/-Mgil1k-RPBVF4Ki2L09)

## デバッガー タブ

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

![](/files/-Mgil0KgPai-nGOlX0OL)

## プレビューログ タブ

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

![](/files/-MgikzqAGAMOyIOhVP9Q)

## プレビュー

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

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

* プレビューの更新
* 端末のオリエンテーションの変更および使用する機種の選択。使用可能な機種には、iPad、iPhone、Pixel 等があります。
* プレビューの切り離し・組み込み

![](/files/-Mgikx8HIQEgBjGdOQhV)

### プレビューの制限

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

* Cordova プラグインの API は、利用できません。
* 同一生成元ポリシー ( Same Origin Policy ) による制限があるため、Ajax リクエストは行えません。ただし、サーバーからのレスポンスに、`Access-Control-Allow-Origin` ヘッダーを追加した場合は、この限りではなく、クロスドメインの Ajax リクエストが行えます。
* 実際の端末とは、ビューポートの外観が異なることがあります。

## 共有設定

{% hint style="info" %}
ご利用のプランにより、この機能は使用できない場合があります。詳細は、[プラン詳細](https://monaca.mobi/ja/pricing)をご確認ください。
{% endhint %}

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

* チームメンバーの管理。共有プロジェクトへメンバーを招待できます。また、共有プロジェクトからメンバーを削除できます。
* ソースコードの共有。参加メンバーには、権限として、「 開発者 」を割り当てる必要があります。次に、プロジェクトの協同開発方法をいくつかご提案します。
  1. 1 つ目の協同開発方法として、Monaca クラウド IDE に実装されている「 共有 」機能を使用します。この機能を使用すれば、複数の開発者が、IDE上で、同じプロジェクトを編集できます。なお、プロジェクトの更新時に、以前の内容と競合 ( conflict ) する場合には、最新の内容に上書きされます。
  2. 2つ目の協同開発方法として、[Monaca Localkit](/products_guide/monaca_localkit.md) または [Monaca CLI](/products_guide/monaca_cli.md) を使用して、ローカルで開発を行い、バージョン管理システム上で、共有を行います。バージョン管理システムなどの知識が必要になりますが、協同開発の方法としては、導入しやすいかと思います。
* プロジェクトを協同で検証。参加メンバーには、権限として、「 テスター 」 を割り当てる必要があります。

{% hint style="info" %}
個人向けプランをご利用の場合は、「 テスター 」 としてチームへの参加のみ行えます。詳細は、[プラン詳細](https://monaca.mobi/ja/pricing)をご確認ください。
{% endhint %}

### プロジェクトの共有方法

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

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

![](/files/-Mgiki89zNMEX3exDrlx)

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

![](/files/-MgikkDik8Amt2DNmZQD)

## コードエディター

Monacaは、次のような理由から [Monaco Editor](https://microsoft.github.io/monaco-editor/) を使用しています。

* 言語サーバーを使用して拡張できる自動補完システム。Monaca が提供する言語には、HTML、JavaScript、TypeScript、[Onsen UI](https://onsen.io/) があります。React や Vue も対応予定です。
* 基本的な構文の色付け。
* 高機能なインテリセンスと検証。

![](/files/-MgikdawE-fH8ADAWFa8)

{% hint style="info" %}
コードエディター上で利用できるショートカットキーに関しては、[エディターのショートカット一覧](/products_guide/monaca_ide/editor.md) をご確認ください。
{% endhint %}

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

![](/files/-MgikbZqlZYYmrbZMuiK)