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
930
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / IoTLT vol.100
you(@youtoy)
PRO
June 18, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
31
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
340
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
180
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
300
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.3k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
89
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.4k
Other Decks in Technology
See All in Technology
AOAI Dev Day - Opening Session
yoshidashingo
2
440
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
エンジニア向け会社紹介資料
caddi_eng
14
220k
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
GitHub's CSS Performance
jonrohan
1026
450k
How to Think Like a Performance Engineer
csswizardry
4
590
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Navigating Team Friction
lara
181
13k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Infographics Made Easy
chrislema
238
18k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Scaling GitHub
holman
458
140k
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・記事などで紹介できればと)
現物を見たい方は お声がけください!
終わり!