注目キーワード

【Arduino】「M5Stack」日本語表示しよう!(efont)

すけろく
M5Stackに英語表記で時計を表示することは
前回の記事で行えたが、日本語は表示できないのか?
げんろく
いや、方法はあるぞ。
eFontライブラリをM5Stackで実行できるように
修正して提供してくれているものを使うのだ。
すけろく
ぜひ、やってみたいの~
この記事では、Arduino IDEを使ってM5Stackのディスプレイに日本語を表示させるための方法を紹介します。
今回使用するライブラリは、「tanakamasayuki」さんがM5Stackに対応していただいている「efont Unicode BDF Font Data」ライブラリを使用します。
GitHub

efont Font Data for Arduino. Contribute to tanakamasayuki/ef…

作成するプログラムとしては、次の2つになります。
  • 基礎的な日本語表示プログラム
  • 時計の日付、曜日を日本語表示するプログラム

 

M5Stackに時計を表示する方法については、以下の記事で紹介しています!

関連記事

すけろく 前回は、Wi-Fiアクセスポイントに 接続することができた。 次は時刻同期かな。 げんろく うむ。 時刻同期は、全ての基本だからな。 実装してみるか。 この記事では、M5[…]

これからはじめる方にお勧めの参考図書はこちら!

created by Rinker
¥3,089 (2024/07/17 15:55:11時点 Amazon調べ-詳細)
created by Rinker
¥2,310 (2024/07/18 11:47:19時点 Amazon調べ-詳細)
created by Rinker
技術評論社
¥3,278 (2024/07/17 15:55:12時点 Amazon調べ-詳細)
created by Rinker
¥2,420 (2024/07/17 15:55:13時点 Amazon調べ-詳細)

 

基本的な日本語表示プログラムを作る

まずは、efontライブラリになれるところからやっていきましょう。

M5Stackにはディスプレイ装置が実装されていて、英語表記であれば、Arduino IDE用のライブラリ「M5.Lcd」で表示が可能でした。

では「日本語」などのUnicodeで表現される文字はどうすればよいでしょうか。

efont Unicode BDF Font Dataとは?

/efont/ (電子書体オープンラボ)という、電子書体に関する情報交換を行なうための オープンラボがあります。

ここでは、電子書体および関連プログラムの共同開発や配布もされています。

この中の「efont-unicode-bdf」をもとにArduino用のフォントライブラリとして公開されているのが「efont Unicode BDF Font Data」です。

このライブラリで提供されるのは、16ピクセルフォントになります。

 

表現可能なフォントは?

「efont Unicode BDF Font Data」で対応されているフォントは次の通りです。

フォント ライブラリ内の対応ヘッダファイル 文字数 フォント容量
すべて efontEnableAll.h 21,727 738,718
ASCII efontEnableAscii.h 191 6,494
日本語 efontEnableJa.h 10,835 368,390
日本語(常用+α) efontEnableJaMini.h 4,107 139,638
CJK漢字 efontEnableCJK.h 19,379 658,886
簡体字中国語 efontEnableCn.h 18,077 614,618
繁体字中国語 efontEnableTw.h 13,555 460,870
韓国語 efontEnableKr.h 8,319 282,846

 

16ピクセルフォントなので、1文字あたり32Byteの字形データ(PROGMEM領域)と、UTF16の文字コードテーブルで2Byte使うので、1文字あたり34Byteです。

 

文字描画関数

フォントを画面表示するには、次のものを使用します。

項番 関数 説明
printEfont(char *str ) *str 表示文字列を描画します。
printEfont(char *str, int x, int y ) *str 表示文字列を指定されたカーソル位置(x、y)に描画します。
printEfont(char *str, int x, int y, int textsize) *str 表示文字列を指定されたカーソル位置(x、y)にtextsizeのフォントサイズで描画します。
printEfont(TFT_eSprite *sprite, char *str) *spriteで指定されたカーソル位置やテキストサイズ、カラー、背景色などをもとに*str 表示文字列を描画します。
項番1のように、テキストの位置(カーソル位置)、フォントサイズを「printEfont()」で指定しない場合は、「M5.Lcd」クラスの以下の各関数で事前に指定したものが適用されます。
関数 説明
M5.Lcd.setCursor(int x, int y) 画面の中のカーソルの位置を指定します。
M5.Lcd.setTextSize(int size) フォントサイズ(倍数)を指定します。

 

また、フォントカラーや背景色を指定する場合は、「M5.Lcd」クラスの以下の各関数で指定します。

関数 説明
M5.Lcd.setTextColor(Fcolor, Bcolor) フォントの色(Fcolor)および背景色(Bcolor)を指定します。

 

ライブラリを追加する

今回使うライブラリ「efont Unicode Font Data」をインストールします。(ライブラリ名にはBDFはつきません)

※プログラムを実行した際の「efont Unicode Font Data」のバージョンは「1.0.5」です。

ライブラリのインストールは、次の記事で紹介しています。

関連記事

