概要

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

メニューバー

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

ファイル

編集

表示

実行

ビルド

プロジェクト

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

設定

プロジェクトを公開する

この機能を使用すると、オンライン上でプロジェクトを公開できます。プロジェクトの公開時に、プロジェクトへのアクセス用リンクが発行されるので、これを他のユーザーに対して公開・配布します。このリンクへアクセスすると、それぞれの 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を押します。 次にダイアログが表示されます。