令和元年のゴールデンウィークは恒例の「ものづくり一人旅」に行ってきた。今年は島根県の隠岐諸島(海士町とか)をのんびり旅しながら、ラズパイとセンサーを使ってうちの会社で使う「会議室の空室ディスプレイ」を作ってきたので作り方を紹介する。「会議室見に行く」をなくしたかったオフィスで会議するとき、こんなことがよくある。「まだしてそう!」こういう「会議室見に行く」をなくしたかった。「勢いよく飛び込んだら重役会議中で気まずい・・」などのよくある課題も解決できる!最近人が増えて会議室も埋まりがちで、だいたい1日に1回は「会議室見に行く」→「そして帰ってくる」が発生している。なんと年間120万円の大損失!?試しに1年間でどれぐらいの損失になっているか計算すると・・11日で1分「会議室見に行く」が発生とする。260名なので1日で1時間の損失41ヶ月だと2日分の損失。31人の1日の生産力は約5万円とすると・・51ヶ月で10万円、1年で120万円の損失!これは大変。関係ないけど写真は社内の紙ひこうき大会の様子。無駄な時間を節約して、紙ひこうきであそぼう笑。空室ディスプレイを作るのに必要なのは、この7ステップ。APIを叩く3CSSで画面をデザイン4Vue.js+センサーAPIで空室案内表示5ラズパイのセットアップ6ラズパイ上で空室案内表示7ラズパイの自動起動設定センサーの情報がディスプレイに表示されるまでのデータの流れはこういう感じ。↓<人を感知>どこでもセンサー社のクラウドにデータをアップ★クラウドサービス↓<JSから随時リクエスト>センサーデータをラズパイのJSに返す★ラズパイ(JS)↓<常時表示>5分無反応なら空室と表示。★小型ディスプレイ————ちなみに今回つかった道具たち。窓の向こうではニワトリが騒がしい笑。WS-USB02-PIRが良さそう。理由2:センサーデータをクラウドに1ヶ月保管(無料!)理由3:API使える(2019.4リリース。間に合った!)USBでコンセントにさせるシンプルな構造。(隠岐ジオパークキャンプ場にて笑)電源に指したらセンサーのIPアドレスにブラウザからWifiアクセス(センサーをルータと見立てる感じ)。実際に使うWifi環境のSSID/PASSを入力する。開発中はいちいち変えるのが面倒なので自分のiPhoneのテザリングWifiを指定。あとはコンセントにさすだけで自動でセンサースタート。計測するとクラウドの管理画面で検知ログがグラフで見れる。APIを叩くさあ次はさっそくセンサーが感知したログをAPIで取得する。このAPIの動作確認がまあまあ大変だった。センサーのメーカーはソフト開発が苦手なのか、管理画面がワードプレスだったり、API資料が10行ぐらいの説明で済まされてたり、その取得方法の例が間違ってたり、エラーのときレスポンスにエラーメッセージはなく[]だけだったりと、なかなかの突き放し方・・。それはそれで楽しいからよし笑。APIをブラウザで叩いてちゃんとレスポンスが帰ってくるまで何が正しいかわからず意外に時間がかかってしまったので、後発組のために正しい使用例を下記に記載しておく。“24”]]3CSSで画面をデザイン動作確認も出来たところでいよいよ開発開始。CSSで画面をデザイン。遠くの人からでも見えるように、文字を最大限おおきく表示。それでも読めないかも知れないので、文字の背景を白で塗る。この背景はゲージになっていて5分かけて下がっていくようにした。このセンサーは厳密に「入室」「退室」が取れるわけじゃなくて、人の動きを検知するだけ。実際に会議室で試したところ、人がいたとしてもあんまり動かないと検知しないことがわかった。それでも、だいたい5分に1回は人が動いて検知することが経験的に判ったので、「直近5分反応がなかったら空室とみなす」という仕様にした。ゲージが減っているときに空室かどうか明確に判断はできないけど、それも含めてユーザに伝わる仕組みだ。Neueっていう電光掲示板っぽいおしゃれフリーフォントを採用。この手のシステムはまったく動きがないと、フリーズしてないか?なんらかのエラーが裏で起きてないか?不安になったりするので、常にちょっとでも動きがあったほうが良い。いうことで、なんにも反応を検知してないときは、時計を表示した。4Vue.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にすることができる。//接続先の部屋一覧とデバイスの接続設定。----------------------------メインコンポーネントの設定。//前回リクエストした時刻を保管。//何秒ごとにサーバに確認するか//接続先の部屋一覧とデバイスの接続設定。----------------------------メインコンポーネントの設定。//前回リクエストした時刻を保管。sizeを変えるだけで、部屋が5個じゃなくても動作可能(デザイン的には2〜7部屋ぐらいがちょうどよい)5ラズパイのセットアップさあいよいよラズパイ上でのこのプログラムを動作させよう。ラズパイ+外付けディスプレイを接続してWifiの設定しようとしたら問題発生!MACからラズパイにアクセスする方法がなにもない。Wifiの設定はどうしても外付けキーボードで直接つないでやらないといけない。ここは人口2000人の離島。PCショップなんてどこにもない。途方に暮れているところ、民宿のおじさんがキーボードを持っていた!ベタベタでCtrlキーもなくなってたけど、全然問題なし。移動するごとに毎回設定するのは面倒なので、iPhoneのテザリングに指定。ホスト名を設定してipアドレスを毎回入れなくて良いように。pi@raspberrypi.localで同じネットワーク内にいればログインできる。初期セットアップ最新OSをインストールしたり、地域を設定したり。ネットで探すとたくさん記事がある。ファイルをラズパイに配置これもscpコマンドで簡単における。htmlとcssを置くだけ。Neue”フォントがラズパイ内にないのでインストール。Neueの配布サイトからダウンロードして.fontsフォルダに配置するだけ。ブラウザを起動する下記のコマンドでchromeが起動される。