本記事は、Arduino IDE 1.8.xバージョンのライブラリ管理方法を紹介した記事です。 Arduino IDEは、より新しいバージョン「2.0.x」が発表されています。     機能がよりリッチになった「Ardu[…]

 

簡単な日本語表示プログラム

Arduino IDEを起動して、「ファイル」メニューから「新規ファイル」を選択し、表示されるスケッチに以下のように記述します。

 Arduino IDE スケッチ例

 

 M5Stackへの書き込み

  1. 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
  2. 「ツール」メニューから「ボード」情報を確認し、次のものを選択します。この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
    ボード:「M5Stack Arduino」-「M5Stack-Core-ESP32」または、「M5Stack-Core2」または「M5Stack-Tough」
    「Partition Scheme」で「Not OTA(Large App)」を選択します。
  3. 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。(転送速度は「115200」です)
  4. 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。

 

 プログラム実行結果

M5Stackのディスプレイ上に次のように日本語が表示されます。

 

 

 

時計の日付、曜日を日本語表示するプログラムを作る

それでは、前回作ったM5Stack時計の日付、曜日を日本語表示化してみましょう。

プログラムを修正する箇所は、efontライブラリの定義部と時刻を表示する関数「Clock_screen_display()」内の表示処理になります。

 

プログラムの作成

Arduino IDEを起動して、「ファイル」メニューから「新規ファイル」を選択し、表示されるスケッチに以下のように記述します。

 Arduino IDE スケッチ例

 

 M5Stackへの書き込み

  1. 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
  2. 「ツール」メニューから「ボード」情報を確認し、次のものを選択します。この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
    ボード:「M5Stack Arduino」-「M5Stack-Core-ESP32」または、「M5Stack-Core2」または「M5Stack-Tough」
    「Partition Scheme」で「Not OTA(Large App)」を選択します。
  3. 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。(転送速度は「115200」です)
  4. 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。

 

 プログラム実行結果

M5Stackのディスプレイ上に次のように時計の日付、曜日が日本語表示されます。

 

編集後記

いかがだったでしょうか。

さて、これで日本語表示までできました。

今後、他の機能を使ったプログラムの実行例などをご紹介していきます。

ご期待ください。

 

今回の記事は以上になります。

最後までご覧いただきありがとうございました。

 

これからはじめる方にお勧めの参考図書はこちら!

created by Rinker
¥3,089 (2024/07/17 15:55:11時点 Amazon調べ-詳細)
created by Rinker
¥2,310 (2024/07/18 11:47:19時点 Amazon調べ-詳細)
created by Rinker
技術評論社
¥3,278 (2024/07/17 15:55:12時点 Amazon調べ-詳細)
created by Rinker
¥2,420 (2024/07/17 15:55:13時点 Amazon調べ-詳細)

M5Stack の他の記事はこちらからどうぞ!

すけろく ううーん。 どうしたものか。 げんろく どうした? 浮かない顔をして。 すけろく ChatGPTをマイコンから使ってみたいのだが、 どうすればよいのかわからなくてな。 げんろく そうか。 ChatGPTもAPIをもっているから、マイコンで文章を作って ChatGPT APIに送信すればよいと思うぞ。 今回はそのあたりを使ってみようか! 皆さん、「ChatGPT」は活用されていますか? 私 […]

すけろく 最近メダカの飼育が流行っているらしいの~ げんろく そうだな。日本の水質にも適用能力が高い魚だからな。 我が家でも飼育してみるか。 すけろく そうなると、メダカに快適な環境を整える必要があるな。 げんろく よし。 まずは、メダカが快適に過ごせる水温か確認するぞ! 皆さん、お家で何か動植物を飼っていますか? 今回、縁あって、げんろく宅にも「メダカ」さんがやってくることになりました。 メダカ […]

すけろく んーどうしたものか。 げんろく どうした? 深刻な顔をして。 すけろく M5Stackにプログラムを書き込んだら 起動しなくなってな。 電源ON/OFFでも無理なのだ。 げんろく 書き込んだプログラムか、バッテリーの 過放電か。工場出荷時に戻してみてはどうだ? この記事では、M5Stackにプログラムを書き込んだ結果、うまく動作しなくなった場合の対処方法を記載します。 ご紹介するのは「工 […]

すけろく んー。 どうしたものか… げんろく どうした?深刻な顔をして。 すけろく 「城の守りを固めるため、敵の接近を検知してみせよ!」 と殿から宿題をもらっての。 げんろく なるほど、それならば人感センサーを使ってみてはどうか? 敵が勝手に部屋に入ったりするのを検知できるぞ! この記事では、M5Stackと、「人感センサー(HC-SR501)」を使って、人が近づいた際に検知して反応するプログラム […]

すけろく 前回は、RTC非搭載のM5Stackでの時刻同期を行ったが、 RTC搭載の場合はどうするのかな。 げんろく うむ。 RTCは、M5Stack Core 2 などで搭載されている。 ちょっと、プログラム内容が異なるから、実装してみるか。   この記事では、M5StackをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー)と時刻を同期する方法 […]

