ISPやってみた&VoiceflowでもISP / Introduction to Alexa's In-Skill Purchase with ASK-SDK and Voiceflow

ISPやってみた&VoiceflowでもISP / Introduction to Alexa's In-Skill Purchase with ASK-SDK and Voiceflow

【大阪】スマートスピーカーミーティング 2019/09/26 のLTの資料です。Alexaのスキル内課金をやってみた感想とかまとめてます。もちろんリリースされたばかりのVocieflowのスキル内課金もご紹介してます!

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

5caee8d2ccdb42a940545c47c6c01373?s=128

Kuniaki Shimizu

September 26, 2019
Tweet

Transcript

  1. ISPやってみた &VoiceflowでもISP スマートスピーカーミーティング #13 9/26 LT

  2. About Myself 1

  3. Kuniaki Shimizu (@kun432) - シナジーマーケティング株式会社 - インフラエンジニア - Twitter/Facebook/Github/Hatena/Alexa -

    ポートフォリオ: https:/ /kun432.github.io/ 3 Hello!
  4. Kuniaki Shimizu (@kun432) - シナジーマーケティング株式会社 - インフラエンジニア - Twitter/Facebook/Github/Hatena/Alexa -

    ポートフォリオ: https:/ /kun432.github.io/ 4 Hello!
  5. 5 Recently AWS Certified Alexa Skill Builder!

  6. My Skills & Actions 6 - Alexa (JP): 12 -

    Google: 1 - Clova: 1 #スキル開発100チャレンジ - Alexa (US): 1
  7. 本資料内における意見・発言等は個人の 見解であり、所属する組織・団体の見解 を代表するものでは、ありません。 7 Disclaimer

  8. ISPやってみた 2

  9. 結論 9

  10. (個人的)ISP実装のポイント 10 • 実装はそんなに難しくない ◦ 購入処理はAlexa側でやってくれる ◦ スキル側はISPのAPIに投げて受けるだけ ◦ 購入処理中の応答もAlexa側で予め用意

    • スキル開発者がやることはその外側 ◦ 購入前はBuyとUpsellで課金につなげる ◦ 購入後は会話フローにスムーズに戻す ◦ 購入有無をチェックして処理を分岐 ◦ セッション1回きれるので考慮 会話の流れが作るのが重要
  11. (個人的)ISP実装のポイント 11 • 実装はそんなに難しくない ◦ 購入処理はAlexa側でやってくれる ◦ スキル側はISPのAPIに投げて受けるだけ ◦ 購入処理中の応答もAlexa側で予め用意

    • スキル開発者がやることはその外側 ◦ 購入前はBuyとUpsellで課金につなげる ◦ 購入後は会話フローにスムーズに戻す ◦ 購入有無をチェックして処理を分岐 ◦ セッション1回きれるので考慮 会話の流れが作るのが重要
  12. 12 課金 処理前 課金 処理中 課金 処理後 購入インテントトリガー ディレクティブ送信 (type=Connections.SendRequest)

    購入インテントハンドラ レスポンスハンドラ (type=Connections.Response) getResponseで会話フロー をつなげる 商品・料金説明、 同意確認 認証コード確認 課金処理 • スキル側でやるのは購入処理の手前と後だけ • 購入処理も一連のやり取りもAlexa⇔ユーザでやってくれる スキル内課金のやりとり セッション切断
  13. 13 購入処理中の会話の流れ

  14. 14 購入処理中の会話の流れ スキル側の処理 スキル側の処理 Alexa側の処理 Alexa側の処理

  15. 15 MonetizationServiceClient • 購入をMonetizationServiceClientにリクエスト const BuyEnglishPackIntentHandler = { ・・・ handle(handlerInput)

    { const locale = handlerInput.requestEnvelope.request.locale; const ms = handlerInput.serviceClientFactory.getMonetizationServiceClient(); return ms.getInSkillProduct(locale, ENGLISH_PACK_ID).then(function (product) { if (product.entitled === "ENTITLED") { const speechText = `既に${product.name} を購入しています。続けますか?`; const repromptText = `続けますか?`; return handlerInput.responseBuilder .speak(speechText) .reprompt(repromptText) .getResponse(); } else { return handlerInput.responseBuilder .addDirective({ type: 'Connections.SendRequest', name: 'Buy', payload: { InSkillProduct: { productId: ENGLISH_PACK_ID } }, token: 'correlationToken' }) .getResponse(); } }); } };
  16. 16 MonetizationServiceClient • 購入処理結果を受けるハンドラ const BuyResponseHandler = { canHandle(handlerInput) {

    return handlerInput.requestEnvelope.request.type === 'Connections.Response' && ・・・ }, handle(handlerInput) { const locale = handlerInput.requestEnvelope.request.locale; const ms = handlerInput.serviceClientFactory.getMonetizationServiceClient(); return ms.getInSkillProduct(locale, ENGLISH_PACK_ID).then(function (product) { if (handlerInput.requestEnvelope.request.status.code === '200') { let speechText = product.summary; const repromptText = '続けますか?'; switch (handlerInput.requestEnvelope.request.payload.purchaseResult) { case 'ACCEPTED': // 購入した speechText = product.summary + repromptText; break; case 'DECLINED': // 購入しなかった speechText = repromptText; break; case 'ALREADY_PURCHASED': // 既に購入済 speechText = product.summary + repromptText; break; Default: // その他のERROR speechText = `うまく行かなかったようです。${repromptText}`; break; } ・・・続く・・・
  17. (個人的)ISP実装の印象 17 • 実装はそんなに難しくない ◦ 購入処理はAlexa側でやってくれる ◦ スキル側はISPのAPIに投げて受けるだけ ◦ 購入処理中の応答もAlexa側で予め用意

    • スキル開発者がやることはその外側 ◦ 購入前はBuyとUpsellで課金につなげる ◦ 購入後は会話フローにスムーズに戻す ◦ 購入有無をチェックして処理を分岐 ◦ セッション1回きれるので考慮 会話の流れが作るのが重要
  18. 18 https://developer.amazon.com/ja/blogs/alexa/post/096dc4fa-6bc0-4896-b7c9-ff8ae72070bc/how-to-make-isp-skill-in-jp 購入前〜購入処理〜購入後 【Buy】 【Upcell】 【Cancel】

  19. 19 購入処理中の会話の流れ(Buy)

  20. 20 購入処理中の会話の流れ(Upsell)

  21. 21 購入処理の結果とメッセージ ACCEPTED → 購入確認で   「はい」 DECLINED → 購入確認で

      「いいえ」 ERROR → 購入処理で   エラー ALREADY_PURCHAS ED→ 購入済(二重購 入) 買い切り はい、 ◦◦◦の購入処理 が完了しました わかりました “支払い方法が正しく設 定されていません。 Alexaアプリに設定画面 へのリンクを送信しました ので、そちらで確認してみ てください。” “すみません、うまく処 理できません。” “すみません。◦◦◦はご 使用の国では利用でき ません。” “すみません、このデバ イスではスキル内課金 を行うことができませ ん。” ◦◦◦はすでにお持ち です サブスク リプション はい、 ◦◦◦を使用でき ます はい、わかりました。 ◦◦◦に申し込みたい時 は、いつでも言ってくだ さい。 消費 はい、 ◦◦◦の購入処理 が完了しました わかりました ー ※消費型では発生  しない(はず) • 結果は購入処理中に応答される。スキルでは返さない。
  22. 22 キャンセル処理の結果とメッセージ ACCEPTED → キャンセル確認で   「はい」 DECLINED → キャンセル確認で

      「いいえ」 ERROR → キャンセル処理   でエラー NOT_ENTITLED →未購入 買い切り 返金については、Alexaアプ リにリンクを送信しましたの で、そちらで確認してくださ い。 ー ※確認がない ※買い切りの場合は  返金処理になる  即時対応ではない ? ◦◦◦はまだ追加されていない ようです。 ※Cancelリクエストの  手間で返されている  ように見える サブスク リプション はい、サブスクリプションを キャンセルしました。今後会 費が請求されることはありま せん。会費を支払い済みの 期間が終了するまでは引き 続き利用できます。 はい、ではキャンセルしない でおきます。 サブスクリプションには現在 会員登録していないようで す。 Alexaアプリに会員登録 の設定画面へのリンクを送信 しましたので、そちらで確認し てみてください。 消費 ? ? ? • 結果は購入処理中に応答される。スキルでは返さない。
  23. ISPの難しいところ 23 • 会話の流れがつかみにくい ◦ 購入はトランザクション、麺より線のイメージ ◦ 購入処理中のやりとりが見えないところで会話を つなぐ必要 ◦

    Upsellとか作り方によっては複雑になりがち • コードとフローが直感的にマッチしにくい ◦ 通常のインテント ◦ 購入用インテント(Buy, Upsell, Cancel) ◦ MonetizationServiceClientからのレスポンス • 購入処理時、セッション切れるので要対応 全体的に見えにくくなりがち
  24. 24 https://github.com/toshimin/skill-sample-nodejs-simple-hello-world 手を動かして一回やってみる

  25. 25 いろいろな会話の流れを体験

  26. 26 ドキュメント読もう https://developer.amazon.com/ja/docs/in-skill-purchase/add-isps-to-a-skill.html#accepted-result

  27. VoiceflowでもISP 3

  28. ISPの難しいところ 28 • 会話の流れがつかみにくい ◦ 購入はトランザクション、麺より線のイメージ ◦ 購入処理中のやりとりが見えないところで会話を つなぐ必要 ◦

    Upsellとか作り方によっては複雑になりがち • コードとフローが直感的にマッチしにくい ◦ 通常のインテント ◦ 購入用インテント(Buy, Upsell, Cancel) ◦ MonetizationServiceClientからのレスポンス • 購入処理時、セッション切れるので要対応 全体的に見えにくくなりがち
  29. Voiceflowならわかりやすい! 29

  30. 祝!日本向けISP対応! 30

  31. やってみた 31

  32. 32

  33. 33 商品の登録

  34. 商品購入チェック 34

  35. 購入(Buy) 35

  36. 購入(Upsell) 36

  37. キャンセル 37

  38. VoiceflowのISP Pros&Cons 38 • 課金処理はPayment Block/Cancel Payment Block 使うだけ ◦

    課金処理のリクエスト・レスポンス気にしなくてOK ◦ 純粋なインテントを作っていけば良い • 購入チェックはUser Info Block使うだけ • 永続ストレージは変数でかんたんに扱える ◦ プロジェクト変数はデフォルトで永続 • 会話の流れがわかりやすい ◦ フローなのでBuyやUpsellの流れが見える ◦ フロー外からもIntent Blockで対応 Pros:
  39. VoiceflowのISP Pros&Cons 39 • それでもフローはやっぱり見にくくなる ◦ 線がたくさん交差しがち ◦ 並べ方に工夫が必要 •

    現時点で公式ドキュメントゼロ ◦ 今あるドキュメントはもう古い ◦ 何に使うのかよくわからない項目とかもある • 細かい動きわからない ◦ 結局、Alexa公式のドキュメント見る ◦ 一回コード書いて体験しないとフロー作れない Cons:
  40. 詳しくは、 40

  41. 41 https://kun432.hatenablog.com/entry/2019/09/21/Voiceflow_TIPS_32_in-skill-purchase-in-japanese-part1 https://kun432.hatenablog.com/entry/Voiceflow_TIPS_32_in-skill-purchase-in-japanese-part2 ブログで

  42. その他 4

  43. 43 おさらい:商品タイプ • “One-Time Purchase(買い切り型)” ◦ 永久に使える「権利」を買うイメージ ◦ プレミアム機能の有効化とか •

    “Subscription(サブスクリプション型)” ◦ 支払っている期間は使える、やめれば使えない ◦ 月額サービス利用 • “Consumable(消費型)” ◦ 使ったらなくなる、何個でも買える ◦ ゲームのアイテムとか
  44. 44 おさらい:商品タイプ • “One-Time Purchase(買い切り型)” ◦ 永久に使える「権利」を買うイメージ ◦ プレミアム機能の有効化とか •

    “Subscription(サブスクリプション型)” ◦ 支払っている期間は使える、やめれば使えない ◦ 月額サービス利用 • “Consumable(消費型)” ◦ 使ったらなくなる、何個でも買える ◦ ゲームのアイテムとか
  45. 45 • 現在の商品の保有数はスキル側で管理 ◦ 購入処理結果で増減を管理する必要あり ◦ MonetizationServiceClientは購入数のみ管理 ◦ 永続ストレージ必須 •

    複数アイテムパックのキャンセル注意 ◦ 5個パック等 ◦ MonetizationServiceClientが管理する購入数は パック単位 ◦ キャンセルも同じ、商品の数ではない • RequestInterceptor使って常に管理 • スキル有効・無効でも引き継がれる(userId変わらない) ◦ スキルイベントでも考慮 消費型に注意
  46. その他 46 • 以下も考慮 ◦ 利用規約とかプライバシーポリシーは多分 必須? ◦ 支払口座の登録や税金関係の手続き必要 ◦

    返金等の運用も必要 ◦ 審査基準
  47. その他 47 • Tシャツキャンペーンやってます(〜9/30)

  48. その他 48 • コンテストやってます(〜11/12EST)

  49. まとめ 4

  50. まとめ 50 • コードの実装はそんなに難しくない • 会話の流れが見えにくくなりがち、工夫して自然な会 話フローを! • スキル開発以外にやることが多い点に注意 •

    手を動かそう・ドキュメント読もう • VoiceflowでもISPできます! • いろいろキャンペーンやコンテストも
  51. 結論 51 スキル内課金、始めるなら今!

  52. 結論 52 めざせ!シアトル!

  53. お知らせ 5

  54. 54 AAJUG大阪 ISPワークショップ(10/20)

  55. 55 AAJUG神戸 Alexaで使えるAWS(9/28)

  56. Thanks! Any questions?