Amazon CodeCatalyst は新規のお客様には提供されなくなりました。既存のお客様は、通常どおりサービスを引き続き使用できます。詳細については、「[CodeCatalyst から移行する方法](migration.md)」を参照してください。
翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# フロントエンドウィザードを使用したブループリント機能の変更
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)
## サポートされているタグ
次の JSDOC タグは、フロントエンドウィザードではカスタムブループリントの `Options` でサポートされています。
### @inlinePolicy ./path/to/policy/file.json
+ **必須** - オプションはタイプ `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
+ **必須** - オプションはタイプ `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 正規表現
+ **必須** - オプションは文字列になります。
+ **使用状況** - 指定された正規表現を使用してオプションの入力検証を実行し、`@validationMessage` を表示します。
+ **例** - `@validationRegex /^[a-zA-Z0-9_]+$/`
+ **推奨** - `@validationMessage` と使用します。デフォルトでは、検証メッセージは空です。
### @validationMessage 文字列
+ **必須** - `@validationRegex`、または使用状況を確認するためのその他のエラー。
+ **使用状況** - `@validation*` 障害時に検証メッセージを表示します。
+ **例** - `@validationMessage Must contain only upper and lowercase letters, numbers, and underscores`。
+ **推奨** - `@validationMessage` と使用します。デフォルトでは、検証メッセージは空です。
### @collapsed ブール値 (オプション)
+ **必須** - 該当なし
+ **使用状況** - サブオプションを折りたためるようにするブール値。折りたたまれた注釈がある場合、デフォルト値は true です。値を `@collapsed false` に設定すると、折りたたみ可能なセクション (初期状態では開いている) が作成されます。
+ **例** - `@collapsed true`
### @displayName 文字列
+ **必須** - 該当なし
+ **使用状況** - オプションの表示名を変更します。表示名の camelCase 以外の形式を許可します。
+ **例** - `@displayName Blueprint Name`
### @displayName 文字列
+ **必須** - 該当なし
+ **使用状況** - オプションの表示名を変更します。表示名の [camelCase](https://en.wikipedia.org/wiki/Camel_case) 以外の形式を許可します。
+ **例** - `@displayName Blueprint Name`
### @defaultEntropy 番号
+ **必須** - オプションは文字列になります。
+ **使用状況** - 指定された長さのランダムな英数字文字列をオプションに追加します。
+ **例** - `@defaultEntropy 5`
### @placeholder 文字列 (オプション)
+ **必須** - 該当なし
+ **使用状況** - デフォルトのテキストフィールドプレースホルダーを変更します。
+ **例** - `@placeholder type project name here`
### @textArea 番号 (オプション)
+ **必須** - 該当なし
+ **使用状況** - 文字列入力を、より大きなテキストセクション用のテキストエリアコンポーネントに変換します。数値を追加すると、行数が定義されます。デフォルトは 5 行です。
+ **例** - `@textArea 10`
### @hidden ブール値 (オプション)
+ **必須** - 該当なし
+ **使用状況** - 検証チェックが失敗しない限り、ファイルは非表示になります。デフォルト値は true です。
+ **例** - `@hidden`
### @button ブール値 (オプション)
+ **必須** - 該当なし
+ **使用状況** - 注釈はブール値のプロパティにある必要があります。選択すると true として合成されるボタンを追加します。トグルではありません。
+ **例** - `buttonExample: boolean;`
```
/**
* @button
*/
buttonExample: boolean;
```
### @showName ブール値 (オプション)
+ **必須** - 該当なし
+ **使用状況** - アカウント接続タイプでのみ使用できます。非表示の名前入力を表示します。デフォルトは `default_environment` です。
+ **例** - `@showName true`
```
/**
* @showName true
*/
accountConnection: AccountConnection<{
...
}>;
```
### @showEnvironmentType ブール値 (オプション)
+ **必須** - 該当なし
+ **使用状況** - アカウント接続タイプでのみ使用できます。非表示の環境タイプのドロップダウンメニューを表示します。すべての接続のデフォルトで `production` に設定されています。オプションは **[非本番]** または **[本番]** です。
+ **例** - `@showEnvironmentType true`
```
/**
* @showEnvironmentType true
*/
accountConnection: AccountConnection<{
...
}>;
```
### @forceDefault ブール値 (オプション)
+ **必須** - 該当なし
+ **使用状況** - ユーザーが以前に使用した値ではなく、ブループリント作成者が指定したデフォルト値を使用します。
+ **例** - `forceDeafultExample: any;`
```
/**
* @forceDefault
*/
forceDeafultExample: any;
```
### @requires blueprintName
+ **必須** - `Options` インターフェイスに注釈を付けます。
+ **使用状況** - 現在のブループリントの要件として、指定された `blueprintName` をプロジェクトに追加するようにユーザーに警告します。
+ **例** - `@requires '@amazon-codecatalyst/blueprints.blueprint-builder'`
```
/*
* @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
*/
export interface Options extends ParentOptions {
...
```
### @filter 正規表現
+ **必須** - `Selector` または `MultiSelect` インターフェイスに注釈を付けます。
+ **使用状況** - ウィザードのドロップダウンを、指定された正規表現に一致するオプションにフィルタリングします。
+ **例** - `@filter /blueprintPackageName/`
```
/**
* @filter /myPackageName/
*/
blueprintInstantiation?: Selector;
...
```
## サポートされている TypeScript タイプ
次の TypeScript タイプは、フロントエンドウィザードのカスタムブループリントの `Options` でサポートされています。
### 数値
+ **必須** - オプションはタイプ `number` になります。
+ **使用状況** - 数値入力フィールドを生成します。
+ **例** - `age: number`
```
{
age: number
...
}
```
### 文字列
+ **必須** - オプションはタイプ `string` になります。
+ **使用状況** - 文字列入力フィールドを生成します。
+ **例** - `name: string`
```
{
age: string
...
}
```
### 文字列リスト
+ **必須** - オプションはタイプ `string` の配列です。
+ **使用状況** - 文字列リスト入力を生成します。
+ **例** - `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### Checkbox (チェックボックス)
+ **必須** - オプションは `boolean` になります。
+ **使用状況** - チェックボックスを生成します。
+ **例** - `isProduction: boolean`
```
{
isProduction: boolean
...
}
```
### ラジオ
+ **必須** - オプションは 3 つ以下の文字列の和集合になります。
+ **使用状況** - 選択したラジオを生成します。
**注記**
4 つ以上の項目がある場合、このタイプはドロップダウンとしてレンダリングされます。
+ **例** - `color: 'red' | 'blue' | 'green'`
```
{
color: 'red' | 'blue' | 'green'
...
}
```
### ドロップダウン
+ **必須** - オプションは 4 つ以上の文字列の和集合になります。
+ **使用状況** - ドロップダウンを生成します。
+ **例** - `runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'`
```
{
runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
...
}
```
### 拡張可能なセクション
+ **必須** - オプションはオブジェクトになります。
+ **使用状況** - 拡張可能なセクションを生成します。オブジェクトのオプションは、ウィザードの拡張可能なセクション内にネストされます。
+ **例** -
```
{
expandableSectionTitle: {
nestedString: string;
nestedNumber: number;
}
}
```
### タプル
+ **必須** - オプションはタイプ `Tuple` になります。
+ **使用状況** - キーと値の有料入力を生成します。
+ **例** - `tuple: Tuple[string, string]>`
```
{
tuple: Tuple[string, string]>;
...
}
```
### タプルリスト
+ **必須** - オプションはタイプ `Tuple` の配列です。
+ **使用状況** - タプルリスト入力を生成します。
+ **例** - `tupleList: Tuple[string, string]>[]`
```
{
tupleList: Tuple[string, string]>[];
...
}
```
### Selector
+ **必須** - オプションはタイプ `Selector` になります。
+ **使用状況** - プロジェクトに適用されるソースリポジトリまたはブループリントのドロップダウンを生成します。
+ **例** - `sourceRepo: Selector`
```
{
sourceRepo: Selector;
sourceRepoOrAdd: Selector;
blueprintInstantiation: Selector;
...
}
```
### 複数選択
+ **必須** - オプションはタイプ `Selector` になります。
+ **使用状況** - 複数選択入力を生成します。
+ **例** - `multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>`
```
{
multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
...
}
```
## 合成中のユーザーへの伝達
ブループリント作成者は、検証メッセージ以外にも、ユーザーとコミュニケーションを取ることができます。例えば、スペースメンバーは、明確でないブループリントを生成するオプションの組み合わせを表示する場合があります。カスタムブループリントは、合成を呼び出すことでエラーメッセージをユーザーに伝える機能をサポートします。基本のブループリントでは、明確なエラーメッセージを要求する `throwSynthesisError(...)` 関数を実装します。次を使用してメッセージを呼び出すことができます。
```
//blueprint.ts
this.throwSynthesisError({
name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
message: 'hello from the blueprint! This is a custom error communicated to the user.'
})
```