Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / IoTLT vol.100
Search
you(@youtoy)
PRO
June 18, 2023
Technology
0
760
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / IoTLT vol.100
you(@youtoy)
PRO
June 18, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
120
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
170
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2.1k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
53
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
96
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
開発パフォーマンスを最大化するための開発体制
ham0215
2
460
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
MapLibreとAmazon Location Service
dayjournal
1
160
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
370
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
3
370
Featured
See All Featured
For a Future-Friendly Web
brad_frost
172
9k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Infographics Made Easy
chrislema
238
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Product Roadmaps are Hard
iamctodd
44
9.7k
Faster Mobile Websites
deanohume
299
30k
Statistics for Hackers
jakevdp
789
220k
Designing with Data
zakiwarfel
96
4.8k
Atom: Resistance is Futile
akmur
259
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Transcript
2023年6月18日 (日) IoTLT vol.100 @#NT金沢 豊田陽介( ) @youtoy イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・ビジュアルプログラミング/JavaScript とガジェットの組み合わせをよくやって いたりするかも 好きなこと、他
はじめに 祝100回 🎉
イベントに便利なアイテム を作った方法の紹介
各種イベントで大活躍してる 電子ペーパー名札!
作り方はいくつかあると思うけれど 自分は「M5Paper+UIFlow+α」で
詳細手順はQiitaの記事で公開済み! ※ このスライドも公開します
過去の実例(一部抜粋) ・昨年11月ごろから頻繁に利用 (それまで割と M5Paper を眠らせてた...) Scratch関連イベント バージョン MFKyoto2023 バージョン カンファレスの参加者・
スタッフバージョン 2種
表示を各イベント用に簡単に書きかえ可 & その後の表示には電力不要 便利ポイント!
自分の場合の作り方と その際のポイント
一番のポイントは画像の準備 準備に使ったのは ・PowerPoint ・プレビュー ※ MacBook Pro の上で作業
他アプリでも大丈夫 以下の処理ができれば OK ・PowerPoint代替: 画像や文字の配置 ・プレビュー代替: 解像度調整⇒ファイルサイズ調整
PowerPointを使った手順でのポイント ▪ 縦長の場合: 9:16 の縦横比の 矩形内に配置 画像書きだしでは 540x960 よりも 大きな解像度で
プレビューを使った手順でのポイント① 540x960 ぴったり の解像度に変更 ズレが出た場合は 縦横比の固定を 解除して微調整 ▪ 解像度の調整
プレビューを使った手順でのポイント② ▪ ファイルサイズの調整 JPEG の非可逆な圧縮 でサイズを削減 出力サイズを見つつ 45KB くらいに
あとの手順はシンプル
▪ 画像の配置+ファイルアップロード UIFlow上での作業①
▪ ブロックのプログラム(表示用の処理) UIFlow上での作業② ブロック 2個
あとは何もしなくても 表示が維持された状態に (電力不要)
名札ケースの話もあるけど 時間の都合で省略 (別途、LT・記事などで紹介できればと)
現物を見たい方は お声がけください!
終わり!