はじめに
この記事では、自分が各種オフライン開催のイベントで使っていて、そして大活躍している「電子ペーパー名札」の作り方を紹介します。
（※ その電子ペーパー名札のデバイスには M5Paper を用い、UIFlow などといったものを用いる手順です）
電子ペーパーで作る名札なので、表示内容の書きかえができ、また表示内容を書きかえた後は表示内容を維持するのに電力が不要で、とても便利です。
↓この電子ペーパー名札の利用例に関して、直近では「開催100回目になる IoTLT というイベント」で使うために準備しました。
それ以前の利用事例は、一部抜粋になりますが以下の通りです。名札上に表示している画像や文字は、イベントに合わせて適宜変更して使っています。
- 電子ペーパー名札の利用事例（電子ペーパー名札を使った際の写真を添付したツイートのリンク）
電子ペーパー名札の作り方
それでは、ここから自分が使っている作り方を紹介します。
今回紹介する作り方以外にもやり方はありますが、自分の場合は、自身が使いやすいもの（※ 環境的な面や操作的な面で）や好んで使っているものを組み合わせた手順にしています。
自分が使うものの概要
まず、この後に出てくるデバイスや各種アプリを、補足説明なども一部に加えつつ、列挙します。
- M5Paper： 通信機能なども持っている電子ペーパーデバイス
- UIFlow： M5Paper などの M5Stack社の製品の開発に使えるビジュアルプログラミング環境
- M5Burner： 上記の UIFlow を利用するためのファームウェアを、M5Stack社のデバイスに書きこむために使うアプリ
- PowerPoint Mac版
- プレビューアプリ
この中の PowerPoint とプレビューアプリは、自分がよく使っている Mac に入っていて、そして普段から利用しているものなので、自身にとって使いやすいので採用しています。しかし、これらに限らず、別アプリでも代替可能です（※ 詳細は後で記載）。
それでは、作成手順の説明へ入っていきます。
1） PowerPoint を使った手順
まず PowerPoint上で、電子ペーパー名札に表示する画像を作ります。
それに使う元素材（アイコン・写真などの画像ファイルや、それと一緒に記載するテキストの内容など）は、準備しておきましょう。
PowerPoint のスライド上には、用意した元素材を配置するのですが、以下にその一例を示します。
この時のポイントなどは、以下のとおりです。
- 全体を囲む 9:16 の比率の外枠（※ 横長の画像にする場合は 16:9 の比率で）を作っておき、その外枠と中に配置する元素材をグループ化する
- 自分の場合、上記の画像中の赤矢印で示した部分で、「細い薄グレーの矩形で外を囲み、上下には少し太さのある矩形も配置」という感じで外枠を作っています（もしその枠を見せたくない場合は、枠の色を背景色と同じ色にして見えないようにすれば OK）
- 上記のグループ化したものを画像で書き出しをした場合に、画像解像度が 540x960（※ 横長の場合は、960x540）よりも大きくなるようにしておく
- 最終的には名札上でグレースケール画像表示となるが、この時点で配置する画像素材などはカラーのままで OK
- ただし、グレースケール化した場合に明暗の差があまりないものは、名札表示時に見づらくなるので避けたほうが良い
このようにして PowerPoint上で作成したものを、1つの画像として書き出しましょう。
以下は、PowerPoint 上で配置したアイコン画像・テキストなどを、1つの画像として実際に書き出したもの例です。
次に、この画像を UIFlow経由で M5Paper に書き込めるように、少し加工していきます。
PowerPoint の代替アプリについて
上記手順で利用するアプリについて、PowerPoint 以外でも問題ありません。
ここでアプリに必要な機能は「画像や文字などの素材を配置できること」と「配置した素材をひとまとめの画像として出力できること」です。
2） プレビューアプリを使った手順
上記の PowerPoint を使った手順で出力した画像を、Mac のプレビューアプリで加工します。
この加工を行う理由は、UIFlow経由での画像アップロードの制限や M5Paper のディスプレイ解像度が、以下の仕様になっているためです。
- UIFlow経由で M5Paper にアップロード可能な画像のファイルサイズは「50KB以下」という制限あり
- M5Paper の表示解像度が「540x960（※ 横長で使う場合は 960x540）」
次に示す手順では、画像がこれらの条件を満たすようにしていきます。
プレビューアプリの代替アプリについて
なお、ここからの手順で利用するアプリについて、PowerPoint の事例と同様に、プレビューアプリ限定ではありません。「解像度の変更」と「出力後のファイルサイズを見つつ、画像の圧縮率を調整する機能」あたりがあれば、他の画像処理系のアプリで問題ありません。
解像度の調整
まずはプレビュー画像を使った解像度の調整の手順を説明します。
アプリ上部の「マークアップ（※ 以下の画像の①）」を選び、その後に表示されるアイコンの中の「サイズを調整（※ 以下の画像の②）」を選びます。
その後に出てくる画面で、幅と高さをピクセルで指定します。以下の例では、赤矢印で示した部分で「540x960」の幅と高さになるように指定しています。
この時、調整前の画像がぴったり「9:16」の比率になっていなかった場合、このように「540x960」ぴったりにできないかもしれませんが、その場合は対応方法があります。
上記の画像の、緑矢印で示した部分のチェックを外し、縦と横のそれぞれのサイズを個別に調整できるようにして「540x960」に調整してください。
厳密にいえば、この対応をした場合の縦横比は元と少し異なるものになるのですが、調整前の画像をほぼ「9:16」の比率で出力できていれば、その差が目に見えて目立つということはありません。
ファイルサイズの調整
解像度の調整の次に行うのは、ファイルサイズの調整です。
自分の場合は、少し余裕を見て 45KB くらいのファイルサイズにしています。そして、その所望のファイルサイズとなるように、画像の圧縮率を単純に調整するやり方がとれる非可逆圧縮の JPEG形式を用います。
以下は、プレビューアプリでファイルサイズの調整をしているところです。緑矢印で示した画像品質（圧縮率に関する部分）を左右に移動させると、赤矢印で示した出力される画像ファイルのファイルサイズが変化します。
この時、元画像の描画内容が非常に複雑なものだった場合などは、上記の単純なやり方を使うと画像の見た目が劣化する可能性もあります。このあたりは実際に試してみて、確かめてください。
もし今回の単一の画像を規定のファイルサイズに調整するやり方で、最終的な表示の品質が明らかに悪い場合は、この後に出てくる手順の中で UIFlow でアップロードする画像を複数用意する対応などが必要かもしれません。
個人的には、簡素な手順で運用できるように、単一の画像をアップロードするやり方でも十分な状態が良いと感じています。そのために、名札に表示する内容はある程度シンプルにしておくのが良いと思います。
3） 次に進む前に行う対応
この後、UIFlow を使った手順で画像のアップロードを行うのですが、その画像ファイルの名前に制約があります。
そのため、ファイル名は英数字を使った短いファイル名にリネームしておくのが良いです。自分は「imege.jpg」や「img01.jpg」など、適当な短い名前にしていたりします。
4） M5Burner と UIFlow を使った仕上げ
それでは、ここまでの手順で用意できたアップロード用画像を、電子ペーパーデバイスの「M5Paper」へと書き込みます。
M5Burner を使った手順
今回用いる UIFlow を使う前準備として、デバイス側（※ 今回は M5Paper）にファームウェア書き込む必要があります。それには M5Burner というアプリを使います。
※ これは毎回必要な手順ではなく、もし M5Paper にファームウェアが書き込み済みであれば、この手順をスキップできます
ファームウェアの書き込みを行う具体的なやり方は以下のページをご覧ください。
●M5Burner v3の使いかた
https://zenn.dev/saitotetsuya/articles/m5stack_m5burner_v3
ちなみに、自分が Mac版の M5Burner で、M5Paper用のファームウェアの書き込みを行う画面は、以下になります。
UIFlow を使う際の準備
ファームウェアを書き込みむ手順を進めると、 M5Paper が Wi-Fi につながった状態になります。そして、M5Paper を起動した際に、画面上に APIキーが表示されます。
その APIキーの情報を使い、UIFlow上で M5Paper のプログラム作成などが行える状態にします。手順については、以下のページをご参照ください。
●M5Paper ＋ UIFlow 初期設定～タッチ操作までメモ｜神楽坂らせん
https://note.com/rasen/n/n339e586ab4ee
ここまでの準備が整ったら、UIFlow上での操作を進めていきます。
UIFlow を使った手順
まず、以下の①の「Image」というアイコンを、以下の②の部分にドラッグアンドドロップします。
そして、ドラッグアンドドロップしたアイコンをクリックしましょう。そうするとメニューが表示されます。
そのメニュー表示で、以下の赤矢印で示した部分（X と Y の座標）がゼロになってない場合は、数字を入力してゼロとなるようにします。さらに緑の①で示した画像アイコンをクリックしてください。
そうすると、アップロードする画像を選ぶためのメニューが表示されるので、自分が準備した画像を選びます。その後、上記の緑の②で示したプルダウンメニューを押しましょう。
そうするとリストが表示されるのですが、その中に自分がアップロードした画像ファイルの名前が出ているので、それを選択します（※ 以下の自分の例では「image.jpg」）。
この操作を行うと、以下の例の左側の部分のように、自分が準備した画像が出てきます。
この後は、以下の例の赤矢印で示した「Set screen show」のブロック（メニューの「UI」⇒「画面」と選んだ中にあるブロック）を、適切に配置していくだけです。
その「Set screen show」のブロックをドラッグアンドドロップして、以下のように「Setup」ブロック（最初から配置されている黄色のブロック）の下につなげます。ブロックの配置の操作は、これだけで OK です。
あとは、上の画像の「Run」ボタンを押せば、電子ペーパーデバイスの M5Paperへの画像の書き込みが行われます。
このデバイスへの画像書き込みを行うタイミングでは、M5Paper をに電力が供給されている状態にしておく必要があるので、ご注意ください。M5Paper に USB経由で電力を供給するのが良いと思います。
いったん M5Paper に画像が書きこまれたら、その後は電力が供給されなくても表示は保持されたままになります。
※ 以上の手順を実行した後の、UIFlow の画面全体の見た目も、参考として掲載しておきます。
おわりに
今回、M5Stack社の電子ペーパーデバイス「M5Paper」で、電子ペーパー名札を作ることができました。
電力なしで表示が維持される電子ペーパーの特性が活用でき、書きかえも簡単に行えるので、個人的にはとても便利に使えていてオススメです！
余談をいろいろ
ここからは、余談をいくつか書いてみます。
名札以外の用途
この記事では、名札として使う前提の内容で紹介しましたが、以下のように、例えば展示イベントでの情報提示用などで使うのにも便利です。応用はいろいろできると思いますので、ぜひご自身で何か作って試してみてください。
電力を供給をした状態でのデバイス単独での表示書きかえ
上で紹介した手順のブロックを使ったプログラム作成では、単純に画像の表示を行う処理だけ作りました。
これにさらにブロックを足して仕組みを追加すると、電力を供給をした状態でデバイス内蔵のボタンを操作することなどによって、後から表示内容を書きかえる仕組みを足すことも可能です。以下はボタンを押下して、表示する画像を書きかえる仕組みを作った時の動作の様子です。
しかし、個人的には記事内で紹介した手順での運用のほうが、シンプルで良いなと感じています。
M5Paper用のケースについて
自分の場合、この M5Paper で作った電子ペーパー名札を、以下のようにストラップをつけたケースに入れて使っています。
画像で出てくるストラップは、100円ショップで売っているものです。
また、ケースは自宅の 3Dプリンタで出力したものです。
ケースを 3Dプリンタで出力するのは、3Dモデルの準備や出力に手間がかかるので、既製品を使うやり方にしても良いです。例えば、M5Paper が入る既製品の透明なケースを使うやり方などがあります。
3Dプリンタを使ってケースを準備する場合、元になるデータが複数公開されているので、それが活用できます。その辺りの話は、また別の記事で紹介できたら、と考えています。