Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amazon Echo Show向けウェブアプリの開発
Search
Sora Arakawa
August 26, 2021
0
1.6k
Amazon Echo Show向けウェブアプリの開発
サポーターズ学生ライトニングトーク ~2021夏の終り編~
Sora Arakawa
August 26, 2021
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
0
13
arkw vs. サーバ移転 -2024年1月版-
arkw
0
140
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
310
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1k
5分でわかる!? 7セグメントLED制御
arkw
0
52
ヤフオクで原付買った話
arkw
0
170
パソコンの消費電力と省エネ化のおはなし
arkw
0
260
"成果物"を作ろう(提案)
arkw
0
240
Python(+α)でスマートプラグを制御してみた
arkw
0
1.2k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
A Tale of Four Properties
chriscoyier
155
22k
Practical Orchestrator
shlominoach
185
10k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Navigating Team Friction
lara
183
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
Bash Introduction
62gerente
608
210k
Building Applications with DynamoDB
mza
89
5.9k
The Cult of Friendly URLs
andyhume
76
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Transcript
Amazon Echo Show向け ウェブアプリの開発 Sora Arakawa (arkw) 2021/08/26 サポーターズ学生LT@オンライン 「#技育CAMP」でツイートすると
画面上部に表示されます!
自己紹介 Sora Arakawa(arkw) • 静岡大学 情報学部 行動情報学科 B2 • 趣味:プログラミング、デザイン、鉄道
etc… • バイト:Alexaスキル開発、ウェブサイト制作 • 愛知県岡崎市在住 • https://arkw.net/ • Twitter:@arkw0
Amazon Echo
Amazon Echo • Amazonが開発/販売しているスマートスピーカー • 音声認識AI「Alexa」を搭載 第3世代Echo Dot (¥4,980) 第1世代Echo
Show 5 (¥7,980)
Amazon Echo • Amazonが開発/販売しているスマートスピーカー • 音声認識AI「Alexa」を搭載 アレクサ、NHKニュース流して NHKからお伝えします。東京都では今日、 新たに4704人の感染が確認…(以下略)
Amazon Echo • Amazonが開発/販売しているスマートスピーカー • 音声認識AI「Alexa」を搭載 アレクサ、明日の天気教えて 明日、岡崎市の天気は晴れ、 予想最高気温は摂氏34℃で…(以下略)
Amazon Echo Show
Amazon Echo Show • タッチパネル搭載のAmazon Echo └ Echo Show 5(第1世代/第2世代)
└ Echo Show 8 └ Echo Show 10 例:「アレクサ、NHKニュース流して」 Echo Dot → 音声のみ Echo Show → テレビ放送と同じ映像が流れる
Amazon Echo Show • タッチパネル搭載のAmazon Echo └ Echo Show 5(第1世代/第2世代)
└ Echo Show 8 └ Echo Show 10 例:「アレクサ、NHKニュース流して」 Echo Dot → 音声のみ Echo Show → テレビ放送と同じ映像が流れる
Amazon Echo Show • Androidベースの「Fire OS」を搭載(Fire Tabletと同じ) • 現在の最新バージョンは6.5.4.7(Android 7ベース)
• ただし、スマートスピーカーとして徹底的にカスタマイズされ ているため、タブレットとしての利用は難しい (APKファイルのインストールとUSB転送が塞がれているため、 Androidアプリの追加は不可能)
Amazon Echo Show • 「Amazon Echo Show 5 第1世代」
Amazon Echo Show • 「Amazon Echo Show 5 第1世代」 └
CPU:MediaTek MT8163(Quad-Core ARM
[email protected]
) └ RAM:不明/ROM:不明 └ インカメラ:100万画素/アウトカメラ:無し └ 液晶:5.5インチ タッチスクリーン 960x480px 補足:第2世代はインカメラが200万画素
Alexaスキルの自作 • 「Alexaスキル」=アプリのようなもの 自作可能 • 言語はNode.jsまたはPython • 画面付きスキルも作れる • 既存機能の組み合わせやニュース(RSS)の読み上げ程度は
ノーコードで可能
Alexaスキルの自作 面倒なところ ① Alexa開発者コンソールへの登録が必須 ② 開発環境の構築が面倒 ③ テストの度にデプロイが要る(2~3分) ④ 審査に出さないと一般公開できない
⑤ UIの設計が難しい
None
時計のデザインを変えたい!!
そこでウェブアプリ
ウェブアプリのいいところ ① 開発環境の構築が容易 ② パソコンのウェブブラウザでテストできる ③ 審査無しですぐに一般公開できる ④ 同じコードをパソコンやモバイル端末に流用できる etc…
※「Alexa Web API for Games」ではありません
Amazon Echo Showのブラウザ事情 • Chromiumベースの「Amazon Silk」を内蔵 • かつては「Firefox」も内蔵していたが、削除された • ダウンロード機能や開発者向けツールは塞いである
ブラウザを起動するには ① ウェイクワードを言う ② ビデオホームの「Bing」をタッチ
ブラウザを起動するには ① ウェイクワードを言う 「アレクサ、ブラウザ開いて」 「アレクサ、ウェブブラウザ開いて」 「アレクサ、Silk開いて」
ブラウザを起動するには ② ビデオホームの「Bing」をタップ 音声操作より時間が掛かる → ウェイクワード「アレクサ、Silk開いて」が(たぶん)最速
Ahoxa • デジタル時計のウェブアプリ • Vue.jsで開発
None
Ahoxa • デジタル時計のウェブアプリ • Vue.jsで開発
Echo Show内蔵ブラウザの問題点 • 一定時間(約5分)無操作だと自動でホーム画面に戻る
実験① • 音ゲー界の国歌「conflict」MVを無限にループ再生するウェブ ページを作成して実験 → 30分以上連続で再生された 実験開始直後
実験① • 音ゲー界の国歌「conflict」MVを無限にループ再生するウェブ ページを作成して実験 → 30分以上連続で再生された 実験開始直後 30分経過後
実験② • Ahoxa ~conflict Ver.~ → 1時間以上放置したがホーム画面に戻らなかった
実験③ • ビデオをCSSで透明にした → 4時間以上放置したがホーム画面に戻らなかった
つまり…
背景で透明のビデオを流せば ホーム画面に戻らなくなる!!
Echo Show内蔵ブラウザの問題点 • 一定時間(約5分)無操作だと自動でホーム画面に戻る • 音声操作できない • Echo Showが持つ機能にはアクセスできない •
カメラ/マイクが使えない(らしい)
最後に宣伝 • Ahoxa(MITライセンス) GitHub:arkwnet/ahoxa • ウェブサイト https://arkw.net/ • Twitter @arkw0
ご清聴ありがとうございました