【Bラボデジタルサイネージ3】準備プログラム作成＆機能実現の方針決定

![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fuser-images.githubusercontent.com%2F29194025%2F137117015-af05fe4f-7c32-4e38-876f-e153ff2f2f7d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=2bbf46fb5c1d8dec16f2fcb5d089fde2)

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

本記事は、[株式会社 函館ラボラトリ](http://www.hakolab.co.jp)が運営する「[Bラボ](http://www.hakolab.co.jp/b-lab/index.html)」における、大人向け「看板アプリ（デジタルサイネージ）を作るコース」用教材テキストです。

http://www.hakolab.co.jp/b-lab/index.html

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


# 実装

## 最初のプログラム

まずは、`DigitalSignage.pde`を作成し、3つの関数を用意します。

- 画面解像度の設定用関数`settings()`
- 初回描画時のみ実行される関数`setup()`
- 1秒に決められた回数だけ繰り返し実行される関数`draw()`

今回作るデジタルサイネージでの初期設定には、次のような意図があります。

- 横1920px、縦1080pxの画面を想定し、表示する時にはフルスクリーンにする。
- 画面は毎秒1回だけ更新する（ラズパイの描画処理の負荷を軽減するため）。
- 色を指定するときには、デフォルトのRGB（赤0〜255、緑0〜255、青0〜255）ではなく、HSB（色相0〜360、彩度0〜100、明度0〜100）を使って指定する。
- カーソルを表示しない。

プログラムにするとこうなります。

``` java:DigitalSignage.pde
void settings() {
  // size(1920, 1080);
  fullScreen();
}

void setup() {
  frameRate(1);
  noCursor();
  colorMode(HSB, 360, 100, 100, 100);
}

void draw() {
  background(0, 0, 100);
}
```

この時点で一度実行してみても構いませんが、何も表示されず、ただの白一色の画面になるはずです。

## 初期化用関数

新しいファイル`Initialize.pde`を作成し、関数`initialize()`を作成します。

``` java:Initialize.pde
void initialize() {
}
```

関数`setup()`の中で`initialize()`を呼ぶように書き換えます。

``` java:DigitalSignage.pde
/* 略 */

void setup() {
  frameRate(1);
  noCursor();
  colorMode(HSB, 360, 100, 100, 100);

  initialize(); /* この行を追加 */
}

/* 略 */
```

# 機能実現の方針

次の章からは機能の実装を始めます。
ここでいう「機能」にあたるのは、このような機能です。

- レイアウトの基準になるグリッドや枠を表示する機能
- 画像を全画面表示する機能
- デジタルサイネージが設置されている場所を表示する機能
- 今の時刻を表示する機能
- 次の画面に切り替わるまでどれくらいかかるかを視覚化する機能
- 今の画面が全画面の何ページ目かを視覚化する機能
- 今の天気を表示する機能
- 店がいま開店／閉店中かを視覚化する機能
- 直近2件のバス時刻表を表示する機能
- 今日から1週間分のごみ出しカレンダーを表示する機能
- 今の部屋の温度を表示する機能
- 今の部屋の明るさを表示する機能
- 宣伝したい画像付きツイートを表示する機能
- 起動画面を表示する機能

**1つの機能を実現する塊**のことを、以降「**モジュール（Module）**」と呼ぶことにします。
このモジュールを、特徴によって2つに区分します。

- M (Module)
- RM (ReplaceableModule)

下のスクリーンショットのうち、「現在の天気」「室温」「明るさ」「函館バス」のように、**場所が入れ替わっても良いモジュール**を **RM (ReplaceableModule)** に分類します。
RM以外のものはすべて **M (Module)** に分類します。

![](https://user-images.githubusercontent.com/29194025/137117015-af05fe4f-7c32-4e38-876f-e153ff2f2f7d.png)

命名は「〜Module」とするので、各機能に対応するモジュールの名前は下のようになります。

| モジュール名 | 分類 | 実現する機能 | 
| :-- | :-: | :-- |
| GridModule | M | レイアウトの基準になるグリッドを表示する機能 |
| PlaceholderModule | M | レイアウトの基準になる枠を表示する機能 |
| FullImageModule | M | 画像を全画面表示する機能 |
| LocationModule | M | デジタルサイネージが設置されている場所を表示する機能 |
| DateModule | M | 今の時刻を表示する機能 |
| ProgressBarModule | M | 次の画面に切り替わるまでどれくらいかかるかを視覚化する機能 |
| PageControlModule | M | 今の画面が全画面の何ページ目かを視覚化する機能 |
| LaunchingScreenModule | M | 起動画面を表示する機能 |
| WeatherRModule | RM | 今の天気を表示する機能 |
| OpenCloseRModule | RM | 店がいま開店／閉店中かを視覚化する機能 |
| BusRModule | RM | 直近2件のバス時刻表を表示する機能 |
| GomiRModule | RM | 今日から1週間分のごみ出しカレンダーを表示する機能 |
| TemperatureRModule | RM | 今の部屋の温度を表示する機能 |
| BrightnessRModule | RM | 今の部屋の明るさを表示する機能 |
| TwitterRModule | RM | 宣伝したい画像付きツイートを表示する機能 |

本教材では、これらの機能でのデータ更新・描画は、すべて関数で実装します。
（classを使った書き方、インスタンス等については扱いません。）

この実装方針を踏まえた上で、次は[**【Bラボデジタルサイネージ4】レイアウトの基準になるグリッドを表示する「GridModule」**](https://qiita.com/ohayota/items/df704f523b5aa4dbb180)を作ってみましょう。

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