Alexa Styles
Alexa Stylesパッケージを使用してスキルを開発できるため、すべての画面付きAlexa搭載デバイスで統一性のある表示になります。このパッケージには、あらゆる種類のデバイスで正しく動作するようデザインされた、一連の名前付きリソースとスタイルが含まれています。リソースは、共通の色、表示デザイン、メトリクスをまとめたもので、コンポーネントに適用したり、名前付きスタイルと組み合わせたりして、より複雑なスタイルを実現できます。
関連トピック：
Alexa Stylesパッケージを読み込む
Alexa Stylesパッケージを使用し、そのすべての値にアクセスできるようにするには、ドキュメントのパッケージのimport配列にalexa-stylesパッケージを追加します。alexa-stylesパッケージの最新バージョンは1.1.0です。
ドキュメントのimportsセクションの例は、次のとおりです。
"import":[
{
"name": "alexa-styles",
"version" : "1.1.0"
}
]
色のリソース
Alexaの色のリソースは、UIの色に統一性を持たせるよう定義されています。これらは、「@」リソースアノテーションを使用して、どのAPLコンポーネントの色プロパティからも参照できます。
サンプルの使用法
{
"type": "Text",
"color": "@colorText"
},
{
"type": "Frame",
"backgroundColor": "@colorBackground",
"borderColor": "@colorRed800"
}
プロパティ
| リソース名 | 定義 | デフォルト | テレビ | ||
|---|---|---|---|---|---|
colorText |
テキスト要素に使用されるデフォルトの色です。 | #FAFAFA | #DADADA | ||
colorTextReversed |
標準テキストの要素を、背景と著しく異なるカラー値の要素の上に表示するときに使用します。 | #1E2222 | デフォルト | ||
colorSecondaryText |
メタデータのテキストを目立たせないようにするのに使用します。 | #FFFFFF | #DADADA | ||
colorSecondaryReversed |
背景と著しく異なるカラー値の要素の上に表示されるメタデータのテキストに使用します。 | #1E2222 | デフォルト | ||
colorDisabledText |
第1テキストか第2テキストかを問わず、あらゆるdisabledの状態のテキストに使用します。 | #EBEDED4D | デフォルト | ||
colorDisabledTextReversed |
disabledの状態のテキストを、背景と著しく異なるカラー値の要素の上に表示するときに使用します。 | #1E22224D | デフォルト | ||
colorBackground |
背景としての画像など、他に背景スタイルが適用されていないときにコンテンツの後ろに表示される色です。 | #232F3E | デフォルト | ||
colorBackgroundOverlay |
画像が見えやすくなるように半透明のフィルターで画像を覆うときに使用します。固定値のことも、画像から生成された動的な値のこともあります。 | #00000099 | デフォルト | ||
colorComponent |
コンポーネントがデフォルトのときに使用される第1カラーです。たとえば、デフォルトのボタン、アイコン、ボタン枠線、選択されていないチェックボックスなどです。 | #FAFAFA | #DADADA | ||
colorRed800 |
赤の背景色です。濃い赤として使用できます。 | #65151E | デフォルト | ||
colorGreen800 |
緑の背景色です。濃い緑として使用できます。 | #34581B | デフォルト | ||
colorTeal800 |
青緑の背景色です。濃い青緑として使用できます。 | #0A655E | デフォルト | ||
colorBlue800 |
青の背景色です。濃い青として使用できます。 | #2E536F | デフォルト | ||
colorPurple800 |
紫の背景色です。濃い紫として使用できます。 | #3E3F68 | デフォルト | ||
colorGray800 |
灰色の背景色です。濃い灰色として使用できます。 | #6B7878 | デフォルト |
テキストのリソース
Alexa Stylesパッケージには、さまざまなテキストリソースオプションが含まれています。これらは、「@」リソースアノテーションを使用して、Textコンポーネントの対応するプロパティから参照できます。
サンプル
{
"type": "Text",
"fontFamily": "@fontFamilyRomanSans",
"fontWeight": "@fontWeightBold",
"fontSize": "@fontSizeMedium",
"lineHeight": "@lineHeightExpanded",
"letterSpacing": "@letterSpacingNormal
}
フォントファミリー
Alexa fontFamilyリソースを使用して、標準のfontFamilyをAPL Textコンポーネントに適用できます。これらは、「@」名前構文を使用して、APL TextコンポーネントのfontFamilyプロパティに適用できます。
| リソース名 | 定義 | 値 |
|---|---|---|
fontFamilyRomanSans |
英語および英語に近い言語（ラテン文字、ギリシア文字、キリル文字で書かれた言語）で使用されるsans serif書体が該当します。 | Amazon Ember Display |
fontFamilyRomanSerif |
英語および英語に近い言語（ラテン文字、ギリシア文字、キリル文字で書かれた言語）で使用されるserif書体が該当します。 | Bookerly |
フォントのウエイト
fontWeightは、選択したフォントファミリーに適用されます（次の表を参照）。
| リソース名 | 定義 | fontFamilyRomanSansの場合 - 結果： | fontFamilyRomanSerifの場合 - 結果： |
|---|---|---|---|
fontWeightLight |
Display 2スタイル以下のほとんどのテキストと長いテキストに使用します。 | Amazon Ember Display Light | Bookerly Regular |
fontWeightRegular |
karaokeテキストと18dp以下のサイズの文字に使用します。 | Amazon Ember Display Regular | Bookerly Regular |
fontWeightMedium |
タイトルのラベルテキストに使用します。 | Amazon Ember Display Medium | Bookerly Bold |
fontWeightBold |
コントラストを付けたり数字やフレーズの一部を強調したりするときに使用します。 | Amazon Ember Display Bold | Bookerly Bold |
フォントサイズ
fontSizeリソースは、テキストが表示されるviewportに合わせて自動的に調整されます。数値はすべてpx単位です。これらは、「@」アノテーションを使用して、APL TextコンポーネントのfontSizeプロパティに適用できます。
| リソース名 | 定義 | デバイス、円、小 | デバイス、横長 | テレビ |
|---|---|---|---|---|
fontSizeXXXLarge |
時刻や曜日を表す頭字語や大きな数字など、一目ですぐに読めるテキストに適用します。 | 120 | 168 | 168 |
fontSizeXXLarge |
小さめの表示サイズで、時刻や曜日を表す頭字語や大きな数字など、一目ですぐに読めるテキストに適用します。 | 84 | 128 | 128 |
fontSizeXLarge |
短いテキストを表示するときに使用します。たとえば、離れた場所から読むリスト項目やインラインタイトルなどです。 | 64 | 84 | 84 |
fontSizeLarge |
短いテキストを表示するときに使用する小さめの表示サイズです。たとえば、離れた場所から読むリスト項目やインラインタイトルなどです。 | 48 | 68 | 68 |
fontSizeMedium |
表示サイズのテキストと共に表示されるテキストに適用します。たとえば、映画の題名に添えられる短い説明文などです。 | 36 | 48 | 48 |
fontSizeRegular |
長い形式のコンテンツ用です。たとえば、本のあらすじなどです。 | 28 | 40 | 40 |
fontSizeSmall |
吹き出しのタイトルに添えられるデータに使用します。たとえば、映画の時間に関する追加メタデータを表示する場合などです。 | 24 | 32 | 32 |
fontSizeXSmall |
ナビゲーションやページ、セクションヘッダーに適用します。たとえば、ヘッダーに表示するフライト情報などです。 | 20 | 28 | 28 |
fontSizeXXSmall |
ほとんど使用しません。使うとすれば、UI要素の表示に最も適しています。たとえば、進捗バーに表示される経過時間などです。 | 18 | 24 | 28 |
行の高さ
Alexa lineHeightリソースは、テキストの行間のスペースを増減させます。これらは、「@」名前構文を使用して、APL TextコンポーネントのlineHeightプロパティに適用できます。
| リソース | 定義 | 値 |
|---|---|---|
lineHeightNormal |
テキストの行間の標準距離です。これがデフォルトです。 | 1.25 |
lineHeightExpanded |
テキストの行間のスペースを増やします。 | 1.6 |
lineHeightCondensed |
テキスト行間のスペースを減らします。 | 0.9 |
文字のスペース
Alexa letterSpacingリソースは、テキストの文字間のスペースを増減します。これらは、「@」名前構文を使用して、APL Textコンポーネントの「letterSpacing」プロパティに適用できます。
| リソース | 定義 | 値 |
|---|---|---|
letterSpacingNormal |
文字間に余分なスペースはありません。これがデフォルトです。 | 0 |
letterSpacingExpanded |
文字間のスペースを増やします。 | 2 |
letterSpacingCondensed |
文字間のスペースを減らします。 | 0.8 |
スペースのリソース
Alexa spacingリソースは、「@」名前構文を使用して、APLのpaddingおよびspacingプロパティに適用できます。数値はdp単位で表します。
サンプル
{
"type": "Container",
"paddingLeft": "@spacingMedium",
"paddingRight": "@spacingMedium",
"spacing": "@spacingSmall"
}
プロパティ
| リソース名 | デバイス、円、小 | デバイス、横長、中 | デバイス、横長、大 | テレビ |
|---|---|---|---|---|
spacingXXXLarge |
72 | 72 | 72 | 72 |
spacingXXLarge |
64 | 64 | 64 | 64 |
spacingXLarge |
56 | 56 | 56 | 56 |
spacingLarge |
48 | 48 | 48 | 48 |
spacingMedium |
40 | 40 | 40 | 40 |
spacingRegular |
32 | 32 | 32 | 32 |
spacingSmall |
24 | 24 | 24 | 24 |
spacingXSmall |
16 | 16 | 16 | 16 |
spacingXXSmall |
8 | 8 | 8 | 8 |
画像の境界線の丸みのリソース
Alexa Image borderRadiusリソースは、「@」名前構文を使用して、APL ImageコンポーネントのborderRadiusプロパティに適用できます。
サンプル
{
"type": "Image",
"borderRadius": "@imageShapeRoundedRect"
}
プロパティ
| リソース名 | 定義 |
|---|---|
imageShapeRoundedRect |
標準の角丸です。 |
imageShapeCircle |
画像を円形に切り取ります。 |
テキストのスタイル
Alexaのテキストのスタイルは、あらゆるデバイスでの読みやすさや柔軟性を最大限に発揮できるようにデザインされています。これらのスタイルはさまざまなニーズに柔軟に対応できます。スキル開発者は、可能な場合はこれらを利用して、文字をいろいろなデバイスで適切に表示するよう拡大、縮小できます。これらのスタイルは、APL Textコンポーネントのstyleプロパティに適用できます。
サンプル
{
"type": "Text",
"style": "textStyleDisplay4"
}
プロパティ
| 名前付きスタイル | 定義 |
|---|---|
textStyleDisplay1 |
時刻や曜日を表す頭字語や大きな数字など、一目ですぐに読めるテキストに適用します。 |
textStyleDisplay1Alt |
textStyleDisplay1にコントラストを付けるために使用します。 |
textStyleDisplay2 |
textStyleDisplay1より小さいサイズです。 時刻や曜日を表す頭字語や大きな数字など、一目ですぐに読めるテキストに適用します。 |
textStyleDisplay2Alt |
textStyleDisplay2にコントラストを付けるために使用します。 |
textStyleDisplay3 |
短いテキストを表示するときに使用します。たとえば、離れた場所から読まれるリスト項目などです。 |
textStyleDisplay3Alt |
textStyleDisplay3にコントラストを付けるために使用します。 |
textStyleDisplay4 |
textStyleDisplay3より小さいサイズです。短いテキストを表示するときに使用します。たとえば、離れた場所から読まれるリスト項目などです。 |
textStyleDisplay4Alt |
textStyleDisplay4にコントラストを付けるために使用します。 |
textStyleHeadline |
項目と共に表示されるテキストに使用します。たとえば、映画の短い説明文やあらすじなどです。 |
textStyleHeadlineAlt |
textStyleHeadlineにコントラストを付けるために使用します。 |
textStyleKaraoke |
karaokeエクスペリエンスでテキストを強調するために使用します。 |
textStyleKaraokeAlt |
エクスペリエンスでテキストを立体的に見せてtextStyleKaraokeにコントラストを付けるために使用します。 |
textStyleBody |
長い形式のコンテンツに使用します。たとえば、本のあらすじなどです。 |
textStyleBodyAlt |
textStyleBodyにコントラストを付けるために使用します。 |
textStyleCallout |
補助的なテキストに使用します。たとえば、グリッド表示の画像のタイトルです。 |
textStyleCalloutAlt |
textStyleCalloutにコントラストを付けるために使用します。 |
textStyleHint |
HintテキストやAction Hintテキストに使用します。 |
textStyleDetail |
textStyleCalloutのタイトルに添えられるデータに使用します。たとえば、映画の時間に関する追加メタデータを表示する場合などです。 |
textStyleDetailAlt |
textStyleDetailにコントラストを付けるために使用します。 |
textStyleLabel |
ボタンやアクションを実行できるタッチコントロールに使用します。 |
textStyleCaption |
ほとんど使用しません。オプションのUI要素の表示にのみ使用します。たとえば、進捗バーに表示される経過時間などです。 |
