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. 自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)

    プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著)
  2. 利用素材と処理のおおまかな流れ 処理の流れと素材の利用箇所 指の位置・ 状態を認識 パーティクルを 指先から発生、 画像合成 両手を認識 背景取得 映像の一部を

    背景画像に 開発素材 ・Googleが提供する機械学習の  仕組みのJavaScript版の一部 ・高速・高精度な手の認識 ・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも
  3. • ブラウザで Bluetooth を扱える API • センサー・デバイスとブラウザとの   間で近接無線通信 •

    対応は Chrome系のみ TMMF2020・MFTokyo2020出展で利用 • Google提供のブラウザ上で簡単に   機械学習が扱える仕組み • 画像・音・ポーズの 3種を扱える • 作成した機械学習モデルは複数の  形式で エクスポート可能  ⇒ 扱える言語・環境がたくさん Tsukuba Mini Maker Faire 2020 Maker Faire Tokyo 2020
  4. Spresense・M5Stackのコンテストで活用 • デバイス・接続部品の制御をネット越しに • パーツ・作例に関する公式情報がたくさん • クラウドベースの処理のトリガーを手軽に   扱える •

    本体は基本的に外装がついている • デバイスの種類が豊富 • 簡単に扱えるセンサーなどの公式のパーツ   が豊富 • Wi-Fi・Bluetoothが使えてIoT・近接通信も! • M5Stack用のビジュアルプログラミング環境 • 開発環境はブラウザで簡単アクセス • 公式パーツを簡単に扱える • HTTPリクエストや MQTT等のネットワーク系   処理や Bluetooth も扱える
  5. 便利に使えたものをとにかく列挙!(その1) •ブラウザでガジェットと有線通信(シリアル通信) ⇒ Web Serial API •電子工作やセンサー利用を安価で手軽に ⇒ micro:bit •micro:bit

    の様々な機能(電子工作や通信も)をブラウザで開発 ⇒ MakeCode •ブラウザ上でのビジュアルプログラミングで機械学習やデバイス制御も ⇒ Stretch3 •フロー型のビジュアルプログラミングでサーバーサイドまでも(デバイス・サービス間連携  や通信系機能などクライアントサイドもいろいろ) ⇒ Node-RED/enebular •フロー型のビジュアルプログラミングで AIアシスタント開発などを ⇒ Voiceflow •ブラウザで音声認識 ⇒ Web Speech API の SpeechRecognition •ブラウザで音声合成(TTS) ⇒ Web Speech API の SpeechSynthesis
  6. 便利に使えたものをとにかく列挙!(その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
  7. 便利に使えたものをとにかく列挙!(その3) •ブラウザで音を扱う(Web Audio API が使いやすくなる)⇒ Tone.js/howler.js •p5.js を使いつつブラウザで音を扱う⇒ p5.sound •スマホアプリに通知をお手軽に

    ⇒ LINE Notify •スマホアプリで使える Bot 開発に ⇒ LINE Messaging API •ブロックベースのビジュアルプログラミングでスマホアプリ開発(豊富なスマホ内蔵の各種機能  も扱える) ⇒ MIT App Inventor •コマンドベースで動画・音素材など幅広いデータをあれこれ処理 ⇒ ffmpeg •(素材というか仕組みという感じだけど)電子工作を簡単化してくれる ⇒ Grove