APL Text
Textコンポーネントは1行または複数行でテキストを表示します。Textを使用してAlexaスキルのユーザーエクスペリエンスを高める方法については、Alexaデザインガイド – Textを参照してください。
プロパティ
Textコンポーネントには、基本コンポーネントのプロパティのほかに、次のプロパティがあります。列の意味を参照してください。
プロパティ | 型 | デフォルト | スタイル設定 | 動的 | 説明 |
---|---|---|---|---|---|
|
テーマによって異なります |
◯ |
◯ |
テキストの色です。 | |
|
文字列 |
sans-serif |
◯ |
◯ |
フォントファミリーです(「Amazon Ember Display」など)。 |
|
負でない絶対ディメンション |
40dp |
◯ |
◯ |
テキストのサイズです。 |
|
|
normal |
◯ |
◯ |
表示するフォントスタイルです。 |
|
|
normal |
◯ |
◯ |
表示するフォントの太さです。 |
|
文字列 |
"" |
◯ |
◯ |
テキストの言語です。指定すると、APLはテキスト表示の際、 |
|
絶対ディメンション |
0 |
◯ |
✕ |
文字間に追加するスペースです。 |
|
数値(パーセント) |
125% |
◯ |
✕ |
行の高さの乗数です。 |
|
負でない数値 |
0 |
◯ |
✕ |
表示するテキストの最大行数です。表示されないテキストがある場合は、省略符号を使ってテキストを省略します。 |
|
文字列 |
"" |
✕ |
◯ |
このテキストボックスに表示するマークアップです。この値が |
|
|
auto |
◯ |
✕ |
段落内でのテキストの配置です。 |
|
|
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
です。normal
とbold
がランタイムに割り当てられています。100から900までの整数値がフォントバリエーションに対応しており、数字が大きくなると太くなります。ほとんどのフォントは、これほど多くのバリエーションはサポートしていません。たとえば、Amazon Ember Displayには5種類の太さ(Thin、Light、Regular、Medium、Bold)があり、それぞれ100、300、500、700、900が割り当てられています。
fontWeight
は、整数や文字列としてではなく、列挙セットを表すことに注意してください。たとえば、750という値は無効であり、フォントのウェイトは700~800の間には設定されません。
fontWeight
のリソースを作成する場合、string
リソースを使います。次の例では、resourceブロックがmyMidFontWeight
とmyLightFontWeight
という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
に設定すると、文字列を空(""
)にした場合と同じ結果になります。
テキストブロックは、簡単なマークアップをサポートしています。サポートされているタグは以下のとおりです。
タグ | 説明 | 例 | 表示 |
---|---|---|---|
|
改行を挿入します。改行は繰り返せます。 |
行1 |
行1 |
|
間のテキストを太字にします(太さ700)。 |
|
大型犬は人懐っこい。 |
|
間のテキストを斜体にします。 |
宿題の |
宿題のエマを読む。 |
|
間のテキストに |
このドキュメントは |
このドキュメントは |
|
間のテキストに下線を引きます。 |
私はチョコレートが |
私はチョコレートが大好きでした。 |
|
間のテキストを等幅で表示します。 |
|
|
|
間のテキストを上付きまたは下付きの文字として表示します。 |
H |
H2Oの化学式についてはギブソン1を参照のこと。 |
|
複数行にまたがるテキストを自動で折り返さないようにします。 |
途中で<nobr>Dr. A. Ramaswamy</nobr>を折り返さず、全体を1つの単語として扱います。 |
途中で
Dr. A. Ramaswamyを折り返さず、全体を1つの単語として扱います。 |
|
インライン形式を適用する範囲を定義します。サポートされている範囲アトリビュートを参照してください。 |
|
これは赤です。 |
マークアップ要素は入れ子にできます。マークアップの入れ子が不適切な場合、動作が不安定になります。たとえば、<b>
と<u>
の要素が正しく入れ子になっていないため、以下のコードは正しくレンダリングされません。
<b>昔、<u>小さな犬</b>がバッタを食べて具合が悪くなりました</u>。
テキストのマークアップ文字は、文字実体参照で置き換える必要があります。
実体 | 文字 | 説明 |
---|---|---|
|
\& |
アンパサンド |
|
< |
小なり記号 |
|
> |
大なり記号 |
|
10進数のUnicodeのコードポイントです。 |
「nn」は有効な整数です。 |
|
16進数のUnicodeのコードポイントです。 |
「nn」は有効な16進数です。 |
数値実体参照は10進数と16進数で表記できます。たとえば、©は©
または©
と表記できます。
サポートされる範囲アトリビュート
<span>
タグは、次の表に記載した名前付きアトリビュートをサポートします。
アトリビュート | 説明 | 例 | 表示 |
---|---|---|---|
|
テキスト範囲の色です。 任意の色を指定できます。resourceを使って色を指定できます。
|
|
これは赤です。 |
|
テキスト範囲のフォントサイズです。負でない絶対ディメンションの配列にする必要があります。ディメンションはresourceを使って設定できます。
|
|
これは大です。 |
textAlign
テキスト行の水平揃えを制御します。次のいずれかに設定します。
auto
(デフォルト)left
center
right
start
end
auto
、start
、end
のプロパティはすべて、コンポーネントに指定したlayoutDirection
に基づいてテキストを揃えます。
プロパティ | 左から右("LTR") | 右から左("RTL") |
---|---|---|
|
テキストを左揃えにします。 |
テキストを右揃えにします。 |
|
テキストを左揃えにします。 |
テキストを右揃えにします。 |
|
テキストを右揃えにします。 |
テキストを左揃えにします。 |
textAlignVertical
テキストボックス内のテキストの配置を指定します。テキストボックスにテキストのコンテンツよりも高さがある場合にのみ使用します。デフォルトはtop
です。
サンプルテキスト
{
"type": "Text",
"width": "100%",
"textAlign": "center",
"style": "textStylePrimary2",
"text": "<b>こんにちは。</b>アシスタントの<i>アレクサ</i>です。",
"maxLines": 2
}
最終更新日: 2021 年 09 月 29 日