Alexaの所在地情報使ってみた / Introduction to Alexa's device address

【大阪】スマートスピーカーミーティング 2019/06/06 のLTの資料です。今更感ありますが、Alexaの所在地情報を使ったスキル開発についての話をしてきました。Vocieflowの場合もあります！

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

Transcript

1. Alexaの所在地情報 使ってみた スマートスピーカーミーティング#10 6/6 LT
2. アジェンダ • 自己紹介 • Alexaで使える位置情報 • 所在地情報の取得方法 • 所在地情報を使ってみた • まとめ＆告知 2
3. 自己紹介 1
4. @kun432 - ”元” 通信事業者のインフラエンジニア - Twitter/Facebook/Github/はてなブログ/Alexa - ポートフォリオ： https:/ /kun432.github.io/ 4 ❤ Hello!
5. My Skills & Actions 5 - Alexa (JP): 11（+2） - Google: 1 - Clova: 1 100個までの道のりは長い、、、 - Alexa (US): 1
6. Alexaで使える位置情報 2
7. Alexaの位置情報 • 大きく分けて２つ 7 所在地情報 現在地情報 取得する位置情報 デバイスに設定された住所 アプリが持っている位置情報 設定する場所 Echoデバイス or Alexaアプリ 自動で取得される 設定する人 ユーザ 対応デバイス Echoデバイス or Alexaアプリ Alexaアプリのみ 変化の度合い ほとんど変わらない 変わる 位置情報の 取得方法 ask-sdk v2の ServiceClientFactory経由 or デバイスアドレスAPI リクエスト内に含まれる (handlerInput.requestEnvelope. context.Geolocation) アクセス許可 要（「住所」） 要（「位置情報サービス」）
8. Alexaの位置情報 • 大きく分けて２つ 8 所在地情報 現在地情報 取得する位置情報 デバイスに設定された住所 アプリが持っている位置情報 設定する場所 Echoデバイス or Alexaアプリ 自動で取得される 設定する人 ユーザ 対応デバイス Echoデバイス or Alexaアプリ Alexaアプリのみ 変化の度合い ほとんど変わらない 変わる 位置情報の 取得方法 ask-sdk v2の ServiceClientFactory経由 or デバイスアドレスAPI リクエスト内に含まれる (handlerInput.requestEnvelope. context.Geolocation) アクセス許可 要（「住所」） 要（「位置情報サービス」） 今回はこっち
9. 所在地情報の取得方法 3
10. 所在地情報 10 • 画面”あり”デバイスの場合、「設定」→「デバイスオプション」→ 「デバイスの所在地」 ※ちなみに上記は神戸の有名なタワーの住所
11. 所在地情報 11 • 画面”なし”デバイスの場合、 Alexaアプリの各デバイス の設定から「デバイスの 所在地」
12. 所在地情報 12 • alexa.amazon. co.jpでも設定 可能
13. 所在地情報の取得方法 13 • 大前提として、ユーザの許可を取る必要がある。 ◦ 開発者コンソールでアクセス権限を設定 ▪ 「国/地域と郵便番号のみ」 → 国コード（ex: JP）と郵便番号 ▪ 「住所」 → 上記を含む完全な住所
14. 所在地情報の取得方法 14 • スキルからアクセス許可を確認、 許可されていない場合にカード を表示して許可を求める。
15. 所在地情報の取得方法 • ２つのやり方 15 所在地情報 現在地情報 取得する位置情報 デバイスに設定された住所 アプリが持っている位置情報 設定する場所 Echoデバイス or Alexaアプリ 自動で取得される 設定する人 ユーザ 対応デバイス Echoデバイス or Alexaアプリ Alexaアプリのみ 変化の度合い ほとんど変わらない 変わる 位置情報の 取得方法 ask-sdk v2の ServiceClientFactory経由 or デバイスアドレスAPI リクエスト内に含まれる (handlerInput.requestEnvelope. context.Geolocation) アクセス許可 要（「住所」） 要（「位置情報サービス」） 再掲
16. ServiceClientFactoryを使う場合 16 exports.handler = Alexa.SkillBuilders.custom() .addRequestHandlers( ・・・) .addErrorHandlers( ErrorHandler) .withApiClient(new Alexa.DefaultApiClient()) .lambda(); • ServiceClientFactory ◦ Alexaの各種APIサービスへアクセスするための ask-sdk-v2のサービスクライアント ◦ リスト、デバイスアドレス、リマインダー、プログレッシブ応 答、スキル内課金などなど ◦ 上記API叩くのに必要な処理をよしなにやってくれる • custom()の場合は要初期化、standard()の場合は初期化不要
17. ServiceClientFactoryを使う場合 17 async handle(handlerInput) { const speechText = 'こんにちは。所在地情報のテストです。 '; const deviceId = handlerInput.requestEnvelope.context.System.device.deviceId; try{ const deviceAddressServiceClient = handlerInput.serviceClientFactory.getDeviceAddressServiceClient(); const address = await deviceAddressServiceClient.getFullAddress(deviceId); console.log(JSON.stringify(address)); return handlerInput.responseBuilder .speak(speechText + "住所の取得に成功しました。 ") .getResponse(); } catch (error) { if (error.name === 'ServiceError' && error.statusCode === 403) { return handlerInput.responseBuilder .speak('住所の利用が許可されていません。アレクサアプリの設定で許可してください。 ') .withAskForPermissionsConsentCard(['read::alexa:device:all:address']) .getResponse(); } else { return handlerInput.responseBuilder .speak(speechText + "住所の取得に失敗しました。 ") .getResponse(); } } } 許可されていない場合は カードで許可を促す serviceClinetFactoryを使うと、 deviceIdで情報を取りに行くだ けで良い
18. デバイスアドレスAPIの場合 18 async handle(handlerInput) { const speechText = 'こんにちは。所在地情報のテストです。 '; const { apiAccessToken, apiEndpoint } = handlerInput.requestEnvelope.context.System; const deviceId = handlerInput.requestEnvelope.context.System.device.deviceId; const API_URL = `${apiEndpoint}/v1/devices/${deviceId}/settings/address`; try { const res = await Axios.get(API_URL,{ headers: { Authorization: `BEARER ${apiAccessToken}`, }, }); console.log(JSON.stringify(res.data)); return handlerInput.responseBuilder .speak(speechText + '住所の取得に成功しました。 ') .getResponse(); } catch (error) { const { status, statusText } = error.response; if (status === 403 && statusText === 'Forbidden') { return handlerInput.responseBuilder .speak('住所の利用が許可されていません。アレクサアプリの設定で許可してください。 ') .withAskForPermissionsConsentCard(['read::alexa:device:all:address'])) .getResponse(); } else { return handlerInput.responseBuilder .speak(speechText + "住所の取得に失敗しました。 ") .getResponse(); } } apiAccessToken, apiEndpoint, deviceIdを すべて取得してAPIエンド ポイントに渡す
19. 取得できる所在地データ 19 • ロケールやデバイスごとに項目「名」が異なる・・・ Echo Show Alexaアプリ alexa.amazon.co.jp AddressLine1 ストリート番号 番地 番地 AddressLine2 ー 建物名,部屋番号,階など 建物名,部屋番号,階など AddressLine3 ー ー 住所３ City 市 市町村 市町村 stateOrRegion 州 都道府県 都道府県 districtOrCountry ー ー 郡 countryCode 国 国 国 postalCode ZIPコード 郵便番号 郵便番号
20. 取得できる所在地データ 20 • 複数のデバイスで試したら、こんな感じでバラバラに・・・ { "addressLine1": "中央区波止場町5-5", "addressLine2": null, "addressLine3": null, "city": "神戸市", "stateOrRegion": "兵庫県", "districtOrCounty": null, "countryCode": "JP", "postalCode": "650-0042" } { "addressLine1": "5-5", "addressLine2": null, "addressLine3": null, "city": "神戸市中央区波止場 ", "stateOrRegion": "兵庫県", "districtOrCounty": null, "countryCode": "JP", "postalCode": "650-0042" } { "addressLine1": "神戸市中央区波止場町 5-5", "addressLine2": null, "addressLine3": null, "city": null, "stateOrRegion": "兵庫県", "districtOrCounty": null, "countryCode": "JP", "postalCode": "650-0042" } ※昔と設定項目とか変わ 　ってる気がする。 ※郵便番号使って住所を 　別から引っ張ってくる 　方が確実かも・・・
21. 所在地情報の取得: Voiceflowの場合 21 • ServiceClientFactoryは使えないので、デバイスアドレスAPIを Integration Block使って叩く • _systemというオブジェクトを使うと、apiAccessToken、 apiEndpoint、deviceIdが取れる （どこにも書いてないやん・・・）
22. 所在地情報の取得: Voiceflowの場合 22
23. 所在地情報の取得: Voiceflowの場合 23
24. 所在地情報の取得: Voiceflowの場合 24
25. 所在地情報の取得: Voiceflowの場合 25
26. その他、気づいたこと 26 • 住所情報の設定、いろいろ変な動きが多い気がする ◦ 設定項目が異なる上、わかりにくいのはすでにお話した とおり。 ◦ alexa.amazon.co.jpが最もフラットに見えるけど、設定しても反映さ れない場合がある・・・ ◦ 一旦入力して保存すると次から消せない場合とかあったりする・・・ （空で上書きができない・・・） • 開発者コンソールでテストした場合、どの住所見てるんだろうか？（なん となく１台目の住所のような気がするけど） ◦ 実機テストが確実だと思うけど、実機ごとに設定がバラバラの可能 性もある・・・ 結構、混沌としている感がある・・・
27. その他、気づいたこと（Voiceflow編） 27 • apiAccessToken、apiEndpoint、deviceIdが取れるなら、他の APIもほとんど使えるはず ◦ ToDoリスト・買い物リスト ◦ 位置情報サービス ◦ プログレッシブ応答（上記以外に必要な情報あり） • ただし、パーミッションが必要な場合は一部使えないものがある （voicrflowが対応していないため） ◦ 住所（国コード・郵便番号） ◦ 位置情報サービス ◦ リスト • Feature Request済 • ただし、apiAccessToken、apiEndpoint、deviceIdは実機 or ADCのテストコンソールでしか取れないのでデバッグ辛い ◦ Voiceflowではテストが動かない
28. 所在地情報を使って 作りました 4
29. My雨雲レーダー（仮） 29
30. My雨雲レーダー（仮） 30 • 所在地情報を元に、Yahoo!ジオコーダAPIで該当住所の緯度経度を取 得 ◦ サンプルは文字列そのまま使用、郵便番号APIを挟む予定 • 上記の緯度経度を元に、Yahoo!スタティックマップAPIで 地図を「画像」で取得 ◦ オプションで雨雲表示が可能 ◦ Yahoo!JavaScriptマップAPIでも同じことはできるが、APLでは JavaScript-Enableなマップ表示はできない • APLで画像を表示 • 実は既に他の方が同じ機能のスキルを作っていて、基本に作り
 もほとんど同じ
 ◦ ただし、毎回住所を言って表示するタイプの様子
 ◦ こちらは住所をいちいち言わないでよいという点が差別化ポイント
 • 近々リリース予定（クレジット表記方法の確認中）

