Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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・記事などで紹介できればと)
Slide 21
Slide 21 text
現物を見たい方は お声がけください!
Slide 22
Slide 22 text
終わり!