1. ホームページ
  2. Anypoint Code Builder
  3. はじめに

  4. UI の確認

進行中のベータリリース​: クラウド IDE は進行中のベータリリースです​。ベータ状態での Anypoint Code Builder の使用には、IDE で入手できる、該当するベータサービス契約条件が適用されます。

UI の確認

API とインテグレーションの設計、開発、デプロイを行うには、Anypoint Code Builder の UI と要素を理解します。

Anypoint Code Builder IDE の歓迎メッセージ
1 アクティビティバー​: プロジェクトの作業を行っているときに VS Code アクティビティバーの項目を使用します。項目の上にマウスを置くと、その名前が表示されます。

アクティビティバーのボタン

Anypoint Code Builder (MuleSoft アイコン) に加えて、アクティビティバーでよく使用する項目を次に示します。

  • Explorer​: プロジェクトのファイルとフォルダーを開きます。

  • Source Control (ソース制御)​: プロジェクトファイルを保存します。

  • Run and Debug (実行およびデバッグ)​: インテグレーションと実装を実行してデバッグします。

  • Extensions (拡張機能)​: デスクトップ IDE でのインストールおよび更新用に開きます。

    アクティビティバーの項目の順序は変更できます。
2 Anypoint Code Builder​ (MuleSoft アイコン): プロジェクトを開始するための ​[Anypoint Code Builder]​ パネルを開きます。チュートリアルに従って、Anypoint Code Builder で API 仕様の設計、実装、インテグレーションの開発を行います。
3 Quick Actions (クイックアクション)​: API 仕様、実装、またはインテグレーションプロジェクトを開始します。
4 設定​: IDE の ​「US クラウドまたは EU クラウド」​を含め、Anypoint Code Builder 設定を定義します。自分の Anypoint Platform ユーザーアカウントが存在するクラウドを選択します。

IDE のプロジェクト UI の比較

Web IDE とデスクトップ IDE の UI は同じ構造を共有します。

インテグレーションおよび実装プロジェクトは同様の UI を持つ Mule アプリケーションです。

インテグレーションプロジェクトを含む Anypoint Code Builder UI
1 Explorer​: プロジェクトのワークスペースを開きます。
2 エディター​: キャンバスと設定 XML ファイルでプロジェクトを開発します。設定 XML ファイルでは、​オートコンプリート​がサポートされます。
3 ステータスバー​: ユーザー名を参照して、Anypoint Platform にログインしているかどうかを確認します。
4 出力パネル​: プロジェクトが Anypoint Code Builder で実行されているときに ​Mule DX サーバー​からの出力とログを表示します。組み込みコマンドターミナルを開きます。問題とポートを表示します。

詳細は、​『インテグレーションの開発』 and 『API の実装』​を参照してください。

API 設計プロジェクトには、API Console でエンドポイントをモックするためのサービスが含まれます。

インテグレーションプロジェクトを含む Anypoint Code Builder UI
1 エディター​: API 仕様プロジェクトファイルを設定します。このエディターでは、​オートコンプリート​がサポートされます。
2 API Console​: 例でエンドポイントをテストします。

詳細は、『API 仕様とフラグメントの設計』を参照してください。

オートコンプリートメニューを使用する

IDE は、Anypoint Code Builder 拡張機能、および VS Code の組み込みコード補完機能である IntelliSense を使用して、エディタービューのオートコンプリートを提供します。

  1. 次のいずれかのオプションを使用して、エディタービューからオートコンプリートオプションを開きます。

    • IntelliSense の使用: Ctrl+Space を押して使用可能なオプションのリストを表示し、検索語を入力して結果を絞り込みます。次に例を示します。

      「get」のオートコンプリートオプション

      IntelliSense では、コンテキストに応じてさまざまなオプションが表示されます。次に例を示します。

      「responses」のオートコンプリートオプション

    • 拡張機能の使用: 自動提案メニューを使用する場所にカーソルを置き、必要に応じて、入力を開始して返される提案オプションのリストを絞り込みます。行にコンテンツがある場合は、Tab キーを押すか、スペースを入力するか、行のコンテンツの後で入力を開始します。自動提案メニューを閉じるには、Esc キーを押します。

      API 設計では、オートコンプリートを有効または無効にできます。

  2. 矢印キーを使用してリストを操作します。

  3. Enter または Tab キーを使用して、選択した要素を挿入します。

    オートコンプリートにより、要素がコードに追加され、値を挿入できるようにカーソルが配置されます。

詳細は、VS Code ドキュメントの 「IntelliSense」Leaving the Site​を参照してください。

IDE の外観を変更する

テーマを選択して、デスクトップ IDE またはクラウド IDE の外観を変更します。

  1. アクティビティバーから ​[Manage (管理)]​ (歯車) アイコンを選択します。

  2. [Themes (テーマ)]​ > ​[Color Themes (カラーテーマ)]​ を選択して、​[Dark Modern (ダークモダン)]​ などのテーマを選択します。

    ダークテーマを使用する IDE