Raspberry Piで子供用に時計サイネージを作ってみた
4歳になった娘が、なかなかアナログ時計が読めるようにならない。
我が家には壁掛けのシンプルなアナログ時計がある。数字は普通のゴシック体のアラビア数字で1～12まで書かれており、子供が読む練習をするのに問題の無いデザインだ。
この時計を見ながら読み方を教えていたのだが、やはり、時針が数字と数字の間にある場合や、分針の数字が全く書かれていない点などが、4歳にはまだ非常に難しいらしい。
時計の読み方を練習する知育おもちゃを探してみたりもしたが、しっくりくるものがなかなか見つからなかった。
そこで、エンジニアの父たるものアナログ時計の一つや二つくらいプログラムで作ったる！と思い立って、まず完成したのがこちら。
PWAとしてインストール可能にしたウェブアプリである。我が家の壁掛け時計とほぼ同じデザインであるが、分針の数字を全て表示したり、時針と分針が指している数字をハイライトしたり、時間に応じた空の色を表示するようにしたりし、そして針を自由に動かしてそのときの時間の読み方をひらがなで全て表示するようにした。
これでだいぶ時計の読み方に興味を持ってはくれたものの、これだと「ふと視線を向けるだけ」で見える壁掛け時計に対して、「タブレットを起動し、ホーム画面からこのアプリのアイコンを探し、起動する」という大きな手間がかかってしまうという問題点があり、結果すぐに見なくなってしまった。
やはり常に子供の視線の先にあるものでないといけないと思い、今回の時計サイネージの製作を思いついた。
設計
完成イメージはこうだ。
画面上にはアナログ時計の他、同じく早く読めるようにしてあげたいカレンダーを配置し、子供が気を引くように何かメッセージも表示できるようにする。
1枚のウェブページとして製作し、全画面（ブラウザのキオスクモード）で常にそれだけを表示し続ける。
食卓の真上など、いつでもすぐに見られる位置に設置する。
これを実現するために何を使えばいいか…と考えたとき、思いついたのがシングルボードコンピュータのRaspberry Piだ。Raspberry Piは今まで使ったことが無かったが、以前からいつか使ってみたいと思っていたので、ちょうどよい機会だった。検索してみると、Raspberry Piでサイネージを作ったという事例は多数見つかり、やろうとしていることは全て実現可能であるとすぐに分かった。
今回はセンサー類による入力は使わないので、Raspberry Piは単純に「24時間動き続けるパソコン」として使う形となる。
機材の購入
必要なものをリストアップした。
Raspberry Pi本体
Raspberry Piを収めるケース
モニター（コンセントまで延ばす線はRaspberry Piの電源だけにしたいので、Raspberry PiからUSBで給電できる小型のもの。一方で、視認性を考えて最低13インチくらいの大きさはほしい）
モニターアーム
キーボードとマウス
Raspberry Pi本体
Raspberry Pi本体は、世界的な半導体の供給不足の影響でちょうど入手が困難な状況となってしまっていたが、ケース・SDカード・ケーブルなどが全てセットになったスターターキット（約17,000円）で入手することができた。割高ではあったが、ヒートシンクやファンなども付属していたので、初心者の私が一つずつ揃えるよりはるかに良かったと思っている。
モニターとモニターアーム
モニターとモニターアームは納得する製品を見つけるのに苦労した。
まずモニターは、USB給電可能な製品は小さいポータブル用のものが多く、一方で13インチ以上になると大型の据え置き用のものばかりで、13インチ付近はちょうど空白地帯だった。ネットを探し回った結果、ポータブル用でUSB給電の13インチ（約20,000円）をなんとか発見し購入できた。
次いで、食卓の上にモニターを設置するためのモニターアームだが、大型モニター用の強力なモニターアームだと、今回購入したような1kg未満のポータブル用モニターは軽すぎて取り付け不可能であった。そこで、タブレット用の華奢なモニターアームの中から大きめのものを探し、最終的に、幅20cm、重さ1.5kgまで対応という超大型タブレット用の製品（約2,500円）を購入することにした。
その他
キーボードとマウスは、セットアップ時のみ必要になるとのことだったので購入するか迷ったが、キーボードとマウス無しでのセットアップは面倒臭そうだったので、キーボードのみ安い製品（約2,000円）を購入し、マウスは家にあるものを使用することにした。
ここまでで合計金額は約40,000円。安いPCと同じくらいの価格には収まった。
セットアップ
Raspberry Pi自体のセットアップや初期設定については、詳細に解説しているサイトがすでに多数あるのでそちらに説明を譲るとして、今回サイネージにするために必要だった部分のみ解説したいと思う。
なお、後述のアプリ部分含め、今回製作したコードはGitHubに載せたので、詳細は直接コードを参照されたい（ただし、もともと私的利用のみを想定しているため、プライベートなものやライセンス的によく分からないものは公開を控えた）。
自動起動
電源を入れたら自動的にサイネージの画面までたどり着くように、OS起動と同時に自動で必要なものが全て起動するようにする。crontabの@rebootという記法を使うと、OS起動時に一度だけシェルスクリプトを実行できるので、今回はこれを利用することにした。
自動起動したいものは、ローカルウェブサーバーとブラウザである。ウェブサーバーは今回特にこだわりポイントではないので、最も手軽なものとして、Pythonの簡易サーバーを使った。ブラウザは、標準で入っているChromiumをキオスクモードで立ち上げる。
注意点として、ブラウザはGUIアプリであるため、crontabから立ち上げるには、明示的に環境変数DISPLAYの設定が必要であった。また、@rebootのタイミングでの実行ではうまくいかない場合があったので、sleepによる待ち時間を入れることで解決した。
更新方法
セットアップ後のRaspberry Piはキーボード・マウスを接続せず、原則sshによるリモートでの操作となるため、アプリの更新時にどうやってブラウザをリロードするかについてはいろいろ考えた結果、以下のような運用にした。
アプリのHTML（signage/index.html）は直接開くのではなく、外枠となるページ（index.html）を別途作り、その中でiframeとして開いておく。
更新時は、scpでファイルを転送する。
更新用スクリプト（update.sh）を叩いて、更新フラグファイル（update.json）の内容を更新する。
外枠ページは更新フラグファイルを監視しており、更新を検出したらiframe内を自動的にリロードする。
もっとスマートな方法はありそうだが、今回はいったんこれで十分だ。
マウスポインタ
これでサイネージとして使う準備は整った…と思ったのだが、最後に気づいたのが、ブラウザが自動起動した後もマウスポインタがずっと表示されたまま、という問題であった。だが、こちらも検索したら先人がとっくに解決策を見つけてくれており、unclutterというGUIアプリを使えばよいとのことだった。unclutterの起動もcrontabで叩く起動時のスクリプトに追加した。
アプリの製作
さて、やっとアプリ本体の製作である。アプリは1枚のウェブページにカレンダーや時計を配置し、起動後はひたすら自動で時を刻み続けるだけのものである。クリックやタッチなどの入力は何も受け付けない。
ライブラリ等は一切使わず、全て純粋なHTML/CSS＋Vanilla JSで製作した。実際のコードはGitHubを参照されたい。
アナログ時計
まずは主役のアナログ時計。全てcanvasで描画している。冒頭で紹介した自作PWAのコードをほぼ再利用した。ただし、こちらでは針を動かす機能などは外している。
分針を時針のように滑らかに動かす（秒針に合わせて分と分の間を指すようにする）かどうかについて迷ったが、「分が切り替わる瞬間」が分かる方が良いと思い、59秒→0秒の瞬間のみ分針が動くようにした。
午前と午後はひらがなで左上に表示している。
数字のフォントについては、なるべくシンプルで読みやすいゴシック体を探した結果、「源柔ゴシック」というフリーフォントを使わせていただくことにした。
カレンダー
次いで、カレンダー。こちらは時計とは違い文字を格子状に並べるだけであるから、canvasでも普通のHTML/CSSでもどちらでも作れそうだったが、結局時計と同様全てcanvasで作った。
紙のカレンダーなどでは、6週目が存在する場合に5週目と一緒に「23 / 30」「24 / 31」などと表記されたりするが、これは分かりにくいので、6週目もちゃんと独立して表示するようにしている。また、前後の月の日にちについても、混乱を招かないように数字ではなく「・」で表示することにした。
曜日や年などは、子供が読めるように漢字を使わず全てひらがなで表記している。
祝日は別の設定ファイルで任意に設定できるようにした。毎年1回、内閣府のサイトから翌年の祝日の情報を拾ってきて、自力で設定する運用が必要である。
メッセージ
カレンダーと時計を上に配置して、下にできた隙間にメッセージを表示することにした。娘の好きな動物がセリフを喋っているように表示し、15秒ごとに切り替わる。内容は、
「いまは なんじ なんふん かな？」
「きょうは なんがつ なんにち かな？」
という日時を問うものを始めとして、
時報（「ごご 8じ です！」など）
時候のネタ（「そろそろ ハロウィンの きせつ だね！」など）
祝日のお知らせ（「きょうは 『スポーツのひ』だから おやすみのひ だよ！」など）
時間に関する知識（「『ごぜん 0じ』に ひづけが かわるよ」など）
…などなどを大量に詰め込んで、毎日見ても飽きないようにした。メッセージは、日時などに基づく任意の選択アルゴリズムと任意の表示頻度でいくらでも追加できるようにしてある。
実装については、吹き出しの曲線をどうするか迷ったが、canvasで角丸は面倒な気がしたので、HTML/CSSで実装した。また、動物が登場するアニメーションも、CSSのtransitionで実現しており、こちらもcanvasを使うよりも楽にできたと思う。
動物のアイコンについては、有名な「いらすとや」さんからいただいた。
その他
当初は、上記のカレンダー、時計、メッセージの3つを表示するだけの予定だったのだが、購入したモニターと同じ16：9の画面に配置してみたところ、時計の横にもう少しスペースを入れた方が全体のバランスが良くなったので、この部分には簡易的な天気予報を表示することにした。
天気予報のデータは、気象庁の非公式APIを使用させてもらうことにした。JSONデータの解析が大変だったが、すでに有志の方によって公開されているコードなども参考にして、なんとか今日と明日の天気・気温・降水確率を表示できるようになった。「晴れ」や「曇り」などの天気のアイコンは自作した。
完成！
こうして完成した我が家の時計サイネージがこちらである。
撮影のために高さを下げているが、実際はもう少しテーブル面から高い位置（40cmくらい）に設置している。
裏側はこのようになっている。
Raspberry Pi本体は、不格好であるがモニターに貼り付けた。Raspberry Piとモニターの間は、画面出力用のHDMIと給電用のUSB-Cの2本のケーブルがつながっている（HDMIは、Micro⇔Miniのケーブルが入手できなかったため、標準端子を介して接続している）。電源（コンセント）につながっているのは、Raspberry Piだけである。
モニターアームは仕様上は耐えられる重量のはずなのだが、実際はかなり重そうでずるずると下がってきてしまい、ネジを壊れそうなくらい固く締めないとなかなか固定できなかった。
今後の課題
ある日突然食卓に登場した時計サイネージを見て娘は喜んでくれて、時計やカレンダーも頻繁に読むようになった。いろいろな動物がしゃべるメッセージも気になる様子なので、この部分はこれからいろいろなことに使えそうである。
今回作ったサイネージは、音が出る機能が何もないのだが、時報など注意を引くべきメッセージのときに音を出すのもよさそうだと思っている。音を出す場合、モニターのスピーカーから鳴らすためには、音声をHDMIで出力するようにRaspberry Pi側の設定の切り替えが必要とのことだった。
13インチのモニターというのは、実際設置してみると、部屋全体に対してはかなり小さい印象だ。食卓に座れば問題無く見えるが、食卓から少し離れた位置からだとメッセージや分針の指す数字は小さくて読むのが難しい。今回の時計サイネージでは、カレンダー、時計、メッセージ、天気予報と4つの情報を表示したが、13インチではこれ以上の情報を同時に表示するのは難しそうだ。今度はもっと様々な機能を持った超大画面のサイネージを作って自宅の壁にかけてみたいものである。
（最後までお読みいただきありがとうございました。）
※2023/04/12追記：
続編を公開しました。よろしければこちらもご覧下さい。
この記事が気に入ったらサポートをしてみませんか？