---
schema_version: "1"
id: 9f5f1839ba33c4375ccad1326f409dd96e56108114b8b72f413f408d6915f982
title: UI の確認
collection: mulesoft
version: current
locale: ja-jp
portal_url: https://docs.salesforce.com/mulesoft/current/ja-jp/anypoint-code-builder/start-discover-ui.md
canonical_url: https://docs.mulesoft.com/jp/anypoint-code-builder/start-discover-ui
source_site: docs.mulesoft.com
content_type: documentation
content_hash: 47d07a7092ecb3ca46696eb3fd823e58c57e692f6424ebc7bcd6041cba85b739
description: MuleSoft Documentation Site
latest: true
---
# UI の確認

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

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

![Anypoint Code Builder IDE の歓迎メッセージ](/mulesoft/current/ja-jp/anypoint-code-builder/_images/welcome-mat-reference.png)

<table>
<tbody><tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><strong>アクティビティバー</strong>​: プロジェクトの作業を行っているときに VS Code アクティビティバーの項目を使用します。項目の上にマウスを置くと、その名前が表示されます。
<div class="paragraph">
<p><span class="image"><img src="https://docs.mulesoft.com/jp/anypoint-code-builder/_images/acb-activity-bar-buttons.png" alt="アクティビティバーのボタン"></span></p>
</div>
<div class="paragraph">
<p>Anypoint Code Builder (MuleSoft アイコン) に加えて、アクティビティバーでよく使用する項目を次に示します。</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>Explorer</strong>​: プロジェクトのファイルとフォルダーを開きます。</p>
</li>
<li>
<p><strong>Source Control (ソース制御)</strong>​: プロジェクトファイルを保存します。</p>
</li>
<li>
<p><strong>Run and Debug (実行およびデバッグ)</strong>​: インテグレーションと実装を実行してデバッグします。</p>
</li>
<li>
<p><strong>Extensions (拡張機能)</strong>​: デスクトップ IDE でのインストールおよび更新用に開きます。</p>
<div class="paragraph">
<p>アクティビティバーの項目の順序は変更できます。</p>
</div>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><strong>Anypoint Code Builder</strong>​ (MuleSoft アイコン): プロジェクトを開始するための ​<strong>[Anypoint Code Builder]</strong>​ パネルを開きます。チュートリアルに従って、Anypoint Code Builder で API 仕様の設計、実装、インテグレーションの開発を行います。</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td><strong>Quick Actions (クイックアクション)</strong>​: API 仕様、実装、またはインテグレーションプロジェクトを開始します。</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td><strong>設定</strong>​: IDE の ​<a href="https://docs.mulesoft.com/jp/anypoint-code-builder/#us-eu-clouds" class="xref page">US クラウドまたは EU クラウド</a>​を含め、Anypoint Code Builder 設定を定義します。自分の Anypoint Platform ユーザーアカウントが存在するクラウドを選択します。</td>
</tr>
</tbody></table>

## [](#ide-のプロジェクト-ui-の比較)IDE のプロジェクト UI の比較

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

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

![インテグレーションプロジェクトを含む Anypoint Code Builder UI](/mulesoft/current/ja-jp/anypoint-code-builder/_images/ui-elements.png)

<table>
<tbody><tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><strong>Explorer</strong>​: プロジェクトのワークスペースを開きます。</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><strong>エディター</strong>​: キャンバスと設定 XML ファイルでプロジェクトを開発します。設定 XML ファイルでは、​<a href="#use-autocomplete">オートコンプリート</a>​がサポートされます。</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td><strong>ステータスバー</strong>​: ユーザー名を参照して、Anypoint Platform にログインしているかどうかを確認します。</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td><strong>出力パネル</strong>​: プロジェクトが Anypoint Code Builder で実行されているときに、​<strong>Mule DX サーバー</strong>​または ​<strong>Mule DX サーバー: スキャフォールディング</strong>​からの出力とログを表示します。組み込みコマンドターミナルを開きます。問題とポートを表示します。
<div class="paragraph">
<p>詳細は、​<a href="https://docs.mulesoft.com/jp/anypoint-code-builder/int-developing-integrations" class="xref page">インテグレーションの開発</a> and <a href="https://docs.mulesoft.com/jp/anypoint-code-builder/imp-implementing-apis" class="xref page">API の実装</a>​を参照してください。</p>
</div></td>
</tr>
</tbody></table>

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

![インテグレーションプロジェクトを含む Anypoint Code Builder UI](/mulesoft/current/ja-jp/anypoint-code-builder/_images/ui-elements-api.png)

<table>
<tbody><tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><strong>エディター</strong>​: API 仕様プロジェクトファイルを設定します。このエディターでは、​<a href="#use-autocomplete">オートコンプリート</a>​がサポートされます。</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><strong>API Console</strong>​: 例でエンドポイントをテストします。
<div class="paragraph">
<p>詳細は、<a href="https://docs.mulesoft.com/jp/anypoint-code-builder/des-designing-api-specs" class="xref page">API 仕様とフラグメントの設計</a>を参照してください。</p>
</div></td>
</tr>
</tbody></table>

