> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

> ACUL の開発ワークフローについて学ぶ

# ACUL 開発ワークフロー

ACUL の画面を開発する主なモードには、ローカル開発とライブテナントでの統合テストの 2 つがあります。

<div id="local-development">
  ## ローカル開発
</div>

[Auth0 CLI](https://github.com/auth0/auth0-cli/) コマンド `auth0 acul dev` を使用して、ACUL の画面をローカルでカスタマイズします。[Universal Login Context Inspector](https://github.com/auth0/ul-context-inspector) を使用すると、バックエンドへの依存や待ち時間なしで ACUL の画面をすばやく反復開発できます。

Universal Login Context Inspector は、テナント固有の設定に対して認証画面をテストできるモックコンテキストデータを提供します。

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/IhLUvTv5J5eZ1VeH/docs/images/cdy7uua7fh8z/ACUL/UniversalLoginContextInspector.png?fit=max&auto=format&n=IhLUvTv5J5eZ1VeH&q=85&s=ff498d025dbefc3385619e971ffa0504" alt="Universal Login Context Inspector" width="1404" height="1037" data-path="docs/images/cdy7uua7fh8z/ACUL/UniversalLoginContextInspector.png" />
</Frame>

* **画面 (Screen)** を選択して、デフォルトのモックコンテキストデータ付きで利用可能な ACUL 設定済み画面を表示します。
  * **Data Source** を選択して、**Auth0 CDN** から提供されるモックコンテキストデータ、またはローカル開発プロジェクトの `public/screens/{prompt}/{screen}` ディレクトリにあるモックコンテキストデータを選択します。
  * **Download JSON** アイコンを選択して、選択した画面のコンテキストデータをダウンロードします。

<div id="live-tenant-integration-testing">
  ## ライブテナントでの統合テスト
</div>

Auth0 CLI コマンド `auth0 acul dev --connected` を使用したライブテナント統合では、カスタム画面 UI のエンドツーエンドテストを実行し、Auth0 テナントとの統合を検証できます。\
UI が概ね完成した後の統合テストには `--connected` モードを使用します。リロードのたびに認証フローが再開されるためです。

`auth0 acul dev --connected` を使用する場合:

* ACUL プロジェクトのディレクトリを選択します。
  * `npm run build` を選択してプロジェクトをビルドし、Auth0 テナントを構成します。
  * ローカルアセットを配信する **ポート** を選択します。デフォルトは `55444` で、バックグラウンドでローカルサーバーを起動します。
  * オプションとして、`--connected` モードでプロジェクトの `/dist/assets` ディレクトリの変更を継続的に監視できます。

新しいターミナルを開き、`auth0 test login` を実行して、テナント上でログインフローをテストします。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  `--connected` モードでは、Auth0 CLI コマンドがファイルの変更を監視し、アセットを再ビルドして、テナントの設定を自動的に更新します。
</Callout>

詳細については、GitHub 上の [Auth0 CLI](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) を参照してください。