サイオステクノロジー武井です。今回は自宅にデジタルサイネージを導入した話をします。仕事とはまったく関係ないです。

デジタルサイネージとは？

デジタルサイネージとは、電子的な看板のことです。店舗や公共の場で情報を表示するために使用されます。テレビやモニターを使って、広告や案内、ニュースなどを表示します。

モチベーション

私が自宅に導入したデジタルサイネージはこんな感じです。

全景はこんな感じです。

普通の人は自宅にデジタルサイネージ導入しないと思いますが、私は多分普通じゃないので。。。

で、きっかけとしては、自宅のデスクを飛行機のコックピットみたいにかっこよくしてみたいと言う理由だけで導入したのですが、実際に入れてみるとこれが意外にすごい便利でした。

デジタルサイネージの画面

デジタルサイネージの画面の構成はこんな感じです。

左上に時計と祝日のカレンダー、右上に現在の天気と予報、真ん中に直近(12時間先まで)の雨予報、その下にニュースヘッドライン、その下にニュースのYouTubeのライブ動画を垂れ流しています。

これ、すごい便利なんですよね。まぁ、全部普通にスマホで見れるでしょって感じなんですけど、やっぱ、視線をぱっと動かしただけで、必要な情報が全部見れるってのはすごい便利です。雨予報とかニュースのYouTubeとか個別にスマホで見るのは面倒くさいですからね。

直近の雨予報表示しているのは実は自作している部分なのですが、これ、洗濯物をしまうかどうかの判断にとても役立っておりまして、、洗濯物を外に干しているときに、あと何時間後に雨が降るかがぱっとわかるので、洗濯物をしまうタイミングが非常にわかりやすいです。

構成

デジタルサイネージを実現するソフトウェアはオープンソースのMagicMirror2というものを使用しています。これは一言でいえば「Web技術で作られた、超拡張可能なスマートミラー／デジタルサイネージ用フレームワーク（OSS）」であるといえます。

https://magicmirror.builders/

MagicMirror2はnode.jsで動作するWebアプリケーションであり、そのWebアプリケーションに対して、Electrtonという技術を使ってデスクトップアプリケーションとして動作させています。つまりクラサバ構成ということになっています。

先程説明した時計や祝日カレンダー、天気予報、ニュースヘッドラインなどはすべてMagicMirror2のモジュールとして提供されているものを使用しています。YouTubeのライブ動画表示もモジュールとして提供されているものを使用しています。つまり各機能は全てモジュールという形で提供されており、そのモジュールを画面上の好きな位置に配置することで、デジタルサイネージの画面を構成しています。以下のようなイメージです。

このMagicMirror2を導入するハードウェアはnode.jsが動作するものであれば何でも良いのですが、Raspberry Piを使っている例が多いです。私はそのへんに転がっていたRaspberry Pi 3を使用しています。スペック的には十分です。

ディスプレイは何でもいいのですが、解像度よりも画面の大きさが重要です。とはいいつつも私はそんな大きなディスプレイを持っていなかったので、余っていた16インチのモバイルディスプレイを使っています。

導入手順

では、実際にMagicMirror2を導入する手順を説明します。

MagicMirror2のインストール

Raspberry Piでもなんでもいいのですが、node.jsが動作するLinuxマシン(多分Windowsでも大丈夫)を用意します。Raspberry Piの場合はRaspberry Pi OSをインストールしておきます。

次に以下のコマンドを実行して、MagicMirror2をインストールします。pm2というnode.jsのプロセスマネージャも一緒にインストールします。これはつまり、マシンの電源を入れたときに自動的にMagicMirror2が起動するようにしたり、MagicMirror2を簡単に再起動したりするために使用します。

$ bash -c  "$(curl -sL https://raw.githubusercontent.com/sdetweil/MagicMirror_scripts/master/raspberry.sh)"
Do you want use pm2 (node process manager) for auto starting of your MagicMirror (y/N)? y
Do you want to update the PM2 process name? (Default is MagicMirror)  (y/N) N

