配線
では、玄関扉への配線を検討。当初予定のラズベリーパイからオブナイズに装置が変更となったが、どちらも電源確保は必要。 玄関付近にコンセントは無く、下駄箱の下に明かりがあるが直接蛍光灯と接続されており、 コンセントは確保できない。となると、近くのコンセントから引っ張ってくるしかないようだ。
ということで、延長コードを準備。5mがあったので購入。安心の1500Wとのことだが、ケーブルが太くなるのでもう少し細いのがよかったが、 5mはこれしかなかった。

あとは、USBケーブルも頑張ったほうがよいかと、長いものを探し、こちらも5m版があったのでゲット。これだけあれば大丈夫だろう。

USB電源を準備して、コンセント⇒USB電源⇒USBケーブル⇒obnizとつながればOK。 USB電源は2.4Aの2口番だが、全体では3.4Aとのことなので、両使用では2.4A+1.0Aとなりそうだ。今回は1口のみ使用予定なので、 ひとまずは問題なし。

玄関そばの部屋のコンセントに延長コードを接続。ここから玄関まで伸ばそう。

部屋から延長コードを廊下を這わして、玄関扉付近まで持ってくる。玄関上のほうに白い箱の中にUSB電源を入れて隠してみた。 そこからUSBケーブルを垂れ下げて、玄関扉を横断してスマートロックのobnizに接続。 コンセントの延長コードが結構玄関まで届いたので、USBケーブルはもう少し短くてもよかった。3m版を探そう。

電源を入れると、スマートロックの緑ランプが点灯。オンラインになった証拠だ。施錠・開錠をしてみると問題なく動作し、 現在のステータスもきちんと拾えているので、ひとまずは問題なさそうだ。
化粧
さて、早速嫁から汚いと苦情が入った。まあこれが最終形ではちょっとね。ということで、配線隠しを開始する。 USB電源部分は白箱に入れて隠したのだが、それを固定する黄色いマステがよくない。あとで壁に固定する仕組みを考えよう。 まずは、配線を隠す。ホームセンターでいいものがあったので購入。
これを使って延長コードを隠してみよう。モールの表面が壁紙っぽく、あみあみの表面になっており、壁に貼り付けても違和感が薄いと思われる。 これでケーブル丸出しを、少し隠せばいい感じになるはずだ。

壁の下の巾木(はばき)の上あたりにモールを貼り付ける。このモールは両面テープがついているので、位置を決めて貼り付ければしっかり貼り付く。 結構しっかりした両面テープのようで、デコボコしている壁紙でもかなり強力にくっついた。 巾木との切り替わる部分なので、ここにモールがあっても違和感はかなり薄い。ぐにゃぐにゃコードだとかなり見栄えが悪かったが、 モールで隠せばかなり良くなってきた。

角の部分はコーナ用部品として、「マガリ」 が用意されているのでこれを使用。しかしこのコーナ部品の壁紙表面タイプは無いので、普通の白い奴を使用。まあそんなに違和感はないか。

ケース
コンセントの延長先にはUSB電源が取り付けられて、USBケーブルが伸びることとなるが、 これをどのように配置するかが問題。暫定配線では、そこら辺にあった白い空き箱の中に入れて、 壁に貼り付けてみたのだが、壁に合わせて白く隠せばなんとなくいろいろと誤魔化せそうだ。
ということで、白のフィラメントを使い、3DプリンタでUSB電源を隠す箱を作成する。 真ん中にUSB電源を配置して、延長コンセントの入り口と、USBケーブルの出口を用意する。 四角くして置けば違和感は少ないはず。
構成としては、底面、中間の仕切り、蓋となる上面の3部構成。

底面は、四辺に薄い箇所を用意し、壁にホッチキス止めできるようにしてある。 うちはマンションなので、壁が木の板ではなく石膏ボードとなるため、釘やねじは入らない。 これで壁にホッチキスで取り付けて、固定させる想定。
では、取り付け予定位置に底面部品をマステで貼り付けて固定。

