$30 off During Our Annual Pro Sale. View Details »

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

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

you(@youtoy)
PRO

June 18, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

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