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/

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
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は購入数のみ管理 ◦ 永続ストレージ必須 • 複数アイテムパックのキャンセル注意 ◦ ５個パック等 ◦ 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?