M5Stack の LCD に TFT_eSPI を使って日本語フォント "源真ゴシック" で表示する

Watako-Lab さんの [M5Stackで好きなフォントを使う](https://watako-lab.com/2018/10/31/m5_font/) を基にフリーの日本語フォント ["源真ゴシック"](http://jikasei.me/font/genshin/) で M5Stack の LCD で日本語表示するところまでをまとめました。

![M5Stack で日本語表示をしている様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/70d983b7-bf43-9928-f771-057581aa4140.jpeg)

## (6/4 更新)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">最新の M5Stack ライブラリだと、TFT_eSPI の日本語表示ロジックが取り込まれてて、TFT_eSPI ライブラリを追加インストールしなくても良いみたいですー。</p>&mdash; Nochi (@shikarunochi) <a href="https://twitter.com/shikarunochi/status/1135919892870262788?ref_src=twsrc%5Etfw">2019年6月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ということで調べてみたら [取り込まれてた](https://github.com/m5stack/M5Stack/blob/master/src/utility/In_eSPI.h#L924)！！
だから `M5.Lcd.loadFont()` とか使えるようになってるのですねー。

## 準備

M5Stack 以外で必要なものは以下の通り。

* 2 GB 以上の micro SD カード

（というか、ファイルサイズ的には 10MB ぐらいですので、その程度のスペースがあれば OK です)

## 手順

