UI の確認

logo cloud IDE Cloud IDE

logo desktop IDE Desktop IDE

これは進行中のベータリリースです。ベータ状態での Anypoint Code Builder の使用には、該当するベータサービス契約条件が適用されます。

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 エディター​: キャンバス UI と設定 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 仕様およびフラグメントの設計を参照してください。

IntelliSense を使用したエディターのオートコンプリート

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

  1. エディタービューで、Ctrl+Space を押すと、使用可能なオプションが表示されます。

  2. 検索語を入力して結果を絞り込みます。次に例を示します。

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

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

    「responses」のオートコンプリートオプション
  3. 矢印キーを使用してリストを操作します。

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

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

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

IDE の外観を変更する

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

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

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

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