Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ガジェット・アプリ・インタフェースなどをつなぐあれこれ / #ヒーローズリーグ 2022 開発素材LT ~ユーザ編~

ガジェット・アプリ・インタフェースなどをつなぐあれこれ / #ヒーローズリーグ 2022 開発素材LT ~ユーザ編~

you(@youtoy)

October 12, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. ガジェット・アプリ・インタフェースなどを
    つなぐあれこれ
    2022年10月12日 (水)
    #ヒーローズリーグ 2022 開発素材LT ~ユーザ編~ @オンライン
    豊田陽介( )
    @youtoy

    View full-size slide

  2. 自己紹介
    豊田陽介( )
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・子ども向けの活動いろいろ
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    ・ガジェット大好き
    ・今年、本2冊出したり、メーカーフェア出展3回
    好きなことなど
    3月発売
    (共著)
    7月発売
    (単著)

    View full-size slide

  3. ヒーローズ・リーグ関連の話
    「VUI賞」へのご応募を是非! (応募側)
    今年は、現在 3作品

    View full-size slide

  4. 開発素材の話へ

    View full-size slide

  5. スライド公開予定のため
    発表中は文字を追わなくても
    大丈夫です

    View full-size slide

  6. 自分が活用している
    素材の紹介

    View full-size slide

  7. アプリ・デバイス・サービス間
    をつなぐ試作で使うもの
    (とにかくたくさん)

    View full-size slide

  8. 人の動きと
    デジタルの描画をつなぐ

    View full-size slide

  9. 自分が応募作品で
    使っているもの

    View full-size slide

  10. 利用例:ブラウザ上で「画像認識」と「描画」
    光学迷彩・透明マント
    のような表現

    View full-size slide

  11. 利用素材と処理のおおまかな流れ
    処理の流れと素材の利用箇所
    指の位置・
    状態を認識
    パーティクルを
    指先から発生、
    画像合成
    両手を認識
    背景取得
    映像の一部を
    背景画像に
    開発素材
    ・Googleが提供する機械学習の
     仕組みのJavaScript版の一部
    ・高速・高精度な手の認識
    ・JavaScript の描画ライブラリ
    ・Canvas API が扱いやすくなる
    ・便利な関連ライブラリも多数
    ・2Dだけでなく3Dも

    View full-size slide

  12. MediaPipe JavaScript版で扱えるもの
    手を対象としたもの以外の一部を紹介

    View full-size slide

  13. 100円ショップのアイテムと
    ガジェットを手軽につなぐ

    View full-size slide

  14. ・toio用ビジュアルプログラミング環境
     (Scratch 3.0ベース)
    ・上記のマットやセンサーなど toioの
     便利な機能を扱える
    応募作品で用いた開発素材(続き)
    ・細やかな動きができるロボットトイ
    ・便利なセンサーなども内蔵
    ・BLEが扱えれば開発言語を選ばず
    ・マット上でのtoioの絶対位置座標や
     向きを扱える
    ・位置座標指定でtoioを動かせて便利

    View full-size slide

  15. 動画はこちらをご覧ください

    View full-size slide

  16. 音や声と
    ガジェットをつなぐ

    View full-size slide

  17. 出展用(メーカーフェア用)
    の作品で使った素材

    View full-size slide

  18. ● ブラウザで Bluetooth を扱える API
    ● センサー・デバイスとブラウザとの
      間で近接無線通信
    ● 対応は Chrome系のみ
    TMMF2020・MFTokyo2020出展で利用
    ● Google提供のブラウザ上で簡単に
      機械学習が扱える仕組み
    ● 画像・音・ポーズの 3種を扱える
    ● 作成した機械学習モデルは複数の
     形式で エクスポート可能
     ⇒ 扱える言語・環境がたくさん
    Tsukuba Mini Maker Faire 2020
    Maker Faire
    Tokyo 2020

    View full-size slide

  19. 動画はこちらをご覧ください

    View full-size slide

  20. デバイス同士をつなぎつつ
    簡単にIoT化
    ガジェットと電子工作部品を
    つなぐ

    View full-size slide

  21. コンテスト応募で
    使った素材

    View full-size slide

  22. Spresense・M5Stackのコンテストで活用
    ● デバイス・接続部品の制御をネット越しに
    ● パーツ・作例に関する公式情報がたくさん
    ● クラウドベースの処理のトリガーを手軽に
      扱える
    ● 本体は基本的に外装がついている
    ● デバイスの種類が豊富
    ● 簡単に扱えるセンサーなどの公式のパーツ
      が豊富
    ● Wi-Fi・Bluetoothが使えてIoT・近接通信も!
    ● M5Stack用のビジュアルプログラミング環境
    ● 開発環境はブラウザで簡単アクセス
    ● 公式パーツを簡単に扱える
    ● HTTPリクエストや MQTT等のネットワーク系
      処理や Bluetooth も扱える

    View full-size slide

  23. デバイス・アプリ・
    サービス間を様々つなぐ
    (そのインプット/アウトプット実装も)

    View full-size slide

  24. 開発素材・技術をいろいろ

    View full-size slide

  25. 便利に使えたものをとにかく列挙!(その1)
    ●ブラウザでガジェットと有線通信(シリアル通信) ⇒ Web Serial API
    ●電子工作やセンサー利用を安価で手軽に ⇒ micro:bit
    ●micro:bit の様々な機能(電子工作や通信も)をブラウザで開発 ⇒ MakeCode
    ●ブラウザ上でのビジュアルプログラミングで機械学習やデバイス制御も ⇒ Stretch3
    ●フロー型のビジュアルプログラミングでサーバーサイドまでも(デバイス・サービス間連携
     や通信系機能などクライアントサイドもいろいろ) ⇒ Node-RED/enebular
    ●フロー型のビジュアルプログラミングで AIアシスタント開発などを ⇒ Voiceflow
    ●ブラウザで音声認識 ⇒ Web Speech API の SpeechRecognition
    ●ブラウザで音声合成(TTS) ⇒ Web Speech API の SpeechSynthesis

    View full-size slide

  26. 便利に使えたものをとにかく列挙!(その2)
    ●コーディングなしに様々なサービスをつなぐ ⇒ IFTTT
    ●ブラウザでの TensorFlow.js による機械学習の処理を使いやすく ⇒ ml5.js
    ●IoTな通信(MQTT)の仲介役(MQTTブローカー)が使えて無料枠あり、HTTPリクエストも
     混在させられて、ダッシュボード機能もあったり ⇒ Beebotte
    ●IoTな通信(MQTT)の仲介役(MQTTブローカー)が使えて無料枠あり、HTTPリクエストも
     混在させられて、デスクトップ用アプリもある ⇒ shiftr
    ●JavaScript で MQTT の ブローカーもクライアント側も、ブラウザでも Node.js でも ⇒ MQTT.js
    ●JavaScriptで物理演算 ⇒ Matter.js
    ●JavaScriptでモーショントゥイーンアニメーション ⇒ anime.js
    ●JavaScript でライブラリ不要の HTTPリクエスト ⇒ Fetch API
    ●Node.js で WebSocketサーバーをたてるときの有名どころの 1つ ⇒ ws

    View full-size slide

  27. 便利に使えたものをとにかく列挙!(その3)
    ●ブラウザで音を扱う(Web Audio API が使いやすくなる)⇒ Tone.js/howler.js
    ●p5.js を使いつつブラウザで音を扱う⇒ p5.sound
    ●スマホアプリに通知をお手軽に ⇒ LINE Notify
    ●スマホアプリで使える Bot 開発に ⇒ LINE Messaging API
    ●ブロックベースのビジュアルプログラミングでスマホアプリ開発(豊富なスマホ内蔵の各種機能
     も扱える) ⇒ MIT App Inventor
    ●コマンドベースで動画・音素材など幅広いデータをあれこれ処理 ⇒ ffmpeg
    ●(素材というか仕組みという感じだけど)電子工作を簡単化してくれる ⇒ Grove

    View full-size slide

  28. 今日紹介した素材+αを使った例の動画
    ひたすら「試してみた!動画」をアップしてる場所
    2022年の素材やそれに類するものを使った動画だけで、200本くらいある
    ちょっとしたお試しから、
    作品登録用のものまで

    View full-size slide

  29. イベントの告知

    View full-size slide

  30. 「ガジェット」に興味がある方へ!
    「ガジェット・enebular」に興味がある方
    へ!
    https://enebular.connpass.com/event/250779/
    10/27(木)
    オンライン開催
    enebular developersコラボのイベント

    View full-size slide

  31. 終わり!

    View full-size slide