【Bラボデジタルサイネージ8】設置されている場所の名前を表示する「LocationModule」

![](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)
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」（本記事）**
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)


# 作るもの

デジタルサイネージが設置されている場所の住所や店舗名を表示できるようにします。
ただし、GPSなどを使うわけではなく、あくまで手打ちの値を表示します。

本テキストでは、設置場所を「北海道函館市美原2丁目 / MIRAI BASE」と表示したいと思います。

![0054.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/824ffc46-ce30-7314-8b26-e9a1aacb17a9.png)


# 必要な変数の用意

「北海道函館市美原2丁目 / MIRAI BASE」という値を、定数として定義します。

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

final String AD_PATH = "ad/";

final String LOCATION = "北海道函館市美原2丁目 / MIRAI BASE"; /* 追加 */

void settings() {
  size(1920, 1080);
  //fullScreen();
}

/* 略 */
```

文字色などの色指定に使う変数も定義しておきます。

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

final String LOCATION = "北海道函館市美原2丁目 / MIRAI BASE";

color WHITE_COLOR; /* 追加 */
color NEARLY_WHITE_COLOR; /* 追加 */
color NEARLY_GREEN_COLOR; /* 追加 */
color BLACK_COLOR; /* 追加 */
color LIGHT_COLOR; /* 追加 */
color GRAY_COLOR; /* 追加 */
color GREEN_COLOR; /* 追加 */

/* 中略 */

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

  WHITE_COLOR = color(0, 0, 100); /* 追加 */
  NEARLY_WHITE_COLOR = color(100, 2, 98); /* 追加 */
  NEARLY_GREEN_COLOR = color(100, 5, 98); /* 追加 */
  BLACK_COLOR = color(0, 0, 0); /* 追加 */
  LIGHT_COLOR = color(0, 0, 80); /* 追加 */
  GRAY_COLOR = color(0, 0, 50); /* 追加 */
  GREEN_COLOR = color(150, 100, 60); /* 追加 */
  
  background = pImageCut(loadImage("background.jpg"), CENTER, CENTER, width, height);
  
  initialize();
}

/* 略 */
```

フォント「Noto Sans CJK JP Bold」も読み込みます。
読み込んで使う処理を記述します。

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

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

  WHITE_COLOR = color(0, 0, 100);
  NEARLY_WHITE_COLOR = color(100, 2, 98);
  NEARLY_GREEN_COLOR = color(100, 5, 98);
  BLACK_COLOR = color(0, 0, 0);
  LIGHT_COLOR = color(0, 0, 80);
  GRAY_COLOR = color(0, 0, 50);
  GREEN_COLOR = color(150, 100, 60);

  textFont(createFont("Noto Sans CJK jp Bold", 32)); /* 追加 */
  
  background = pImageCut(loadImage("background.jpg"), CENTER, CENTER, width, height);
  
  initialize();
}

/* 略 */
```


# テキスト表示用の関数

Processingにおいてテキストを表示するには、関数`text`が使われます。

``` java:例
text("テキスト", 0, 0);
```

テキスト描画時に、「中央揃え」などのオプションを指定したい場合、`textAlign`が使われます。
文字の大きさには`textSize`が使われます。

``` java:例
textAlign(CENTER, CENTER);
textSize(32);
text("テキスト", 0, 0);
```

こういった複数の処理をいちいち数行書くのは面倒なので、1つの関数を呼び出すだけで完結できるようにしてみましょう。
たとえば、下記のように1行だけで呼び出せるようになると便利です。

``` java:例
drawText(RIGHT, BASELINE, color(0, 0, 100), 36, LOCATION, width-100, 30);
```

それでは、テキスト描画用の関数を実装してみましょう。
新しい関数`drawText`を作ります。

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

void updateNowPageID(boolean isIncrement) {
  if (isIncrement) {
    nowPageID = (nowPageID + 1) % PAGE_ALL_COUNT;
  } else {
    nowPageID = (nowPageID + PAGE_ALL_COUNT - 1) % PAGE_ALL_COUNT;
  }
}

/* ここから追加 */
void drawText(int alignX, int alignY, color c, int size, String text, int x, int y) {
}
/* ここまで追加 */
```

引数が多いので、各引数の役割を説明します。

`alignX`と`alignY`の2つは、関数`textAlign`で使う変数です。
`c`は、関数`fill`で文字色指定に使う変数です。
`size`は、関数`textSize`で文字サイズ指定に使う変数です。
`text`と`x`と`y`は、関数`text`で使う変数です。

これらの引数を使うように実装すると、下記のようになります。

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

void drawText(int alignX, int alignY, color c, int size, String text, int x, int y) {
  /* ここから追加 */
  pushStyle();
  textAlign(alignX, alignY);
  textSize(size);
  fill(c);
  if (alignY == BASELINE) {
    text(text, x, y+size);
  } else {
    text(text, x, y);
  }
  popStyle();
  /* ここまで追加 */
}
```

`pushStyle()`と`popStyle()`は、「色」「文字サイズ」などの設定が、この関数を実行されている間だけ適用させるために用います。

`alignY`に値`BASELINE`が指定されたときの実装意図については、下記の記事を参考にしてください。
**【Processing】テキスト表示位置がOSによって微妙に異なるときの対処方法（執筆中）**

# LOCATIONを表示

新しく`M_Location.pde`というファイルを作り、関数を作ります。
`LOCATION`を、画面右上に黒い字で表示する処理にします。
下記の3行を書き込みます。

``` java:M_Location.pde
void drawLocationModule() {
  drawText(RIGHT, BASELINE, BLACK_COLOR, 36, LOCATION, width-100, 30);
}
```

関数`drawModules()`内で、`drawLocationModule()`を呼び出すように書き換えます。

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

void drawModules() {
  if (nowPageID == 0) {
    drawFullImageModule(background);
    drawGridModule();
    drawPlaceholderModule();
  } else if (nowPageID == 1) {
    drawFullImageModule(adImage[0]);
  }
  drawLocationModule(); /* 追加 */
}

/* 略 */
```

一度実行すると、下図のような表示になります。

![0054.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/824ffc46-ce30-7314-8b26-e9a1aacb17a9.png)


この状態でも十分ですが、広告画像の背景が黒い場合には、文字が読めなくなってしまいます。
そこで、ひと工夫を加えてみましょう。
`blendMode`を使います。

``` java:M_Location.pde
void drawLocationModule() {
  blendMode(EXCLUSION); /* 追加 */
  drawText(RIGHT, BASELINE, WHITE_COLOR, 36, LOCATION, width-100, 30); /* 変更 */
  blendMode(BLEND); /* 追加 */
}
```

`blendMode(EXCLUSION);`は、異なる色を重ねたときに、色を反転してくれる混色モードです。
このモードを使うことで、黒い背景に書かれた文字は白く、白い背景に書かれた文字は黒く表示されるようになります。


# 最後に

これで、設置されている場所の名前を表示する「LocationModule」が実装できました。
次は、**[現在の時間を表示する「DateModule」](https://qiita.com/ohayota/items/6b80137e33bfb4172de6)**を実装してみましょう。

https://qiita.com/ohayota/items/6b80137e33bfb4172de6