Raspberry Pi3+ドコデモ人感センサー+Vue.jsで「会議室の空室ディスプレイ」をつくる #16

令和元年のゴールデンウィークは恒例の「ものづくり一人旅」に行ってきた。

今年は島根県の隠岐諸島(海士町とか)をのんびり旅しながら、ラズパイとセンサーを使ってうちの会社で使う「会議室の空室ディスプレイ」を作ってきたので作り方を紹介する。

「会議室見に行く」をなくしたかった

オフィスで会議するとき、こんなことがよくある。

「いまちょっとMTGしよう」 会議室見に行く 「どこもあいてない!」
「あの部屋への来客がきた」 会議室見に行く 「まだ使ってた!」
「あの人まだ会議してるかな?」 会議室見に行く 「まだしてそう!」

こういう「会議室見に行く」をなくしたかった。その会議室が使用中かどうかリアルタイムにわかれば、いちいち会議室に見に行く必要がなくなる

ついでに、

「あの部屋なかに人いる??」
「勢いよく飛び込んだら重役会議中で気まずい・・」

などのよくある課題も解決できる!

最近人が増えて会議室も埋まりがちで、だいたい1日に1回は「会議室見に行く」「そして帰ってくる」が発生している。

なんと年間120万円の大損失!?

試しに1年間でどれぐらいの損失になっているか計算すると・・

①1日で1分「会議室見に行く」が発生とする。
②60名なので1日で1時間の損失
④1ヶ月だと2日分の損失。
③1人の1日の生産力は約5万円とすると・・
⑤1ヶ月で10万円、1年で120万円の損失!

これは大変。早くなんとかしなくては! 全然関係ないけど写真は社内の紙ひこうき大会の様子。無駄な時間を節約して、紙ひこうきであそぼう笑。

つくりかた【ダイジェスト】

空室ディスプレイを作るのに必要なのは、この7ステップ。

①ドコデモ人感センサーを動かす
②センサーのJSON APIを叩く
③CSSで画面をデザイン
④Vue.js+センサーAPIで空室案内表示
⑤ラズパイのセットアップ
⑥ラズパイ上で空室案内表示
⑦ラズパイの自動起動設定

センサーの情報がディスプレイに表示されるまでのデータの流れはこういう感じ。

★ドコデモ人感センサー

↓<人を感知>どこでもセンサー社のクラウドにデータをアップ

★クラウドサービス

↓<JSから随時リクエスト>センサーデータをラズパイのJSに返す

★ラズパイ(JS)

↓<常時表示>5分無反応なら空室と表示。10秒毎に更新

★小型ディスプレイ

————

ちなみに今回つかった道具たち。窓の向こうではニワトリが騒がしい笑。

①ドコデモ人感センサーを動かす

センサーをいろいろと探してみたところ、プラネットコミュニケーション社のどこでも人感センサー WS-USB02-PIRが良さそう。

理由1:シンプルで値段も手頃
理由2:センサーデータをクラウドに1ヶ月保管(無料!)
理由3:API使える(2019.4リリース。ギリギリ間に合った!)

USBでコンセントにさせるシンプルな構造。(隠岐ジオパークキャンプ場にて笑)

電源に指したらセンサーのIPアドレスにブラウザからWifiアクセス(センサーをルータと見立てる感じ)。実際に使うWifi環境のSSID/PASSを入力する。開発中はいちいち変えるのが面倒なので自分のiPhoneのテザリングWifiを指定。あとはコンセントにさすだけで自動でセンサースタート。しばらく計測するとクラウドの管理画面で検知ログがグラフで見れる。いいね!

②センサーのJSON APIを叩く

さあ次はさっそくセンサーが感知したログをAPIで取得する。このAPIの動作確認がまあまあ大変だった。センサーのメーカーはソフト開発が苦手なのか、管理画面がワードプレスだったり、API資料が10行ぐらいの説明で済まされてたり、その取得方法の例が間違ってたり、エラーのときレスポンスにエラーメッセージはなく[]だけだったりと、なかなかの突き放し方・・。だがそれはそれで楽しいからよし笑。

