新しい Monaca クラウド IDE の変更点

現在、新しい Monaca クラウド IDE を公開しています。 まだ標準の IDE ではありませんが、新しい IDE と現在の IDE を切り替えることができます。

新しい Monaca クラウド IDE は、アプリケーション開発を容易にし、開発体験を向上させるための機能を開発者へ提供します。 主な機能は、次のとおりです。

  • ターミナル機能: クラウドIDEにてトランスパイル処理(コード変換)を実行。
  • Golden Layout: IDE レイアウトの自由度。
  • マルチ プレビューア: テスト効率の向上。
  • Monaco Editor: 開発プロセスをスピードアップする優れたコードエディタ。
  • 新しい Monaca バックエンド: Monaca バックエンドのためのより良い GUI。

ターミナル機能

ターミナル機能は、Cloud IDEで最も大きなリニューアルです。 この機能により、React、VueJS、Angularなどのトランスパイルが必要となるプロジェクトを作成、管理、開発すること可能となります。 また、プレビューアもターミナル機能より起動されます。さらに、ホットリローディングに対応するプロジェクトは、Cloud IDEでもその機能を利用できます。ターミナル機能についてと使用法の詳細については、ターミナル機能 を参照してください。

Golden Layout

開発体験の重要性を考慮して、私たちは IDE にさまざまな機能を追加し、ユーザーインターフェイスを更新しています。

これらの機能の 1 つは、新しい柔軟なレイアウトです。 現在の IDE では、すべてのパネルが特定のレイアウトに固定されています。 新しい IDE では、すべてのパネルをドラッグして任意の位置に配置することができます。 各パネルは、最大化 / 最小化も簡単に行うことができます。 そのため、自由にレイアウトを配置することができます。 この新しいレイアウトは、 Golden layout によって作成されています。Golden layout は、Web アプリケーションのマルチスクリーンレイアウトマネージャー です。

Golden Layout は、Web アプリケーションのマルチスクリーンレイアウトマネージャーであり、柔軟なレイアウトを IDE に提供します。 すべてのパネルが特定のレイアウトで固定されていた現在の IDE とは異なり、新しいパネルでは、必要に応じてすべてのパネルを移動して最大化 / 最小化することができます。 インターフェイスを自分のスタイルや好みに合わせることができます。

現在のバージョンはより現代的であり、開発者へより簡単なプログラミング体験を提供します。

マルチ プレビューア

柔軟なレイアウトに加えて、さまざまなデバイスのレイアウトでアプリを同時にプレビューする機能も追加されています。 新しい IDE では、複数のプレビューウィンドウを同時に開くことができます。

マルチプラットフォーム対応のアプリ開発者にとって、この機能は有効です。特に、モバイルアプリのリアルタイムプレビューアを提供する別のクラウド IDE を試したことがない場合は、一度体験してください。

Monaco Editor

アプリ開発の大部分はコードの作成に費やされます。適切なコードエディタを使用すると、開発時間と効率が向上します。このため、次のような理由から、現在の IDE で使用されている Ace エディタを Monaco に変更しました。

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

  • 基本的な構文の色付け。

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

エディタの変更により、以下のショートカットキーが変更されます。 現在の IDE と新しい IDE のショートカットキーの完全なリストについては、 エディターのショートカット一覧 を参照してください。

説明 Windows/Linux Mac
やり直す Ctrl + Y Shift + Command + Z or Command + Y
置換 Ctrl + F Command + Alt + F
コメント化 Ctrl + / Command + /
コメントを外す Ctrl + / Command + /

新しい Monaca バックエンド

新しい Monaca バックエンドは、新しいレイアウトで別ウィンドウに表示されます。これにより、ユーザー、コレクション、プッシュ通知、メールテンプレートなどのすべてのバックエンドコンポーネントが管理しやすくなりました。 ナビゲーションは、よりユーザーフレンドリーになっています。

そのほかの変更点

いくつかのメニュー項目は以下のように変更されます。

  • ファイルツリーの Monaca Backend タブは、ヘッダーメニューに移動し、バックエンドとして表示されます。
  • エディター環境設定メニュー項目は、表示メニューに移動しました。
  • バージョン管理共有は、プロジェクトメニューに移動しました。
  • プレビュー実機デバッグ は、実行メニューに移動しました。