インストール自体はこれで終わりで、ディスプレイにMagicMirror2の画面が表示されると思います。

YouTubeモジュールのインストール

標準で備わっているモジュールもいくつかあるのですが、YouTubeのライブ動画を表示するモジュールは標準では備わっていないので、別途インストールします。以下のコマンドを実行します。

$ cd ~/MagicMirror/modules
$ git clone https://github.com/nitpum/MMM-EmbedYoutube.git
$ cd MMM-EmbedYoutube
$ npm install

スライドショーモジュールのインストール

背景の画像をスライドショーで表示するモジュールも標準では備わっていないので、別途インストールします。以下のコマンドを実行します。

$ cd ~/MagicMirror/modules
$ git clone https://github.com/darickc/MMM-BackgroundSlideshow.git
$ cd ~/MagicMirror/modules/MMM-BackgroundSlideshow
$ npm install

直近の雨予報の自作モジュールのインストール

これは私が作成したモジュールです。洗濯物を外に干しているときに、あと何時間後に雨が降るかがぱっとわかるようにするためのモジュールです。以下のコマンドを実行します。

$ cd ~/MagicMirror/modules
$ git clone https://github.com/noriyukitakei/MMM-RainForecast.git
$ cd MMM-RainForecast

ちなみにVibe Codingで作成しました。コードは1行も書いていません。

https://github.com/noriyukitakei/MMM-RainForecast

設定ファイルの編集

MagicMirror2の設定ファイルは ~/MagicMirror/config/config.js にあります。このファイルを編集して、各モジュールの設定を行います。以下に私の設定ファイルの例を示します。

日本語表示

表示を日本語にするために、以下のように設定を変更します。

- language: "en",
- locale: "en-US", // this variable is provided as a consistent location
+ language: "ja",
+ locale: "ja_JP.UTF-8", // this variable is provided as a consistent location

カレンダーの設定

日本の休日カレンダーを表示するために、以下のように設定を変更します。

 		{
 			module: "calendar",
-			header: "US Holidays",
+			header: "JP Holidays",
 			position: "top_left",
 			config: {
 				calendars: [
 					{
 						fetchInterval: 7 * 24 * 60 * 60 * 1000,
 						symbol: "calendar-check",
-						url: "https://ics.calendarlabs.com/76/mm3137/US_Holidays.ics"
+						url: "https://calendar.webcal.jp/JapanHolidays.ics"
 					}
 				]
 			}
 		},

YouTubeモジュールの設定

YouTubeのライブ動画を表示するために、以下のように設定を追加します。「video_id」には表示したいYouTube動画のIDを指定します。YouTubeのURLが https://www.youtube.com/watch?v=t9kwjZBLI-A の場合、video_idは t9kwjZBLI-A となります。

+		{
+			module: 'MMM-EmbedYoutube',
+			position: 'bottom_bar',
+			config: {
+			    video_id: 't9kwjZBLI-A',
+			    autoplay:true,
+			    loop: true,
+			    width: 700,
+			    height: 394
+			},
+		},

直近の雨予報のモジュール設定

私自作の直近の雨予報モジュールを使用する場合は、以下のように設定を追加します。緯度(latitude)と経度(longitude)は自分の住んでいる場所に合わせて変更してください。

+		{
+			module: "MMM-RainForecast",
+			position: "middle_center", // 好きな位置に
+			config: {
+				latitude: 35.681236,        // 東京駅あたり
+				longitude: 139.767125,
+				maxHoursAhead: 12,       // 12時間先までチェック
+				rainThreshold: 0.1,      // 0.1mm/h 以上を「雨」とみなす
+				timezone: "Asia/Tokyo",
+				updateInterval: 10 * 60 * 1000, // 10分ごとに更新
+				showDebug: false         // trueにすると取得した生データも表示
+			}
+		},

他の部分は以下のGitHubリポジトリのREADMEを参考にしてください。

https://github.com/noriyukitakei/MMM-RainForecast

MagicMirror2の再起動

以下のコマンドを実行して、MagicMirror2を再起動します。