Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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/

Kuniaki Shimizu

September 26, 2019
Tweet

More Decks by Kuniaki Shimizu

Other Decks in Technology

Transcript

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

    View Slide

  2. About Myself
    1

    View Slide

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

    View Slide

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

    View Slide

  5. 5
    Recently
    AWS Certified Alexa Skill Builder!

    View Slide

  6. My Skills & Actions
    6
    - Alexa (JP): 12
    - Google: 1 - Clova: 1
    #スキル開発100チャレンジ
    - Alexa (US): 1

    View Slide

  7. 本資料内における意見・発言等は個人の
    見解であり、所属する組織・団体の見解
    を代表するものでは、ありません。
    7
    Disclaimer

    View Slide

  8. ISPやってみた
    2

    View Slide

  9. 結論
    9

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. 13
    購入処理中の会話の流れ

    View Slide

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

    View Slide

  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();
    }
    });
    }
    };

    View Slide

  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;
    } ・・・続く・・・

    View Slide

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

    View Slide

  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】

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. 22
    キャンセル処理の結果とメッセージ
    ACCEPTED
    → キャンセル確認で
      「はい」
    DECLINED
    → キャンセル確認で
      「いいえ」
    ERROR
    → キャンセル処理
      でエラー
    NOT_ENTITLED
    →未購入
    買い切り 返金については、Alexaアプ
    リにリンクを送信しましたの
    で、そちらで確認してくださ
    い。

    ※確認がない
    ※買い切りの場合は
     返金処理になる
     即時対応ではない
    ? ○○○はまだ追加されていない
    ようです。
    ※Cancelリクエストの
     手間で返されている
     ように見える
    サブスク
    リプション
    はい、サブスクリプションを
    キャンセルしました。今後会
    費が請求されることはありま
    せん。会費を支払い済みの
    期間が終了するまでは引き
    続き利用できます。
    はい、ではキャンセルしない
    でおきます。
    サブスクリプションには現在
    会員登録していないようで
    す。 Alexaアプリに会員登録
    の設定画面へのリンクを送信
    しましたので、そちらで確認し
    てみてください。
    消費 ? ? ?
    ● 結果は購入処理中に応答される。スキルでは返さない。

    View Slide

  23. ISPの難しいところ
    23
    ● 会話の流れがつかみにくい
    ○ 購入はトランザクション、麺より線のイメージ
    ○ 購入処理中のやりとりが見えないところで会話を
    つなぐ必要
    ○ Upsellとか作り方によっては複雑になりがち
    ● コードとフローが直感的にマッチしにくい
    ○ 通常のインテント
    ○ 購入用インテント(Buy, Upsell, Cancel)
    ○ MonetizationServiceClientからのレスポンス
    ● 購入処理時、セッション切れるので要対応
    全体的に見えにくくなりがち

    View Slide

  24. 24
    https://github.com/toshimin/skill-sample-nodejs-simple-hello-world
    手を動かして一回やってみる

    View Slide

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

    View Slide

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

    View Slide

  27. VoiceflowでもISP
    3

    View Slide

  28. ISPの難しいところ
    28
    ● 会話の流れがつかみにくい
    ○ 購入はトランザクション、麺より線のイメージ
    ○ 購入処理中のやりとりが見えないところで会話を
    つなぐ必要
    ○ Upsellとか作り方によっては複雑になりがち
    ● コードとフローが直感的にマッチしにくい
    ○ 通常のインテント
    ○ 購入用インテント(Buy, Upsell, Cancel)
    ○ MonetizationServiceClientからのレスポンス
    ● 購入処理時、セッション切れるので要対応
    全体的に見えにくくなりがち

    View Slide

  29. Voiceflowならわかりやすい!
    29

    View Slide

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

    View Slide

  31. やってみた
    31

    View Slide

  32. 32

    View Slide

  33. 33
    商品の登録

    View Slide

  34. 商品購入チェック
    34

    View Slide

  35. 購入(Buy)
    35

    View Slide

  36. 購入(Upsell)
    36

    View Slide

  37. キャンセル
    37

    View Slide

  38. VoiceflowのISP Pros&Cons
    38
    ● 課金処理はPayment Block/Cancel Payment Block
    使うだけ
    ○ 課金処理のリクエスト・レスポンス気にしなくてOK
    ○ 純粋なインテントを作っていけば良い
    ● 購入チェックはUser Info Block使うだけ
    ● 永続ストレージは変数でかんたんに扱える
    ○ プロジェクト変数はデフォルトで永続
    ● 会話の流れがわかりやすい
    ○ フローなのでBuyやUpsellの流れが見える
    ○ フロー外からもIntent Blockで対応
    Pros:

    View Slide

  39. VoiceflowのISP Pros&Cons
    39
    ● それでもフローはやっぱり見にくくなる
    ○ 線がたくさん交差しがち
    ○ 並べ方に工夫が必要
    ● 現時点で公式ドキュメントゼロ
    ○ 今あるドキュメントはもう古い
    ○ 何に使うのかよくわからない項目とかもある
    ● 細かい動きわからない
    ○ 結局、Alexa公式のドキュメント見る
    ○ 一回コード書いて体験しないとフロー作れない
    Cons:

    View Slide

  40. 詳しくは、
    40

    View Slide

  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
    ブログで

    View Slide

  42. その他
    4

    View Slide

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

    View Slide

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

    View Slide

  45. 45
    ● 現在の商品の保有数はスキル側で管理
    ○ 購入処理結果で増減を管理する必要あり
    ○ MonetizationServiceClientは購入数のみ管理
    ○ 永続ストレージ必須
    ● 複数アイテムパックのキャンセル注意
    ○ 5個パック等
    ○ MonetizationServiceClientが管理する購入数は
    パック単位
    ○ キャンセルも同じ、商品の数ではない
    ● RequestInterceptor使って常に管理
    ● スキル有効・無効でも引き継がれる(userId変わらない)
    ○ スキルイベントでも考慮
    消費型に注意

    View Slide

  46. その他
    46
    ● 以下も考慮
    ○ 利用規約とかプライバシーポリシーは多分
    必須?
    ○ 支払口座の登録や税金関係の手続き必要
    ○ 返金等の運用も必要
    ○ 審査基準

    View Slide

  47. その他
    47
    ● Tシャツキャンペーンやってます(〜9/30)

    View Slide

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

    View Slide

  49. まとめ
    4

    View Slide

  50. まとめ
    50
    ● コードの実装はそんなに難しくない
    ● 会話の流れが見えにくくなりがち、工夫して自然な会
    話フローを!
    ● スキル開発以外にやることが多い点に注意
    ● 手を動かそう・ドキュメント読もう
    ● VoiceflowでもISPできます!
    ● いろいろキャンペーンやコンテストも

    View Slide

  51. 結論
    51
    スキル内課金、始めるなら今!

    View Slide

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

    View Slide

  53. お知らせ
    5

    View Slide

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

    View Slide

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

    View Slide

  56. Thanks!
    Any questions?

    View Slide