毎日の戸締まりって管理や点検の都合上、意外とデジタル化が難しいもので、紙でチェックしながら戸締まりしている現場もまだまだあると思います。
紙にチェックリストを作るのは、地味にめんどくさい作業でしかも定期的に発生しがちなので、ブラウザ上でさくっとやれる tojimarist(仮) というものを作りました。Chrome でのみ動作確認しています。
作った経緯（はしりがき）
毎日の安全のために、アナログな戸締まりチェックリストを mac/Numbers で作成→印刷して使っていたのですけど、エクセルにあるような「別のセルを条件に条件付き書式を設定する」が仕様上不可なため土日の行に色をつけられないという問題に直面しました。
それで運用していると土日は空行にするべきところ、頭ぼんやりな月曜には気づかずついうっかり土日のところにペンで書き込んでしまって、あとで週末くらいになって辻褄が合わなくなってうわぁぁぁぁってなったんです。
それを解決するために Windows/Excel を起動するのも負けた気がするので Vue で作っちゃおうというのがこのプロジェクトのはじまりです。
せっかくなのでついでに祝日を自動取得して黒塗りしてやるようにしました。公休日を Google カレンダーとかで調べて、シートに反映するって作業が地味に面倒だったんですよね。これがあれば毎日のチェック作業しながら、もうちょいで休みだーなんて、ちょっとモチベーションあがるかもしれません。
いろいろとまとめたうえでまた投下するつもりなのですが意外といろいろ実装してしまったので、もう少しシンプルにしてからやろうと思います。
あとで忘れても困るので、経緯やざっくり構成だけでも書いておきます。コードは以下のリポジトリを参照していただくとして、解説等はまたの機会に是非。
リポジトリ
https://github.com/snakada/tojimarist (動くデモ）
できること
- 戸締まりチェックリストをブラウザ上で月単位で作成し、最終的には印刷して使います。
- 戸締まりするチェック項目（玄関、キッチン、火元等）、を自由に追加・削除・ソートができます。
- 設定したチェック項目は localStorage に保存します。
- 何ヶ月分でもつくれます。運用としては3ヶ月毎に必要項目を点検しつつ印刷するイメージです。
- 印刷用にある程度最適化しています。
example
実際に動くものをここに置きました。
https://snakada.github.io/tojimarist/
主に使ったもの
構成（ざっくり）
├── App.vue // アプリ
├── assets
├── components
│ ├── AddCheckItem.vue // チェック項目追加フォーム
│ ├── AppHeader.vue // アプリヘッダ（別になくてもいい）
│ ├── MainSection.vue // メインセクション（印刷用紙の背景・コンテナ）
│ ├── PrintSheet.vue // 印刷用紙（成果物、ここに設定がほとんど反映される）
│ ├── SidePanel.vue // 設定パネル（チェック項目ソート等、いろいろ操作する）
│ └── YearMonths.vue // 年月操作
├── main.js // エントリ
└── store.js // ステート管理
今後
ちょうどタイプスクリプトの勉強もしたかったので、戸締まりチェックリスト
tojimarist(仮) v0.2.0 とかやりたいです。もう少し余力あればに投下したいです。
本日は以上です。