Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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からお伝えします。東京都では今日、 新たに4704人の感染が確認…(以下略)
Slide 6
Slide 6 text
Amazon Echo • Amazonが開発/販売しているスマートスピーカー • 音声認識AI「Alexa」を搭載 アレクサ、明日の天気教えて 明日、岡崎市の天気は晴れ、 予想最高気温は摂氏34℃で…(以下略)
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
[email protected]
) └ 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
ご清聴ありがとうございました