M5Stackで日本語文章をスクロール（1）

早速M5Stackの記事を書いてみます。

M5Stackの液晶画面に、日本語文章をスクロールで流せるようにしたい！と思い立ったのですが、そもそもM5Stackは標準では日本語表示に対応していないことが判明しました。英文だけならM5.Lcd.print()などで簡単に表示出来るのですが、それをスクロールさせたりするだけでも簡単ではなく、方法を探して色々と彷徨いました。

あれこれ調べて、ようやく比較的簡単に（と思われる）両方を実現する方法に辿り着きましたので、ここにメモします。

フォントデータを用いて日本語表示（※micro SDが必要）

M5Stackで日本語を表示する方法については、以下のサイトで非常に参考となる情報が見つかりました。
M5Stackで好きなフォントを使う

こちらの「ライブラリ用フォントの作成手順」に従えば、パソコンにインストールされたフォントを選び、そのフォントで表示したい文字をまとめた「.vlw」形式のデータファイルを作成出来ます。かな文字や漢字を含めたデータファイルをmicro SDカードに保存し、M5Stackに差し込んで読み込ませることで、日本語混じりの文章を表示可能になるという寸法です。やや下準備に手間は掛かりますが、一度ファイルを用意してしまえば簡単にキレイな文字を表示出来ますので、この方法を使って行きたいと思います。

※ただしフォント（特に商用のもの）によっては、フォントデータを加工したり、フォントデータを他ファイルに埋め込んで利用したりすることを、利用規約で明確に禁止している場合があります。データファイルの作成は、自由な改変が許可されたオープンソースのフォントを探して利用した方が無難です。

ここでは、Google Fontsが提供するオープンソース（Apache License 2.0）の日本語フォント「小杉丸フォント」をインストールして使用してみます。なおGoogle Fonts提供の日本語フォント一覧や、ダウンロード方法は、こちらのサイトが参考になります。
Google Fontsで日本語フォントが正式サポート開始！使い方やダウンロード方法など

ダウンロードしたファイルを解凍すると、中にTTFファイル（拡張子「.ttf」）が入っています。Macの場合はダブルクリックすると以下のようにフォントのプレビュー画面が開きますので「フォントをインストール」をクリックすればOKです（小杉丸フォントは「MotoyaLMaru」という名前でインストールされます）。
f:id:fleron:20191205220145p:plain

無事にインストールが完了したら、先述の参考サイトの手順通りに、Processingで「Create Font」スケッチのコードを実行して、インストール済みのフォント一覧を表示し、小杉丸フォント（MotoyaLMaru）のインデックスを確認します。
f:id:fleron:20191205221637p:plain

続いて手順通りに、コードの ”fontNumber” 変数に確認したインデックスを設定するよう書き換えます。なおM5Stack側では、この方法で表示するフォントはsetTextSize関数によるサイズ変更などは出来ないようであり、コードの “fontSize" 変数で設定したサイズが、そのまま表示サイズとなるようです。M5Stack側でサイズを色々切り替えたい場合は、あらかじめ様々な “fontSize” を設定したデータファイルをmicro SDに複数入れておく必要がありそうです。

そしてかな文字や漢字をデータファイルに含めるために、手順通りにUnicodeのコードポイントを指定します。かな文字だけなら ”unicodeBlock” の中に、”Hiragana〜” “Katakana〜” のコードポイントがコメントアウトされた部分がありますので、以下のように解除するだけでもOKです。
f:id:fleron:20191205224103p:plain

ただし漢字は膨大な種類の文字があるので、何もかも含めようとするとデータファイルのサイズも膨大となり、micro SDからの読み込みも時間が掛かるようになってしまいます。ここでは常用漢字2136文字のみのコードポイント一覧をあらかじめテキストファイルとして用意しておき、それを “specificUnicodes” の中に貼り付けてみました。
f:id:fleron:20191205225754p:plain

後は再度コードを実行すれば、文字の一覧が表示されたウインドウとともに、「.vlw」ファイルが生成・格納されたフォルダが自動的に開きます。なおファイル名はProcessingでのフォント一覧確認時に表示されたものとなりますが、末尾にはフォントサイズの数字が自動的に付与されます（以下の例では20）。
f:id:fleron:20191205230642p:plain

この「.vlw」ファイルをmicroSDのルートディレクトリに格納して（ファイル名がやや長いので「MotoyaLMaru-20.vlw」と短縮しました）。M5Stackに指し込んだら、日本語文章を表示するための準備は完了です。簡単なスケッチで試してみます。

#include<M5Stack.h>

void setup() {
  // put your setup code here, to run once:
  M5.begin();

  M5.Lcd.fillScreen(TFT_NAVY);

  //データファイル名に応じて適宜書き換え。拡張子.vlwは記述不要
  String fileName = "MotoyaLMaru-20"; 
  M5.Lcd.loadFont(fileName, SD);

  //setTextColorに引数を2つ与えると、第1引数が文字色、
  //第2引数が背景色となる。print関数で表示すると文字の輪郭が背景色となる。
  //背景色を設定した方がキレイに表示出来る。
  M5.Lcd.setTextColor(TFT_WHITE, TFT_BLACK);
  M5.Lcd.setCursor(10, 10);
  M5.Lcd.print("0123456789");

  M5.Lcd.setTextColor(TFT_PINK, TFT_BLACK);
  M5.Lcd.setCursor(10, 40);
  M5.Lcd.print("ABCDEFGHIJKLMN");

  M5.Lcd.setTextColor(TFT_GREEN, TFT_BLACK);
  M5.Lcd.setCursor(10, 70);
  M5.Lcd.print("OPQRSTUVWXYZ");

  M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
  M5.Lcd.setCursor(10, 100);
  M5.Lcd.print("常用漢字も表示出来る");

  M5.Lcd.unloadFont();
}

void loop() {
  // put your main code here, to run repeatedly:
}