子どもが産まれたことで、色んな予定が出てきて把握が大変なため、リビングにカレンダーを設置することにした。
とは言っても、紙のカレンダーは管理できないので、普段PCやスマホで見てるGoogleカレンダーを使いたい。
最初はディスプレイにweb画面をそのまま表示させようかなと思ったものの、それじゃ芸がない。
そのまま表示させるパターン
最初に試したのはiframeで月のカレンダーと予定リストを並べる方法。
<body>
<iframe>～～</iframe>
<iframe>～～</iframe>
</body>
まーじでこれくらいシンプルに作って、見栄えはcssで触ればいいだろ程度に考えてたんだけど、セキュリティの都合か、iframe内と外のサーバが異なるとcss要素を触れないらしい。
java scriptを使えばいけるらしいけど、js分かんないにょ…。
Magicmirror2を使おう
こっからが本命で、
余ってるRaspberry pi4にMagicmirror2を導入して、色んな設定を頑張って、カレンダー作りましたというのが今回の話。
出来たもの
Googleカレンダーを5種類表示
・祝日
・自分のプライベート
・妻のプライベート
・家族の予定
・自分の会社の予定
それぞれ違う色にして、識別用のアイコンもつける。
画面の大半は月表示で、下に直近5日分を拡大して表示。
※予定の内容はペンで塗りつぶしてます。実際は普通に表示されてます。
用意するもの
適当なディスプレイ…1枚
我が家に転がってたのは27インチだったので、これで。
視認性を上げるために文字サイズを20pxとすると、27インチくらいが下限な気がする。
もう少し文字が小さくていいなら24インチとかでもいけるはず。
Raspberry pi4…1枚
多分pi3とかpi2でも動くと思うけど、古いやつは全部処分しちゃってpi4しか手元に無いため。
pi3以降はwi-fi使えるので、買うならpi3か4が良いと思う。
picoシリーズは使ったことないので分からん。
あと適当にHDMIケーブルとか電源とか。
壁掛けするなら壁掛け金具も
作り方
基本の作業
Raspbianをインストール
Magicmirror2をインストール
https://docs.magicmirror.builders/
このドキュメント、めちゃくちゃ分かりやすくまとまってる。
隅から隅まで読むことで、だいたいの疑問が解決するのがすごい。
一通りconfig.jsを触ってみて、ディスプレイにMagicmirror2が表示されるか確認しておく。
なんとなくconfig.jsの雰囲気が掴めたら、改造していく。
カレンダー用のモジュールを入れる
Googleカレンダーを良い感じに表示させるため、MMM-CalendarExt2をインストール
https://github.com/MMM-CalendarExt2/MMM-CalendarExt2
インストールしたら
Magicmirror2とMMM-calendarExt2のドキュメントを参考に、config.jsとcustom.cssを触っていくことになる。
https://github.com/MMM-CalendarExt2/MMM-CalendarExt2/tree/4bad2e178891910635f5bfaf8490f5c579c4f801/docs
docsの中で見ていくのは
MMM-CalendarExt2/docs/Configuration.md
まずはここらへん。
config.jsにおけるMMM-CalendarExt2のmoduleの書き方が分かる。
MMM-CalendarExt2/docs/examples/klaernie.md
これもおすすめ。
なんか使いこなしてるサンプルが読める。
で、自分用に組み立てていくので
MMM-CalendarExt2/docs/Configuration/Calendar.md
まずはカレンダーの設定
Googleカレンダーのical形式URLを持ってくるだけでだいたい動く。
sceneはデフォルトのままでいい。普通にカレンダーを映す分には使わないんじゃない？
MMM-CalendarExt2/docs/Configuration/Views/
viewの中身を書いていくために、ここを見る。
week,-month.mdとdaily.mdを目が皿になるまで読んだ。
cssを触る
表示する骨組みがざっくり作れたら、見栄えの調整に入る。
最初に
config.jsでipWhiteList: にローカルIPアドレスを書いといて
参考：我が家の設定
ipWhitelist: [“127.0.0.1”, “::ffff:127.0.0.1”, “::1”,[“192.168.XX.1″,”192.168.XX.254”]],
パソコンのブラウザからRPiのローカルIPアドレス:8080 に接続する。
(上の方でポート番号の指定もできる)
すると、パソコンのブラウザにカレンダーを表示できる。
あとは検証ツール(デベロッパツール)を使って、表示をいじりたいクラスを探して、custom.cssに書き込んでいく…という流れ。
端っこのgapを無くしておく
:root{
–gap-body-top: 0px;
–gap-body-right: 0px;
–gap-body-bottom: 0px;
–gap-body-left: 0px;
–gap-modules: 30px;
}
MagicMirror2はそもそも鏡に情報を表示させよう的なプロジェクトが発端なので、鏡の枠の分だけアンダースキャンする仕様。
端っこギリギリまで表示するためgapを無くした。
土日の色を変える
.weekday_6 .slotHeader {
background-color: #274a78!important;
}
.weekday_7 .slotHeader {
background-color: #a22041!important;
}
6と7がそれぞれ土日に対応している。
なんでimportantが要るのか理解してない。俺は雰囲気でcssを触っている。
カレンダー名ごとに色を変える
.event[data-calendar-name=”holiday”] {
background-color: #F00 !important;
color: #FFF !important;
}
calendarで設定したnameに合わせて設定できる。
この例だと、calendarの設定でname: “holiday”,としたカレンダーの項目の背景色が変わり、文字色も変わる。
終わった予定の背景色を暗くする
.MMM-CalendarExt2 .passed::before {
background:initial!important;
}
.MMM-CalendarExt2 .passed{
filter:brightness(0.5);
}
デフォの設定だと背景が斜めストライプになるんだけど、読みづらいから単色に変えた。
brightnessの値を触ると明るくしたり暗くしたりできる。
backgroundにストライプの設定が書いてあるので、initialで無効化した(初めてこの命令使った)。
brightness0.5の見え方はこんな感じ。
分かりづらかったのはこの辺で、あとはドキュメント読んだらだいたい分かる。
電子カレンダー作りてえって思ってる方の参考になれば幸いです。
追記
アップデートについて
module: “alert”,を有効にしていると、
アップデートが来た時に通知してくれる。
で、アップデートがあったので色々やったらMagicmirror2が起動しなくなったのでメモ。
結論から言うと、MagicMirror_scriptsに書いてある通りにやればいい。
Upgrade to next MagicMirror version from an existing installation
↑これ。
で、アップデートした後にMagicmirror2が起動しなくなったので
というかpm2 status allしてもMM2が出てこなくなったので、
Additional scripts that may be usefulの
Add using pm2 to autostart MagicMirror at bootup
に書いてあるスクリプトを実行したら解決した。
アップデートしたことでpm2の設定が何か消えたのかもしれない。
アップデート、最初にやったのはMM2のドキュメントに書いてあるUpgrade Guideだったんだけど、全然ダメだったね。
npmのアップデートしろって書いてあったら、npmもアップデートしておこうね。