4辺の薄いところを使用して、ホッチキスを壁に打ち付けていく。一通り打ち付けたが、これは最終版。 途中何度もホッチキスの針が曲がるなど、苦労があり、倍以上の針を使用している。どうもこの作業は苦手だ。 良いホッチキス打ち付け機が欲しい。

ここに、中仕切りの部分を取り付ける。固定は丸い棒と丸穴ではめ込む。

そして、この真ん中にUSB電源がセットされる。延長コンセントは下から入ってくる。上にはUSBのケーブル出口がある。

実際にコンセントをつないだ状態。USBとコンセントの延長ケーブルの重さがかかっても、全く問題なかったので、 運用中に壁から外れて落ちるといったことはなさそうだ。

そして、USBケーブルを実際に配線した様子。USBケーブルが少し余ったので、見えづらい壁の上のほうに貼り付けておいた。 こいつも何とかしなきゃだなぁ。

ということで、USBケースを少し改良。というか、USBケーブルも少し収納できるように、ケースを大きくして格納エリアを準備してみた。

そして、USBケーブルも5mではケーブルが余ったので、3mを購入してみた。 また、何度かobniz側で電圧低下が発生していたので、ケーブルに問題があったかもしれないと、安物ではなくちゃんとしたものを購入してみた。 2.4A対応となっているので、問題ないと思われる。

このケースとケーブルで再配線を行う。延長コンセントはそのままとし、壁にくっつけたホッチキス留めの台もそのままとし、 ワクと蓋を取り換えて取り付け。ケーブルも同様に這わしてみたところ、ちょっとだけ余るだけとなったので、 余分ケーブル隠しエリアに1巻きのみ通して配線。かなりすっきりした。

これで、コンセントから、延長を経て、USB電源そしてUSBケーブルの根本あたりまでは、きちんとカバーが出来て、 それなりに目立たないものとなった。 まだ、その先の玄関扉上の配線は、特にガードもなくマスキングテープ止めでの配線となっており、これからの作業となっている。

作業中…
クライアントアプリ
クライアント画面は上から、ヘッダのタイトルバー、錠の状態表示バー、開錠・施錠ボタン、obniz状態フッタ、 といった状態で並べて作ってある。 家のLANで動いているので、家のWiFiなどのLANにつながらないとアクセス不可。インターネットからはつながらない。 家のWiFiもIDとパスワードが必要なので、そうそう侵入されないはずなので、接続後のセキュリティは皆無。 まあ、悪意ある人が玄関前まで来たら、WiFiセキュリティ以前にたいがい終わりのはず。
画面については、サーバ接続できず、socket通信が出来ていない場合には、タイトルバーが赤い表示となる。 また、サーバにはつながっても、obnizとつながらない場合には、フッタの表示が赤くなって、未接続表示が出る。 また、開錠・施錠ボタンもDisabled表示で押せなくなる。 なので、これらの状態の場合には、スマートロックは使用不可。
画面は動くようになったが、アイコン(favicon)が無いと、chromeのコンソールにエラーが出ている。 faviconを作ってやろう。
とりあえず、開錠・施錠ボタンに雰囲気を合わせた、錠前画像を作成して、アイコンを作る。 錠前はPowerPointの図形を使って簡単な形を作成。複製してから片方だけ開錠状態にして、それぞれ色を付ける。

ブロック組み合わせで作れる絵なら、パワポが便利かもしれない。 アイコンはちゃんとやろうとすると、たくさんのサイズを作成する必要がある。 なので、一括作成のwebページで一気に作成する。
様々なファビコンを一括生成。favicon generator
いろいろと便利なサイトはいくつかある。権利の無い自由な物ならこういったところを通したほうが楽。 権利が絡むものは危険なので、安全と分かるところを使うか、ネットは使用しないほうがよい。
アイコンファイルはstaticフォルダのimageフォルダを作成して配置し、リンクを通す。 vueだと「./static/image/*.png」といった感じになる。