

Amazon CodeCatalyst は新規のお客様には提供されなくなりました。既存のお客様は、通常どおりサービスを引き続き使用できます。詳細については、「[CodeCatalyst から移行する方法](migration.md)」を参照してください。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# プロジェクト要件を満たすためのカスタムブループリントの作成
<a name="develop-bp"></a>

カスタムブループリントを公開する前に、特定の要件を満たすようにブループリントを開発できます。カスタムブループリントを開発し、プレビュー時にプロジェクトを作成してブループリントをテストできます。カスタムブループリントを開発して、特定のソースコード、アカウント接続、ワークフロー、問題、CodeCatalyst で作成できるその他のコンポーネントなどのプロジェクトコンポーネントを含めることができます。

**重要**  
外部ソースからのブループリントパッケージを使用する場合は、それらのパッケージに伴うリスクを考慮してください。スペースに追加するカスタムブループリントとそれらが生成するコードは、お客様の責任となります。

**重要**  
CodeCatalyst スペースのカスタムブループリントを開発するには、**[スペース管理者]** または **[パワーユーザー]** ロールがスペースにあるアカウントでサインインする必要があります。

**カスタムブループリントを開発または更新するには**

1. 開発環境を再開します。詳細については、「[開発環境の再開](devenvironment-resume.md)」を参照してください。

   開発環境がない場合は、まず開発環境を作成する必要があります。詳細については、「[開発環境の作成](devenvironment-create.md)」を参照してください。

1. 開発環境内のターミナルを開きます。

1. ブループリントの作成時にリリースワークフローにオプトインすると、最新のブループリントバージョンが自動的に公開されます。変更をプルして、`package.json` ファイルに増分バージョンがあることを確認します。以下のコマンドを使用します。

   ```
   git pull
   ```

