Alexa Styles



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

関連トピック：

• APL Resources
• APL Styles

• Alexa Stylesパッケージを読み込む
• 色のリソース
• テキストのリソース
  • フォントファミリー
  • フォントのウエイト
  • フォントサイズ
  • 行の高さ
  • 文字のスペース
• スペースのリソース
• 画像の境界線の丸みのリソース
• テキストのスタイル

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"
}

プロパティ

テキストのリソース

Alexa Stylesパッケージには、さまざまなテキストリソースオプションが含まれています。これらは、「@」リソースアノテーションを使用して、Textコンポーネントの対応するプロパティから参照できます。

サンプル

{
    "type": "Text",
    "fontFamily": "@fontFamilyRomanSans",
    "fontWeight": "@fontWeightBold",
    "fontSize": "@fontSizeMedium",
    "lineHeight": "@lineHeightExpanded",
    "letterSpacing": "@letterSpacingNormal
}

フォントファミリー

Alexa fontFamilyリソースを使用して、標準のfontFamilyをAPL Textコンポーネントに適用できます。これらは、「@」名前構文を使用して、APL TextコンポーネントのfontFamilyプロパティに適用できます。

フォントのウエイト

fontWeightは、選択したフォントファミリーに適用されます（次の表を参照）。

フォントサイズ

fontSizeリソースは、テキストが表示されるviewportに合わせて自動的に調整されます。数値はすべてpx単位です。これらは、「@」アノテーションを使用して、APL TextコンポーネントのfontSizeプロパティに適用できます。

行の高さ

Alexa lineHeightリソースは、テキストの行間のスペースを増減させます。これらは、「@」名前構文を使用して、APL TextコンポーネントのlineHeightプロパティに適用できます。

文字のスペース

Alexa letterSpacingリソースは、テキストの文字間のスペースを増減します。これらは、「@」名前構文を使用して、APL Textコンポーネントの「letterSpacing」プロパティに適用できます。

スペースのリソース

Alexa spacingリソースは、「@」名前構文を使用して、APLのpaddingおよびspacingプロパティに適用できます。数値はdp単位で表します。

サンプル

{
    "type": "Container",
    "paddingLeft": "@spacingMedium",
    "paddingRight": "@spacingMedium",
    "spacing": "@spacingSmall"
}

プロパティ

画像の境界線の丸みのリソース

Alexa Image borderRadiusリソースは、「@」名前構文を使用して、APL ImageコンポーネントのborderRadiusプロパティに適用できます。

サンプル

{
    "type": "Image",
    "borderRadius": "@imageShapeRoundedRect"
}

プロパティ

テキストのスタイル

Alexaのテキストのスタイルは、あらゆるデバイスでの読みやすさや柔軟性を最大限に発揮できるようにデザインされています。これらのスタイルはさまざまなニーズに柔軟に対応できます。スキル開発者は、可能な場合はこれらを利用して、文字をいろいろなデバイスで適切に表示するよう拡大、縮小できます。これらのスタイルは、APL Textコンポーネントのstyleプロパティに適用できます。

サンプル

{
    "type": "Text",
    "style": "textStyleDisplay4"
}

プロパティ