APL Text

Note: Sign in to the developer console to build or publish your skill.

APL Text

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

プロパティ

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

プロパティ	型	デフォルト	スタイル設定	動的	説明
`color`	色	テーマによって異なります	◯	◯	テキストの色です。
`fontFamily`	文字列	sans-serif	◯	◯	フォントファミリーです（「Amazon Ember Display」など）。
`fontSize`	負でない絶対ディメンション	40dp	◯	◯	テキストのサイズです。
`fontStyle`	`normal`、`italic`	normal	◯	◯	表示するフォントスタイルです。
`fontWeight`	`normal`、`bold`、100、200、300、400、500、600、700、800、900	normal	◯	◯	表示するフォントの太さです。
`lang`	文字列	""	◯	◯	テキストの言語です。指定すると、APLはテキスト表示の際、`fontFamily`の言語固有のバージョンを探します。
`letterSpacing`	絶対ディメンション	0	◯	✕	文字間に追加するスペースです。
`lineHeight`	数値（パーセント）	125%	◯	✕	行の高さの乗数です。
`maxLines`	負でない数値	0	◯	✕	表示するテキストの最大行数です。表示されないテキストがある場合は、省略符号を使ってテキストを省略します。
`text`	文字列	""	✕	◯	このテキストボックスに表示するマークアップです。この値が`null`または空の文字列""に設定されている場合、コンテンツは表示されません。
`textAlign`	`auto`、`left`、`right`、`center`、`start`、`end`	auto	◯	✕	段落内でのテキストの配置です。
`textAlignVertical`	`auto`、`top`、`bottom`、`center`	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パッケージで利用可能なフォントスタイルの詳細については、フォントファミリーを参照してください。

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に設定すると、文字列を空（""）にした場合と同じ結果になります。

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

タグ	説明	例	表示
`<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>`を参照のこと。	H₂Oの化学式についてはギブソン¹を参照のこと。
`<nobr>`	複数行にまたがるテキストを自動で折り返さないようにします。	途中で<nobr>Dr. A. Ramaswamy</nobr>を折り返さず、全体を1つの単語として扱います。	途中で Dr. A. Ramaswamyを折り返さず、全体を1つの単語として扱います。
`<span>`	インライン形式を適用する範囲を定義します。サポートされている範囲アトリビュートを参照してください。	`これは<span color="red">赤</span>です。`	これは赤です。

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

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

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

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

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

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

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

アトリビュート説明例表示

アトリビュート	説明	例	表示
`color`	テキスト範囲の色です。任意の色を指定できます。resourceを使って色を指定できます。 `inherit`に設定すると、範囲の色をテキストの`color`プロパティに設定できます。	`これは<span color="red">赤</span>です。`	これは赤です。
`fontSize`	テキスト範囲のフォントサイズです。負でない絶対ディメンションの配列にする必要があります。ディメンションはresourceを使って設定できます。 `inherit`に設定すると、範囲のフォントサイズをテキストの`fontSize`に設定できます。	`これは<span fontSize="48dp"\>大</span\>です。`	これは大です。

color

テキスト範囲の色です。

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

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

これは赤です。

これは赤です。

fontSize

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

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

これは大</span\>です。

これは大です。

textAlign

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

auto（デフォルト）
left
center
right
start
end

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

プロパティ	左から右（"LTR"）	右から左（"RTL"）
`auto`	テキストを左揃えにします。	テキストを右揃えにします。
`start`	テキストを左揃えにします。	テキストを右揃えにします。
`end`	テキストを右揃えにします。	テキストを左揃えにします。

textAlignVertical

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

サンプルテキスト

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

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2021 年 09 月 29 日