Arduino IDE の M5Stack 開発環境のセットアップ ([Windows](https://docs.m5stack.com/#/ja/quick_start/m5core/m5stack_core_get_started_Arduino_Windows) / [macOS](https://docs.m5stack.com/#/ja/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS)) が終わっている前提で以下の作業を行います。

1. フォントファイル(VLW ファイル)を[ダウンロード](#font) して micro SD カードに保存  
  ※ micro SD カードは FAT でフォーマットしておいてください

### 実装

```c++
#include <M5Stack.h>

void setup() {
  M5.begin();
  
  M5.Lcd.clear();
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(0, 0);
  M5.Lcd.setTextColor(WHITE);
  
  String f16 = "genshin-regular-16pt"; // without Ext
  M5.Lcd.loadFont(f16, SD);
  M5.Lcd.printf("16pt: Good-bye 平成\n");
  M5.Lcd.printf("こんにちわ令和\n");
  M5.Lcd.unloadFont();

  String f24 = "genshin-regular-24pt"; // without Ext
  M5.Lcd.loadFont(f24, SD);
  M5.Lcd.printf("24pt: Good-bye 平成\n");
  M5.Lcd.printf("こんにちわ令和\n");
  M5.Lcd.unloadFont();

  String f32 = "genshin-regular-32pt"; // without Ext
  M5.Lcd.loadFont(f32, SD);
  M5.Lcd.printf("32pt: Good-bye 平成\n");
  M5.Lcd.printf("こんにちわ令和\n");
  M5.Lcd.unloadFont();
}

void loop(){
}
```

## 解説

### TFT_eSPI が `M5.Lcd` に追加するメソッド

(6/4 更新) 冒頭でも書いた通り TFT_eSPI は M5Stack ライブラリに取り込まれているので `M5.Lcd` で `#loadFont()` と `#unloadFont()` が使えるようになっています。

`loadFont()` の引数は [(`fontName`, `fs`)](https://github.com/Bodmer/TFT_eSPI/blob/master/Extensions/Smooth_font.h#L7) です。

- `fs` はフォントファイルの読み込み元デバイスの指定をします。 `SD` を指定すると SD カードから読み込みます。(その他の方法は知らん)
- `fontName` は `fs` をルートとしたフォントファイルのパス名を指定します。   
- `fontfile.vlw` なら `fontfile` と、拡張子を除いて指定します。 `dir1/dir2/fontfile` のようにディレクトリ内のパス指定が可能です。
- フォントファイルの読み込みには若干時間がかかります。

`unloadFont()` は引数指定はありません。

### VLW ファイルの作成方法

[Watako-Lab さんの「ライブラリ用フォントの作成手順」](https://watako-lab.com/2018/10/31/m5_font/) で解説されていますが、要点は [Processing](https://processing.org/) を使って生成するということになります。

ちなみに Processing 以外での VLW ファイル作成は無理っぽいようです、残念。

- https://forum.processing.org/beta/num_1263293380.html
- https://forum.processing.org/beta/num_1153418127.html

### TFT_eSPI ライブラリの調整は不要です

(6/4 更新) この章は、まるまる削除しました。

<h2 id="font">VLW 形式フォントファイル配布とライセンス</h2>

ダウンロードは以下から可能です。

* 源真ゴシック Regular VLW 形式フォントファイル
    * フォントサイズ 16pt; [genshin-regular-16pt.vlw](https://drive.google.com/file/d/1qhp8qHKfxdLFX0Lncph84AVgh9s12Vlu/view?usp=sharing) (3.5 MB)
    * フォントサイズ 20pt; [genshin-regular-20pt.vlw](https://drive.google.com/file/d/1HCFBEsijiSKxBIqNeWLLhufgkrTnwRMD/view?usp=sharing) (5.0 MB)
    * フォントサイズ 24pt; [genshin-regular-24pt.vlw](https://drive.google.com/file/d/1-Q9ZW3lyu8-ldO7rPQInY2V3MnV4p0Lf/view?usp=sharing) (6.8 MB)
    * フォントサイズ 28pt; [genshin-regular-28pt.vlw](https://drive.google.com/file/d/1_ForXGd02l9FEkSj8bWbFGFmmsvKQkgc/view?usp=sharing) (9.2 MB)
    * フォントサイズ 32pt; [genshin-regular-32pt.vlw](https://drive.google.com/file/d/19XNIAicvBQWFzj1u3DiI_q6UbGUuvQ3R/view?usp=sharing) (11.6 MB)

### 収録文字

Unicode コードポイントの以下の範囲を収録しています。
ザクっというと、ASCII, ひらがな, カタカナ(半角含む), 漢字が入ってます。

*   [0x0021, 0x007E, //Basic Latin, 128, 128, Latin (52 characters), Common (76 characters)](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u0000.html)
*   [0x3000, 0x303F, //CJK Symbols and Punctuation, 64, 64, Han (15 characters), Hangul (2 characters), Common (43 characters), Inherited (4 characters)](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u3000.html)
*   [0x3040, 0x309F, //Hiragana, 96, 93, Hiragana (89 characters), Common (2 characters), Inherited (2 characters)](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u3040.html)
*   [0x30A0, 0x30FF, //Katakana, 96, 96, Katakana (93 characters), Common (3 characters)](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u30a0.html)
*   [0x4E00, 0x9FFF, //CJK Unified Ideographs, 20,992, 20,971, Han](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/cjku_klist.html)
*   [0xFF00, 0xFFEF, //Halfwidth and Fullwidth Forms, 240, 225, Hangul (52 characters), Katakana (55 characters), Latin (52 characters), Common (66 characters)](http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/uff00.html)

### ライセンス

http://jikasei.me/info/license.html に従い、VLW ファイルの公開と共にライセンス明記しておきます。

```
本ソフトでは表示フォントに「源真ゴシック」(http://jikasei.me/font/genshin/) を使用しています。
Licensed under SIL Open Font License 1.1 (http://scripts.sil.org/OFL)
© 2015 自家製フォント工房, © 2014, 2015 Adobe Systems Incorporated, © 2015 M+FONTS PROJECT
```

## まとめ

VLW ファイルの作成が面倒ですね。
ライセンス的に NG だったらすぐ言ってください。（読解力に不安あり）

アンチエイリアスが効いていない気がするが、読めるので気にしないことにする。

EoT