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 full-size slide

  2. About Myself
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 5
    Recently
    AWS Certified Alexa Skill Builder!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. ISPやってみた
    2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. VoiceflowでもISP
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. やってみた
    31

    View full-size slide

  31. 33
    商品の登録

    View full-size slide

  32. 商品購入チェック
    34

    View full-size slide

  33. 購入(Buy)
    35

    View full-size slide

  34. 購入(Upsell)
    36

    View full-size slide

  35. キャンセル
    37

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 詳しくは、
    40

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. お知らせ
    5

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Thanks!
    Any questions?

    View full-size slide