1. `src/blueprint.ts` ファイルで、カスタムブループリントのオプションを編集します。`Options` インターフェイスは CodeCatalyst ウィザードによって動的に解釈され、選択ユーザーインターフェイス (UI) を生成します。コンポーネントとサポートされているタグを追加することで、カスタムブループリントを開発できます。詳細については、「[フロントエンドウィザードを使用したブループリント機能の変更](wizard-bp.md)」、「[ブループリントへの環境コンポーネントの追加](comp-env-bp.md)」、「[リージョンコンポーネントをブループリントに追加する](region-comp-bp.md)」、「[ブループリントへのリポジトリとソースコードコンポーネントの追加](comp-repo-source-bp.md)」、「[ブループリントへのワークフローコンポーネントの追加](comp-workflow-bp.md)」、「[開発環境コンポーネントをブループリントに追加する](comp-dev-env-bp.md)」を参照してください。

   カスタムブループリントの開発時に、追加のサポートのためにブループリント SDK とサンプルブループリントを表示することもできます。詳細については、「[open-source GitHub リポジトリ](https://github.com/aws/codecatalyst-blueprints)」を参照してください。

カスタムブループリントは、合成が成功した結果、プレビューバンドルを提供します。プロジェクトバンドルは、プロジェクト内のソースコード、設定、リソースを表し、CodeCatalyst デプロイ API オペレーションがプロジェクトにデプロイするために使用されます。カスタムブループリントの開発を続行する場合は、ブループリント合成プロセスを再実行します。詳細については、「[カスタムブループリントの概念](custom-bp-concepts.md)」を参照してください。

# フロントエンドウィザードを使用したブループリント機能の変更
<a name="wizard-bp"></a>

CodeCatalyst のブループリント選択ウィザードは、`blueprint.ts` ファイルの `Options` インターフェイスによって自動生成されます。フロントエンド ウィザードは、[JSDOC スタイルのコメントとタグ](https://jsdoc.app/about-getting-started.html)を使用して、ブループリントの `Options` の変更と機能をサポートします。JSDOC スタイルのコメントとタグを使用してタスクを実行できます。例えば、オプションの上に表示されるテキストを選択したり、入力検証などの機能を有効にしたり、オプションを折りたたんだりできます。ウィザードは、`Options` インターフェイスの TypeScript タイプから生成された抽象構文ツリー (AST) を解釈することで機能します。ウィザードは、可能な限り記述されたタイプに合わせて自動的に設定されます。すべてのタイプがサポートされているわけではありません。サポートされている他のタイプには、リージョンセレクターと環境セレクターが含まれます。

ブループリントの `Options` で JSDOC のコメントとタグを使用するウィザードの例を次に挙げます。

```
export interface Options {
  /**
   * What do you want to call your new blueprint?
   * @validationRegex /^[a-zA-Z0-9_]+$/
   * @validationMessage Must contain only upper and lowercase letters, numbers and underscores
   */
  blueprintName: string;

  /**
   * Add a description for your new blueprint.
   */
   description?: string;

   /**
    * Tags for your Blueprint:
    * @collapsed true
    */
  tags?: string[];
}
```

`Options` インターフェイスの各オプションの表示名は、デフォルトでは `camelCase` に表示されます。JSDOC スタイルのコメントのプレーンテキストは、ウィザードのオプションの上にテキストとして表示されます。

**Topics**
+ [サポートされているタグ](#supported-tags-bp)
+ [サポートされている TypeScript タイプ](#supported-typescript-bp)
+ [合成中のユーザーへの伝達](#communication-mid-synthesis)

## サポートされているタグ
<a name="supported-tags-bp"></a>

次の JSDOC タグは、フロントエンドウィザードではカスタムブループリントの `Options` でサポートされています。

### @inlinePolicy ./path/to/policy/file.json
<a name="inline-policy-tag"></a>
+ **必須** - オプションはタイプ `Role` になります。
+ **使用状況** - ロールに必要なインラインポリシーを知らせることができます。`policy.json` パスはソースコードの下になると想定されています。ロールのカスタムポリシーが必要なときに、このタグを使用します。
+ **依存関係** - `blueprint-cli 0.1.12` 以上
+ **例** - `@inlinePolicy ./deployment-policy.json`

```
environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @inlinePolicy ./path/to/deployment-policy.json
       */
      cdkRole: Role[];
    };
   };
```

### @trustPolicy ./path/to/policy/file.json
<a name="trust-policy-tag"></a>
+ **必須** - オプションはタイプ `Role` になります。
+ **使用状況** - ロールに必要な信頼ポリシーを知らせることができます。`policy.json` パスはソースコードの下になると想定されています。ロールのカスタムポリシーが必要なときに、このタグを使用します。
+ **依存関係** - `blueprint-cli 0.1.12` 以上
+ **例** - `@trustPolicy ./trust-policy.json`

```
environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @trustPolicy ./path/to/trust-policy.json
       */
      cdkRole: Role[];
    };
   };
```

### @validationRegex 正規表現
<a name="validation-regex-tag"></a>
+ **必須** - オプションは文字列になります。
+ **使用状況** - 指定された正規表現を使用してオプションの入力検証を実行し、`@validationMessage` を表示します。
+ **例** - `@validationRegex /^[a-zA-Z0-9_]+$/`
+ **推奨** - `@validationMessage` と使用します。デフォルトでは、検証メッセージは空です。

### @validationMessage 文字列
<a name="validation-message-tag"></a>
+ **必須** - `@validationRegex`、または使用状況を確認するためのその他のエラー。
+ **使用状況** - `@validation*` 障害時に検証メッセージを表示します。
+ **例** - `@validationMessage Must contain only upper and lowercase letters, numbers, and underscores`。
+ **推奨** - `@validationMessage` と使用します。デフォルトでは、検証メッセージは空です。

### @collapsed ブール値 (オプション)
<a name="collapsed-boolean-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - サブオプションを折りたためるようにするブール値。折りたたまれた注釈がある場合、デフォルト値は true です。値を `@collapsed false` に設定すると、折りたたみ可能なセクション (初期状態では開いている) が作成されます。
+ **例** - `@collapsed true`

### @displayName 文字列
<a name="display-name-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - オプションの表示名を変更します。表示名の camelCase 以外の形式を許可します。
+ **例** - `@displayName Blueprint Name`

### @displayName 文字列
<a name="display-name-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - オプションの表示名を変更します。表示名の [camelCase](https://en.wikipedia.org/wiki/Camel_case) 以外の形式を許可します。
+ **例** - `@displayName Blueprint Name`

### @defaultEntropy 番号
<a name="default-entropy-tag"></a>
+ **必須** - オプションは文字列になります。
+ **使用状況** - 指定された長さのランダムな英数字文字列をオプションに追加します。
+ **例** - `@defaultEntropy 5`

### @placeholder 文字列 (オプション)
<a name="placeholder-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - デフォルトのテキストフィールドプレースホルダーを変更します。
+ **例** - `@placeholder type project name here`

### @textArea 番号 (オプション)
<a name="text-area-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - 文字列入力を、より大きなテキストセクション用のテキストエリアコンポーネントに変換します。数値を追加すると、行数が定義されます。デフォルトは 5 行です。
+ **例** - `@textArea 10`

### @hidden ブール値 (オプション)
<a name="hidden-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - 検証チェックが失敗しない限り、ファイルは非表示になります。デフォルト値は true です。
+ **例** - `@hidden`

### @button ブール値 (オプション)
<a name="button-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - 注釈はブール値のプロパティにある必要があります。選択すると true として合成されるボタンを追加します。トグルではありません。
+ **例** - `buttonExample: boolean;`

  ```
  /**
    * @button
    */
  buttonExample: boolean;
  ```

### @showName ブール値 (オプション)
<a name="show-name-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - アカウント接続タイプでのみ使用できます。非表示の名前入力を表示します。デフォルトは `default_environment` です。
+ **例** - `@showName true`

  ```
  /**
    * @showName true
    */
  accountConnection: AccountConnection<{
      ...
  }>;
  ```

### @showEnvironmentType ブール値 (オプション)
<a name="show-environment-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - アカウント接続タイプでのみ使用できます。非表示の環境タイプのドロップダウンメニューを表示します。すべての接続のデフォルトで `production` に設定されています。オプションは **[非本番]** または **[本番]** です。
+ **例** - `@showEnvironmentType true`

  ```
  /**
    * @showEnvironmentType true
    */
  accountConnection: AccountConnection<{
      ...
  }>;
  ```

### @forceDefault ブール値 (オプション)
<a name="force-default-tag"></a>
+ **必須** - 該当なし
+ **使用状況** - ユーザーが以前に使用した値ではなく、ブループリント作成者が指定したデフォルト値を使用します。
+ **例** - `forceDeafultExample: any;`

  ```
  /**
    * @forceDefault
    */
  forceDeafultExample: any;
  ```

### @requires blueprintName
<a name="requires-tag"></a>
+ **必須** - `Options` インターフェイスに注釈を付けます。
+ **使用状況** - 現在のブループリントの要件として、指定された `blueprintName` をプロジェクトに追加するようにユーザーに警告します。
+ **例** - `@requires '@amazon-codecatalyst/blueprints.blueprint-builder'`

  ```
  /*
   * @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
   */
  export interface Options extends ParentOptions {
  ...
  ```

### @filter 正規表現
<a name="filter-regex-tag"></a>
+ **必須** - `Selector` または `MultiSelect` インターフェイスに注釈を付けます。
+ **使用状況** - ウィザードのドロップダウンを、指定された正規表現に一致するオプションにフィルタリングします。
+ **例** - `@filter /blueprintPackageName/`

  ```
   /**
       * @filter /myPackageName/
       */
      blueprintInstantiation?: Selector<BlueprintInstantiation>;
  ...
  ```

## サポートされている TypeScript タイプ
<a name="supported-typescript-bp"></a>

次の TypeScript タイプは、フロントエンドウィザードのカスタムブループリントの `Options` でサポートされています。

### 数値
<a name="number-ts-tag"></a>
+ **必須** - オプションはタイプ `number` になります。
+ **使用状況** - 数値入力フィールドを生成します。
+ **例** - `age: number`

```
{
  age: number
  ...
}
```

### 文字列
<a name="string-ts-tag"></a>
+ **必須** - オプションはタイプ `string` になります。
+ **使用状況** - 文字列入力フィールドを生成します。
+ **例** - `name: string`

```
{
  age: string
  ...
}
```

### 文字列リスト
<a name="string-list-ts-tag"></a>
+ **必須** - オプションはタイプ `string` の配列です。
+ **使用状況** - 文字列リスト入力を生成します。
+ **例** - `isProduction: boolean`

```
{
  isProduction: boolean
  ...
}
```

### Checkbox (チェックボックス)
<a name="checkbox-ts-tag"></a>
+ **必須** - オプションは `boolean` になります。
+ **使用状況** - チェックボックスを生成します。
+ **例** - `isProduction: boolean`

```
{
  isProduction: boolean
  ...
}
```

### ラジオ
<a name="radio-ts-tag"></a>
+ **必須** - オプションは 3 つ以下の文字列の和集合になります。
+ **使用状況** - 選択したラジオを生成します。
**注記**  
4 つ以上の項目がある場合、このタイプはドロップダウンとしてレンダリングされます。
+ **例** - `color: 'red' | 'blue' | 'green'`

```
{
  color: 'red' | 'blue' | 'green'
  ...
}
```

### ドロップダウン
<a name="dropdown-ts-tag"></a>
+ **必須** - オプションは 4 つ以上の文字列の和集合になります。
+ **使用状況** - ドロップダウンを生成します。
+ **例** - `runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'`

```
{
  runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
  ...
}
```

### 拡張可能なセクション
<a name="expandable-ts-tag"></a>
+ **必須** - オプションはオブジェクトになります。
+ **使用状況** - 拡張可能なセクションを生成します。オブジェクトのオプションは、ウィザードの拡張可能なセクション内にネストされます。
+ **例** - 

```
{
     expandableSectionTitle: {
         nestedString: string;
         nestedNumber: number;
     }
}
```

### タプル
<a name="tuple-ts-tag"></a>
+ **必須** - オプションはタイプ `Tuple` になります。
+ **使用状況** - キーと値の有料入力を生成します。
+ **例** - `tuple: Tuple[string, string]>`

```
{
    tuple: Tuple[string, string]>;
    ...
}
```

### タプルリスト
<a name="tuple-list-ts-tag"></a>
+ **必須** - オプションはタイプ `Tuple` の配列です。
+ **使用状況** - タプルリスト入力を生成します。
+ **例** - `tupleList: Tuple[string, string]>[]`

```
{
  tupleList: Tuple[string, string]>[];
  ...
}
```

### Selector
<a name="selector-ts-tag"></a>
+ **必須** - オプションはタイプ `Selector` になります。
+ **使用状況** - プロジェクトに適用されるソースリポジトリまたはブループリントのドロップダウンを生成します。
+ **例** - `sourceRepo: Selector<SourceRepository>`

```
{
    sourceRepo: Selector<SourceRepository>;
    sourceRepoOrAdd: Selector<SourceRepository | string>;
    blueprintInstantiation: Selector<BlueprintInstantiation>;
  ...
}
```

### 複数選択
<a name="multiselect-ts-tag"></a>
+ **必須** - オプションはタイプ `Selector` になります。
+ **使用状況** - 複数選択入力を生成します。
+ **例** - `multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>`

```
{
  multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
  ...
}
```

## 合成中のユーザーへの伝達
<a name="communication-mid-synthesis"></a>

ブループリント作成者は、検証メッセージ以外にも、ユーザーとコミュニケーションを取ることができます。例えば、スペースメンバーは、明確でないブループリントを生成するオプションの組み合わせを表示する場合があります。カスタムブループリントは、合成を呼び出すことでエラーメッセージをユーザーに伝える機能をサポートします。基本のブループリントでは、明確なエラーメッセージを要求する `throwSynthesisError(...)` 関数を実装します。次を使用してメッセージを呼び出すことができます。

```
//blueprint.ts
this.throwSynthesisError({
   name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
   message: 'hello from the blueprint! This is a custom error communicated to the user.'
})
```

# 入力の生成とフロントエンドウィザード要素のレンダリング
<a name="comp-dynamic-input-bp"></a>

DynamicKVInput を使用してウィザード入力を生成し、カスタムブループリントのフロントエンドウィザード要素を動的に作成できます。

**Topics**
+ [開発環境の作成](#dynamickvinput-bp)
+ [ウィザード要素の動的作成](#create-wizard-elements-bp)

## 開発環境の作成
<a name="dynamickvinput-bp"></a>

DynamicKVInput タイプを使用して、カスタム bluerpint のデフォルトを使用してフロントエンドウィザード入力を生成できます。最新のスキーマを表示するには、「[DynamicKVInput 定義](https://github.com/aws/codecatalyst-blueprints/blob/main/packages/blueprints/blueprint/src/ui-selectors/dynamic-kv-input.ts)」を参照してください。

次の例は、`Options` を使用してオブジェクトをシェイプする方法を示しています。

```
import { DynamicKVInput } from '@amazon-codecatalyst/blueprints.blueprint';

export interface Options extends ParentOptions {

  parameters: DynamicKVInput[];

}
```

次の例は、複数のプロパティでデフォルトのパラメータを設定する方法を示しています。

```
{ 
"parameters": [
        {
            "key": "AWS_REGION",
            "value": "us-west-2",
            "displayType": "region",
            "possibleValues": [
                "us-west-1",
                "us-west-2",
                "us-east-1",
                "us-east-2"
            ],
            "displayName": "AWS Region",
            "description": "AWS Region to deploy the solution to."
        },
        {
            "key": "SchedulingActive",
            "value": "Yes",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Scheduling Active",
            "description": "Activate or deactivate scheduling."
        },
        {
            "key": "ScheduledServices",
            "value": "Both",
            "displayType": "dropdown",
            "possibleValues": [
                "EC2",
                "RDS",
                "Both"
            ],
            "displayName": "Scheduled Services",
            "description": "Services to schedule."
        },
        {
            "key": "ScheduleRdsClusters",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Schedule RDS Clusters",
            "description": "Enable scheduling of Aurora clusters for RDS service."
        },
        {
            "key": "CreateRdsSnapshot",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Create RDS Snapshot",
            "description": "Create snapshot before stopping RDS instances (does not apply to Aurora Clusters)."
        },
        {
            "key": "MemorySize",
            "value": "128",
            "displayType": "dropdown",
            "possibleValues": [
                "128",
                "384",
                "512",
                "640",
                "768",
                "896",
                "1024",
                "1152",
                "1280",
                "1408",
                "1536"
            ],
            "displayName": "Memory Size",
            "description": "Size of the Lambda function running the scheduler, increase size when processing large numbers of instances."
        },
        {
            "key": "UseCloudWatchMetrics",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Use CloudWatch Metrics",
            "description": "Collect instance scheduling data using CloudWatch metrics."
        },
        {
            "key": "LogRetentionDays",
            "value": "30",
            "displayType": "dropdown",
            "possibleValues": [
                "1",
                "3",
                "5",
                "7",
                "14",
                "30",
                "60",
                "90",
                "120",
                "150",
                "180",
                "365",
                "400",
                "545",
                "731",
                "1827",
                "3653"
            ],
            "displayName": "Log Retention Days",
            "description": "Retention days for scheduler logs."
        },
        {
            "key": "Trace",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Trace",
            "description": "Enable debug-level logging in CloudWatch logs."
        },
        {
            "key": "EnableSSMMaintenanceWindows",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Enable SSM Maintenance Windows",
            "description": "Enable the solution to load SSM Maintenance Windows, so that they can be used for EC2 instance Scheduling."
        },
        {
            "key": "DefaultTimezone",
            "value": "UTC",
            "displayType": "string",
            "displayName": "Default Timezone",
            "description": "Default timezone to use for scheduling."
        },
        {
            "key": "Regions",
            "value": "us-west-2",
            "displayType": "string",
            "displayName": "Regions",
            "description": "List of regions in which instances should be scheduled, leave blank for current region only."
        },
        {
            "key": "UsingAWSOrganizations",
            "value": "No",
            "displayType": "dropdown",
            "possibleValues": [
                "Yes",
                "No"
            ],
            "displayName": "Using AWS Organizations",
            "description": "Use AWS Organizations to automate spoke account registration."
        },
        {
            "key": "Principals",
            "displayType": "string",
			      "optional": false,
            "displayName": "Principals",
            "description": "(Required) If using AWS Organizations, provide the Organization ID. Eg. o-xxxxyyy. Else, provide a comma separated list of spoke account ids to schedule. Eg.: 1111111111, 2222222222 or {param: ssm-param-name}"
        },
        {
            "key": "Namespace",
            "value": "Default",
            "displayType": "string",
            "displayName": "Namespace",
            "description": "Provide unique identifier to differentiate between multiple solution deployments (No Spaces). Example: Dev"
        },
        {
            "key": "SchedulerFrequency",
            "value": 5,
            "displayType": "number",
            "displayName": "Scheduler Frequency",
            "description": "Scheduler running frequency in minutes."
        }
    ]
}
```

## ウィザード要素の動的作成
<a name="create-wizard-elements-bp"></a>

ウィザード入力の作成と同じスキーマを使用して、合成中にウィザードを動的に再レンダリングできます。これは、必要に応じてユーザーがフォローアップする質問に対処するために使用できます。

```
//blueprint.ts

export interface Options extends ParentOptions {
...
 dynamicOptions: OptionsSchemaDefinition<'optionsIdentifier', KVSchema>;
}
```

その後、 `Options` コンポーネントを使用して、合成期間中にウィザードを設定できます。

```
import {
  OptionsSchemaDefinition,
  OptionsSchema,
} from '@amazon-codecatalyst/blueprints.blueprint';

...

  // dynamically renders a number in the place where 'optionsIdentifier' was set in the original options type.
  new OptionsSchema<KVSchema>(this, 'optionsIdentifier', [
    {
            "key": "SchedulerFrequency",
            "value": 5,
            "displayType": "number",
            "displayName": "Scheduler Frequency",
            "description": "Scheduler running frequency in minutes."
    }
   ]);
```

# ブループリントへの環境コンポーネントの追加
<a name="comp-env-bp"></a>

カスタムブループリントウィザードは、ウィザードを通じて公開される `Options` インターフェイスから動的に生成されます。ブループリントは、公開されたタイプからのユーザーインターフェイス (UI) コンポーネントの生成をサポートします。

**Amazon CodeCatalyst ブループリント環境コンポーネントをインポートするには**

`blueprint.ts` ファイルに次を追加します。

```
import {...} from '@amazon-codecatalyst/codecatalyst-environments'
```

**Topics**
+ [開発環境の作成](#create-dev-env-bp)
+ [環境の一覧](#list-env-bp)
+ [モックインターフェースの例](#examples-comp-env-bp)

## 開発環境の作成
<a name="create-dev-env-bp"></a>

次の例は、アプリケーションをクラウドにデプロイする方法を示しています。

```
export interface Options extends ParentOptions {
        ...
        myNewEnvironment:  EnvironmentDefinition{
            thisIsMyFirstAccountConnection: AccountConnection{
                thisIsARole: Role['lambda', 's3', 'dynamo'];
             };
        };
    }
```

インターフェイスは、単一のアカウント接続 (`thisIsMyFirstAccountConnection`) を持つ新しい環境 (`myNewEnvironment`) を要求する UI コンポーネントを生成します。アカウント接続 (`thisIsARole`) のロールも、最小必須ロール機能として `['lambda', 's3', 'dynamo']` で生成されます。すべてのユーザーがアカウント接続を持っているわけではないため、ユーザーがアカウントに接続しない場合や、ロールでアカウントに接続していない場合はチェックする必要があります。ロールには、`@inlinePolicies` で注釈を付けることもできます。詳細については、「[@inlinePolicy ./path/to/policy/file.json](wizard-bp.md#inline-policy-tag)」を参照してください。

環境コンポーネントには、`name` と `environmentType` が必要です。次のコードは、最小必須のデフォルト形状です。

```
{
  ...
  "myNewEnvironment": {
    "name": "myProductionEnvironment",
    "environmentType": "PRODUCTION"
  },
}
```

次に、UI コンポーネントがさまざまなフィールドの入力を求めます。フィールドに入力すると、ブループリントが完全に展開されます。テストと開発の目的で、完全なモックを `defaults.json` ファイルに含めると便利です。

## 環境の一覧
<a name="list-env-bp"></a>

タイプ `EnvironmentDefinition` の配列を指定すると、ウィザード UI で環境の一覧が生成されます。

```
export interface Options extends ParentOptions {
    ...
   /**
     @showName readOnly
   */
    myEnvironments:  EnvironmentDefinition<{
        thisIsMyFirstAccountConnection: AccountConnection<{
            thisIsARole: Role<['lambda', 's3', 'dynamo']>;
        }>;
    }>[];

}
```

次の例は、環境一覧のデフォルトを示しています。

```
{
  ...
  "myEnvironments": [
  {
    "name": "myProductionEnvironment",
    "environmentType": "PRODUCTION"
  },
  {
    "name": "myDevelopmentEnvironment",
    "environmentType": "DEVELOPMENT"
  },
  ]
}
```

## モックインターフェースの例
<a name="examples-comp-env-bp"></a>

### シンプルなモックインターフェイス
<a name="simple-comp-env-bp"></a>

```
{
    ...
    "thisIsMyEnvironment": {
        "name": "myProductionEnvironment",
        "environmentType": "PRODUCTION",
        "thisIsMySecondAccountConnection": {
            "id": "12345678910",
            "name": "my-account-connection-name",
            "secondAdminRole": {
                "arn": "arn:aws:iam::12345678910:role/ConnectedQuokkaRole",
                "name": "ConnectedQuokkaRole",
                "capabilities": [
                    "lambda",
                    "s3",
                    "dynamo"
                ]
            }
        }
    }
}
```

### 複雑なモックインターフェイス
<a name="complex-comp-env-bp"></a>

```
export interface Options extends ParentOptions {
  /**
   * The name of an environment
   * @displayName This is a Environment Name
   * @collapsed
   */
  thisIsMyEnvironment: EnvironmentDefinition{
    /**
     * comments about the account that is being deployed into
     * @displayName This account connection has an overriden name
     * @collapsed
     */
    thisIsMyFirstAccountConnection: AccountConnection{
      /**
       * Blah blah some information about the role that I expect
       * e.g. here's a copy-pastable policy: [to a link]
       * @displayName This role has an overriden name
       */
      adminRole: Role['admin', 'lambda', 's3', 'cloudfront'];
      /**
       * Blah blah some information about the second role that I expect
       * e.g. here's a copy-pastable policy: [to a link]
       */
      lambdaRole: Role['lambda', 's3'];
    };
    /**
     * comments about the account that is being deployed into
     */
    thisIsMySecondAccountConnection: AccountConnection{
      /**
         * Blah blah some information about the role that I expect
         * e.g. here's a copy-pastable policy: [to a link]
         */
      secondAdminRole: Role['admin', 'lambda', 's3', 'cloudfront'];
      /**
         * Blah blah some information about the second role that I expect
         * e.g. here's a copy-pastable policy: [to a link]
         */
      secondLambdaRole: Role['lambda', 's3'];
    };
  };
}
```

### 完全なモックインターフェイス
<a name="complete-comp-env-bp"></a>

```
{
  ...
  "thisIsMyEnvironment": {
    "name": "my-production-environment",
    "environmentType": "PRODUCTION",
    "thisIsMySecondAccountConnection": {
      "id": "12345678910",
      "name": "my-connected-account",
      "secondAdminRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "admin",
          "lambda",
          "s3",
          "cloudfront"
        ]
      },
      "secondLambdaRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "lambda",
          "s3"
        ]
      }
    },
    "thisIsMyFirstAccountConnection": {
      "id": "12345678910",
      "name": "my-connected-account",
      "adminRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "admin",
          "lambda",
          "s3",
          "cloudfront"
        ]
      },
      "lambdaRole": {
        "name": "LambdaQuokkaRole",
        "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole",
        "capabilities": [
          "lambda",
          "s3"
        ]
      }
    }
  },
}
```

# シークレットコンポーネントをブループリントに追加する
<a name="secrets-comp-bp"></a>

シークレットは CodeCatalyst で使用して、ワークフローで参照できる機密データを保存できます。シークレットをカスタムブループリントに追加すると、ワークフローで参照できます。詳細については、「[シークレットを使用したデータのマスキング](workflows-secrets.md)」を参照してください。

**Amazon CodeCatalyst ブループリントリージョンタイプをインポートするには**

`blueprint.ts` ファイルで次を追加します。

```
import { Secret, SecretDefinition } from '@amazon-codecatalyst/blueprint-component.secrets'
```

**Topics**
+ [シークレットを作成する](#comp-create-secrets-bp)
+ [ワークフローでシークレットを参照する](#comp-reference-secrets-bp)

## シークレットを作成する
<a name="comp-create-secrets-bp"></a>

次の例では、シークレット値とオプションの説明を入力するようにユーザーを促す UI コンポーネントを作成します。

```
export interface Options extends ParentOptions {
    ...
    mySecret: SecretDefinition;
}


export class Blueprint extends ParentBlueprint {
  constructor(options_: Options) {
    new Secret(this, options.secret);
}
```

シークレットコンポーネントには `name` が必要です。次のコードは、最小で必須のデフォルト形状です。

```
{
    ...
    "secret": {
        "name": "secretName"
    },

}
```

## ワークフローでシークレットを参照する
<a name="comp-reference-secrets-bp"></a>

次のブループリント例では、シークレットと、シークレット値を参照するワークフローを作成します。詳細については、「[ワークフローでのシークレットの参照](workflows-secrets.using.md#workflows-using-secrets.using-identifier)」を参照してください。

```
export interface Options extends ParentOptions {
    ...
/**
*
* @validationRegex /^\w+$/
*/
  username: string;


  password: SecretDefinition;
}


export class Blueprint extends ParentBlueprint {
  constructor(options_: Options) {
    const password = new Secret(this, options_.password);

    const workflowBuilder = new WorkflowBuilder(this, {
      Name: 'my_workflow',
    });


    workflowBuilder.addBuildAction({
      actionName: 'download_files',
      input: {
        Sources: ['WorkflowSource'],
      },
      output: {
        Artifacts: [{ Name: 'download', Files: ['file1'] }],
      },
      steps: [
        `curl -u ${options_.username}:${password.reference} https://example.com`,
      ],
    });

    new Workflow(
      this,
      repo,
      workflowBuilder.getDefinition(),
    );

}
```

CodeCatalyst でシークレットを使用する方法については、「[シークレットを使用したデータのマスキング](workflows-secrets.md)」を参照してください。

# リージョンコンポーネントをブループリントに追加する
<a name="region-comp-bp"></a>

リージョンタイプをカスタムブループリントの `Options` インターフェイスに追加してコンポーネントを生成できます。ブループリントウィザードでは 1 つまたは複数の AWS リージョンを入力できます。リージョンタイプは、`blueprint.ts` ファイルのベースブループリントからインポートできます。詳細については、「[AWS リージョン](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/)」を参照してください。

**Amazon CodeCatalyst ブループリントリージョンタイプをインポートするには**

`blueprint.ts` ファイルで次を追加します。

```
import { Region } from '@amazon-codecatalyst/blueprints.blueprint'
```

リージョンタイプパラメータは、選択できる AWS リージョンコードの配列です。または、`*` を使用して、サポートされるすべての AWS リージョンを含めることもできます。

**Topics**
+ [‏注釈](#region-annotations-bp)
+ [リージョンコンポーネントの例](#region-components-examples)

## ‏注釈
<a name="region-annotations-bp"></a>

JSDoc タグを `Options` インターフェイスの各フィールドに追加すると、ウィザードでのフィールドの表示方法と動作をカスタマイズできます。リージョンタイプでは、次のタグがサポートされます。
+ `@displayName` 注釈を使用して、ウィザードのフィールドのラベルを変更できます。

  例: `@displayName AWS Region`
+ `@placeholder` 注釈を使用して、選択コンポーネントと複数選択コンポーネントのプレースホルダーを変更できます。

  例: `@placeholder Choose AWS Region`

## リージョンコンポーネントの例
<a name="region-components-examples"></a>

### 指定したリストからリージョンを選択する
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>;
}
```

### 指定したリストから 1 つまたは複数のリージョンを選択する
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```

### AWS リージョンを 1 つ選択する
<a name="region-one-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Region
   */
  region: Region<['*']>;
}
```

### 指定したリストから 1 つまたは複数のリージョンを選択する
<a name="region-specified-list-bp"></a>

```
export interface Options extends ParentOptions {
    ...
  /**
   * @displayName Regions
   */
  multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[];
}
```

# ブループリントへのリポジトリとソースコードコンポーネントの追加
<a name="comp-repo-source-bp"></a>

リポジトリは、Amazon CodeCatalyst によってコードの保存に使用されます。リポジトリは名前を入力として受け取ります。ほとんどのコンポーネントは、ソースコードファイル、ワークフロー、マネージド開発環境 (MDE) などの他のコンポーネントなどのリポジトリに保存されます。ソースリポジトリコンポーネントは、ファイルと静的アセットの管理に使用されるコンポーネントもエクスポートします。リポジトリには名前の制約があります。詳細については、「[CodeCatalyst のソースリポジトリでコードを保存し、共同作業を行うソースリポジトリでコードを保存して共同作業を行う](source.md)」を参照してください。

```
const repository = new SourceRepository(this, {
  title: 'my-new-repository-title',
});
```

**Amazon CodeCatalyst ブループリントリポジトリとソースコードコンポーネントをインポートするには**

`blueprint.ts` ファイルに次を追加します。

```
import {...} from '@caws-blueprint-component/caws-source-repositories'
```

**Topics**
+ [フィルターの追加](#repo-add-file-bp)
+ [汎用ファイルの追加](#repo-add-generic-file-bp)
+ [ファイルのコピー](#repo-copy-file-bp)
+ [複数のファイルのターゲット設定](#target-multiple-files-bp)
+ [新しいリポジトリの作成とファイルの追加](#repo-code-examples-bp)

## フィルターの追加
<a name="repo-add-file-bp"></a>

`SourceFile` 構文を使用して、テキストファイルをリポジトリに書き込めます。オペレーションは最も一般的なユースケースの 1 つであり、リポジトリ、ファイルパス、テキストコンテンツを使用します。ファイルパスがリポジトリ内に存在しない場合、コンポーネントは必要なフォルダをすべて作成します。

```
new SourceFile(repository, `path/to/my/file/in/repo/file.txt`, 'my file contents');
```

**注記**  
同じリポジトリ内の同じ場所に 2 つのファイルを書き込むと、最新の実装によって前のファイルが上書きされます。この機能を使用して生成されたコードをレイヤー化できます。カスタムブループリントが生成したコードに拡張する場合に特に便利です。

## 汎用ファイルの追加
<a name="repo-add-generic-file-bp"></a>

任意のビットをリポジトリに書き込めます。バッファから読み取り、`File` コンストラクトを使用できます。

```
new File(repository, `path/to/my/file/in/repo/file.img`, new Buffer(...));

new File(repository, `path/to/my/file/in/repo/new-img.img`, new StaticAsset('path/to/image.png').content());
```

## ファイルのコピー
<a name="repo-copy-file-bp"></a>

スターターコードをコピーして貼り付け、そのベースの上にさらにコードを生成することで、生成されたコードの使用を開始できます。`static-assets` ディレクトリ内にコードを配置し、そのコードを `StaticAsset` コンストラクトでターゲットにします。この場合のパスは、常に `static-assets` ディレクトリのルートから始まります。

```
const starterCode = new StaticAsset('path/to/file/file.txt')
const starterCodeText = new StaticAsset('path/to/file/file.txt').toString()
const starterCodeRawContent = new StaticAsset('path/to/image/hello.png').content()

const starterCodePath = new StaticAsset('path/to/image/hello.png').path()
// starterCodePath is equal to 'path/to/image/hello.png'
```

`StaticAsset` のサブクラスは `SubstitutionAsset` です。サブクラス関数はまったく同じですが、代わりにファイルに対して mustache 置換を実行できます。copy-and-replace スタイル生成の実行に役立ちます。

静的アセット置換は、生成されたソースリポジトリにシードされる静的ファイルをレンダリングするために、mustache テンプレートエンジンを使用します。mustache テンプレートルールはレンダリング中に適用されます。つまり、すべての値はデフォルトで HTML エンコードされます。エスケープされていない HTML をレンダリングするには、トリプル mustache 構文 `{{{name}}}` を使用します。詳細については、「[mustache テンプレートのルール](https://github.com/janl/mustache.js?tab=readme-ov-file#variables)」を参照してください。

**注記**  
テキストが解釈できないファイルに対して代入を実行すると、エラーが発生することがあります。

```
const starterCodeText = new SubstitionAsset('path/to/file/file.txt').subsitite({
  'my_variable': 'subbed value1',
  'another_variable': 'subbed value2'
})
```

## 複数のファイルのターゲット設定
<a name="target-multiple-files-bp"></a>

静的アセットは、`StaticAsset` とそのサブクラス「`findAll(...)`」の静的関数を介した glob ターゲット化をサポートしています。このサブクラスは、パス、コンテンツなどをプリロードした静的アセットの一覧を返します。リストを `File` コンストラクトと連鎖させ、`static-assets` ディレクトリ内のコンテンツをコピーして貼り付けられます。

```
new File(repository, `path/to/my/file/in/repo/file.img`, new Buffer(...));

new File(repository, `path/to/my/file/in/repo/new-img.img`, new StaticAsset('path/to/image.png').content());
```

## 新しいリポジトリの作成とファイルの追加
<a name="repo-code-examples-bp"></a>

リポジトリコンポーネントを使用して、生成されたプロジェクトに新しいリポジトリを作成できます。その後、作成したリポジトリにファイルまたはワークフローを追加できます。

```
import { SourceRepository } from '@amazon-codecatalyst/codecatalyst-source-repositories';
...
const repository = new SourceRepository(this, { title: 'myRepo' });
```

次の例は、既存のリポジトリにファイルとワークフローを追加する方法を示しています。

```
import { SourceFile } from '@amazon-codecatalyst/codecatalyst-source-repositories';
import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows';
...
new SourceFile(repository, 'README.md', 'This is the content of my readme');
new Workflow(this, repository, {/**...workflowDefinition...**/});
```

2 つのコードを組み合わせると、`myRepo` という名前の 1 つのリポジトリがソースファイル「`README.md`」とともに生成され、ルートに CodeCatalyst ワークフローが生成されます。

# ブループリントへのワークフローコンポーネントの追加
<a name="comp-workflow-bp"></a>

ワークフローは、トリガーに基づいてアクションを実行するために Amazon CodeCatalyst プロジェクトによって使用されます。ワークフローコンポーネントを使用して、ワークフロー YAML ファイルのビルドと作成ができます。詳細については、「[ワークフロー YAML 定義](workflow-reference.md)」を参照してください。

**Amazon CodeCatalyst ブループリントワークフローコンポーネントをインポートするには**

`blueprint.ts` ファイルに次を追加します。

```
import { WorkflowBuilder, Workflow } from '@amazon-codecatalyst/codecatalyst-workflows'
```

**Topics**
+ [ワークフローコンポーネントの例](#comp-workflows-examples-bp)
+ [環境への接続](#comp-workflows-connect-env-bp)

## ワークフローコンポーネントの例
<a name="comp-workflows-examples-bp"></a>

### WorkflowBuilder コンポーネント
<a name="comp-workflows-workflowbuilder-bp"></a>

クラスを使用してワークフロー定義をビルドできます。定義は、リポジトリでレンダリングするためのワークフローコンポーネントに指定できます。

```
import { WorkflowBuilder } from '@amazon-codecatalyst/codecatalyst-workflows'

const workflowBuilder = new WorkflowBuilder({} as Blueprint, {
  Name: 'my_workflow',
});

// trigger the workflow on pushes to branch 'main'
workflowBuilder.addBranchTrigger(['main']);

// add a build action
workflowBuilder.addBuildAction({
  // give the action a name
  actionName: 'build_and_do_some_other_stuff',

  // the action pulls from source code
  input: {
    Sources: ['WorkflowSource'],
  },

  // the output attempts to autodiscover test reports, but not in the node modules
  output: {
    AutoDiscoverReports: {
      Enabled: true,
      ReportNamePrefix: AutoDiscovered,
      IncludePaths: ['**/*'],
      ExcludePaths: ['*/node_modules/**/*'],
    },
  },
  // execute some arbitrary steps
  steps: [
    'npm install',
    'npm run myscript',
    'echo hello-world',
  ],
  // add an account connection to the workflow
  environment: convertToWorkflowEnvironment(myEnv),
});
```

### Workflow Projen コンポーネント
<a name="comp-workflows-projen-bp"></a>

次の例は、Projen コンポーネントを使用してワークフロー YAML をリポジトリに書き込む方法を示しています。

```
import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows'

...

const repo = new SourceRepository
const blueprint = this;
const workflowDef = workflowBuilder.getDefinition()

// creates a workflow.yaml at .aws/workflows/${workflowDef.name}.yaml
new Workflow(blueprint, repo, workflowDef);

// can also pass in any object and have it rendered as a yaml. This is unsafe and may not produce a valid workflow
new Workflow(blueprint, repo, {... some object ...});
```

## 環境への接続
<a name="comp-workflows-connect-env-bp"></a>

多くのワークフローは、AWS アカウント接続で実行する必要があります。ワークフローは、アクションがアカウントとロール名の仕様を持つ環境に接続できるようにすることで、これを処理します。

```
import { convertToWorkflowEnvironment } from '@amazon-codecatalyst/codecatalyst-workflows'


const myEnv = new Environment(...);

// can be passed into a workflow constructor
const workflowEnvironment = convertToWorkflowEnvironment(myEnv);


// add a build action
workflowBuilder.addBuildAction({
  ...
  // add an account connection to the workflow
  environment: convertToWorkflowEnvironment(myEnv),
});
```

# 開発環境コンポーネントをブループリントに追加する
<a name="comp-dev-env-bp"></a>

マネージド開発環境 (MDE) は、CodeCatalyst で MDE Workspaces を作成して起動するために使用されます。コンポーネントは `devfile.yaml` ファイルを生成します。詳細については、「[Devfile と [開発環境のリポジトリ devfile の編集](devenvironment-devfile-moving.md) の概要](https://redhat-developer.github.io/devfile/)」を参照してください。

```
new Workspace(this, repository, SampleWorkspaces.default);
```

**Amazon CodeCatalyst ブループリントワークスペースコンポーネントをインポートするには**

`blueprint.ts` ファイルに次を追加します。

```
import {...} from '@amazon-codecatalyst/codecatalyst-workspaces'
```

# ブループリントへの問題コンポーネントの追加
<a name="comp-issues-bp"></a>

CodeCatalyst では、機能、タスク、バグ、およびプロジェクトに関連するその他の作業をモニタリングできます。各作業は、問題と呼ばれる個別のレコードに保持されます。各問題には、説明、担当者、ステータス、その他のプロパティを含めることができます。これらのプロパティは、検索、グループ化、フィルタリングできます。デフォルトのビューを使用して問題を表示することも、カスタムフィルタリング、ソート、またはグループ化を使用して独自のビューを作成することもできます。問題に関連する概念の詳細については、「[問題の概念](issues-concepts.md)」および「[CodeCatalyst の問題のクォータ](issues-quotas.md)」を参照してください。

問題コンポーネントは、問題の JSON 表現を生成します。コンポーネントは ID フィールドを入力し、問題定義を入力として受け取ります。

**Amazon CodeCatalyst ブループリント問題コンポーネントをインポートするには**

`blueprint.ts` ファイルに次を追加します。

```
import {...} from '@amazon-codecatalyst/blueprint-component.issues'
```

**Topics**
+ [問題コンポーネントの例](#comp-issues-examples-bp)

## 問題コンポーネントの例
<a name="comp-issues-examples-bp"></a>

### 問題の作成
<a name="comp-issues-create-bp"></a>

```
import { Issue } from '@amazon-codecatalyst/blueprint-component.issues';
...
new Issue(this, 'myFirstIssue', {
  title: 'myFirstIssue',
  content: 'This is an example issue.',
});
```

### 優先度の高い問題の作成
<a name="comp-issues-high-priority-bp"></a>

```
import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows'
...
const repo = new SourceRepository
const blueprint = this;
const workflowDef = workflowBuilder.getDefinition()

// Creates a workflow.yaml at .aws/workflows/${workflowDef.name}.yaml
new Workflow(blueprint, repo, workflowDef);

// Can also pass in any object and have it rendered as a yaml. This is unsafe and may not produce a valid workflow
new Workflow(blueprint, repo, {... some object ...});
```

### ラベルによる優先度の低い問題の作成
<a name="comp-issues-low-priority-bp"></a>

```
import { Issue } from '@amazon-codecatalyst/blueprint-component.issues';
...
new Issue(this, 'myThirdIssue', {
  title: 'myThirdIssue',
  content: 'This is an example of a low priority issue with a label.',
  priority: 'LOW',
  labels: ['exampleLabel'],
});
```

# ブループリントツールと CLI の使用
<a name="bp-cli"></a>

[[ブループリント CLI]](https://www.npmjs.com/package/@amazon-codecatalyst/blueprint-util.cli) は、カスタムブループリントを管理および操作するためのツールを提供します。

**Topics**
+ [ブループリントツールの使用](#working-with-bp-cli)
+ [イメージのアップロードツール](#image-upload-tool)

## ブループリントツールの使用
<a name="working-with-bp-cli"></a>

**ブループリントツールを操作するには**

1. [https://codecatalyst.aws/](https://codecatalyst.aws/) で CodeCatalyst コンソールを開きます。

1. 開発環境を再開します。詳細については、「[開発環境の再開](devenvironment-resume.md)」を参照してください。

   開発環境がない場合は、まず開発環境を作成する必要があります。詳細については、「[開発環境の作成](devenvironment-create.md)」を参照してください。

1. 作業中のターミナルで、次のコマンドを実行してブループリント CLI をインストールします。

   ```
   npm install -g @amazon-codecatalyst/blueprint-util.cli
   ```

1. `blueprint.ts` ファイルで、使用するツールを次の形式でインポートします。

   ```
   import { <tooling-function-name> } from '@amazon-codecatalyst/blueprint-util.cli/lib/<tooling-folder-name>/<tooling-file-name>;
   ```
**ヒント**  
[https://github.com/aws/codecatalyst-blueprints/tree/main/packages/utils/blueprint-cli](https://github.com/aws/codecatalyst-blueprints/tree/main/packages/utils/blueprint-cli) にアクセスして、使用するツールの名前を検索できます。

   **イメージアップロードツールを使用する場合は、スクリプトに以下を追加します。**

   ```
   import { uploadImagePublicly } from '@amazon-codecatalyst/blueprint-util.cli/lib/image-upload-tool/upload-image-to-aws';
   ```

   **例**
   + **公開関数を使用する場合は、スクリプトに以下を追加します。**

     ```
     import { publish } from '@amazon-codecatalyst/blueprint-util.cli/lib/publish/publish';
     ```
   + **イメージアップロードツールを使用する場合は、スクリプトに以下を追加します。**

     ```
     import { uploadImagePublicly } from '@amazon-codecatalyst/blueprint-util.cli/lib/image-upload-tool/upload-image-to-aws';
     ```

1. 関数を呼び出します

   **例:**
   + **公開関数を使用する場合は、スクリプトに以下を追加します。**

     ```
     await publish(logger, config.publishEndpoint, {<your publishing options>});
     ```
   + **イメージアップロードツールを使用する場合は、スクリプトに以下を追加します。**

     ```
     const {imageUrl, imageName} = await uploadImagePublicly(logger, 'path/to/image'));
     ```

## イメージのアップロードツール
<a name="image-upload-tool"></a>

イメージアップロードツールを使用すると、AWS アカウントの S3 バケットに独自のイメージをアップロードし、そのイメージを CloudFront の背後に公開できます。このツールは、ローカルストレージ (およびオプションのバケット名) 内のイメージパスを入力として受け取り、公開されているイメージに URL を返します。詳細については、「[Amazon CloudFront とは](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html)」および「[Amazon S3 とは](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html)」を参照してください。

**イメージアップロードツールを使用するには**

1. [ブループリント SDK とサンプルブループリントにアクセスできるようになるオープンソースブループリント GitHub リポジトリ](https://github.com/aws/codecatalyst-blueprints)をクローンします。ターミナルウィンドウで、以下のコマンドを実行します。

   ```
   git clone https://github.com/aws/codecatalyst-blueprints.git
   ```

1. 次のコマンドを実行して、ブループリント GitHub リポジトリに移動します。

   ```
   cd codecatalyst-blueprints
   ```

1. 次のコマンドを実行して、従属関係をインストールします。

   ```
   yarn && yarn build
   ```

1. 次のコマンドを実行して、最新のブループリント CLI バージョンがインストールされていることを確認します。

   ```
   yarn upgrade @amazon-codecatalyst/blueprint-util.cli
   ```

1. イメージをアップロードする S3 バケットを使用して AWS アカウントにログインします。詳細については、「[AWS CLI を構成する](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html)」、「[AWS コマンドラインインターフェイスにサインインする](https://docs.aws.amazon.com/signin/latest/userguide/command-line-sign-in.html)」を参照してください。

1. CodeCatalyst リポジトリのルートから次のコマンドを実行して、ブループリント CLI を使用してディレクトリに移動します。

   ```
   cd packages/utils/blueprint-cli
   ```

1. 次のコマンドを実行して、S3 バケットにパッケージをアップロードします。

   ```
   yarn blueprint upload-image-public <./path/to/your/image> 
         <optional:optional-bucket-name>
   ```

イメージの URL が生成されます。CloudFront ディストリビューションをデプロイするには時間がかかるため、URL はすぐには利用できません。ディストリビューションステータスを確認して、最新のデプロイステータスを取得します。詳細については、「[ディストリビューションの使用](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-working-with.html)」を参照してください。

# スナップショットテストによるインターフェイスの変更の評価
<a name="testing-bp"></a>

ブループリントの複数の設定にわたって、スナップショットテストの生成がサポートされています。

ブループリント作成者として提供した設定に対して、ブループリントの[スナップショットテスト](https://jestjs.io/docs/snapshot-testing)がサポートされます。これらの設定は部分的なオーバーライドであり、ブループリントのルートにある defaults.json ファイルにマージされます。スナップショットテストを有効にして設定すると、ビルドおよびテストのプロセスにおいて、指定された設定が合成され、合成された出力が参照スナップショットと比較して変更されていないことが検証されます。スナップショットテストのコードを表示するには、[CodeCatalyst ブループリントの GitHub リポジトリ](https://github.com/aws/codecatalyst-blueprints/blob/main/packages/utils/projen-blueprint/src/test-snapshot.ts#L12)を参照してください。

**スナップショットテストを有効にするには**

1. `.projenrc.ts` ファイルで、スナップショットを作成するファイルを指定して、入力オブジェクトを ProjenBlueprint に更新します。例:

   ```
   {
     ....
     blueprintSnapshotConfiguration: {
       snapshotGlobs: ['**', '!environments/**', '!aws-account-to-environment/**'],
     },
   }
   ```

1. ブループリントを再合成し、ブループリントプロジェクト内に TypeScript ファイルを作成します。ソースファイルは Projen によって維持され、再生成されるため、ソースファイルを編集しないでください。以下のコマンドを使用します。

   ```
   yarn projen
   ```

1. `src/snapshot-configurations` ディレクトリに移動し、空のオブジェクトを持つ `default-config.json` ファイルを表示します。1 つまたは複数の独自のテスト設定を使用して、このファイルを更新するか、それらの設定が含まれたファイルと置き換えます。これにより、各テスト設定がプロジェクトの `defaults.json` ファイルとマージされ、合成され、テスト時にスナップショットと比較されます。以下のコマンドを使用してテストを実行します。

   ```
   yarn test
   ```

   テストコマンドを初めて使用すると、`Snapshot Summary › NN snapshots written from 1 test suite` というメッセージが表示されます。後続のテスト実行では、合成された出力がスナップショットと比較して変更されていないことが確認され、`Snapshots: NN passed, NN total` というメッセージが表示されます。

   ブループリントを意図的に変更して異なる出力を生成する場合は、以下のコマンドを実行して参照スナップショットを更新します。

   ```
   yarn test:update
   ```

スナップショットでは、各実行で合成された出力に一貫性があることが想定されます。ブループリントで生成される複数のファイルに差異がある場合、それらのファイルをスナップショットテストから除外する必要があります。`ProjenBluerpint` 入力オブジェクトの `blueprintSnapshotConfiguration` オブジェクトを更新し、`snapshotGlobs` プロパティを追加します。`snapshotGlobs` プロパティは、スナップショット作成で含めるファイルと除外するファイルを決定する [globs](https://github.com/isaacs/node-glob#glob-primer) 配列です。

**注記**  
globs のデフォルトリストがあります。独自のリストを指定した場合、デフォルトのエントリを明示的に再追加する必要がある場合があります。