この記事について
Raspberry Pi 3 A+ と1.54インチの小さな液晶(240×240)で、会社の打刻専用キオスクを自作するプロジェクトを進めています。全3回のシリーズで、今回は「アプリ(JS/HTML)側」の工夫について書きます。
- 第1回: アプリ開発編(この記事)
- 第2回: Raspberry Pi組み込み編
- 第3回: 筐体作成編
このアプリ、実はindex.htmlという1つのファイルを、スマホのブラウザでもキオスクの240×240液晶でも同じものとして使っています。なので大きな方針としては「普段はスマホ版のまま動く。ただし極小画面かつマウス/タッチが無い環境と判定したときだけ、挙動を変える」という作りにしました。この記事はその「戦い」の記録です。
戦い1: 画面サイズ
240×240という画面は、普通にCSSを書くだけでは全然収まってくれませんでした。
原因はChromium側の仕様で、ブラウザウィンドウの横幅を約500px未満にはできないという制限があります。起動オプションで--window-size=240,240と指定しても、JSから見えるwindow.innerWidthは強制的に500前後を返してしまうので、通常の@media (max-width: ...)のようなレスポンシブ対応では、この機種をまったく判定できません。
解決策は、ウィンドウ幅とは別に液晶本来の解像度を正しく返してくれるwindow.screen.width/heightを基準にすること。これで
const IS_KIOSK = window.screen.width <= 260 && window.screen.height <= 260;
という判定用の定数を作り、CSS側もmax-device-width/max-device-heightを使ったメディアクエリに切り替え、#appなどの要素にはwidth: 240pxを明示的に指定するようにしました。このIS_KIOSKが、以降のすべての分岐の起点になっています。
もう一つ見た目まわりで踏んだのが、通知バナーの幅指定です。読み込み中などに出す自作バナーをleft: 0; right: 0で画面いっぱいに広げようとしたら、実体のない(見えない)500px幅のウィンドウいっぱいに広がってしまい、文字が画面の外に流れてしまいました。バナー類はwidth: 240pxで固定するのが正解でした。
戦い2: 物理ボタン3個だけでの操作
キオスクにはマウスもタッチもなく、「次へ(Tab)」「決定(Enter)」「スクロール(PageDown)」の3ボタンしかありません。この制約の中で、スマホ版のUIをそのまま使おうとすると、あちこちで操作不能ポイントが生まれることが分かってきました。
ダイアログを全廃した
alert()やconfirm()のようなブラウザ標準ダイアログは、この画面では文字が見切れて読めない上に押しようがないため、最悪その場でフリーズしたようになります。そこで画面上部に細く出す自作バナーを用意し、IS_KIOSKのときだけwindow.alert/window.confirmをこれに差し替えました。選択肢を選ばせるUIをボタン3個で作るのは大掛かりになるため、confirm()はキオスクでは常に「続行」を返す割り切った仕様にしています(削除などの取り消せない操作が確認なしで実行される点は要注意です)。
ファイル選択も無くした
バックアップ読み込み用の「LD」ボタンも、通常はOSのファイル選択ダイアログを開く作りですが、これもキオスクでは開けません。IS_KIOSKのときだけ、決まったファイルをfetch()で直接読み込む動きに差し替え、そもそも「ファイルを選ぶ」という操作自体をキオスクから消してしまいました。
スクロール量を80pxに固定
標準のPageDownの挙動は1画面まるごとスクロールしてしまい、ちょうど良い位置で止めるのが難しかったので、keydownをpreventDefaultしてwindow.scrollBy({ top: 80 })という固定量スクロールに置き換えました。
Tabキーでの巡回に漏れがあった
プロジェクトを選ぶチップ要素がもともと<div onclick=...>だけの実装でtabindexが振られておらず、「次へ」ボタン(Tabキー)で巡回できていませんでした。tabindex="0"とEnter/Space対応のキー操作を追加し、フォーカスが今どこにあるか見えるようにするところまで含めて直しています。
まとめ
やったことを一言でまとめると、「画面サイズをどう正しく検知するか」と「マウス無しの3ボタンでどう操作を成立させるか」の2つでした。どちらも根っこは同じIS_KIOSK判定で、これを起点にダイアログ・ファイル選択・スクロール・フォーカス移動をキオスク向けに作り替えていく形です。
次回はこのアプリを動かす土台、Raspberry Pi側の配線とOS・Chromiumのキオスク設定まわりについて書きます。