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

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

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

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

5caee8d2ccdb42a940545c47c6c01373?s=128

Kuniaki Shimizu

August 29, 2019
Tweet

Transcript

  1. 最近の とアカウントリンク してみた スマートスピーカーミーティング

  2. アジェンダ 自己紹介 最近の とアカウントリンクしてみた お知らせ

  3. None
  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

  21. None
  22. マジで辛い・・・ (誰か手伝って・・・)

  23. ただし、良いことも

  24. None
  25. None
  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. で 連携 • アクセストークンは2つ ◦ アクセストークン ▪ 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. で説明します!

  49. None
  50. ハンズオン@さくらインターネット https://osaka-driven-dev.connpass.com/event/144522/ • 講師やります!LINE連携も予定!

  51. (土) 神戸 • Alexaスキルで使うAWSのサービスの話 • 学生さんLT中心+AWSの人の話。私もなんか話します https://aajug.connpass.com/event/143847/

  52. Any questions?