【おうちハック】開発合宿で3人でシェアハウスの鍵管理システムを作った【チーム開発】

こんにちわ。れとるときゃりー([@retoruto_carry](https://twitter.com/retoruto_carry))です。

私が住んでいるシェアハウスの同居人たちで、去年の7月に開発合宿に行きました。

そのときに @wamisnet と @fukubaka0825 と作った、シェアハウスの鍵管理システムが先日完成したので紹介します。

全体の流れと、自分の担当した領域について解説します。

# 作ったもの


## 鍵を開けるデバイス
@wamisnet と @fukubaka0825 が担当

[![Image](https://gyazo.com/07be705174bb92be729c2111de7b28a8/thumb/1000)](https://gyazo.com/07be705174bb92be729c2111de7b28a8)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/fukubaka0825?ref_src=twsrc%5Etfw">@fukubaka0825</a> さんと <a href="https://twitter.com/retoruto_carry?ref_src=twsrc%5Etfw">@retoruto_carry</a> さんと作った鍵システムがついに動いたああああ！ <a href="https://t.co/uQZ44INF93">pic.twitter.com/uQZ44INF93</a></p>&mdash; わみ@NefryとかFlutter本とか (@wamisnet) <a href="https://twitter.com/wamisnet/status/1212385075385401344?ref_src=twsrc%5Etfw">January 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらに関して、各自の記事があるので、後ほど是非合わせてお読みください！

[Raspberry pi とGoとMackerelでシェアハウスの運用しやすい鍵システムを作る \- Qiita](https://qiita.com/fukubaka0825/items/979a02a93e1ebcac31f1)
[Suicaで開けられるスマートロックを作ってみた \- Qiita](https://qiita.com/wamisnet/items/b8a3f204dc604124ea34)

## ICカードの管理システム
私が担当しました。
本記事で詳しく解説します

- ユーザー（住人）を追加
[![Image](https://gyazo.com/f5bf51c62708ab78a7fef3fa4b7ba0ec/thumb/1000)](https://gyazo.com/f5bf51c62708ab78a7fef3fa4b7ba0ec)

ICカードを追加
[![Image](https://gyazo.com/2f55766d904bcda3c1dce19a91129259/thumb/1000)](https://gyazo.com/2f55766d904bcda3c1dce19a91129259)

ICカードと住人の削除もできます

# システム構成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/06b8e983-11c5-adcb-90e4-464fa11889fb.png)


# 開発のきっかけ
- シェアハウスに、スマホで鍵が開けられるハードウェアのsesameを導入しました
  - [セサミ スマートロック \| CANDY HOUSE JAPAN](https://jp.candyhouse.co/)

<img width="300px" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/cc29519d-21d5-38f8-fab6-cf764427982e.png">

- 「いちいちスマホアプリで操作するのがめんどくさいよね」
 - 開けるの5秒くらいかかります
- 「ICカードで入れたら、楽じゃね？」
- 「お、それ作ろうぜ」

# 何をしたか
## 仕様の決定
  家の中で雑談から、企画と設計がその場のノリで始まりました。
[![Image](https://gyazo.com/4f7773a89a7dac30453cc1960f47b267/thumb/1000)](https://gyazo.com/4f7773a89a7dac30453cc1960f47b267)

その場で仕様を紙に書きはじめました。

3人ですり合わせていきました。
[![Image](https://gyazo.com/532b21828a2cca3469e533d0dd3bb480/thumb/1000)](https://gyazo.com/532b21828a2cca3469e533d0dd3bb480)

３人のイメージを合わせるために絵とかも書いています。

見にくいので、雰囲気だけ感じてくださいw

## DB設計
[![Image](https://gyazo.com/e2f2f41f1493b0cb7d88674ee4255a5b/thumb/1000)](https://gyazo.com/e2f2f41f1493b0cb7d88674ee4255a5b)

## 画面設計
このあたりは私の得意領域なので、私が中心になって考えたました。

[![Image](https://gyazo.com/4632ffc93a73bd557f7ccf8acc26baab/thumb/1000)](https://gyazo.com/4632ffc93a73bd557f7ccf8acc26baab)
[![Image](https://gyazo.com/c278b54060653c42f24fe832a36c978f/thumb/1000)](https://gyazo.com/c278b54060653c42f24fe832a36c978f)
[![Image](https://gyazo.com/3c246ba3cad5f39c5930862c09de22dc/thumb/1000)](https://gyazo.com/3c246ba3cad5f39c5930862c09de22dc)
[![Image](https://gyazo.com/2a8e4cf39a6c843deb0dd059217fa3cd/thumb/1000)](https://gyazo.com/2a8e4cf39a6c843deb0dd059217fa3cd)


途中で出前でピザを注文したりして、楽しかったです。
[![Image](https://gyazo.com/fc15626bad501c611af4d97a2dcb2d40/thumb/1000)](https://gyazo.com/fc15626bad501c611af4d97a2dcb2d40)

家に貼ってみたらめっちゃ頑張った感ありました。
[![Image](https://gyazo.com/c0c4a31f2805b9e42bc707bd9fd0df76/thumb/1000)](https://gyazo.com/c0c4a31f2805b9e42bc707bd9fd0df76)

続きは、一ヶ月後にシェアハウス全体で開催する、開発合宿で行おうということになりました。

# 開発合宿
箱根でゲストハウスを借りて、3日間行いました。

[![Image](https://gyazo.com/0f56ac0a764614993d6399ee63be8588/thumb/1000)](https://gyazo.com/0f56ac0a764614993d6399ee63be8588)

一日観光したので、作業時間は2日間
[![Image](https://gyazo.com/89b985d5456fb78518fad69e3201afe9/thumb/1000)](https://gyazo.com/89b985d5456fb78518fad69e3201afe9)

## 自分のやったこと

### 私の担当箇所

ICカードの情報の管理システムを作りました
[![Image](https://gyazo.com/50204eb30260c6527ad9f7cc344cfecb/thumb/1000)](https://gyazo.com/50204eb30260c6527ad9f7cc344cfecb)

できること

- 住人を登録する
- ICカードを追加したり削除したりする
- イベントを発行して、一時的なQRコードの鍵を発行できる（未実装）
 
### 構成

- ラズパイ
- nginx
- Laravel
- Nuxt.js
- Mysql
- Unbound

[![Image](https://gyazo.com/a8de8901949f742d6ec5b66121f34677/thumb/1000)](https://gyazo.com/a8de8901949f742d6ec5b66121f34677)


### やったこと

#### インフラを作成
インフラを整えるのに1日半かかりました💦

##### Unboundを使って、お家DNSサーバーを立てた
作業メモ → [お家でラズパイを使ってDNSサーバーを作ってみる](https://scrapbox.io/retorutocarry/%E3%81%8A%E5%AE%B6%E3%81%A7%E3%83%A9%E3%82%BA%E3%83%91%E3%82%A4%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6DNS%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B)

家のwifiに接続しているときは、「key.home」にアクセスすると、ラズパイのサーバに接続するようになります
[![Image](https://gyazo.com/894fa1d12e6b6baba871b2fe178f3c46/thumb/1000)](https://gyazo.com/894fa1d12e6b6baba871b2fe178f3c46)

##### ラズパイにnginx、mysql、php、laravel、nuxt.jsを入れた
作業メモ → [ラズパイでサーバーを立てる](https://scrapbox.io/retorutocarry/%E3%83%A9%E3%82%BA%E3%83%91%E3%82%A4%E3%81%A7%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E7%AB%8B%E3%81%A6%E3%82%8B)

[![Image](https://gyazo.com/8e2f178cac5fa2ac09a666976a5f769e/thumb/1000)]
(https://gyazo.com/8e2f178cac5fa2ac09a666976a5f769e)
[![Image](https://gyazo.com/9b6f2e81cd54d831016475082d15d7b4/thumb/1000)](https://gyazo.com/9b6f2e81cd54d831016475082d15d7b4)


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ラズパイでnginx上でバーチャルホストを使って、80番ポートにはnuxtのSPA、3000番ポートにはlaravelでapiを立てるところまで出来た！！！！！！！<br><br>いえ〜〜〜い<br><br>めっちゃ時間かかった.... <a href="https://t.co/uda5XMkQpo">pic.twitter.com/uda5XMkQpo</a></p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1150434989390983169?ref_src=twsrc%5Etfw">July 14, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そもそもこのとき、nginxを初めて触ったのでめっちゃ詰まりました。


#### アプリを作成
アプリは、残り半日で雑に突貫で作りました

##### 設計をもとにAPI（Laravel）を作成
- [APIリソース](https://readouble.com/laravel/5.5/ja/eloquent-resources.html) を使うと簡潔にかけました
- `-r`オプションを使うと、Resourcefulなアクションを自動で定義したコントローラーを生成してくれます。
時短になります。

```:bash
$ php artisan make:controller HogeController -r
```


###### 設計をもとにフロント（nuxt.js）を作成
採用技術

- moment
    - 日付の計算に使用
- buefy
    - UIフレームワーク


### 最後はみんなで発表しあって、合宿は終了

[![Image](https://gyazo.com/08e8440a74657da3dd44531c72d1fc93/thumb/1000)](https://gyazo.com/08e8440a74657da3dd44531c72d1fc93)


# 感想
- 開発合宿楽しい
- チーム開発楽しい

最初に、仕様を決めて、担当範囲を切り分けて、インターフェースを決めておいたのがとても良かったです。
実装中のコミュニケーションがほとんど必要なく、各自が黙々と作業をすすめることが出来ました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">ローカルだけで完結できるwebサーバーつくって遊びたかった</p>&mdash; れとるときゃりー (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1150832075575967744?ref_src=twsrc%5Etfw">July 15, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ツイートにも書いてありますが、普段はVPSやAWSなどでサービスを運用しているので、実機で運用するサービスを作ってみたかったのです。
実際に、今現在、シェアハウス内で運用されています。
物理的にものがあると、実感が湧きます。とても満足しています。


# 今後やりたいこと

- 適当に作ったせいで、UIがわかりにくいので、ユーザーフレンドリーにしたいです
    - 例
        - ユーザーやICカードの追加のボタンの位置を調整
        - 説明をトップページに乗せる

# ここまで読んでくれた方へ
ここまで読んでくださりありがとうございます。

他のメンバーが自分の担当した領域を解説した記事があるので、是非あわせてお読みください！

@fukubaka0825 【担当】Suica認証、Sesame開錠指示
[Raspberry pi とGoとMackerelでシェアハウスの運用しやすい鍵システムを作る \- Qiita](https://qiita.com/fukubaka0825/items/979a02a93e1ebcac31f1)

@wamisnet【担当】Sesame開錠デバイス作成、ハードウエア
[Suicaで開けられるスマートロックを作ってみた \- Qiita](https://qiita.com/wamisnet/items/b8a3f204dc604124ea34)


いいねやコメント、SNSでの共有等をしてくださると、今後の励みになります。よろしくお願いします。

良かったらツイッター(@retoruto_carry)もフォローしてね