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

Transcript

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

   View Slide

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

   View Slide

3. はじめに
   祝100回 🎉
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. あとの手順はシンプル
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. 現物を見たい方は
    お声がけください！
    

    View Slide

22. 終わり！
    

    View Slide