Amazon Echo Show向けウェブアプリの開発

サポーターズ学生ライトニングトーク ～2021夏の終り編～

Transcript

1. Amazon Echo Show向け
   ウェブアプリの開発
   Sora Arakawa (arkw)
   2021/08/26 サポーターズ学生LT@オンライン
   「#技育CAMP」でツイートすると
   画面上部に表示されます!
   

   View Slide

2. 自己紹介
   Sora Arakawa（arkw）
   • 静岡大学 情報学部 行動情報学科 B2
   • 趣味：プログラミング、デザイン、鉄道 etc…
   • バイト：Alexaスキル開発、ウェブサイト制作
   • 愛知県岡崎市在住
   • https://arkw.net/
   • Twitter：@arkw0
   

   View Slide

3. Amazon Echo
   

   View Slide

4. Amazon Echo
   • Amazonが開発／販売しているスマートスピーカー
   • 音声認識AI「Alexa」を搭載
   第3世代Echo Dot
   (¥4,980)
   第1世代Echo Show 5
   (¥7,980)
   

   View Slide

5. Amazon Echo
   • Amazonが開発／販売しているスマートスピーカー
   • 音声認識AI「Alexa」を搭載
   アレクサ、NHKニュース流して
   NHKからお伝えします。東京都では今日、
   新たに４７０４人の感染が確認…（以下略）
   

   View Slide

6. Amazon Echo
   • Amazonが開発／販売しているスマートスピーカー
   • 音声認識AI「Alexa」を搭載
   アレクサ、明日の天気教えて
   明日、岡崎市の天気は晴れ、
   予想最高気温は摂氏３４℃で…（以下略）
   

   View Slide

7. Amazon Echo Show
   

   View Slide

8. Amazon Echo Show
   • タッチパネル搭載のAmazon Echo
   └ Echo Show 5（第1世代／第2世代）
   └ Echo Show 8
   └ Echo Show 10
   例：「アレクサ、NHKニュース流して」
   Echo Dot → 音声のみ
   Echo Show → テレビ放送と同じ映像が流れる
   

   View Slide

9. Amazon Echo Show
   • タッチパネル搭載のAmazon Echo
   └ Echo Show 5（第1世代／第2世代）
   └ Echo Show 8
   └ Echo Show 10
   例：「アレクサ、NHKニュース流して」
   Echo Dot → 音声のみ
   Echo Show → テレビ放送と同じ映像が流れる
   

   View Slide

10. Amazon Echo Show
    • Androidベースの「Fire OS」を搭載（Fire Tabletと同じ）
    • 現在の最新バージョンは6.5.4.7（Android 7ベース）
    • ただし、スマートスピーカーとして徹底的にカスタマイズされ
    ているため、タブレットとしての利用は難しい
    （APKファイルのインストールとUSB転送が塞がれているため、
    Androidアプリの追加は不可能）
    

    View Slide

11. Amazon Echo Show
    • 「Amazon Echo Show 5 第1世代」
    

    View Slide

12. Amazon Echo Show
    • 「Amazon Echo Show 5 第1世代」
    └ CPU：MediaTek MT8163（Quad-Core ARM Cortex-A53@1.3GHz）
    └ RAM：不明／ROM：不明
    └ インカメラ：100万画素／アウトカメラ：無し
    └ 液晶：5.5インチ タッチスクリーン 960x480px
    補足：第2世代はインカメラが200万画素
    

    View Slide

13. Alexaスキルの自作
    • 「Alexaスキル」＝アプリのようなもの 自作可能
    • 言語はNode.jsまたはPython
    • 画面付きスキルも作れる
    • 既存機能の組み合わせやニュース（RSS）の読み上げ程度は
    ノーコードで可能
    

    View Slide

14. Alexaスキルの自作
    面倒なところ
    ① Alexa開発者コンソールへの登録が必須
    ② 開発環境の構築が面倒
    ③ テストの度にデプロイが要る（2～3分）
    ④ 審査に出さないと一般公開できない
    ⑤ UIの設計が難しい
    

    View Slide

15. View Slide

16. 時計のデザインを変えたい!!
    

    View Slide

17. そこでウェブアプリ
    

    View Slide

18. ウェブアプリのいいところ
    ① 開発環境の構築が容易
    ② パソコンのウェブブラウザでテストできる
    ③ 審査無しですぐに一般公開できる
    ④ 同じコードをパソコンやモバイル端末に流用できる
    etc…
    ※「Alexa Web API for Games」ではありません
    

    View Slide

19. Amazon Echo Showのブラウザ事情
    • Chromiumベースの「Amazon Silk」を内蔵
    • かつては「Firefox」も内蔵していたが、削除された
    • ダウンロード機能や開発者向けツールは塞いである
    

    View Slide

20. ブラウザを起動するには
    ① ウェイクワードを言う
    ② ビデオホームの「Bing」をタッチ
    

    View Slide

21. ブラウザを起動するには
    ① ウェイクワードを言う
    「アレクサ、ブラウザ開いて」
    「アレクサ、ウェブブラウザ開いて」
    「アレクサ、Silk開いて」
    

    View Slide

22. ブラウザを起動するには
    ② ビデオホームの「Bing」をタップ
    音声操作より時間が掛かる
    → ウェイクワード「アレクサ、Silk開いて」が（たぶん）最速
    

    View Slide

23. Ahoxa
    • デジタル時計のウェブアプリ
    • Vue.jsで開発
    

    View Slide

24. View Slide

25. Ahoxa
    • デジタル時計のウェブアプリ
    • Vue.jsで開発
    

    View Slide

26. Echo Show内蔵ブラウザの問題点
    • 一定時間（約5分）無操作だと自動でホーム画面に戻る
    

    View Slide

27. 実験①
    • 音ゲー界の国歌「conflict」MVを無限にループ再生するウェブ
    ページを作成して実験
    → 30分以上連続で再生された
    実験開始直後
    

    View Slide

28. 実験①
    • 音ゲー界の国歌「conflict」MVを無限にループ再生するウェブ
    ページを作成して実験
    → 30分以上連続で再生された
    実験開始直後 30分経過後
    

    View Slide

29. 実験②
    • Ahoxa ～conflict Ver.～
    → 1時間以上放置したがホーム画面に戻らなかった
    

    View Slide

30. 実験③
    • ビデオをCSSで透明にした
    → 4時間以上放置したがホーム画面に戻らなかった
    

    View Slide

31. つまり…
    

    View Slide

32. 背景で透明のビデオを流せば
    ホーム画面に戻らなくなる!!
    

    View Slide

33. Echo Show内蔵ブラウザの問題点
    • 一定時間（約5分）無操作だと自動でホーム画面に戻る
    • 音声操作できない
    • Echo Showが持つ機能にはアクセスできない
    • カメラ／マイクが使えない（らしい）
    

    View Slide

34. 最後に宣伝
    • Ahoxa（MITライセンス）
    GitHub：arkwnet/ahoxa
    • ウェブサイト
    https://arkw.net/
    • Twitter
    @arkw0
    

    View Slide

35. ご清聴ありがとうございました
    

    View Slide