APL標準コマンド
共通プロパティ
1つのコマンドはJSONオブジェクトとしてエンコードされます。すべてのコマンドには、以下のプロパティを含めることができます。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
|
文字列 |
必須 |
コマンドの型です。 |
|
文字列 |
"" |
このコマンドのオプションのドキュメントです。 |
|
整数 |
0 |
このコマンドが実行されるまでの遅延時間(ミリ秒単位)です。負以外の値にする必要があります。デフォルトは0です。 |
|
ブール値 |
|
trueの場合、操作タイマーを無効にします。 |
|
文字列 |
"" |
このコマンドを実行するシーケンサーを指定します。 |
|
ブール値 |
|
条件式です。評価結果が |
type
特定のコマンドを実行するように指定します。定義済みのプリミティブコマンドタイプやユーザー定義コマンドを使用することもできます。
delay
delay
の値は、このコマンドが実行される前に挿入されるミリ秒単位の時間です。delay
の値は正の整数で、指定されてない場合のデフォルト値は0です。when
プロパティがfalse
に解決された場合、またはコマンドがイベントハンドラー内部で実行された場合、delay
の値は無視されます。
screenLock
trueの場合、このコマンドが実行されている間は操作タイマーが無効になります。screenLock=true
のコマンドの実行が終了すると、操作タイマーはゼロにリセットされます。
screenLock
は、定義されたdelay
を含むコマンドの範囲全体に適用されます。たとえば、次のコマンドは画面ロックを30秒間保持します。
{
"type": "Idle",
"delay": 30000,
"screenLock": true,
}
sequencer
指定された場合、sequencer
プロパティはこのコマンドを実行するシーケンサーの名前を示します。シーケンサーの選択ルールは次のとおりです(記載順)。
- シーケンサーが指定された場合、コマンドはそのシーケンサー上で通常モードで実行されます。
- それ以外の場合、コマンドが高速モードで実行されていれば、通常は高速モードで実行されます。
- それ以外の場合、コマンドが
Sequential
、Parallel
のいずれかのコマンドのサブコマンドであれば、Sequential
またはParallel
コマンドのシーケンサー上で通常モードで実行されます。 - それ以外の場合、コマンドは「MAIN」シーケンサー上で通常モードで実行されます。
コマンドシーケンサーの詳細については、コマンドのシーケンス実行を参照してください。
when
when
がtrue
に設定されると、コマンドが実行されます。false
の場合、コマンドは無視されます。無視されたコマンドもscreenLock
プロパティを無視します。
AnimateItem
AnimateItem
を使用するには、APL 1.1以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
単一コンポーネントの1つ以上のプロパティまたはバインドされた値について、固定の時間のアニメーションシーケンスを実行します。次に例を示します。
{
"type": "AnimateItem",
"easing": "ease-in-out",
"duration": 600,
"componentId": "myFlyingComponent",
"value": [
{
"property": "opacity",
"to": 1
},
{
"property": "transform",
"from": [
{
"translateX": 200
},
{
"rotate": 90
}
],
"to": [
{
"translateX": 0
},
{
"rotate": 0
}
]
}
]
}
コンポーネントでは、opacity
プロパティとtransform
プロパティのアニメーション化をサポートしています。from
値はopacityに必須ではありませんが、transformには必ず指定してください。
カスタムのイージングカーブを定義するには、次のように記述します。
{
"type": "AnimateItem",
"easing": "path(0.25, 0.6, 0.5, 0.8, 0.75, 0.9)",
"duration": 1000,
"value": {
"property": "opacity",
"to": 1
}
}
バインドされたプロパティをアニメーション化できます。以下の例では、Frame
をviewportの中心の緑色のボックスとして表示しています。Frame
は、コンポーネントのタップでバインドされた値SIDE
をアニメーション化するアニメーションを定義します。アニメーションは、1秒かけてFrame
のサイズと色をスムーズに変更します。
シミュレーターペインの緑色のボックスをクリックすると、アニメーションを確認できます。もう一度クリックすると、同じアニメーションが逆再生されます。
ベクターグラフィックに渡すパラメーターをアニメーション化することもできます。
以下の例では、細いストローク値で描写したボックスをベクターグラフィックとして定義しています。ベクターグラフィックをタップすると、ボックスが塗りつぶされるまで線の太さを広げるアニメーションが始まります。その後、アニメーションは元の形状に戻ります。
シミュレーターペインの青いボックスをクリックすると、アニメーションを確認できます。
AnimateItem
には、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
componentId |
文字列 | SELF | コンポーネントのIDです。 |
duration |
整数 | 必須 | アニメーションの時間(ミリ秒)です。 |
easing |
linear、ease-inなど | linear | イージングカーブを指定します。 |
repeatCount |
整数 | 0 | リピート再生する回数です。 |
repeatMode |
restart、reverse | restart | アニメーションをリピート再生する方法です。 |
value |
アニメーション化するプロパティの配列 | 必須 | アニメーション化するプロパティの配列です。 |
高速モードでは、AnimateItem
コマンドはアニメーションが終了した状態にジャンプします。AnimateItem
コマンドが停止すると、アニメーションが終了した状態にジャンプします。終了状態の計算方法については、repeatModeを参照してください。
componentId
コンポーネントのIDです。省略すると、AnimateItem
コマンドを発行するコンポーネントが使われます。
duration
アニメーション1回の経過時間(ミリ秒単位)です。repeatCount
プロパティが0より大きい値に設定されている場合、アニメーションの合計の時間は、その時間とリピート再生回数に1を足した値の積になります。たとえば、次のアニメーションの時間は合計10秒になります。
{
"type": "AnimateItem",
"duration": 1000,
"repeatCount": 9,
"repeatMode": "reverse",
"value": {
"property": "opacity",
"from": 0,
"to": 1
}
}
easing
イージングカーブでは、パラメーターの値が時間の経過とともにどのように変化するかを指定します。カーブは(0,0)から始まり(1,1)で終わる関数でなければなりません。イージングカーブの一般的な記述方法は、2つあります。
cubic-bezier(x1,y1,x2,y2)
: CSS規格に従って、始点(0,0)と終点(1,0)を持つ3次ベジェ曲線を定義します。パラメーター化された値の(x1, y1)と(x2, y2)は、曲線の内部制御点を定義します。通常、0から1の間となります。path(x1,y1,...,xN,yN)
: (0,0)から(1,1)までの区分線形関数です。x値は、昇順で0から1の間でなければなりません。y値は任意です。(0,0)と(1,1)の終了値は暗黙的に示されます。
以下のイージングカーブが事前定義されています。
名前 | デフォルト値 |
---|---|
linear | path() |
ease | cubic-bezier(0.25, 0.10, 0.25, 1.00) |
ease-in | cubic-bezier(0.42, 0.00, 1.00, 1.00) |
ease-out | cubic-bezier(0.00, 0.00, 0.58, 1.00) |
ease-in-out | cubic-bezier(0.42, 0.00, 0.58, 1.00) |
repeatCount
repeatCountは、コマンドが停止するまでにアニメーションをリピート再生する回数を定義します。デフォルトでは、repeatCountは0に設定されています。この場合、アニメーションは1回再生されて停止します。
repeatMode
repeatMode
は、アニメーションを毎回最初から最後まで再生するか、一回おきにアニメーションを先頭まで逆再生するかを定義します。次のリピートモードが定義されています。
名前 | 説明 |
---|---|
restart | アニメーションは、リピート再生されるたびに、元の値から始まります。 |
reverse | アニメーションは、毎回逆方向に再生されます。 |
アニメーションの終了状態は、repeatCount
とrepeatMode
の関数です。repeatMode
がreverseに設定され、repeatCount
が奇数の場合、アニメーションが終了した状態は開始状態と同じになります。上記以外の場合では、終了した状態はto
の値に割り当てられた「自然」な終了状態になります。
途中で停止したアニメーションは、常に終了した状態まで「ジャンプ」します。
value
アニメーション化するプロパティの配列です。配列の各要素は、次のような形式になります。
プロパティ | 型 | 必須 | 説明 |
---|---|---|---|
from |
数値 | ✕ | プロパティの開始値です。 |
property |
文字列 | 〇 | アニメーション化するプロパティの名前です。 |
to |
数値 | 〇 | プロパティの終了値です。 |
プロパティのアニメーションは、to/fromプロパティ、またはinputRange/outputRangeプロパティによって定義されます。「from」値を指定しない場合、プロパティの現在の値が使用されます。
transform
プロパティに関して、考慮しなければならない特殊なケースがあります。1つは、transform
プロパティはfrom
プロパティを暗黙的には定義しないということです。from
プロパティとto
プロパティの両方を設定する必要があります。
もう1つは、変換の間をスムーズに補間するには、from
リストとto
リストに、同じ順序で同じ一連の変換操作を指定する必要があるということです。次に例を示します。
"from": [ { "translateX": 30 }, { "rotate": 90 }],
"to": [ { "translateY": 30 }, { "rotate": 45 }]
上記は、各配列に移動とそれに続く回転が含まれているため、有効なfrom/to
変換です。次の例に示すコードは動作しません。
"from": [ { "translateX": 30 }, { "scale": 1 }, { "rotate": 90 }],
"to": [ { "scale": 2 }, { "rotate": 45 }]
上記の例では、配列が一致していません。配列の長さが異なり、最初の要素も異なります。to配列の先頭に「ない」{ "translateX": 0 }
変換が、システムによって自動的に入力されると思われるかもしれませんが、APLランタイムの性能はそれほど高くなく、自動的に違いを見つけて修正することはできません。
AutoPage
AutoPage
コマンドは、Pagerコンポーネントの連続するページを自動的に進めて表示させます。AutoPage
コマンドは、リクエストされた時間内で最終ページを表示した後に終了します。
AutoPage
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
componentId | 文字列 | SELF | 移動する`Pager`のIDです。 |
count | 整数 | Pagerのすべてのページ | 表示するページ数です。 |
duration | 整数 | 0 |
次のページに進んだ後に待機する時間(単位:ミリ秒)です。 |
たとえば、mySportsrPager
というPager
に自動的に移動するには、以下のように記述します。
{
"type": "AutoPage",
"componentId": "mySportsPager",
"duration": 1000,
"delay": 500
}
上記の例では、最初に500ミリ秒間一時停止( delay
プロパティ)します。その後、次のページに移動して1000ミリ秒間一時停止(duration
プロパティ)し、最後の一時停止が終了するまで、引き続きページ移動して一時停止します。たとえば、mySportsPager
に3つのページがあり、最初にページ1が表示されている場合、AutoPage
は次の処理を実行します。
- 起動を待機している間、ページ1を500ミリ秒間表示します。
- ページ2に移動し、1000ミリ秒間一時停止します。
- ページ3に移動し、1000ミリ秒間一時停止します。
この時点でコマンドは完了し、別のコマンドまたはイベントが変更されるまで、Pager
はページ3を表示し続けます。
count
が正の数でない場合、AutoPage
コマンドを実行しても何も起きません。
AutoPage
コマンドは停止すると、以下を実行します。
AutoPage
コマンドのシーケンスが50%以上完了している場合、ターゲットページを表示します。- 50%未満の場合は、前のページに戻ります。
onPageChanged
コマンドは、ページが変更された場合に新しいページで1回実行されます。
AutoPage
コマンドは、高速モードでは無視されます。
componentId
PagerコンポーネントのIDです。省略すると、AutoPage
コマンドを発行するコンポーネントが使われます。
count
表示するページ数です。指定しない場合、このデフォルトは残りのページ数となります。ラッピングには対応していません。値は最小値が0、最大値がpager.children.length - pager.currentIndex - 1の範囲に収まるように調整されます。
duration
次のページに進んだ後に待機する時間です。ページ間のアニメーション遷移は時間に含まれないため、コマンドの実行時間が全体的に長くなります。
時間は次のページに進んだ後に適用されるため、Pagerの最初のページには適用されません。ページングの開始を遅らせるには、標準コマンドのdelay
プロパティを使用します。
ClearFocus
ClearFocus
を使用するには、APL 1.1以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
現在フォーカスされている実行可能なコンポーネントから、フォーカスを外します。フォーカスを当てたり解除したりできる実行可能なコンポーネントについては、focusedを参照してください。
一度にフォーカスできるコンポーネントは1つだけなので、ClearFocus
は1つのコンポーネントにしか影響しません。
ClearFocus
コマンドが実行されると、フォーカスを当てたコンポーネントからフォーカスを外し、そのコンポーネントのfocused
状態をfalse
に設定します。
ClearFocus
コマンドには、通常のコマンドプロパティのほかにプロパティはありません。
たとえば、フォーカスを当てたコンポーネントからフォーカスを解除するには、次のように記述します。
{
"type": "ClearFocus"
}
ClearFocus
コマンドは遅延なしに高速モードで実行されます。
Finish
Finish
を使用するには、APL 1.3以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
現在のAPLドキュメントを閉じて終了します。finishコマンドには、共通のコマンドプロパティ以外のプロパティはありません。
finishコマンドを実行すると、APL内の他のすべての処理(実行中のコマンドを含む)を停止します。たとえば、SendEventとFinishの両方を1つのボタンの押下で使用する場合は、次の順序で記述する必要があります。
{
"onPress": [
{
"type": "SendEvent",
"arguments": [
"now stopping"
]
},
{
"type": "Finish"
}
]
}
コマンドを逆の順序で記述すると、SendEvent
は実行されません。
finishコマンドは、通常モードと高速モードの両方で実行されます。
Idle
Idle
コマンドを実行しても何も起きません。プレースホルダーとして使用するか、長い一連のコマンドに計算された遅延を挿入するために使用します。たとえば、次のコマンドを考えてみましょう。
{
"type": "Parallel",
"commands": [
{
"type": "Idle",
"delay": 3000
},
{
"type": "SpeakItem",
"componentId": "item7"
}
]
}
このコマンドシーケンスは「item7」を読み上げます。このIdle
コマンドの使用により、発話が早く終わる場合でも、コマンド全体が少なくとも3000ミリ秒続くことが保証されます。
Idle
コマンドのtype
はIdle
です。
idleコマンドは、高速モードでは無視されます。
OpenURL
OpenURL
を使用するには、APL 1.1以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
URLを開きます。OpenURL
コマンドが成功すると、Webブラウザで指定されたURLやデバイスのその他のアプリが開きます。現在のデバイスで動作する適切なURLを指定する必要があります。OpenURL
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
source | 文字列 | 必須 | 開くURLです。 |
onFail | コマンドの配列 | [ ] | URLを開けなかった場合に実行するコマンドです。 |
たとえば、デバイスのブラウザでAmazonホームページを開くには、次のように記述します。
{
"type": "OpenURL",
"source": "https://www.amazon.co.jp",
"onFail": {
"type": "SetValue",
"componentId": "errorText",
"property": "text",
"value": "Amazon.co.jp (${event.source.value})を開けません"
}
}
すべてのデバイスでURLを開けるとは限りません。デバイスがURLを開くことをサポートしていない場合、コマンドは無視され、onFail
コマンドは実行されません。データバインディングコンテキストのallowOpenURL
の値を調べて、OpenURL
がデバイスでサポートされているかどうかを確認してください。
OpenURL
コマンドは、高速モードでは無視されます。
source
source
プロパティは、ローカルデバイスでアプリを起動するのに適したURL/URIを表します。ローカルのWebブラウザでWebページを開くために、httpスキーマまたはhttpsスキーマを指定して使用することもできます。
onFail
onFail
プロパティには、URLを開けない場合に実行する1つ以上のコマンドを格納します。onFail
コマンドが制限時間内に実行される保証や、エンドユーザーに対してコマンドが成功しているように見えるという保証はありません。たとえば、空白のWebページやエラーのWebページが表示される可能性があります。ただし、APLランタイムは、3秒以内に失敗を報告するようにしなければなりません。onFail
コマンドに対して生成されたイベントは、次のような形式になります。
"event": {
"source": {
"source": "OpenURL",
"handler": "Fail",
"value": NUMBER // プラットフォーム定義の数値エラー
}
}
onFail
コマンドに渡されるevent.source.value
フィールドは、プラットフォーム定義の数値エラーコードに設定されます。上記の例にかかわらず、このエラーコードをユーザーに表示すべきではありませんが、SendEvent
コマンドを通じて、クラウドのスキルに不具合報告を送信するために使用できます。
Parallel
一連のコマンドを並列に実行します。Parallel
コマンドは、すべての子コマンドを同時に実行開始します。Parallel
コマンドは、すべての子コマンドが終了したときに実行完了と見なされます。Parallel
コマンドが早く停止すると、その時点で実行中のコマンドはすべて停止します。
Parallel
コマンドのtype
はParallel
です。Parallel
コマンドには、共通のコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
commands | コマンド配列 | 必須 | 並行して実行する順序不同のコマンドのリストです。 |
高速モードでは、parallelコマンドはすべてのサブコマンドを並列に実行しますが、遅延が発生することはありません(実質的な時間はゼロです)。
commands
並行して実行する順序不同のコマンド配列です。すべてのコマンドの実行が終了すると、Parallel
コマンドは終了します。Parallel
コマンドに設定されるdelay
の値は、配列の各コマンドに設定されるdelay
の値に追加されます。次の例では、最初のSendEvent
コマンドが1500ミリ秒後に実行され、2番目のSendEvent
コマンドが750ミリ秒後に実行されます。つまり、2番目のSendEvent
コマンドは最初のコマンドよりも先に実行されます。
{
"type": "Parallel",
"delay": 500,
"commands": [
{
"type": "SendEvent",
"delay": 1000
},
{
"type": "SendEvent",
"delay": 250
}
]
}
Reinflate
更新されたコンフィギュレーションプロパティで現在のドキュメントを再インフレートします。Alexaは、画面に最初にドキュメントを表示したときと同じプロセスに従って、ドキュメント全体を再構築します。Alexaは、新しいデバイスコンフィギュレーションに一致するenvironment
とviewport
の定数を使って、新しい更新されたデータバインディングコンテキストを作成します。
Reinflate
コマンドに追加のプロパティはありません。
Reinflate
コマンドを実行すると、ほかのコマンドも含め、APLのその他の処理がすべて停止します。たとえば、SendEvent
とReinflate
を同じハンドラーで実行したい場合、SendEvent
を最初に配置する必要があります。
以下の例では、UserEvent
リクエストをスキルに送信してからドキュメントを再インフレートしています。
{
"onConfigChange": [
{
"type": "SendEvent",
"sequencer": "ConfigSendEvent",
"arguments": [
"APLドキュメントの再インフレート"
]
},
{
"type": "Reinflate"
}
]
}
コマンドを逆の順序で記述すると、SendEvent
は実行されません。onConfigChange
ハンドラーは高速モードで実行されるため、SendEvent
にはシーケンサーが必要です。
ドキュメントレベルおよびコンポーネントレベルのonMount
コマンドは、ドキュメントの再インフレート後に実行されます。
Reinflate
コマンドは通常モードと高速モードの両方で実行されます。
再インフレートを使用してタブレットをサポートする詳細については、サイズ変更が可能なタブレットなどのデバイスをサポートするを参照してください。
Scroll
Scroll
コマンドは、ScrollViewまたはSequenceを一定のページ数だけ前または後にスクロールします。Scroll
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
componentId | 文字列 | SELF | 読み込むコンポーネントのIDです。 |
distance | 数値 | 1 | スクロールするページ数です。デフォルトは1です。 |
distanceにはスクロールするページ数を設定します。たとえば、次のようにリストを1ページだけ前にスクロールします。
{
"type": "Scroll",
"componentId": "myScrollingList",
"distance": 1
}
スクロールは次の場合に停止します。
- 目的地に到達したとき。
- スクロール可能なコンテンツの最後に到達したとき。
- ユーザーが画面をタッチしたとき。
- Alexaが新しいコマンドを送信したとき。新しいコマンドを開始すると、
Scroll
コマンドが終了し、スクロールが直ちに停止します。
使用可能なすべてのコンテンツをスムーズにスクロールするには、distance
に大きな数を設定します。たとえば、次のようにリストの先頭にスムーズにスクロールバックします。
{
"type": "Scroll",
"componentId": "myScrollingList",
"distance": -10000
}
Scroll
コマンドは、高速モードでは無視されます。
componentId
ScrollViewまたはSequenceのIDです。省略すると、ScrollPage
コマンドを発行するコンポーネントが使われます。
distance
スクロールする距離です(ページ単位)。1「ページ」とは、ScrollView
またはSequence
の幅または高さから、適用されたパディングを除いたものです。負の数字は後方にスクロールします。distance
に0を設定するとスクロールしません。
たとえば、高さ400dpのScrollView
の上部と下部に50dpのパディングが設定されているとします。ScrollView
の「ページ」は300dpです。distanceに0.5を指定すると、ページの50%、つまり150dpだけ前にスクロールします。
適切なサフィックスを付けて、相対ディメンションまたは絶対ディメンションとして表すこともできます。「50%」、「33dp」、「25vh」などです。distanceに相対的な数値(「50%」など)を設定する場合は、単純な数値(この場合は「0.5」)を使用するのとまったく同じです。通常、APLドキュメントは、画面のサイズに合わせて記述されます。そのため、「100dp」などの絶対ディメンションよりも、「50%」や「0.5」といった相対ディメンションのスクロール指定を使用することをお勧めします。これにより、どのデバイスでも、ユーザーが目で追いやすい距離でコンテンツをスクロールできます。
ScrollToComponent
ScrollView
またはSequence
で前方または後方にスクロールして、特定のコンポーネントが表示されることを確認します。ScrollToComponent
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
align |
first 、center 、last 、visible |
visible |
スクロール後の項目の配置です。 |
componentId |
文字列 | SELF | コンポーネントのIDです。 |
たとえば、スクロールして特定の項目が表示されるようにするには、次のように記述します。
{
"type": "ScrollToComponent",
"componentId": "recipeSteps",
"align": "center"
}
ScrollToComponent
コマンドは、 componentId
の箇所またはその上にある、最初のSequence
またはScrollView
を探し、そこにスクロールします。
ユーザーが画面をタッチすると、スクロールは停止します。コマンドを停止すると、スクロールはすぐに停止されます。
ScrollToComponent
コマンドは、高速モードでは無視されます。
align
スクロール後かつ発話前の画面における項目の配置です。アライメントの列挙値には次のオプションがあります。
配置 | 説明 |
---|---|
first |
項目の左上がスクロールContainerの左上に配置されます。 |
center |
項目の中央がContainerの中央に配置されます。 |
last |
項目の右下がスクロールContainerの右下に配置されます。 |
visible |
項目全体を表示するのに必要な分だけ移動します。 |
componentId
コンポーネントのIDです。省略すると、ScrollToComponent
コマンドを発行するコンポーネントが使われます。
ScrollToIndex
ScrollViewまたはSequenceで前方または後方にスクロールして、特定の子コンポーネントが表示されることを確認します。ScrollToIndex
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
align |
first 、last 、center 、visible |
visible |
スクロール後の項目の配置です。 |
componentId |
文字列 | SELF | 読み込むコンポーネントのIDです。 |
index |
整数 | 必須 | 表示する子の0から始まるインデックスです。 |
たとえば、次のようにリストに表示されるレシピの5番目のステップにスクロールするには、index
を4に設定します。
{
"type": "ScrollToIndex",
"componentId": "recipeSteps",
"index": 4,
"align": "center"
}
componentId
は、Sequence
またはScrollView
コンポーネントである必要はありません。ScrollToIndex
コマンドは、componentId
の箇所またはその上にある、最初のSequence
またはScrollView
を探し、そこにスクロールします。
ユーザーが画面をタッチすると、スクロールは停止します。コマンドを停止すると、スクロールはすぐに停止されます。
ScrollToIndex
コマンドは、高速モードでは無視されます。
align
スクロール後かつ発話前の画面における項目の配置です。アライメントの列挙値には次のオプションがあります。
配置 | 説明 |
---|---|
first | 項目の左上がスクロールContainerの左上に配置されます。 |
center | 項目の中央がContainerの中央に配置されます。 |
last | 項目の右下がスクロールContainerの右下に配置されます。 |
visible | 項目全体を表示するのに必要な分だけ移動します。 |
componentId
親ContainerのIDです。省略すると、ScrollToIndex
コマンドを発行するコンポーネントが使われます。
index
スクロールして表示するための、親Container内の子項目の0から始まるインデックスです。負の値は親Containerの最後から数えられます。たとえば、次のようにリスト内の最後から2番目の項目を表示します。
{
"type": "ScrollToIndex",
"index": -2,
}
表示する項目を見つけるためのアルゴリズムは、概ね以下のように説明できます。
let itemIndex = index < 0 ? index + children.length : index;
if (itemIndex >= 0 && itemIndex < children.length) {
let child = children[itemIndex];
scrollIntoView(child);
}
Select
Select
を使用するには、APL 1.3以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
コマンドとデータの配列から1つのコマンドを選択します。Select
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
commands | コマンドの配列 | 必須 | 選択する順番に並んだコマンドのリストです。 |
data | 配列 | [] | コマンドに対してマップするデータのリストです。 |
otherwise | コマンドの配列 | [] | commands 配列からコマンドが選択されていない場合に実行するコマンドの配列です。 |
data
配列が空の場合、Select
コマンドはcommands
配列でwhen
がtrue
と評価された最初のコマンドを実行します。
次の例では、age
が7
であると仮定します。コマンドは、3番目のコマンドに到達するまでcommands
配列を反復処理します。このコマンドのwhen
ステートメントはtrue
と評価されるため、Select
はSetValue
コマンドを実行して、指定されたtext
プロパティの値を「子供」に更新します。
{
"type": "Select",
"commands": [
{
"when": "${age < 2}",
"type": "SetValue",
"property": "text",
"value": "乳児",
"componentId": "${textIdToUpdate}"
},
{
"when": "${age < 5}",
"type": "SetValue",
"property": "text",
"value": "幼児",
"componentId": "${textIdToUpdate}"
},
{
"when": "${age < 13}",
"type": "SetValue",
"property": "text",
"value": "子ども",
"componentId": "${textIdToUpdate}"
},
{
"when": "${age < 18}",
"type": "SetValue",
"property": "text",
"value": "ティーンエイジャー",
"componentId": "${textIdToUpdate}"
},
{
"type": "SetValue",
"property": "text",
"value": "大人",
"componentId": "${textIdToUpdate}"
}
]
}
data
配列を指定すると、Select
コマンドは、data
配列の項目ごとに、commands
配列の各コマンドにtrueのwhen
句が1つずつ含まれているかどうかを確認します。データバインディングコンテキストは、data
プロパティ、index
プロパティ、length
プロパティをバインドすることにで拡張されます。Select
コマンドは、1つのコマンドを実行すると終了し、data
配列に対する反復処理は継続しません。
次の例では、age
が17
であると仮定します。このコマンドは、data
配列を反復処理します。コマンドのwhen
ステートメントは、4番目の項目(17 < 18
)で指定されるデータについてtrue
と評価されるため、Select
はデータ配列の反復処理を停止して、SetValue
コマンドを実行します。これにより、指定されたtext
プロパティが「カテゴリーはティーンエイジャーです」に更新されます。
{
"type": "Select",
"commands": {
"when": "${!data.until || age < data.until}",
"type": "SetValue",
"property": "text",
"value": "カテゴリーは${data.category}です",
"componentId": "${textIdToUpdate}"
},
"data": [
{
"until": 2,
"category": "乳児"
},
{
"until": 5,
"category": "幼児"
},
{
"until": 13,
"category": "子ども"
},
{
"until": 18,
"category": "ティーンエイジャー"
},
{
"category": "大人"
}
]
}
複数のcommands
をdata
配列と組み合わせることができます。Select
は、引き続きcommands
配列の1つのコマンドのみを実行します。次に例を示します。
{
"type": "Select",
"commands": [
{
"when": "${searchCategory == data.category && data.rating >= 8.0}",
"type": "SetValue",
"property": "text",
"componentId": "${textIdToUpdate}",
"value": "あなたのカテゴリーにぴったりの映画はこちら:<em>${data.title}</em>"
},
{
"when": "${searchCategory == data.category}",
"type": "SetValue",
"property": "text",
"componentId": "${textIdToUpdate}",
"value": "あなたのカテゴリーに合う映画はこちら:<em>${data.title}</em>"
}
],
"data": "${movieData}"
}
次の例では、1番目に最も評価の高い映画が来るようにカテゴリーと評価で並び替えられた映画の配列にmovieData
がバインドされています。
{
"movieData": [
{"title":"アバター","category":"アドベンチャー","rating":7.8},
{"title":"アラジン","category":"アドベンチャー","rating":7.1},
{"title":"リメンバー・ミー","category":"アニメーション","rating":8.4},
{"title":"トイ・ストーリー4","category":"アニメーション","rating":8},
{"title":"ライオン・キング","category":"アニメーション","rating":7}
]
}
SearchCategory
が「アニメーション」の場合、Select
はdata
内の3番目の項目に達するまで反復処理します。この項目は、最初のwhen
ステートメントの両方の条件に一致します。最初のコマンドは、movieResultTextComponent
コンポーネントのtext
プロパティを実行して、「カテゴリーにぴったりの映画はこちら: リメンバー・ミー」に更新します。
SearchCategory
が「アドベンチャー」の場合、Select
はdata
内の最初の項目を選択します。これは、この項目が2番目のwhen
ステートメントの条件に一致するためです。2番目のコマンドは、movieResultTextComponent
のtext
プロパティを実行して、「カテゴリーに合う映画はこちら: アバター」に更新します。
commands
コマンドの配列です。trueのwhen
句を持つ配列の最初のコマンドが実行されます。
data
反復処理するデータの配列です。反復処理中に、データバインディングコンテキストは次のプロパティで拡張されます。
名前 | 説明 |
---|---|
data | データ配列のプロパティから割り当てられたデータです。 |
index | 現在のデータ項目のゼロから始まるインデックスです。 |
length | データ配列内のデータ項目の総数です。 |
これらのプロパティは、data
配列プロパティに1つ以上の項目が含まれている場合にのみ設定されます。
otherwise
otherwise
コマンドは、commands
プロパティ内のいずれのコマンドも実行されない場合に実行されます。otherwise
コマンドでは、data
プロパティにアクセスできません。次に例を示します。
{
"type": "Select",
"commands": {
"when": "${data.breed == breed}",
"type": "SetValue",
"property": "text",
"componentId": "${textIdToUpdate}",
"value": "飼い犬は${data.description}です"
},
"otherwise": {
"type": "SetValue",
"property": "text",
"componentId": "${textIdToUpdate}",
"value": "飼い犬の犬種を分類できません!"
},
"data": "${dogBreedData}"
}
dogBreedData
配列の記述は以下のとおりです。
{
"dogBreedData": [
{
"breed": "アーフェンピンシャー",
"description": "忠実で好奇心があり、面白い"
},
{
"breed": "バセットハウンド",
"description": "垂れ耳で可愛らしい"
},
{
"breed": "ビーグル",
"description": "楽天的で陽気"
}
]
}
上記の例では、「雑種」のbreed
を渡すとotherwise
に割り当てられ、指定されたText
コンポーネントのテキストを「飼い犬の犬種を分類できません」に更新します。
otherwise
プロパティは、data
配列のいずれも一致しない場合のフォールバック動作を提供します。
SendEvent
SendEvent
コマンドを使用して、イベントを生成してAlexaに送信します。SendEvent
コマンドは、スキルにAlexa.Presentation.APL.UserEvent
リクエストを送信します。UserEvent
には、コマンドをトリガーしたコンポーネントとイベントに関する情報が含まれています。
以下は、TouchWrapper
のonPress
ハンドラーでのSendEvent
コマンドの例です。
{
"type": "TouchWrapper",
"id": "idForTheTouchWrapper",
"spacing": "@spacingSmall",
"alignSelf": "center",
"onPress": [
{
"type": "SendEvent",
"arguments": [
"textWasPressed",
"このデータをスキルに送信する"
],
"components": [
"idForTheTextComponent"
]
}
],
"item": {
"type": "Text",
"id": "idForTheTextComponent",
"color": "@colorAccent",
"text": "クリックすると、スキルにUserEventが送信されます。"
}
}
SendEvent
には、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
arguments | オブジェクトの配列 | [ ] | UserEvent リクエストでスキルに送信する引数データの配列です。 |
components | 文字列の配列 | [ ] | コンポーネントIDの配列です。識別された各コンポーネントに関連付けられた値は、結果のUserEvent リクエストに含まれます。 |
SendEvent
コマンドは、高速モードでは無視されます。
arguments
UserEvent
リクエストでスキルに送信するデータの配列です。データバインディングは、SendEvent
の実行時に配列の各要素に適用されます。これによって引数に${event.source.value}
など、イベント自体についてのデータを含めることができるため、このプロパティを使って、任意のデータをスキルに送信します。
リクエストのarguments
プロパティのUserEvent
ハンドラーで、このデータにアクセスします。
components
components
プロパティはコンポーネントIDの配列です。これらの各コンポーネントのvalue
は、UserEvent
リクエストに含まれます。これを使用して、フォームのコンテンツがサーバーに直接送信されるようにフォームを作成できます。
リクエストのcomponents
プロパティ内のコンポーネント値にアクセスします。
UserEvent
SendEvent
コマンドは、スキルにAlexa.Presentation.APL.UserEvent
リクエストを送信します。
たとえば、前述のTouchWrapper
で定義されたSendEvent
は、次のようなUserEvent
リクエストを生成します。
{
"type": "Alexa.Presentation.APL.UserEvent",
"requestId": "amzn1.echo-api.request.1",
"timestamp": "2020-01-20T22:28:44Z",
"locale": "ja-JP",
"arguments": [
"textWasPressed",
"このデータをスキルに送信する"
],
"components": {
"idForTheTextComponent": "クリックすると、スキルにUserEventが送信されます。"
},
"source": {
"type": "TouchWrapper",
"handler": "Press",
"id": "idForTheTouchWrapper"
},
"token": "token-provided-with-RenderDocument"
}
このUserEvent
には、SendEvent
コマンドで定義された次の情報が含まれます。
arguments
プロパティには、SendEvent
コマンドのarguments
配列に渡されるデータを含む配列が含まれます。この例では、このプロパティは静的文字列ですが、データバインディングを使用して動的情報を含めることができます。source
プロパティには、イベントをトリガーしたコンポーネントに関する詳細が含まれます。この例では、このプロパティはTouchWrapper
です。components
プロパティには、ID「idForTheTextComponent
」を持つコンポーネントのvalue
が含まれます。これはText
コンポーネントであるため、UserEvent
に含まれる値はtext
プロパティの値です。これは、SendEvent
が同じIDをcomponents
配列に含めたためです。
UserEvent
リクエストの詳細は、UserEvent
リクエストを参照してください。
UserEvent
ハンドラーの例については、UserEventリクエストを処理するを参照してください。
Sequential
Sequential
コマンドは、一連のコマンドを順番に実行します。前のコマンドが終了するのを待ってから、次のコマンドを実行します。Sequential
コマンドは、すべての子コマンドが終了すると完了します。
Sequential
コマンドのtype
はSequential
です。Sequential
コマンドには、共通のコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
catch |
コマンドの配列 | [] | このシーケンスが早く停止した場合に実行する、順番に並んだコマンドのリストです。 |
commands |
コマンドの配列 | 必須 | 連続して実行する順番に並んだコマンドのリストです。 |
repeatCount |
整数 | 0 | これらのコマンドを追加で実行する回数です。 |
finally |
コマンドの配列 | [] | 通常のコマンドとcatchコマンドの後に実行する、順番に並んだコマンドのリストです。 |
- 通常モードでは、
commands
は順番に実行され、その後にfinally
コマンドが続きます。repeatCount
は通常のコマンドにのみ適用されます。 - 高速モードでは、
commands
は繰り返さずに順番に実行され、その後にfinally
コマンドが続きます。 commands
のいずれかが先に(通常モードで)停止した場合、catch
コマンドとfinally
コマンドは高速モードで実行されます。- 通常モードでの実行中に
finally
コマンドのいずれかが停止した場合、残りのfinally
コマンドは高速モードで実行されます。
catch
catch
を使用するには、APL 1.1以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
ほかのコマンドが実行されたことでSequential
コマンドが停止した場合、catchコマンドが実行されます。catchコマンドは「高速」モードで実行されます。すべてのdurationは無視され、各コマンドはdurationで指定した時間の最終値までジャンプします。catchコマンドはすべてのfinally
コマンドの前に実行されます。
catch
コマンドは1回のみ実行されます。repeatCount
プロパティは、catch
コマンドには適用されません。
commands
実行するコマンド配列です。コマンドは配列順に実行され、各コマンドが終了しない限り次のコマンドは開始されません。Sequential
コマンドのdelay
値と、シーケンスの最初のコマンドのdelay
値は累積で計算されます。次の例では、最初のSendEvent
コマンドが3000ミリ秒後に実行されます。
{
"type": "Sequential",
"delay": 1000,
"repeatCount": 2,
"commands": [
{
"type": "SendEvent",
"delay": 2000
},
{
"type": "SendEvent",
"delay": 2000
}
]
}
finally
finally
を使用するには、APL 1.1以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
finally
コマンドは、通常のsequentialコマンドが終了した後、または早期停止によりcatch
コマンドが実行された後に実行されます。(a)sequentialコマンド全体が高速モードで実行された場合、または(b)sequentialコマンドが早期停止した場合を除き、finally
コマンドは通常モードで実行されます。
finally
コマンドは1回のみ実行されます。repeatCount
プロパティは、finally
コマンドには適用されません。
repeatCount
この一連のコマンドを繰り返す回数です。デフォルトは0です。負の値は無視されます。
SetFocus
SetFocus
を使用するには、APL 1.1以降に更新する必要があります。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。
フォーカスされている実行可能なコンポーネントを変更します。フォーカスを当てたり解除したりできる実行可能なコンポーネントについては、focusedを参照してください。
一度に1つのコンポーネントのみがフォーカスされます。1つのコンポーネントにフォーカスを設定すると、他のコンポーネントのフォーカスが自動的に解除されます。
SetFocus
は実行時に以下を実行します。
- ターゲットコンポーネントにフォーカスを当て、
focused
状態をtrueに設定します。 - 以前フォーカスを当てていたすべてのコンポーネントからフォーカスを外し、そのコンポーネントの
focused
状態をfalseに設定します。
ターゲットコンポーネントが無効であるか、実行できない場合、またはinheritParentState
プロパティがtrueに設定されている場合、SetFocus
コマンドは無視されます。
SetFocus
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
componentId | 文字列 | SELF | フォーカスを当てるコンポーネントのIDです。 |
たとえば、id
myButton
を持つ特定のコンポーネントにフォーカスするには、次のように記述します。
{
"type": "SetFocus",
"componentId": "myButton"
}
SetFocus
コマンドは遅延なしに高速モードで実行されます。
componentId
フォーカスを当てるコンポーネントのIDです。このプロパティが省略された場合、SetFocus
コマンドを発行するコンポーネントが受け取り側となります。
コンポーネントにフォーカスを当てた状態でドキュメントを開くには、ドキュメントのonMount
プロパティをSetFocus
に設定します。
たとえば、ドキュメントのid
myButton
を持つコンポーネントにフォーカスするには、次のように記述します。
{
"onMount": {
"type": "SetFocus",
"componentId": "myButton"
}
}
SetPage
SetPage
コマンドは、Pager
コンポーネントで表示されるページを変更します。SetPage
コマンドは、項目全体が表示されると終了します。SetPage
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
componentId |
文字列 | SELF | 読み込むコンポーネントのIDです。 |
position |
relative、absolute | absolute |
補正値はrelative かabsolute のいずれかです。デフォルトはabsolute です。 |
value |
整数 | 必須 | 移動距離です。絶対値または相対値で指定できます。 |
PagerコンポーネントにN
ページある場合、最初のページのインデックスは0
で、最後のページのインデックスはN-1
です。相対位置は現在のページからのオフセットです。たとえば、1ページ先に進めるには次のようにします。
{
"type": "SetPage",
"componentId": "myWeatherPager",
"position": "relative",
"value": 1
}
絶対位置の場合、現在のページにインデックスが付けられます。負の絶対位置はリスト末尾からのオフセットです。たとえば、最後のページに移動するには次のようにします。
{
"type": "SetPage",
"componentId": "myWeatherPager",
"position": "absolute",
"value": -1
}
2ページ間で切り替える場合、間のページは表示されません(Sequence
とは違います)。たとえば、現在のページが13でSetPage
が"position"="relative","value": 2
で実行された場合、現在のページは範囲外となり、12ページ目を表示することなく11ページ目に移動します。
SetPage
コマンドはあらゆるページを表示するように設定できます。Pager
コンポーネントで許可された移動方向は考慮されません。ただし、ラップ動作はページ切り替えの計算に影響します。おおよそのアルゴリズムを参照してください。
SetPage
コマンドを停止すると、SetPage
コマンドシーケンスが50%以上完了していればターゲットページにジャンプし、50%未満の場合は前のページに戻ります。onPageChanged
コマンドは、ページが最終ページから変更された場合に停止時に1回実行されます。
SetPage
コマンドは、高速モードでは無視されます。
componentId
PagerコンポーネントのIDです。省略すると、SetPage
コマンドを発行するコンポーネントが使われます。
position
position
がrelative
の場合、value
は現在のページから移動する相対的なページ数を指定します。position
がabsolute
の場合、value
は表示されるページの番号を絶対値で表します。
value
value
は、移動するページ数か、絶対値で表される移動先のページ番号のいずれかです。
最終位置と方向を計算するアルゴリズムは、おおよそ次の擬似コードとなります。
if (command.position == 'absolute') { // 絶対値の移動
let index = command.value < 0 ? pager.children.length + command.value : command.value;
index = Math.max(0, Math.min(pager.children.length - 1, index)); // 範囲を固定
// 最後のインデックスと移動の方向を返します。
if (index == pager.currentIndex)
return NO_MOVE
return (index, index < pager.currentIndex ? "LEFT" : "RIGHT");
}
else { // 相対値の移動
let index = pager.currentIndex + command.value;
// 相対値の移動が範囲外になり、ラッピングに対応していない場合、コマンドは無視されます
if (pager.navigation != "wrap" && (index < 0 || index >= pager.children.length))
return NO_MOVE;
// 適切にラップします
index = ((index % pager.children.length) + pager.children.length) % pager.children.length;
if (index == pager.currentIndex)
return NO_MOVE;
return (index, command.value < 0 ? "LEFT" : "RIGHT");
}
Pagerアニメーションは返された方向に動きます。
このアルゴリズムには、以下の特性があります。
-
絶対値は有効なページの範囲内に固定されます。
direction
は現在のページに対して相対的な方向です。 -
ラッピングしているPagerの相対値は任意にラップします。
direction
はコマンドで与えられた値によって決まります。ラッピングで方向は変更されません。 -
ラッピングしていないPagerの相対値は、値が範囲外の場合は無視されます。
SetState
このコマンドは廃止予定であるため、状態を変更する目的での使用には適していません。
disabled
状態、checked
状態、focused
状態を変更するには、それぞれ、SetValue
、SetFocus
、ClearFocus
を使用します。詳細については、コンポーネントの状態を参照してください。
各コンポーネントには、スタイルを評価してコンポーネントを表示するための状態が与えられます。SetState
コマンドで、コンポーネントの状態設定を変更します。
SetState
コマンドを使用して、checked
とdisabled
を変更できますが、推奨されていません。SetValue
を使用して、checked
プロパティとdisabled
プロパティを変更してください。これにより、状態が更新されます。
focused
状態、karaoke
状態、karaokeTarget
状態、pressed
状態を直接設定することはできません。これらの状態を変更するには、SetFocus
コマンド、ClearFocus
コマンド、SpeakItem
コマンドのいずれかを使用します。
SetState
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
componentId | 文字列 | SELF | 値を設定する必要があるコンポーネントのIDです。 |
state | 文字列 | 必須 | 設定する状態の名前です。checked 、disabled 、focused のいずれかになります。 |
value | ブール値 | 必須 | 状態に設定する値です。 |
次の例では、TouchWrapperの状態がcheckedに設定されます。
{
"type": "SetState",
"componentId": "myButton",
"state": "checked",
"value": true
}
componentId
状態が変更されるコンポーネントのIDです。このプロパティが省略された場合、SetStateコマンドを発行するコンポーネントが受け取り側となります。
state
変更する状態の名前です。現在のところ、checked
、disabled
、focused
に制限されています。
value
valueはコマンドの実行時に評価されます。そのため、既存のコンポーネントのプロパティを活用できます。たとえば、このコマンドでは、現在のコンポーネントのchecked状態が切り替えられます。
{
"type": "SetState"
"state": "checked",
"value": "${!event.source.value}"
}
SetValue
コンポーネントのプロパティまたはバインディングを変更します。各コンポーネントには一連の動的なプロパティが定義されており、SetValue
を使用して変更できます。各コンポーネントでは、名前付きバインディングも使用できます。SetValue
を使用して変更できる動的なプロパティについては、各コンポーネントの仕様を参照してください。
SetState
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
componentId | 文字列 | SELF | 値を設定する必要があるコンポーネントのIDです。 |
property | 文字列 | 必須 | 設定するプロパティの名前です。 |
value | 文字列 | 必須 | プロパティに設定する値です。 |
次の例では、ジョークのオチが表示されるよう値が設定されています。opacity
の値が1の場合、コンポーネントは完全に表示されるからです。
{
"type": "SetValue",
"componentId": "jokePunchline",
"property": "opacity",
"value": 1
}
SetValue
コマンドでは、コンポーネントのプロパティの値またはコンポーネントのバインディングが変更されます。次のルールが適用されます。
- コンポーネントに、
property
で指定された名前を持つ動的なプロパティがある場合、そのプロパティが更新され、新しい値が設定されます。 - そうでない場合、その名前を持つbindプロパティがコンポーネントにある場合、そのバインドされているプロパティが更新されます。
- バインドされているプロパティの値が変わると、そのプロパティに依存しているコンポーネントの動的なプロパティはすべて更新されます。
以下は、バインドされた値を更新する方法の例です。シミュレーターのテキストをクリックするたびに、数字が増えていくことを確認できます。ページを更新するか、Viewportのプロファイルを変更すると、カウンターがリセットされます。
上記の例では、TouchWrapper
を押すたびに、表示されるテキストの数字が大きくなります。
SetValue
コマンドは、遅延なしに高速モードで実行されます。
componentId
値が変更されるコンポーネントのIDです。このプロパティが省略された場合、SetValue
コマンドを発行するコンポーネントが受け取り側となります。
property
変更されるプロパティの名前です。ビルトインのプロパティまたはバインディングを指定できます。
value
value
はコマンドの実行時に評価されます。そのため、既存のコンポーネントのプロパティを活用できます。次の例では、SetValue
コマンドがターゲットコンポーネントのopacityを現在の値の50%に設定します。
{
"type": "SetValue"
"property": "opacity",
"value": "${event.target.opacity * 0.5}"
}
SpeakItem
SpeakItem
コマンドは、画面の1つのコンポーネントのコンテンツを読み込みます。コンポーネントが表示されていない場合は、スクロールまたはページを移動して表示されます。
SpeakItem
コマンドはコンポーネントのspeech
プロパティで指定されたコンテンツを読み上げます。コンポーネントにspeech
プロパティがない場合、SpeakItem
コマンドはコンポーネントをスクロールして表示しますが、スピーチ音声は一切レンダリングしません。
コンポーネントのspeech
プロパティをスピーチ音声に変換するtransformer
の出力に設定します。たとえば、ssmlToSpeech
、textToSpeech
、aplAudioToSpeech
などのトランスフォーマーです。
環境によっては、音声などのダイアログは使用できません。環境プロパティdisallowDialog
を使って、デバイスとコンフィギュレーションが音声関連のコマンドをサポートしているかどうかを判断します。
SpeakItem
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
align |
first 、last 、center 、visible |
visible |
スクロール後の項目の配置です。デフォルトは「visible」です。 |
componentId |
文字列 | SELF | 読み込むコンポーネントのIDです。 |
highlightMode |
line 、block |
block | karaokeの適用方法です。行ごとまたはブロック全体に適用します。デフォルトは「block」です。 |
minimumDwellTime |
整数 | 0 | 項目をハイライトする最小時間(ミリ秒単位)です。 |
以下は、1つのTextコンポーネントのコンテンツを読み上げ、テキストを画面に中央揃えするSpeakItem
コマンドの例です。
{
"type": "SpeakItem",
"componentId": "myJokeSetup",
"highlightMode": "line",
"align": "center"
}
SpeakItem
コマンドは、コンポーネントのkaraoke
状態を発話中にtrue
に設定し、発話終了後にfalse
に戻します。highlightMode
プロパティはTextコンポーネントに適用されます。AlexaがText
コンポーネントを"highlightMode": "line"
モードで読み上げるとき、テキストの各行は発話中にkaraoke
状態に設定され、発話終了後にfalse
に再設定されます。
次の制限に注意してください。
SpeakItem
コマンドはblock
モードで発話中はコンテンツをスクロールしません。たとえば、コンポーネントがコンポーネントのスクロールContainerより大きい場合、スクロールした後でも見えないContainerからはみ出した部分は、隠れたままになります。- 円形画面ではコンポーネントを中央揃えにする必要があります。そうしない場合、表示されないコンテンツの部分が多くなってしまいます。
SpeakItem
は、highlightMode
がblock
の場合、発話中はテキストの個々の単語や行をハイライトしません。- 項目をスクロールして表示するのに使用するアルゴリズムは、スクロールするコンポーネントが1つのみであることを想定しています。入れ子構造のコンポーネントには対応していません。
speech
プロパティのないコンポーネントもスクロールして表示しますが、スピーチ音声は一切レンダリングしません。SpeakItem
は、タブレットの向きを切り替えるなど、コンフィギュレーションの変更中には停止します。
SpeakItem
コマンドが早く停止すると、視覚的な変更はすべて消去され、音声がすぐに停止されます。
SpeakItem
コマンドは、高速モードでは無視されます。
align
スクロール後かつ発話前の画面における項目の配置です。アライメントの列挙値には次のオプションがあります。
配置 | 説明 |
---|---|
first | 項目の左上がスクロールContainerの左上に配置されます。 |
center | 項目の中央がContainerの中央に配置されます。 |
last | 項目の右下がスクロールContainerの右下に配置されます。 |
visible | 項目全体を表示するのに必要な分だけ移動します。 |
componentId
発話コンポーネントのIDです。省略すると、SpeakItem
コマンドを発行するコンポーネントが使われます。
highlightMode
Text
コンポーネントのコンテンツをスタイル設定する方法を制御します。block
に設定すると、発話中にText
コンポーネント全体のkaraoke
状態の設定がtrueになります。highlightMode
を「line」に設定すると、Text
コンポーネントの各行が個別に処理されます。各行は、align
プロパティに合わせてスクロールされ、個別にスタイル設定されます。
行ごとのKaraokeモードでは、スタイル設定の変更ができるのはcolor
プロパティだけです。他のプロパティは無視されます。
Text
コンポーネント以外のコンポーネントがSpeakItem
の受け取り側となる場合、highlightMode
は無視されます。
minimumDwellTime
項目をハイライトする最低限の時間(ミリ秒単位)です。
SpeakList
共通Container内にある項目のコンテンツを読み取ります。各項目は、Alexaが項目を読み上げる前にスクロール表示されます。各項目のspeech
プロパティは再生する音声を定義します。項目にspeech
プロパティが設定されていない場合、項目は音声なしでスクロール表示されます。
環境によっては、音声などのダイアログは使用できません。環境プロパティdisallowDialog
を使って、デバイスとコンフィギュレーションが音声関連のコマンドをサポートしているかどうかを判断します。
SpeakList
コマンドには、標準的なコマンドプロパティに加えて以下のプロパティがあります。
プロパティ | 型 | デフォルト | 説明 |
---|---|---|---|
align |
first 、center 、last 、visible |
visible |
項目の配置です。デフォルトはvisible です。 |
componentId |
文字列 | SELF | SequenceまたはContainer(またはその他のホスティングコンポーネント)のIDです。 |
count |
整数 | 必須 | 読み取る子の数です。 |
minimumDwellTime |
数値 | 0 | 項目をハイライトするミリ秒単位の最小時間です。デフォルトは0です。 |
start |
整数 | 必須 | 読み取りを開始する項目のインデックスです。 |
minimumDwellTime
を使用すると、タイトルの短い項目の読み上げが早くなりすぎないようにできます。たとえば、「ヴェノム」、「フェンス」、「ウィンストン・チャーチル/ ヒトラーから世界を救った男」といった映画のタイトルが並んでいる場合、最初の2つの項目では、休止時間がわずかに必要になります。
次の例では、一覧のうち3つのコンポーネントが読み上げられ、それぞれが画面の中央に表示されます。
{
"type": "SpeakList",
"componentId": "movieList",
"start": 3,
"count": 3,
"minimumDwellTime": 700,
"align": "center"
}
コンポーネントのkaraoke
状態は各コンポーネントの発話中にtrue
に設定され、発話の終了後、false
に再設定されます。
子コンポーネントでSpeakList
コマンドを使用できます。
複数子コンポーネントの場合、SpeakList
コマンドはfirstItem
およびlastItem
のプロパティも読み上げることができます。コンポーネントにfirstItem
が定義されている場合、firstItem
のインデックスは0となり、items
の子コンポーネントのインデックスは1から開始します。コンポーネントにfirstItem
が定義されていない場合、items
の子コンポーネントのインデックスは0から開始します。
以下のSpeakList
コマンドの特性に注意してください。
SpeakList
コマンドは発話中、コンテンツをスクロールしません。たとえば、コンポーネントがコンポーネントのスクロールContainerより大きい場合、スクロールした後でも見えないContainerからはみ出した部分は、隠れたままになります。- 円形画面ではコンポーネントを
center
揃えにする必要があります。そうしない場合、表示されないコンテンツの部分が多くなってしまいます。 SpeakList
は、発話中はテキストの個々の単語や行をハイライトしません。- スクロールして項目を表示するには、コンポーネント階層を上の方向に検索し、スクロール可能な最初の上位コンポーネントを見つけます。
- 項目をスクロールして表示するのに使用するアルゴリズムは、スクロールするコンポーネントが1つのみであることを想定しています。SpeakListは、入れ子構造のスクロールコンポーネントには対応していません。
- speechプロパティのないコンポーネントもスクロールして表示します。
- speechプロパティがなく、正の
minimumDwellTime
値があるコンポーネントは、その間はkaraokeに設定されます。 - speechプロパティがなく、正の
minimumDwellTime
値もないコンポーネントは、karaokeに設定されません。
SpeakList
コマンドは、高速モードでは無視されます。
align
スクロール後かつ発話前の画面における項目の配置です。アライメントの列挙値には次のオプションがあります。
配置 | 説明 |
---|---|
first |
項目の左上がスクロールContainerの左上に配置されます。 |
center |
項目の中央がContainerの中央に配置されます。 |
last |
項目の右下がスクロールContainerの右下に配置されます。 |
visible |
項目全体を表示するのに必要な分だけ移動します。 |
componentId
親コンポーネントのIDです。省略すると、SpeakList
コマンドを発行するコンポーネントが使われます。
count
発話する項目の数です。数が1に満たない場合、このコマンドは実行されず、スクロールも発話も行われません。数がContainerの残り項目数を超える場合、開始点から発話できる最大項目数に減らされます。
minimumDwellTime
項目をハイライト(karaoke
状態をtrue
に設定)するミリ秒単位の最小時間です。デフォルトは0です。
start
スクロールして表示し、発話するための、親Container内の最初の子項目の0から始まるインデックスです。負の値は親Containerの最後から数えられます。次の例では、リストの最後の3つの項目が発話されます。
{
"type": "SpeakList",
"start": -3,
"count": 3
}
次のアルゴリズムは読み取りの実行方法を概算したものです。
let first = start < 0 ? start + children.length : start;
let last = Math.min(first + count, children.length – 1);
first = Math.max(0, first);
for (let index = first ; index <= last ; index++) {
let child = children[index];
scrollIntoView(child);
if (child.speech) {
child.setState("karaoke", true);
speakChildWithMinimumDwell(child, minimumDwellTime);
child.setState("karaoke", false);
}
else if (minimumDwellTime > 0) {
child.setState("karaoke", true);
waitForTimeout(minimumDwellTime);
child.setState("karaoke", false);
}
}
関連トピック
最終更新日: 2022 年 08 月 12 日