![[Alexa] Invocable(旧Storyline)の新機能を試してみた #Invocable](https://devio2023-media.developers.io/wp-content/uploads/2018/12/Snip20181223_2.png)
[Alexa] Invocable(旧Storyline)の新機能を試してみた #Invocable
こんにちは、Mr.Moです。
この投稿は スマートスピーカー Advent Calendar 2018の23日目の投稿です。
Alexaスキルをノンプログラミングで作れるサービス「Storyline」がサービス名を「Invocable」に変え、来年から完全に有料化されますね。
思い切った方針ですが、有料化するからには機能面も上がっているのでは？という興味が湧いてきましたので少し触って確かめていきたいと思います。
今回の記事では主な新機能を中心に見ていきたいと思います。
Invocable(旧名:Storyline)とは
ノンコーディングでAlexaスキルを開発できるサービスです。
世界的に高い人気を誇るサービスで、直感的で分かりやすいUIで初心者もすぐAlexaスキルが作れる、そんなサービスとなっています。
追加された新機能
有料化のアナウンスが出てから下記の機能が追加されているようです。
- Quiz機能
- Condition機能
- Multimodal機能
Quiz機能
クイズスキルを簡単に作れる機能が実装されていました。Quiz Blockとして追加できます。
使い方が直感的に分かるのはInvocableの良いところですね。
赤枠にクイズの質問を、青枠にクイズの答えを設定します。
緑枠のところで、正解時のメッセージ、不正解時のメッセージをそれぞれ設定するだけです。非常に簡単ですね。
ちなみに、このQuiz機能はユーザのクイズ正解数をカウントする機能も備えています。 後述するCondition機能と組み合わせるとかなり便利な機能になります。
ただこのQuiz機能はまだUpdateの余地があるようにも見えましたので 来年以降の本格始動後に使用するのが良さそうです 笑。
Condition機能
プログラミングで言うところのIF文（条件分岐）が使える機能ですね。
先程のQuiz機能との組み合わせを例に何ができるか見ていきましょう。
クイズスキルを作っていると、全問正解した場合にのみ「全問正解おめでとう！」みたいなメッセージをユーザに返したくなることがあると思います。
このCondition機能を使うとそれが実現できるんですね。注目すべきは赤枠の部分です。
前述したQuiz機能はクイズの正解数をカウントする機能も備えていました。カウントされた正解数は青枠の「{score}」の記述で参照することが可能です。
続いて緑枠の部分です。「EQUALS」と「６」が記載されていますね。「EQUALS」は「同じだったら」の意味になりますので、今回は「正解数({score})が6と同じだったら」と設定したことになります。
今回のクイズは６問出題しています。正解数が６(全問正解)の場合のみ、黄色の矢印の先にある会話Blockで設定しているメッセージ「おめでとうございます！」をユーザに返すことがこれで実現できるんですね。
いかがでしたでしょうか？Condition機能を応用すると様々なパターンのメッセージをユーザに返すことが可能になります。 こちらの機能も使い方は直感的なので色々いじってみると楽しいかもしれません。
Multimodal機能
画面付きのAlexa搭載デバイス向けのスキル開発ができる機能がついに実装されました。
音声を主体としながらも、必要に応じて画面表示やタッチ操作など多様な方法をユーザに提供できる、そんなスキルがInvocableでも作れるようになったんですね。
公式のAPL(Alexa Presentation Language)と呼ばれる機能を内部的には使っているようです。
ビデオ・オーディオストリームとHTML5 (近日予定)： 近日中には、APLレイアウトの中にビデオ動画やオーディオストリームも使うことができるようになる予定です。再生が完了したらスキルの動作が継続します。さらにコンテンツとしてHTML5も表示可能になる予定です。
APLに関しては、上記に記載されている通り目玉機能の公開が予定されている状態ですので今から非常に楽しみです。
（Invocableを使っているとこの辺りの恩恵にもあずかれそうですね）
それでは早速、使い方を見ていきましょう。
画面左側に表示されている会話ブロック詳細の中に「Visuals」の項目が新しく追加されていますね。 おもむろに選択していきます。
画面開発の機能は８種類ほど選択肢が用意されています。現在選択できるのは下記の２種類のみのようです。
- Custom Layout
- Custom APL Code
残りの「SOON」が付いている選択肢はまだ使えないようですが、絵を見るとちょっとワクワクしてきますね。来年になると一気にリリースされたりするのでしょうか。
（ここまで触ってきてInvocableのUIは改めて美しいと感じますね。こういったデザイン性の高さが開発者の創作意欲を掻き立て、数々の優れたスキルを生み出すに至ったのかもしれません。）
Custom Layout
百聞は一見にしかずということで、ざっくりとした使い方を動画にしてみました。ひとまずEcho Spot用の画面デザインを構築しています。 素材用画像のアップロードや配置などを視覚的に操作して画面のデザインを構築できるのが大きな特徴でしょうか。 「ヒント」画像にはEcho Spot画面上でタッチするとアクションを起こすよう設定もしています。
ちなみにEcho Spot画面上で「ヒント」画像をタッチすると
上記赤枠の会話ブロックで設定している「ヒントは、大きなトラックだよ。」を読み上げるアクションを起こすよう設定したんですね。
Custom APL Code
最後に「Custom APL Code」を見ていきましょう。
まず、上記のように「Custom APL Code」を選択して「Continue」ボタンを押します。
こんな感じの画面が表示されたかと思います。
はい、落ち着いてください気持ちは良く分かります。ですがまだ慌てるような時間じゃないんですね。
これがAPLと呼ばれるものになります。json形式で画面デザインを構築する仕様になっています。
例えば先程、Custom Layoutで作った画面デザインも裏ではAPLで構築されたjson形式の定義を持っているんですね。
下記にそのjson形式の定義を記載してみます。
{
"document": {
"type": "APL",
"version": "1.0",
"mainTemplate": {
"items": [
{
"type": "Container",
"width": "100vw",
"height": "100vh",
"items": [
{
"type": "Frame",
"position": "absolute",
"top": 0,
"left": 0,
"width": "100vw",
"height": "100vh",
"backgroundColor": "#FFFFFF"
},
{
"type": "Frame",
"position": "absolute",
"top": 0,
"left": 0,
"width": "100vw",
"height": "100vh",
"opacity": 0.64,
"backgroundColor": "#36d111"
},
{
"type": "Image",
"width": 581.9669438044674,
"height": 389.91785234899316,
"opacity": 1,
"borderRadius": 0,
"source": "https://res.cloudinary.com/invocable/image/upload/v1545440500/images/snujpu6incz44key6ywl.png",
"scale": "best-fill",
"position": "absolute",
"top": 32.18720020260875,
"left": 221.0165280977663
},
{
"type": "TouchWrapper",
"onPress": {
"type": "SendEvent",
"arguments": [
"ItemSelected",
"oIhGBebWC390PS9QD6FUw"
]
},
"item": {
"type": "Image",
"width": 324.859010613934,
"height": 128.72538295577135,
"opacity": 1,
"borderRadius": 0,
"source": "https://res.cloudinary.com/invocable/image/upload/v1545529125/images/jlcdv98ramlcrtqzmicp.png",
"scale": "best-fill"
},
"position": "absolute",
"top": 447.82461704422866,
"left": 349.57049469303297
}
]
}
]
}
}
}
上記のjsonをこの「Custom APL Code」の領域にコピー＆ペーストすると、先程「Custom Layout」で作成した画面デザインと全く同じものがEcho Spot画面上で表示することができるんですね。
APLで画面デザインを構築するのでInvocableの制限を受けずにスキル開発をすることが「Custom APL Code」を使えばできそうです。
まとめ
ざっと触っただけですが結構盛りだくさんでした。今までこういったノンプログラミングのAlexaスキル開発ツールは痒いところに手が届かないイメージでしたが、ここまで機能が上がってくるとだいぶ印象が変わってきます。
Release notesを見ると他にも細かいUpdateが入っているようです。
恐らく来年以降はさらにスピード感を増して、新機能や機能アップがされていくと思いますので今後もInvocableをウォッチしていくのは面白いかもしれません。
![[初学者向け] IAM 設計の観点解説とテンプレート化してみた](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-7bf2dfb6b7a0dd9b7561e87b396ccdc3/018019c86ac567eceba7268550750d9f/aws-iam)
