Fire 7 タブレットを Echo Show っぽくするためにフルスクリーン表示する時計アプリを作った
2019年モデルの Fire 7 は、Alexa が使えるが、Echo Show モードが使えない。開発者オプションにて電源接続時にスリープにしない設定は出来るので、フルスクリーンで常時表示させられる何らかの画面が作れたら面白いかな？ と思った。
Android OS および Fire OS のブラウザでは、HTML5 の Fullscreen API が利用できる。すなわち、ウェブページをフルスクリーン表示できるワケだ。
それならばと、フルスクリーンで時計を表示する Web ページを作ってみた。
目次
成果物とデモ
作ったモノは以下。
ページ左上付近をタップするとフルスクリーン表示になる。見えないボタンを配置している。同様に、
- ページ右上をタップすると当月のカレンダーを表示
- ページ左下をタップすると全要素を非表示にする (再度タップすれば時計 or カレンダーを表示する)
- ページ右下をタップすると、ライトモードとダークモードを切り替える
といった機能を実装した。
実際に Fire 7 タブレットで表示した様子はこんな感じ (中央)。隣の Google Nest Hub と遜色ない……？？ｗ
ソースコードを見てもらえば分かると思うが、容量削減のためにフルスクラッチで実装している。
Fullscreen API
Fullscreen API は、主要な PC ブラウザや Android の主要ブラウザで利用できる。iOS では使えないので、代わりに Standalone モードを利用することになるだろうか。
今回は Fire OS に搭載されている Silk ブラウザ、および Chrome ブラウザで検証したが、正常にフルスクリーン表示できた。
以下に Fullscreen API のデモを用意した。
document.fullscreenEnabled プロパティを見れば、Fullscreen API が使えるかどうかが事前に分かる。
また、document.fullscreenElement が null かどうかで、フルスクリーン表示中か否かが確認できる。
フルスクリーンに移行するには Element.requestFullscreen() を使う。ページ全体をフルスクリーン表示するなら document.documentElement.requestFullscreen() とする。
逆にフルスクリーン表示を終了するには、document.exitFullscreen() を使う。コチラは document だけなので間違えないように。
それぞれ Promise になっているので成否が分かる他、fullscreenchange や fullscreenerror イベントが存在するので、これをリスンしておくことで成否を確認できる。
時計の実装
時計の実装は愚直に行った。setInterval で1秒おきに時刻を表示しているだけ。等幅フォントを使っていないので、1文字単位で span で囲み、幅を揃えるようにした。
ページ上部に高さ 50px ほどの帯を置いている。コレは Fire 7 タブレットで表示した時に、画面下部にナビゲーションバーが表示されるのだが、それにより上下の中央位置がズレるために設けたモノ。テキトーに。ｗ
ページ四隅には透明な button 要素を置いている。
カレンダーの実装は、以前実装したコードの流用。
ホントに Fire 7 タブレットでの見え方しか意識していないので、雑な作りだが…。ｗ
とりあえず Fullscreen API で遊べたのでおけおけ。ｗ