Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Amazon Echo

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Amazon Echo Show

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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万画素

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

そこでウェブアプリ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

つまり…

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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