イベントで大活躍の電子ペーパー名札〜M5PaperとUIFlow＋α〜 / IoTLT vol.100

by you（@youtoy）

Slide 1

Slide 1 text

2023年6月18日 (日) IoTLT vol.100 @#NT金沢豊田陽介（） @youtoy イベントで大活躍の電子ペーパー名札〜M5PaperとUIFlow＋α〜

Slide 2

Slide 2 text

自己紹介豊田陽介（） @youtoy ・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ・ Microsoft MVP（2021/10 から）プライベートでの活動・ガジェット大好き・ビジュアルプログラミング／JavaScript 　とガジェットの組み合わせをよくやって　いたりするかも好きなこと、他

Slide 3

Slide 3 text

はじめに祝100回 🎉

Slide 4

Slide 4 text

イベントに便利なアイテムを作った方法の紹介

Slide 5

Slide 5 text

各種イベントで大活躍してる電子ペーパー名札！

Slide 6

Slide 6 text

作り方はいくつかあると思うけれど自分は「M5Paper＋UIFlow＋α」で

Slide 7

Slide 7 text

詳細手順はQiitaの記事で公開済み！ ※ このスライドも公開します

Slide 8

Slide 8 text

過去の実例（一部抜粋）・昨年11月ごろから頻繁に利用（それまで割と M5Paper を眠らせてた...） Scratch関連イベントバージョン MFKyoto2023 バージョンカンファレスの参加者・スタッフバージョン 2種

Slide 9

Slide 9 text

表示を各イベント用に簡単に書きかえ可＆その後の表示には電力不要便利ポイント！

Slide 10

Slide 10 text

自分の場合の作り方とその際のポイント

Slide 11

Slide 11 text

一番のポイントは画像の準備準備に使ったのは・PowerPoint ・プレビュー ※ MacBook Pro の上で作業

Slide 12

Slide 12 text

他アプリでも大丈夫以下の処理ができれば OK ・PowerPoint代替：　　画像や文字の配置・プレビュー代替：　　解像度調整⇒ファイルサイズ調整

Slide 13

Slide 13 text

PowerPointを使った手順でのポイント ■ 縦長の場合：　9:16 の縦横比の　矩形内に配置画像書きだしでは 540x960 よりも大きな解像度で

Slide 14

Slide 14 text

プレビューを使った手順でのポイント① 540x960 ぴったりの解像度に変更ズレが出た場合は縦横比の固定を解除して微調整 ■ 解像度の調整

Slide 15

Slide 15 text

プレビューを使った手順でのポイント② ■ ファイルサイズの調整 JPEG の非可逆な圧縮でサイズを削減出力サイズを見つつ 45KB くらいに

Slide 16

Slide 16 text

あとの手順はシンプル

Slide 17

Slide 17 text

■ 画像の配置＋ファイルアップロード UIFlow上での作業①

Slide 18

Slide 18 text

■ ブロックのプログラム（表示用の処理） UIFlow上での作業② ブロック 2個

Slide 19

Slide 19 text

あとは何もしなくても表示が維持された状態に（電力不要）

Slide 20

Slide 20 text

名札ケースの話もあるけど時間の都合で省略（別途、LT・記事などで紹介できればと）