Processingとラズパイで、自分用のデジタルサイネージを作った

![0041.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/afb4daa4-9ae8-ecb5-5d35-78d08df179ce.png)

# はじめに

[Processing Advent Calendar 2021](https://adventar.org/calendars/6163) 20日目の記事です！

https://adventar.org/calendars/6163

「それ、別にProcessingで作らなくてよくね？」っていうものを作りたくなってしまうのですが、本記事ではそんなものの一つとして「デジタルサイネージ」を作りました。

このトピックについて、すでに20本ほどのシリーズを投稿してしまっているので（リンクはこの節の下部に貼ります）、本記事では

- なぜ作ろうと思った？
- どんなシステム？
- どうすれば動かせる？

について書きます。

デジタルサイネージのソースコードは、下記GitHubリポジトリに載せておきます。

https://github.com/ohayota/BLabo-digital-signage

classを使って実装したバージョンもあります。

https://github.com/ohayota/digital-signage-raspberry

20本の解説記事シリーズです。詳細な説明は全部ここに書いています。

1. [【Bラボデジタルサイネージ1】Processing+ラズパイでデジタルサイネージを作る！](https://qiita.com/ohayota/items/f4aa3e1b452060eb52ad)
2. [【Bラボデジタルサイネージ2】ラズパイ初期設定](https://qiita.com/ohayota/items/88fbcf177e6606311efb)
3. [【Bラボデジタルサイネージ3】準備プログラム作成＆機能実現の方針決定](https://qiita.com/ohayota/items/41a746d2258673726541)
4. [【Bラボデジタルサイネージ4】レイアウトの基準になるグリッドを表示する「GridModule」](https://qiita.com/ohayota/items/df704f523b5aa4dbb180)
5. [【Bラボデジタルサイネージ5】レイアウトの基準になる枠を表示する「PlaceholderModule」](https://qiita.com/ohayota/items/f52a10660009794afd9f)
6. [【Bラボデジタルサイネージ6】画像を全画面表示する「FullImageModule」](https://qiita.com/ohayota/items/4a9c8423459c251f4911)
7. [【Bラボデジタルサイネージ7】ページの自動切り替え](https://qiita.com/ohayota/items/9d2c28f9cbf2f559be31)
8. [【Bラボデジタルサイネージ8】設置されている場所の名前を表示する「LocationModule」](https://qiita.com/ohayota/items/046b361d945a709c4605)
9. [【Bラボデジタルサイネージ9】現在の時間を表示する「DateModule」](https://qiita.com/ohayota/items/6b80137e33bfb4172de6)
10. [【Bラボデジタルサイネージ10】ページ切り替えの時間が分かる「ProgressBarModule」](https://qiita.com/ohayota/items/9f3b6f9f32b7d93ef2a7)
11. [【Bラボデジタルサイネージ11】現在の表示中のページが分かる「PageControlModule」](https://qiita.com/ohayota/items/23acc993dca47286fffb)
12. [【Bラボデジタルサイネージ12】現在の天気を表示する「WeatherRModule」](https://qiita.com/ohayota/items/d9b1d21037dcedcfd78c)
13. [【Bラボデジタルサイネージ13】直近2件のバス時刻表を表示する「BusRModule」](https://qiita.com/ohayota/items/93d7c9b5328188b3c5b6)
14. [【Bラボデジタルサイネージ14】ごみ出しカレンダーを表示する「GomiRModule」](https://qiita.com/ohayota/items/40ed5db352a688637f83)
15. [【Bラボデジタルサイネージ15】（発展編）ツイートを表示する「TwitterRModule」](https://qiita.com/ohayota/items/6367fad7beaf9ad9ea1c)
16. [【Bラボデジタルサイネージ16】開店／閉店を表示する「OpenCloseRModule」](https://qiita.com/ohayota/items/284b5c7e7101f602016f)
17. [【Bラボデジタルサイネージ17】部屋の温度を表示する「TemperatureRModule」](https://qiita.com/ohayota/items/386c27a021601fb3ccfd)
18. [【Bラボデジタルサイネージ18】部屋の明るさを表示する「BrightnessRModule」](https://qiita.com/ohayota/items/76279927b4ef35eaf628)
19. [【Bラボデジタルサイネージ19】起動画面を表示する「LaunchingScreenModule」](https://qiita.com/ohayota/items/0b6bdeda68c36707f762)
20. [【Bラボデジタルサイネージ20】RModuleの影を実装](https://qiita.com/ohayota/items/57242f18653ccf7eb83b)


# なぜ作ろうと思った？

家に使っていないラズパイが余っていたからです。
Processingはラズパイ上でも動かせます（Processing for Pi）。
そこで、普段触っているProcessingとWeb上の情報を使って、自分の生活を助けるようなシステムを作ってみようと思いました。


# どんなシステム？

1920x1080pxのディスプレイ用に作ったデジタルサイネージです。
主な機能は以下の通りです。

- OpenWeatherから取得した、現在の天気を表示
- Google App Scriptで作ったAPIから取得した、直近2件のバス時刻表を表示
- Google App Scriptで作ったAPIから取得した、ごみ出しカレンダーを表示
- Twitter APIから取得した、1つのツイートを表示
- ラズパイに繋いだスライドスイッチと連動して、開店／閉店を表示
- ラズパイに繋いだ温度センサと連動して、部屋の温度を表示
- ラズパイに繋いだCdSセルと連動して、部屋の明るさを表示

最後3つについてはラズパイが必須ですが、他4つはPCさえあれば動作させられます。
各機能のスクショはこんな感じになります。

![0041.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/afb4daa4-9ae8-ecb5-5d35-78d08df179ce.png)

![0145.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/a499d198-f9db-8534-5a9c-172b4481be67.png)

これらの機能の他に、画面全体に広告用画像を表示させることもできます。


# どうすれば動かせる？

https://github.com/ohayota/digital-signage-raspberry

必要なことを以下にまとめます。

### 1. 各種ソフトウェアをインストール、初期設定を済ませる。

https://qiita.com/ohayota/items/88fbcf177e6606311efb

### 2. [OpenWeather](https://openweathermap.org)、Google、Twitterのアカウントを取得する。

OpenWeatherのアカウントは、天気取得のために必要です。
API Keyの取得については、下記記事を参考にしてください。

https://qiita.com/ohayota/items/d9b1d21037dcedcfd78c

Googleアカウントは、Google App Scriptを使ってAPIを作るために必要です。
データ取得に使うAPIの作り方については、下記2記事が参考になるかもしれません。

https://qiita.com/ohayota/items/93d7c9b5328188b3c5b6

https://qiita.com/ohayota/items/40ed5db352a688637f83

Twitterアカウントは、Twitter APIの利用申請をしてください。
下記記事が参考になるかもしれません。

https://qiita.com/ohayota/items/6367fad7beaf9ad9ea1c

### 3. API利用に必要な値を各サービスから取得し、ソースコード内に埋め込む。

ソースコード内のファイル`setting.json`に、必要な値を入れていきます。

``` json:setting.json
{
    "USER_SETTING_FILE_NAME": "setting.json",
    "BusRModule": {
        "BUS_API_URL": "", /* 変更 */
        "BUSSTOP_START": "乗車バス停名", /* 変更 */
        "BUSSTOP_END": "降車バス停名" /* 変更 */
    },
    "GomiRModule": {
        "GOMI_API_URL": "", /* 変更 */
        "LOCATION": "地域名" /* 変更 */
    },
    "WeatherRModule": {
        "WEATHER_API_KEY": "", /* 変更 */
        "LATITUDE": 0.0, /* 変更 */
        "LONGITUDE": 0.0, /* 変更 */
        "LOCATION": "地域名" /* 変更 */
    },
    "TwitterRModule": {
        "CONSUMER_KEY": "", /* 変更 */
        "CONSUMER_KEY_SECRET": "", /* 変更 */
        "ACCESS_TOKEN": "", /* 変更 */
        "ACCESS_TOKEN_SECRET": "", /* 変更 */
        "TWEET_ID": 0 /* 変更 */
    },
    "OpenCloseRModule": {
        "SWITCH_PIN": 23, /* 変更 */
        "OPEN_DESCRIPTION": "開店しています。", /* 変更 */
        "CLOSE_DESCRIPTION": "閉店しています。" /* 変更 */
    },
    "LocationModule": {
        "LOCATION": "設置場所名" /* 変更 */
    },
    "ProgressBarModule": {
        "BAR_HEIGHT": 20
    },
    "State": {
        "STAY_SECOND": 20,
        "PAGE_ALL_COUNT": 4,
        "AD_IMAGE_COUNT": 2,
        "SHADOW_ALPHA": 40,
        "SHADOW_PADDING": 20,
        "MODULE_RECT_ROUND": 30
    }
}
```

### 4. ラズパイとブレッドボードに電子部品を配置する。

必要な電子部品は下記の記事に書いています。

https://qiita.com/ohayota/items/f4aa3e1b452060eb52ad

各電子部品の配置については、下記3記事を参考にしてください。

https://qiita.com/ohayota/items/284b5c7e7101f602016f

https://qiita.com/ohayota/items/386c27a021601fb3ccfd

https://qiita.com/ohayota/items/76279927b4ef35eaf628


# おわりに

本記事だけではだいぶ雑な説明になってしまっているのですが、詳細な説明は20本の記事シリーズに書いています。
ソースコードはすべて公開したので、ぜひカスタマイズして、自分のためのデジタルサイネージを作ってみてください！