APIをブラウザで叩いてちゃんとレスポンスが帰ってくるまで何が正しいかわからず意外に時間がかかってしまったので、後発組のために正しい使用例を下記に記載しておく。(%22は”, %20はスペースのエスケープ)

リクエストURL
https://svcipp.planex.co.jp/api/get_data.php?type=%22WS-USB02-PIR%22&mac=%2224:72:60:40:**:**%22&from=%222019-04-30%2011:00:00%22&to=%202019-04-30%2012:00:00%22&token=%2211e1277b5e1619561ccd7a1b9977****%22

レスポンスデータ
[
[“2019-04-30 11:00:00”, “24”]
,[“2019-04-30 11:00:06”, “24”]
,[“2019-04-30 11:00:10”, “24”]
,[“2019-04-30 11:00:16”, “24”]
]

③CSSで画面をデザイン

動作確認も出来たところでいよいよ開発開始。まずはCSSで画面をデザイン。遠くの人からでも見えるように、文字を最大限おおきく表示。またそれでも読めないかも知れないので、文字の背景を白で塗る。

この背景はゲージになっていて5分かけて下がっていくようにした。このセンサーは厳密に「入室」「退室」が取れるわけじゃなくて、人の動きを検知するだけ。実際に会議室で試したところ、人がいたとしてもあんまり動かないと検知しないことがわかった。それでも、だいたい5分に1回は人が動いて検知することが経験的に判ったので、「直近5分反応がなかったら空室とみなす」という仕様にした。

ゲージが減っているときに空室かどうか明確に判断はできないけど、それも含めてユーザに伝わる仕組みだ。このあたりハードの仕様や性能限界に合わせて最適なUI/UXを考えて、それをデザインで表現して、説明せずともシンプルで使いやすくするセンスがとても大事だと思う

フォントはBebas Neueっていう電光掲示板っぽいおしゃれフリーフォントを採用。

さらに、この手のシステムはまったく動きがないと、フリーズしてないか?なんらかのエラーが裏で起きてないか?不安になったりするので、常にちょっとでも動きがあったほうが良い。ということで、なんにも反応を検知してないときは、時計を表示した。

④Vue.js+センサーAPIで空室案内表示

いよいよVue.jsを使って、センサーAPIから取得した空室状況を画面に表示する。react.jsとか素のjsでも良かったけど、コードがシンプルに書けて学習が簡単そうで流行ってるという理由でVue.jsに決定。今回のソースは200行に収まっていて本当にシンプル!

Vue.jsのいいところは、モデル(HTML)+画面デザイン(CSS)+ロジック(JS)を1つの「コンポーネント」という単位で扱えて、再利用するときにまるごと再利用できてコードがシンプルになりやすい。今回まさに1つの部屋のコンポーネントをつくってそれを5回繰り返して5部屋の表示処理を実現した。

さらにWEBサーバをたてなくてもローカルのブラウザで動作するのも楽。ただしPCのChromeからアクセスしようとすると、CORSというJSのエラー。どうやらローカルのhtmlファイルからAJaxで外部サーバにアクセスしようとするとセキュリティのエラーになるらしい。これはAllow-Control-Allow-OriginというChromeのオプションでOFFにすることができる。

ソースは下記の通り!

★AiThema10.html (メインプログラム)

★AiThema.css

※var rooms[]の設定とcssの.blockのfont sizeを変えるだけで、部屋が5個じゃなくても動作可能
(デザイン的には2〜7部屋ぐらいがちょうどよい)

⑤ラズパイのセットアップ

さあいよいよラズパイ上でのこのプログラムを動作させよう。

