APL Text



APL Text

Textコンポーネントは1行または複数行でテキストを表示します。Textを使用してAlexaスキルのユーザーエクスペリエンスを高める方法については、Alexaデザインガイド – Textを参照してください。

プロパティ

Textコンポーネントには、基本コンポーネントのプロパティのほかに、次のプロパティがあります。列の意味を参照してください

プロパティ デフォルト スタイル設定 動的 説明

color

テーマによって異なります

テキストの色です。

fontFamily

文字列

sans-serif

フォントファミリーです(「Amazon Ember Display」など)。

fontSize

負でない絶対ディメンション

40dp

テキストのサイズです。

fontStyle

normalitalic

normal

表示するフォントスタイルです。

fontWeight

normalbold、100、200、300、400、500、600、700、800、900

normal

表示するフォントの太さです。

lang

文字列

""

テキストの言語です。指定すると、APLはテキスト表示の際、fontFamilyの言語固有のバージョンを探します。

letterSpacing

絶対ディメンション

0

文字間に追加するスペースです。

lineHeight

数値(パーセント)

125%

行の高さの乗数です。

maxLines

負でない数値

0

表示するテキストの最大行数です。表示されないテキストがある場合は、省略符号を使ってテキストを省略します。

text

文字列

""

このテキストボックスに表示するマークアップです。この値がnullまたは空の文字列""に設定されている場合、コンテンツは表示されません。

textAlign

autoleftrightcenterstartend

auto

段落内でのテキストの配置です。

textAlignVertical

autotopbottomcenter

auto

テキストの垂直方向の配置です。

これらのプロパティのほとんどには、現在のテキストスタイルが指定するデフォルト値があります。スタイルの説明についてはResourcesを参照してください。

Textコンポーネントは、ScrollView内に配置されない限りスクロールしません。

Textイベントのソースまたはターゲットである場合、以下の値がevent.sourceまたはevent.targetに報告されます。

{
  // Text固有の
  "type": "Text",
  "text": String,      // 表示されるテキスト
  "color": Color,      // テキスト

  // 一般的なコンポーネントの値  
  "bind": Map,         // コンポーネントのデータバインディングコンテキストへのアクセス    
  "checked": Boolean,  // チェック済みの状態 
  "disabled": Boolean, // 無効化の状態 
  "focused": Boolean,  // フォーカス状態 
  "height": Number,    // コンポーネントのdp単位の高さ(パディングを含む)        
  "id": ID,            // コンポーネントのID   
  "opacity": Number,   // コンポーネントの不透明度[0~1]    
  "pressed": Boolean,  // 押された状態 
  "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
  "width": Number      // コンポーネントのdp単位の幅(パディングを含む)        
}

layoutDirectionコンポーネントプロパティ

コンポーネントのlayoutDirectionプロパティにより、Textコンポーネントがテキストを揃える際にtextAlignプロパティをどう解釈するかが決まります。

color

テキストの色です。テーマがライトの場合、デフォルトは#1E2222です。テーマがダークの場合、デフォルトは#FAFAFAです。

fontFamily

表示されるテキストのフォントを指定します。fontFamilyプロパティには、単一のフォント名、またはコンマ区切りのフォント名リストを含む文字列を指定できます。APLランタイムによって、デバイスにインストールされている最初の名前付きフォントのリストが検索されます。有効なフォントが見つからない場合は、デフォルトのsans-serifフォントに設定されます。

フォント名にはスペースを使用できます。APLでは、次の2種類のフォント名がサポートされています。

  • インストールされているフォントの固有名(「amazon-ember」、「times」、「times new roman」など)。
  • 総称(「serif」または「sans-serif」)。

Alexaデバイスでは、特定のフォントセットは保証されません。fontFamilyリストの最後には、「serif」または「sans-serif」を指定し、有効なフォントを確実に利用できるようにしてください。

{
"type": "Text",
"fontFamily", "times new roman, times, georgia, serif"
}

多くのAlexaデバイスでは、「sans-serif」のデフォルトは「Amazon Ember Display」、「serif」のデフォルトは「Bookerly」です。アジアの一部のマーケットでは、これらのデフォルトは「Noto Sans CJK」です。

alexa-stylesパッケージで利用可能なフォントスタイルの詳細については、フォントファミリーを参照してください。

fontSize

フォントのサイズです。通常はdpで表します。デフォルトは40dpです。

fontStyle

normalまたはitalicのフォントスタイルです。デフォルトはnormalです。

fontWeight

表示されるテキストのフォントウェイトです。デフォルトはnormalです。normalboldがランタイムに割り当てられています。100から900までの整数値がフォントバリエーションに対応しており、数字が大きくなると太くなります。ほとんどのフォントは、これほど多くのバリエーションはサポートしていません。たとえば、Amazon Ember Displayには5種類の太さ(Thin、Light、Regular、Medium、Bold)があり、それぞれ100、300、500、700、900が割り当てられています。

fontWeightは、整数や文字列としてではなく、列挙セットを表すことに注意してください。たとえば、750という値は無効であり、フォントのウェイトは700~800の間には設定されません。

fontWeightのリソースを作成する場合、stringリソースを使います。次の例では、resourceブロックがmyMidFontWeightmyLightFontWeightというfontWeightのリソースを2つ作成します。

{
  "resources": [
    {
      "strings": {
        "myMidFontWeight": "500",
        "myLightFontWeight": "100"
      }
    }
  ]
}

lang

テキストの言語です。指定すると、APLはテキスト表示の際、fontFamilyの言語固有のバージョンを探します。

