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 vo...
Search
you(@youtoy)
PRO
June 18, 2023
Technology
0
1.5k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / IoTLT vol.100
you(@youtoy)
PRO
June 18, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
860
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
61
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
720
shake-upを科学する
rsakata
7
900
Delegating the chores of authenticating users to Keycloak
ahus1
0
170
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
230
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
140
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
350
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
430
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
14
8k
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
730
TableauLangchainとは何か?
cielo1985
1
140
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
130
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Rails Girls Zürich Keynote
gr2m
95
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for Performance
lara
610
69k
Building Applications with DynamoDB
mza
95
6.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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・記事などで紹介できればと)
現物を見たい方は お声がけください!
終わり!