まずは、ラズパイ+外付けディスプレイを接続してWifiの設定しようとしたら問題発生!MACからラズパイにアクセスする方法がなにもない。。Wifiの設定はどうしても外付けキーボードで直接つないでやらないといけない。でもここは人口2000人の離島。。PCショップなんてどこにもない。途方に暮れているところ、民宿のおじさんがキーボードを持っていた!ベタベタでCtrlキーもなくなってたけど、全然問題なし。ありがとうおじさん。

1. まずWifiの設定

移動するごとに毎回設定するのは面倒なので、iPhoneのテザリングに指定。さらにホスト名を設定してipアドレスを毎回入れなくて良いように。

で同じネットワーク内にいればログインできる。簡単

2. 初期セットアップ

最新OSをインストールしたり、地域を設定したり。ネットで探すとたくさん記事がある。

3. ファイルをラズパイに配置

これもscpコマンドで簡単における。htmlとcssを置くだけ。

4. fontのインストール

“Bebas Neue”フォントがラズパイ内にないのでインストール。apt-getでも登録されていないので、直にBebas Neueの配布サイトからダウンロードして.fontsフォルダに配置するだけ。簡単。

これだけでラズパイ上での動作設定が完了!

5. ブラウザを起動する

下記のコマンドでchromeが起動される。

⑦ラズパイの自動起動設定

あっという間に設定までが完了!最後にオフィスで使うための細かな設定。

1. OS起動時に自動起動

電源を入れるだけで誰でも使えるように、OS起動後に自動的にブラウザ起動して全画面表示にしたい。autostartファイルを編集すると、自動起動の設定ができる。ついでにマウスポインタも非表示時に。

マウス無効化モジュールをインストール

自動起動の設定ファイルを編集

2.深夜土日はOFFに

省エネのために、使う可能性が低いときはスリープモードにしておきたい。スリープ状態では、ブラウザを停止して、ディスプレイもOFFにする。再開したいときには再起動するだけでOK。cronに設定する。

以上で完了! ちょくちょくハマったけど終わってみれば本当に簡単だった。良き時代!

社内に設定してみた

完成したので早速社内に設置。誰の机からもいまの会議室の空き状況がわかるようになり、いちいち見に行かなくて良くなった。ただし、「説明しなくても直感でわかるデザイン」ということで、特に説明なく置いていたら「気温の表示ですか?」と言われてしまった笑。。もうすこしUI改善の余地あり。また、個人的に世界一やさしいメッセージだと思う「人がいなくても水が流れることがあります by TOTO」と同じ原理で、誰もいないのに反応してしまうことがある。このあたりの誤認識をスルーするようなアルゴリズムはまだ改善の余地あり。

かかった費用は4万円ぐらい

全体的に思ってたより安い。原価4万円で年間120万円の節約に成功!

Raspberry Pi3 ×1 9,999円
ディスプレイ ×1 7,299円
ドコデモ人感センサー ×5 20,810円
延長コード ×5 3,590円

合計:41,690円

さいごに:ハードもソフトの時代へ

これまでソフトウェアエンジニアは家電とかハードについてはどこか遠くの存在だったけど、ラズパイやIoTデバイスの普及などによって簡単にリアルな空間で使える装置を作れるようになった。今回の開発でとくに簡単さを強く実感した。もうPCやスマホに収まっている時代ではない。

ソフトもハードも一体となって、かんたんなプログラミング感覚でリアルものづくりができる時代には、技術力よりもむしろ

①リアルなシーンや人の気持ちを理解してUI/UXにを設計するデザイン力
②とりあえずプロトを作ってみて良かったら事業化するビジネス力

などがとっても大事になってくる。

ということで当社でもそんなビジョンをもったエンジニア&クリエイターをまだまだ増やしていくので、興味のある方は会社HPから連絡まってます!

おまけ

隠岐ジオパークキャンプ場でリアルプログラムキャンプの様子笑。隣のテントのソロキャンパーと釣った魚をBBQして遊んだりチャリで離島を一周したりしながらの、年に一度の至福の時間だった。

ではでは!