デジタルカレンダーを作った

[個人開発 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/private-development)、11日目の記事です。
PCで使っているディスプレイを買い替えて余ったしまったので、
前から欲しかったデジタルカレンダーを作ってみました。

#ざっくりと作ったものを紹介

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ディスプレイがあまったのでカレンダーにした🥳 <a href="https://t.co/VUIUIvp31s">pic.twitter.com/VUIUIvp31s</a></p>&mdash; 辰零 (@Ryo_TATSUREI) <a href="https://twitter.com/Ryo_TATSUREI/status/1335858911073583106?ref_src=twsrc%5Etfw">December 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ツイートのように画面にGoogleカレンダーと今日の天気予報を表示するだけのものです。
基本的には　[Raspberry Piで卓上Googleカレンダーを作る](http://at.hatenadiary.com/entry/raspi-google-calendar)　と同様に、
Chromiumをキオスクモードで起動してカレンダーと天気予報を表示させています。

Googleカレンダーのみであれば上記のサイトと同じことをすれば済むのですが、
24インチの画面をカレンダーのみ表示させておくのは勿体ないなーと思い、天気も表示させることにしました。

Googleカレンダーと天気予報を同時に表示させる方法と、上記の記事だけでは色々と問題があったので、そちらについて書いていきます。

#必要なもの（使った物）
・Raspberry Pi 4B (3Bでも可）
・ラズパイを動かすのに必要なもの一式（SDカードとか）
・ディスプレイ（今回は24インチFHD）
・ディスプレイマウンタ（ディスプレイを壁掛けしたいなら）

#Raspberry Pi側の準備
OSはRaspberry Pi OSで、バージョンがBusterになります。

__・Chromiumの変更__
まず、下記のサイトを見てインストールされているChromiumをDeveloper版にします。
[[Raspberry Pi][Buster] Chromium の更新失敗通知をなんとかする２](https://blog.withachristianwife.com/2020/04/10/stop-update-notification-in-chromium-on-raspi-2/)

なぜかというと更新失敗通知が表示されてしまうからです。

__・中華フォント修正__
次にフォントのインストールです。
ラズパイOSで日本語を表示する際に中華フォントが使われますが、それを修正します。
中華フォントが気にならないのであればやらなくてOKです。
下記サイトの「フォントをダウンロード＆インストール」と「システムフォントを変更する」を行ってください。
[【Raspberry Pi】PixelのシステムフォントをNotoに変更する](https://studio.beatnix.co.jp/kids-it/hardware/raspberry_pi/system-font-noto/)

もしChromiumが中華フォントのままであれば「Chromeのフォントを変更する」もやってください
（私はやらなくても変わりました。）


__・画面自動OFF無効化・マウスカーソル非表示__
ターミナルを起動し、下記コマンドでunclutter（カーソル非表示ツール）をインストール。

```terminal
sudo apt-get install unclutter
```

下記コマンドでautostartを編集。
（自動起動関連のファイル、初めていじる場合は存在しないので新規で作ることになる。）

```terminal
nano ~/.config/lxsession/LXDE-pi/autostart
```

内容は下記の通り。

```terminal
@lxpanel --profile LXDE
@pcmanfm --desktop --profile LXDE
@xscreensaver -no-splash
@xset s off
@xset -dpms
@xset s noblank
@unclutter
```

（エディタがnanoであれば）Ctl+Xで保存・終了
※「＠lxpanel --profile LXDE」と「＠pcmanfm --desktop --profile LXDE」は入れないとデスクトップが表示されなかったので「/etc/xdg/lxsession/LXDE/autostart」からコピーしてきたもの。

__・画面の回転__
画面は縦前提で作っているので表示も縦にします。
[Raspberry Pi 4 で画面を回転](https://qiita.com/ky0on/items/8223ceadeb4a06885e62)　を参考に回転させてください。
ディスプレイの回転方向によって「right」か「left」かは変わります。

#Chromiumで表示するHTMLの準備
下記htmlをラズパイのどっかに保存してください。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>calendar</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
        }

        body::-webkit-scrollbar {
            display: none;
        }
    </style>
    <script>
        const url_calendar = "https://calendar.google.com/calendar/u/0/r?tab=rc";
        const url_weather = {tenki.jpの表示したい地域の「3時間天気」のURL};

        let frm_calendar;
        let frm_weather;

        window.onload = function () {
            frm_calendar = document.getElementById("frm_calendar");
            frm_weather = document.getElementById("frm_weather");

            setInterval(function () {
                frm_weather.src = url_weather;
            }, 1000 * 60 * 30);

            setTimeout(function () {
                    frm_calendar.src = url_calendar;
                    frm_weather.src = url_weather;
            }, 2000);
        }
    </script>
</head>
<body>
    <iframe id="frm_calendar" src="" frameborder="0" style="width: 100%;height:60%;" ></iframe>
    <iframe id="frm_weather" src="" frameborder="0" style="width: 100%;height:40%;" ></iframe>
</body>

</html>
```



#Chromiumの準備
__・Googleアカウントでログイン__
Googleカレンダーを表示させるので、ChromiumのアカウントとしてGoogleアカウントでログインしてください。
もし「こんな知らんシステムで俺のメインアカウントを使いたくない！」という場合は別でGoogleアカウントを作成し、
Googleカレンダーに本垢のカレンダーを追加してください。
[他のユーザーの Google カレンダーを追加する](https://support.google.com/calendar/answer/37100?co=GENIE.Platform%3DDesktop&hl=ja)

__・拡張機能のインストール__
ログイン後、Chromiumにこの拡張機能をインストールします。
[Ignore X-Frame headers](https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe?hl=ja)
※この拡張機能が入ってないとGoogleカレンダーと天気予報を同時に表示できません。

__・天気予報表示部分をいじる拡張機能__
天気部分はtenki.jpの「3時間天気」を表示しています。
そのままだと余計な部分も表示されてしまうので、レイアウトの調整用の拡張機能を入れます。
これは私の自作したものなので、ストアにありません。
なので下記のファイルを用意してください。

```js:content.js
window.onload = function () {
    this.document.getElementsByClassName('header clearfix')[0].style.display = 'none';
    this.document.getElementsByClassName('thunder-link-btn')[0].style.display = 'none';
    this.document.getElementsByClassName('forecast-select-btn clearfix')[0].style.display = 'none';
//210729 tenki.jpのHTMLが変わったため変更
//    this.document.getElementsByClassName('sub-column-section-wrap typhoon-sub-column-parts')[0].style.display = 'none';
    this.document.getElementsByClassName('sub-column')[0].style.display = 'none';
    this.document.getElementsByClassName('head')[0].style.display = 'none';
    this.document.getElementsByTagName('nav')[0].style.display = 'none';
    this.document.getElementsByTagName('nav')[1].style.display = 'none';
    this.document.getElementsByTagName('h2')[0].style.display = "none";
    this.document.getElementById('tenki-ad-footer_PC_text_header').style.display = 'none';
    this.document.getElementById('tenki-ad-PC_CT').style.display = 'none';

    this.document.getElementsByClassName('date')[0].getElementsByTagName('th')[0].rowSpan = 1;
    this.document.getElementsByClassName('date')[0].style.display = 'none'
    this.document.getElementsByClassName('hour')[0].innerHTML = document.getElementsByClassName('date')[0].getElementsByTagName('th')[0].outerHTML + document.getElementsByClassName('hour')[0].innerHTML;
    this.document.getElementsByClassName('hour')[0].style = "background-color: #F4F4EE;";
    this.document.getElementsByTagName("th")[2].style.width = "280px";
};
```

```json:manifest.json
{
    "name": "tenki.jp_改変",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "tenki.jpのいらない部分を削除",
    "content_scripts": [{
        "matches": ["https://tenki.jp/forecast/*/*/*/*/3hours.html"],
        "js": [
            "content.js"
        ],
        "css":[
            "style.css"
        ],
        "all_frames": true 
    }]
}
```

```css:style.css
body::-webkit-scrollbar {
    display: none;
}
body{
    padding-left: 15px !important;
}
```

これら3つのファイルを同じディレクトリに置いてChromiumに入れてください。
入れ方は　[自作の拡張機能をChromeに追加するには](http://reviews.f-tools.net/Add-On/Jisaku-Tuika.html)　を参考にしてください。

ちなみにこの拡張機能は「3時間天気」のページのみ有効ですので、
他のページを使いたい場合は独自にカスタマイズしてください。

#動作チェック
「Chromiumで表示するHTMLの準備」で作成したhtmlファイルをChromiumで開いてみてください。
おそらくGoogleカレンダーが表示される部分が、Googleのログイン画面になってしまっていると思います。
iframe内でのクッキーが無効になっているので有効にします。

__クッキーの有効化__
1.アドレスバーの右端にあるクッキーに☓マークが付いた部分をクリック
2.「Blocked」をクリック
3.リスト内から「accounts.google.com」を探し、クリック
4.「Allow」をクリック
5.「Done」をクリックして閉じる
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258005/23b6703f-7aed-a44d-11a9-d2dada081df2.png)


無事カレンダーと天気予報が表示されたら表示倍率を150％にします。（Ctr+マウスホイール）

※私の環境（24インチのFHD）では丁度いいのですが、サイズや解像度が違うと見え方が違ってくると思います。
もし変えたい場合は「・天気予報表示部分をいじる拡張機能」の変更も必要になってくるので、各自でカスタマイズしてください。

#自動起動化
問題なければ、あとは自動起動化すれば完成です。

下記コマンドでautostartを編集。

```terminal
nano ~/.config/lxsession/LXDE-pi/autostart
```

末尾に下記のコードを追加してください。

```terminal
@chromium --kiosk --app=file:///home/pi/Documents/calendar/index.html
```

※「Chromiumで表示するHTMLの準備」で作成したhtmlファイルの置き場所に合わせて「--app=」以降を変更してください。

#おわりに
なんだかんだ言って以前の投稿からほぼ一年経ってしまいました。
来年はもうちょっと記事を書いていけたらいいなぁ～なんて思ってます。