有効なフォントが見つからない場合、APLはこのプロパティを無視し、指定されたfontFamilyを使用します。

langプロパティにBCP-47文字列を設定します(例:"ja-JP")。

以下の例は、NotoSans-CJKフォントの日本語スタイルバージョンを使ってTextコンポーネントを表示しています。

{
    "type": "APL",
    "version": "1.7",
    "mainTemplate": {
        "item": {
            "type": "Text",
            "lang": "ja-JP",
            "fontFamily": "Noto Sans CJK"
        }
    }
}

注: Alexaデバイスには特定の言語のフォントがインストールされていない場合があります。さまざまなデバイスで正常に動作するかどうかエクスペリエンスをテストしてください。

letterSpacing

文字間に追加するスペースです。デフォルトは0です。

lineHeight

行の高さの乗数です。デフォルトは125%です。

フォントの行送りは、fontSizeにlineHeightを掛けたものになります。たとえば、100dpのfontSizeと120%のlineHeightを設定した320dpiのディスプレイでは、フォントサイズは200ピクセル、レディングは240ピクセルになります。lineHeightを100%未満に設定すると、文字が重なることがあります。

maxLines

表示するテキストの最大行数です。デフォルトは0で、制限がないことを表します。正の整数に設定してテキストを指定の行数にクリップし、省略符号を挿入してテキストが省略されていることを示します。

text

テキストブロックに表示するテキスト文字列です。文字列を空にすると、テキストは表示されません。nullに設定すると、文字列を空("")にした場合と同じ結果になります。

テキストブロックは、簡単なマークアップをサポートしています。サポートされているタグは以下のとおりです。

タグ 説明 表示

<br>

改行を挿入します。改行は繰り返せます。

行1<br>行2

行1
行2

<strong><b>

間のテキストを太字にします(太さ700)。

<b>大型</b>犬は人懐っこい。

大型犬は人懐っこい。

<em><i>

間のテキストを斜体にします。

宿題の<em>エマ</em>を読む。

宿題のエマを読む。

<strike>

間のテキストに取り消し線を引きます。

このドキュメントは<strike>よい</strike>とてもよい。

このドキュメントはよいとてもよい。

<u>

間のテキストに下線を引きます。

私はチョコレートが<u>大好きでした</u>

私はチョコレートが大好きでした

<tt><code>

間のテキストを等幅で表示します。

<code>main</code>関数がエントリーポイントです。

main関数がエントリーポイントです。

<sup><sub>

間のテキストを上付きまたは下付きの文字として表示します。

H<sub>2</sub>Oの化学式についてはギブソン<sup>1</sup>を参照のこと。

H2Oの化学式についてはギブソン1を参照のこと。

<nobr>

複数行にまたがるテキストを自動で折り返さないようにします。

途中で<nobr>Dr. A. Ramaswamy</nobr>を折り返さず、全体を1つの単語として扱います。

途中で
Dr. A. Ramaswamyを折り返さず、全体を1つの単語として扱います。

<span>

インライン形式を適用する範囲を定義します。サポートされている範囲アトリビュートを参照してください。

これは<span color="red">赤</span>です。

これはです。

マークアップ要素は入れ子にできます。マークアップの入れ子が不適切な場合、動作が不安定になります。たとえば、<b><u>の要素が正しく入れ子になっていないため、以下のコードは正しくレンダリングされません。

<b>昔、<u>小さな犬</b>がバッタを食べて具合が悪くなりました</u>。

テキストのマークアップ文字は、文字実体参照で置き換える必要があります。

実体 文字 説明

&amp;

\&

アンパサンド

&lt;

<

小なり記号

&gt;

>

大なり記号

&#nn;

10進数のUnicodeのコードポイントです。

「nn」は有効な整数です。

&#xnn;

16進数のUnicodeのコードポイントです。

「nn」は有効な16進数です。

数値実体参照は10進数と16進数で表記できます。たとえば、©は&#169;または&#xa9;と表記できます。

サポートされる範囲アトリビュート

<span>タグは、次の表に記載した名前付きアトリビュートをサポートします。

アトリビュート 説明 表示

color

テキスト範囲の色です。

任意のを指定できます。resourceを使って色を指定できます。

inheritに設定すると、範囲の色をテキストのcolorプロパティに設定できます。

これは<span color="red">赤</span>です。

これはです。

fontSize

テキスト範囲のフォントサイズです。負でない絶対ディメンションの配列にする必要があります。ディメンションはresourceを使って設定できます。

inheritに設定すると、範囲のフォントサイズをテキストのfontSizeに設定できます。

これは<span fontSize="48dp"\>大</span\>です。

これはです。

textAlign

テキスト行の水平揃えを制御します。次のいずれかに設定します。

  • auto(デフォルト)
  • left
  • center
  • right
  • start
  • end

autostartendのプロパティはすべて、コンポーネントに指定したlayoutDirectionに基づいてテキストを揃えます。

プロパティ 左から右("LTR") 右から左("RTL")

auto

テキストを左揃えにします。

テキストを右揃えにします。

start

テキストを左揃えにします。

テキストを右揃えにします。

end

テキストを右揃えにします。

テキストを左揃えにします。

textAlignVertical

テキストボックス内のテキストの配置を指定します。テキストボックスにテキストのコンテンツよりも高さがある場合にのみ使用します。デフォルトはtopです。

サンプルテキスト

{
 "type": "Text",
 "width": "100%",
 "textAlign": "center",
 "style": "textStylePrimary2",
 "text": "<b>こんにちは。</b>アシスタントの<i>アレクサ</i>です。",
 "maxLines": 2
}