31. 余談 31 • Alexaアプリのカード、使えないと 思ってませんか？ ◦ 画像小さい ◦ URLのリンクが効かない ◦ APLもちろん使えない
32. 余談 32 • ただし、Alexaアプリでスキルを起動 した場合のカードはこう表示される→ • 画像も大きく表示されるし、悪くない！ • Alexaアプリだと現在地情報も取れる ので地図系スキルは面白いかも • Alexa Autoとか • なお、Voiceflowではカードの画像は スタティックにアップロードするしか ない orz….. いずれにせよ、カードの表現力の 向上が待たれる・・・！
33. まとめ 5
34. まとめ • 所在地情報の取得自体は簡単 ◦ ServiceClientFactory使えば楽ちん。 ◦ デバイスアドレスAPI、やや面倒だけどそれほどでも ◦ Voiceflowでもできます！ • あまり信頼しない・ざっくりしたものとして割り切る ◦ 項目名が混乱しやすい、ユーザが自分で入力する、所詮文字列、 ということでそもそも精度高くない ◦ 面倒だけど、郵便番号から住所を引く方が確実 ◦ 詳細な住所まで取るとプライバシー的なリスクも • カスタマイズ施策として始めやすい ◦ 郵便番号だけならユーザにも受け入れられやすいのでは？ ◦ ただし、その場合でもプライバシーポリシー、お忘れなく 34 位置情報等を活用して、スキルのユーザビリティ向上！
35. 35 ちょっと告知
36. 6/22（土）AAJUG 大阪 • Alexa + Amazon Pay ワークショップ • WordPress + Amazon Payとの二本立て（要別途申込） 36 メンター枠、 まだ空いて ますよ？
37. 6/29（土）AAJUG 京都 • テーマ：VUIデザイン 37
38. 6/28（金）6/29（土） • Alexa Dev Day Tokyo 2019 38
39. 7/6（土）7/7（日） • Alexa Developer スキルアワード2019 ハッカソン大阪 39
40. Thanks! Any questions?