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

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

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

開発素材の話へ

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

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

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

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

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

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

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

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

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

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

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

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

出展用（メーカーフェア用） の作品で使った素材

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

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

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

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

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

デバイス・アプリ・ サービス間を様々つなぐ （そのインプット／アウトプット実装も）

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

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

便利に使えたものをとにかく列挙！（その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

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

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

イベントの告知

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

終わり！