Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ガジェット・アプリ・インタフェースなどをつなぐあれこれ / #ヒーローズリーグ 2022 開発素材LT ~ユーザ編~
you(@youtoy)
October 12, 2022
Technology
0
85
ガジェット・アプリ・インタフェースなどをつなぐあれこれ / #ヒーローズリーグ 2022 開発素材LT ~ユーザ編~
you(@youtoy)
October 12, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
モバイルモーションキャプチャーデバイス「mocopi」を軽く試してみた / IoTLT vol.95 (新年会IoTLTラジオ)
you
0
97
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
240
UIFlowの2.0がやってきた! / ビジュアルプログラミングIoTLT vol.13
you
0
260
2022年のメーカーフェアに出展した作品を振り返ってみる / スイッチサイエンス Maker Awards 2022授賞式&LT大会
you
0
66
p5.jsを使ったクリエイティブコーディングに機械学習やデバイス連携などを組み合わせている話 / Creative Coding作品の周辺を語る会 03
you
0
81
個人で手軽にブラウザやビジュアルプログラミングでIoT /【イマドキのIoTを支える技術】/ TechFeed Experts Night#10
you
2
57
ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022「MAID」部門最終選考会
you
1
38
第2回ナブかつLABキャリアトーク / 豊田陽介
you
0
11
個人的に使いやすいと思う/好きなガジェットをいくつか紹介してみる / トヨタ ガジェット研究所
you
1
92
Other Decks in Technology
See All in Technology
初めてのデータ移行プロジェクトから得た学び
tjmtmmnk
0
390
イ良い日ンマを作る(USBストレージ容量偽装の手法) / USB Storage Capacity Faking Techniques
shutingrz
0
520
MarvelClient Upgrade 64bit クライアントへの自動アップグレード設定
mitsuru_katoh
0
180
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
280
MoT/コネヒト/Kanmu が語るプロダクト開発xデータ分析 - 分析から機械学習システムの開発まで一人で複数ロールを担う大変さ
masatakashiwagi
3
770
NGINXENG JP#2 - 3-NGINX Plus・プロダクトのアップデート
hiropo20
0
250
Cloudflare Workersで動くOG画像生成器
aiji42
1
500
Periodic Multi-Agent Path Planning
hziwara
0
120
Google Cloud Workflows: API automation, patterns and best practices
glaforge
0
100
Deep Neural Networkの共同学習
hf149
0
330
Stripe / Okta Customer Identity Cloud(旧Auth0) の採用に至った理由 〜モリサワの SaaS 戦略〜
tomuro
0
130
SPA・SSGでSSRのようなOGP対応!
simo123
2
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
213
7.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Web development in the modern age
philhawksworth
197
9.6k
Ruby is Unlike a Banana
tanoku
93
9.5k
Building Applications with DynamoDB
mza
85
5k
What's new in Ruby 2.0
geeforr
336
30k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
How to name files
jennybc
47
73k
The Language of Interfaces
destraynor
149
21k
Docker and Python
trallard
30
1.9k
Transcript
ガジェット・アプリ・インタフェースなどを つなぐあれこれ 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コラボのイベント
終わり!