すけろく ん~。 げんろく どうした難しい顔をして。 すけろく M5Stackのディスプレイにいろいろ描画しているのだが。 画像がチラチラしてみずらいのだ。 げんろく 描画タイミングとか、メモリを使うとか しておるのか? すけろく ・・・ げんろく 今回は、そのあたりを見てみようか。 この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字や画像を表示する際のちらつきや、安定 […]

 すけろく M5StackでPCファンの回転を制御することはできたが LEDの点灯制御はまだだな。  げんろく そうだったな。 LEDの点灯制御もM5Stackで行うことができるぞ! 実際に動かしてみよう この記事では、M5StackとLED搭載のパソコン用冷却ファンを使ったLED発光制御の方法について紹介します。 前回は、M5Stackで冷却ファンを使った回転速度制御をおこないましたが、今回はL […]

 すけろく M5Stackを使って、モーターをコントロールしてみたいな。  げんろく それならば、モーターコントロールを学べるPC冷却ファン制御というものをやってみるか。  すけろく ん? パソコン用の冷却ファンをコントロールできるのか?  げんろく 仕組みはモーターと同じだからな。 とにかくやってみよう!   この記事では、M5Stackとパソコン用の冷却ファンを使って回転速度制御を行います。 […]

すけろく 標準ライブラリでの画面描画はできた。 しかし、M5Stack向けのライブラリなので 汎用性がないな。 げんろく たしかに。 M5StickCや他のAruduino機器でも使えるものが必要だな。 すけろく そのようなものがあるのか? げんろく よし。今回は、汎用的に使えるライブラリを紹介しよう。 lovyan03さんが公開されている「Lovyan_GFX」だ。 この記事では、Arduino […]

すけろく M5Stackも時刻同期や日本語表示までできた。 うまくいっておるな。 げんろく ああ、「M5Stack」でもノウハウがたまってきている。 すけろく そういえば、大きな画面を活かしたものを 作ってみたいと思うのだが。 げんろく わかった。今回はM5Stackのディスプレイにおける 画面制御まわりを見てみるか。 この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字 […]

すけろく M5Stackに英語表記で時計を表示することは 前回の記事で行えたが、日本語は表示できないのか? げんろく いや、方法はあるぞ。 eFontライブラリをM5Stackで実行できるように 修正して提供してくれているものを使うのだ。 すけろく ぜひ、やってみたいの~ この記事では、Arduino IDEを使ってM5Stackのディスプレイに日本語を表示させるための方法を紹介します。 今回使用 […]

すけろく 前回は、Wi-Fiアクセスポイントに 接続することができた。 次は時刻同期かな。 げんろく うむ。 時刻同期は、全ての基本だからな。 実装してみるか。 この記事では、M5StackをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー)と時刻を同期する方法について紹介します。 M5Stackは、内蔵タイマであるRTCが搭載されているモデル(例:M5St […]

すけろく M5Stackは、Wi-Fi機能がついているのか。 げんろく ESP32のおかげだな、2.4GhzのWi-Fi接続に 対応している。 すけろく では、早速Wi-Fi接続してみよう。 げんろく せっかくなので、microSDから読みだした Wi-Fi アクセスポイント情報を使って 接続してみよう! この記事では、M5Stackに実装されているWi-Fi機能を使って、Wi-Fiルータに接続す […]

すけろく M5StackとほかのWebサービスなどとの データのやり取りにJSON形式を使いたいのだが。 げんろく うむ。 M5StackでもJSON形式が使えるか試してみるか。 この記事では、Arduino IDEを使ってM5StackのプログラムでJSON形式を取り扱う方法を紹介します。 JSON形式データは、Webサービスやほかのコンピュータとのやり取りにも使用される汎用形式なので、取り扱う […]

すけろく M5Stackは、各モデル共通でmicroSDカードの スロットが搭載されているな! げんろく そうだな。microSDカードへの読み書きが できるのでログの記録や、データ読み出しからの 画面表示ができる。 すけろく ファイルの中身を画面に表示することができるのか! それはいいな! げんろく では、手始めにmicroSDカードに入っている テキストファイルの中身を表示してみよう。 この記 […]

すけろく M5StackをArduino IDEで使ってみたいのだが。 げんろく ライブラリも揃っているしな。 開発する前に、M5Stack用の設定をArduino IDEに 施す必要がある。 すけろく M5Stack開発ボードの登録とライブラリの インストールだな。 げんろく わかってきたではないか。 新しい機器をArduino IDEで使う場合の初期設定だな。 この記事では、Arduino I […]

すけろく 今回はM5Stackを取り上げたいと思うがどうだ? げんろく なんだ、急にやる気を出して。 どういった風の吹き回しだ? すけろく M5Stickとは異なり、いろいろな種類のモデルがあって 良さそうだからな。 げんろく 開発用モデルから、実用を意識したモデルまで 様々だからな。 面白い、やってみるか! 今回の記事では、「M5Stack」を各モデルを比較して、用途に応じた使い方をまとめていま […]