Alexa Stylesパッケージ



Alexa Stylesパッケージ

Alexa Stylesパッケージを使用してスキルを開発できるため、すべての画面付きAlexa搭載デバイスで統一性のある表示になります。このパッケージには、あらゆる種類のデバイスで正しく動作するようデザインされた、一連の名前付きリソースとスタイルが含まれています。リソースは、共通の色、表示デザイン、メトリクスをまとめたもので、コンポーネントに適用したり、名前付きスタイルと組み合わせたりして、より複雑なスタイルを実現できます。

関連トピック:

Alexa Stylesパッケージを読み込む

Alexa Stylesパッケージを使用し、そのすべての値にアクセスできるようにするには、ドキュメントのパッケージのimport配列に次の行を追加します。バージョンは常にimportで指定する必要があります。現在は1.0.0です。APLドキュメントのプロパティを参照してください。

"import":[
    {
        "name": "alexa-styles",
        "version" : "1.0.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リソースを使用して、標準のfontFamilyAPL 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要素の表示にのみ使用します。たとえば、進捗バーに表示される経過時間などです。