最近のVoiceflow・LINEとアカウントリンクしてみた / Voiceflow Topics & Account Linking with LINE

スマートスピーカーミーティング 2019/08/29 のLT資料です。最近のVoiceflowの新機能と、VoiceflowでのLINEとアカウントリンクについて、話しました。

https://osaka-driven-dev.connpass.com/event/141124/

Transcript

1. 最近の とアカウントリンク してみた スマートスピーカーミーティング
2. アジェンダ 自己紹介 最近の とアカウントリンクしてみた お知らせ
4. Kuniaki Shimizu (@kun432) - シナジーマーケティング株式会社 - インフラエンジニア Twitter/Facebook/Github/Hatena/Alexa - ポートフォリオ： https:/ /kun432.github.io/ ❤
5. Alexa (JP): 12 Google: 1 Clova: 1 スキル開発 チャレンジ Alexa (US): 1
6. • 本資料内における意見・発言等は個人の見 解であり、所属する組織・団体の見解を代 表するものでは、ありません。
7. 最近の
8. 最近のトピック • SSMLエディター（α版）が公開 • スキルの受け渡しが可能に！ • Voiceflow Community Marketplaceでスキルの 公開が可能に！
9. α • ビジュアルエディタ ◦ 入力したテキストを選択 ◦ メニューからタグ付け ◦ SSMLを出力 • 本体とは独立した別の ツールとして提供 ◦ 将来的に組み込まれる • 日本語IMEのキータイプ の考慮がまだ不十分 ◦ Interaction Blockとかでも たまにある • 今後に期待 https://creator.voiceflow.com/ssml
10. スキルの受け渡しが可能に！ • 設定画面からスキルをダウンロードするためのURLを 発行 • 別アカウントでURLにアクセス • インポートに同意 • スキルが別のアカウント内にコピーされる ◦ 共有ではなくコピー
11. スキルの受け渡しが可能に！
12. スキルの受け渡しが可能に！
13. スキルの受け渡しが可能に！ • 以下のユースケースで有効 ◦ チーム開発 ▪ デザイナーが基本を作り、プログラマーが細部 を作るとか。 ◦ 受託開発 ▪ 制作物の納品 ◦ 初心者向けハンズオン ▪ 時間短縮のためのサンプル提供。 ▪ 「できたものがこちらになります」 ◦ テンプレート的な活用 ▪ 今のところこれが一番の目的。
14. • 受け渡し時に注意すべきこと ◦ 画像・音声データとして、アップロードしたものは コピーされる。 ▪ 著作権とか移行先でも意識する必要あり ◦ 外部連携は、連携している「状態」がコピーされる ▪ Googleスプレッドシートの連携状態がコピーされる。スプ レッドシート自体はコピーされない。 ▪ アカウントのスプレッドシート一覧が見える・・・ ◦ 認証が必要なAPIを使っている場合などは、認証トークンとか も消しておく必要あり。 • テンプレート提供するなら、コピー後にユーザが設定する 点をコメントで入れておくなどの考慮がベター スキルの受け渡しが可能に！
15. β https://airtable.com/shr36HKRwmglhZ5Lr/tblpYysnQuzqzmL0f?blocks=hide
16. • ベータ版 • ダウンロード用URLを発行したスキルを申請・共有できる • ダウンロードすれば自分のアカウントで使えるし、テスト 用URLが公開されていれば、その場でブラウザでテスト可能 • 申請してもすぐには公開されない。 • 現在は「スキル」単位。将来的には「パーツ」単位で共有 できるようにしたいとのこと ▪ 自分のスキルに必要な処理だけをライブラリ的に取り込む ことができるようになる • 評価システムも組み込んでいきたいとのこと β 開発者コミュニティを活性化させる取り組みとして期待！
17. β 早速上げてみたので、よろしければご活用ください
18. と アカウントリンクしてみた
19. 今日はコードの話はなし だけ
20. 夏休み 開催中 https://qiita.com/kun432/items/666ae13f097004ea7935
22. マジで辛い・・・ （誰か手伝って・・・）
23. ただし、良いことも
26. 公式ニュースレターで 紹介された！
27. 目指せ！完走！ （現在ややビハインド・・・）
28. そんなわけで
29. コードについては 他力本願
30. で ＋ 連携 https://qiita.com/imajoriri/items/0e975b15b9023cafce24
31. アカウントリンク • 外部システムの認証を使用して、スキル内から外部のシ ステムの情報利用を認可してもらう仕組み。 • 外部システム側でOAuth 2.0をサポートしていることが必 須。 ◦ LINE/Twitter/Facebook/Amazonなどなど ▪ クラメソブログで多数実例あり ◦ Radikoやクックパッドなど、自社内アカウントと リンク対応しているスキルも ▪ 既に蓄積されているユーザの利用状況を活用 して、個々のユーザに最適化したやりとりを
32. で 連携 • LINE ログインでLINEアカウントとアカウントリンク • Messaging APIで、リンクしたアカウントにメッセージ を送信 認証サーバ サーバ 認証（ID/PW） リダイレクト 認可（アクセストークン） アクセストークンでユーザ情報取得 ユーザ情報を元にメッセージ送信依頼 （チャンネルアクセストークン） ・・・
33. で 連携 • アクセストークンは２つ ◦ アクセストークン ▪ LINEログインで（都度）取得 ▪ ユーザの許可が必要 ▪ スキルがユーザ情報にアクセスするのに必要 ◦ チャンネルアクセストークン ▪ 開発者が事前に取得しておく ▪ スキルがMessaging APIへアクセスするのに必要 • アクセストークンで、メッセージを送信したいユーザ情報を取得し て、チャンネルアクセストークンを使って、上記のユーザ情報にメッ セージを送る
34. でやってみる
35. で 連携 • LINEログインの設定 必要事項 を入力 アカウントリンクに 必要な情報を取得
36. で 連携 • Messaging APIの設定 必要事項 を入力 メッセージ送信に 必要な情報を取得 変更
37. で 連携 • Messaging APIの設定（続き）
38. で 連携 • Voiceflowのアカウントリンク設定 LINEログインで 取得した情報を 入力 ※一旦これでアップロード
39. で 連携 • Alexa開発者コンソール＋LINEログインの連携 すべてペースト
40. で 連携
41. で 連携 • チャンネルアクセストークン をセット • アクセストークンを保持して いなければ、カードを送信 して、アカウントリンクを 促す • アカウントリンクすると、アクセス トークンがセットされる。 • アカウントリンクの確認と設定
42. で 連携 • アクセストークンを使って、ログ インAPIにアクセス、一連のユー ザ情報を取得 • 後のメッセージ送信のために、 ユーザ情報のうち、ユーザIDを 前処理 • LINEログインAPIからユーザ情報取得
43. で 連携 • 取得したユーザ情報のうち、 ユーザIDだけを抽出 • チャネルアクセストークンを使っ てメッセージAPIにアク セス • 該当のユーザIDに対して、メッ セージを送る • Messaging APIでメッセージの送信
44. で 連携
45. で 連携
46. ノンコーディングでかんたん！
47. 詳しくは
48. で説明します！
50. ハンズオン＠さくらインターネット https://osaka-driven-dev.connpass.com/event/144522/ • 講師やります！LINE連携も予定！
51. （土） 神戸 • Alexaスキルで使うAWSのサービスの話 • 学生さんLT中心＋AWSの人の話。私もなんか話します https://aajug.connpass.com/event/143847/
52. Any questions?