APL Text



APL Text

Textコンポーネントは1行または複数行でテキストを表示します。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 表示するフォントの太さです。
letterSpacing 絶対ディメンション 0 文字間に追加するスペースです。
lineHeight 数値(パーセント) 125% 行の高さの乗数です。
maxLines 整数 0 表示するテキストの最大行数です。表示されないテキストがある場合は、省略符号を使ってテキストを省略します。
text 文字列 "" このテキストボックスに表示するマークアップです。この値がnullまたは空の文字列""に設定されている場合、コンテンツは表示されません。
textAlign autoleftrightcenter auto 段落内でのテキストの配置です。
textAlignVertical autotopbottomcenter auto テキストの垂直方向の配置です。

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

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

Textコンポーネントがイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
    "target": {
      "color": String,     // テキストの色
      "disabled": Boolean, // コンポーネントが無効な場合はtrue
      "id": ID,            // コンポーネントのID
      "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
      "height": Number,    // コンポーネントのdp単位の高さ(パディングを含む)
      "opacity": Number,   // コンポーネントの不透明度[0~1]
      "text": String,      // 表示されるテキスト
      "width": Number      // コンポーネントのdp単位の幅(パディングを含む)
    }
}

color

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

fontFamily

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

フォント名にはスペースを使用できます。次の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パッケージに用意されています。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を割り当てる場合は、文字列リソースを使うことを推奨します。

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> 間のテキストを太字にします。 <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を参照のこと。

マークアップ要素は入れ子にできます。不適切に入れ子構造にしたマークアップは未定義の動作を起こします。<b>昔むかし、<u>小さな犬が</b>バッタを食べて具合が悪くなりました。</u><b>と<u>の要素を適切に入れ子構造にしていないため、上記の文は未定義のものとして描画されます。

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

実体 文字 説明
& \& アンパサンド
< < 小なり記号
> > 大なり記号
&#nn; 10進数のUnicodeのコードポイントです。 「nn」は有効な整数です。
&#xnn; 16進数のUnicodeのコードポイントです。 「nn」は有効な16進数です。

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

textAlign

テキストの行の配置を、leftcenterrightautoのいずれかに制御します。デフォルトはautoで、対象のフォントを記述していく標準の方向を考慮して設定されます(たとえば、英語の場合はleft揃え)。

textAlignVertical

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

サンプルテキスト

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