## [](#use-autocomplete)オートコンプリートメニューを使用する

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

1. 次のいずれかのオプションを使用して、エディタービューからオートコンプリートオプションを開きます。
    
    - IntelliSense の使用: Ctrl+Space を押して使用可能なオプションのリストを表示し、検索語を入力して結果を絞り込みます。次に例を示します。
        
        ![「get」のオートコンプリートオプション](/mulesoft/current/ja-jp/anypoint-code-builder/_images/des-autocomplete.png)
        
        IntelliSense では、コンテキストに応じてさまざまなオプションが表示されます。次に例を示します。
        
        ![「responses」のオートコンプリートオプション](/mulesoft/current/ja-jp/anypoint-code-builder/_images/des-autocomplete-context.png)
    - 拡張機能の使用: 自動提案メニューを使用する場所にカーソルを置き、必要に応じて、入力を開始して返される提案オプションのリストを絞り込みます。行にコンテンツがある場合は、Tab キーを押すか、スペースを入力するか、行のコンテンツの後で入力を開始します。自動提案メニューを閉じるには、Esc キーを押します。
        
        API 設計では、オートコンプリートを有効または無効にできます。
        
        手順を表示
        
        1. ![](/mulesoft/current/ja-jp/anypoint-code-builder/_images/icon-extensions.png)​ (拡張機能) アイコンをクリックして、アクティビティバーから ​**\[Extensions (拡張機能)\]**​ パネルを開きます。
        2. 拡張機能 ​**\[Anypoint Code Builder - API Extension (Anypoint Code Builder - API 拡張機能)\]**​ を右クリックし、​**\[Extensions Settings (拡張機能設定)\]**​ を選択します。
            
            このアクションにより、​**\[Settings (設定)\]**​ タブが開き、拡張機能 ​**@ext:salesforce.mule-dx-api-component**​ の設定が表示されます。
        3. **\[Settings (設定)\]**​ タブで、オートコンプリートオプションを提案する API デザインエディターを有効にします。
            
            [「\[Mule](https://docs.mulesoft.com/jp/anypoint-code-builder/ref-mule-settings#setting-auto-complete) > \[Editor (エディター)\] > \[Auto-completion: Enablement (オートコンプリート: 有効化)\]」\]​を参照してください。
        4. 必要に応じて、オートコンプリートオプションがリストされるまでの待機時間をミリ秒単位で設定します。
            
            [「\[Mule](https://docs.mulesoft.com/jp/anypoint-code-builder/ref-mule-settings#setting-auto-complete) > \[Editor (エディター)\] > \[Auto-completion: Trigger Delay (オートコンプリート: トリガー遅延)\]」\]​を参照してください。
2. 矢印キーを使用してリストを操作します。
3. Enter または Tab キーを使用して、選択した要素を挿入します。
    
    オートコンプリートにより、要素がコードに追加され、値を挿入できるようにカーソルが配置されます。

詳細は、VS Code ドキュメントの [「IntelliSense」](https://code.visualstudio.com/docs/editor/intellisense)​を参照してください。

## [](#ide-の外観を変更する)IDE の外観を変更する

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

1. アクティビティバーから ​**\[Manage (管理)\]**​ (歯車) アイコンを選択します。
2. **\[Themes (テーマ)\]**​ > ​**\[Color Themes (カラーテーマ)\]**​ を選択して、​**\[Dark Modern (ダークモダン)\]**​ などのテーマを選択します。
    
    ![ダークテーマを使用する IDE](/mulesoft/current/ja-jp/anypoint-code-builder/_images/acb-ui-dark-theme.png)

## [](#キャンバスビューを探索する)キャンバスビューを探索する

デフォルトでは、Anypoint Code Builder でプロジェクトを開くと、最初にキャンバスビューが開きます。これにより、XML エディターに切り替えることなく、フローを視覚的に作成および編集できます。

### [](#ビューを切り替える)ビューを切り替える

ツールバーを使用して、キャンバスとコードエディターを切り替えることができます。 . ツールバーの ​**</>**​ アイコンをクリックして、キャンバスとコードを切り替えることができます。 . 両方のビューを並べて開くには、キャンバスタブを右クリックし、​**\[Open in Canvas and Code Editor (キャンバスとコードエディターで開く)\]**​ を選択します。

<table><tbody><tr><td class="icon"><i class="fa icon-note" title="Note"></i></td><td class="content">キャンバスタブ上のドット (•) は、ファイルに保存されていない変更が含まれていることを示します。</td></tr></tbody></table>

### [](#エラーのあるコンポーネントを特定する)エラーのあるコンポーネントを特定する

エラーを含むコンポーネントは、キャンバスに赤いドットでマークされています。 コンポーネントにマウスポインターを置くと、関連する項目名を含むエラーと警告がツールチップに表示されます。