概要
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 つ目の協同開発方法として、Monaca クラウド IDE に実装されている「 共有 」機能を使用します。この機能を使用すれば、複数の開発者が、IDE上で、同じプロジェクトを編集できます。なお、プロジェクトの更新時に、以前の内容と競合 ( conflict ) する場合には、最新の内容に上書きされます。
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
を押します。 次にダイアログが表示されます。
最終更新