Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
公式版Scratchやtoio DoでIoT(ブラウザ上でのJavaScript実行で) / ...
Search
you(@youtoy)
PRO
June 15, 2022
Technology
0
1.6k
公式版Scratchやtoio DoでIoT(ブラウザ上でのJavaScript実行で) / ビジュアルプログラミングIoTLT vol.11
you(@youtoy)
PRO
June 15, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
4
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
120
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.7k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
240
Other Decks in Technology
See All in Technology
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
0
120
roppongirb_20250911
igaiga
1
240
Apache Spark もくもく会
taka_aki
0
130
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
1k
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
240
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Building Adaptive Systems
keathley
43
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Transcript
公式版Scratchやtoio DoでIoT (ブラウザ上でのJavaScript実行で) 2022年6月15日 (水) ビジュアルプログラミングIoTLT vol.11 豊田陽介( ) @youtoy
自己紹介 ビジュアルプログラミングや IoT、ロボットトイ関連など 豊田陽介( ) 普段は、某通信会社勤務 @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ(IT系以外も) ・
Microsoft MVP(2021/10 から) プライベートでの活動 ・ガジェット好き ・今月開催のメーカーフェア@仙台に出展予定 その他
余談:展示に向けた試作やハマっていること 展示イベントに向けた試作 (センサー+プロジェクション) カメラ画像からの画像認識と、 パーティクルの仕組み 両方ともプログラムはブラウザ上で動作(JavaScript)
今回の話題: 公式版Scratch や toio Do で IoT (Node.js による独自拡張ではなく)
というのをやろうと いろいろ試した内容
作ったものの例(おおまかな説明) ① toio の向き (姿勢)を変える ② toio の姿勢に よって toio
Do上 の表示が変わる ③ Scratch上の表 示が toio Do上の 表示と連動
作ったものの例(おおまかな説明) ① toio の向き (姿勢)を変える ② toio の姿勢に よって toio
Do上 の表示が変わる ③ Scratch上の表 示が toio Do上の 表示と連動 ネットワーク上での 通信を介し、Scratch と toio Do が連動
デモ:公式版Scratchとtoio Doを連動させる
ネットワーク通信を用いた連動のポイント toio ブラウザで開いた toio Do(公式) BLE WebSocket 仲介 サーバー ブラウザで開いた
Scratch(公式) WebSocket
ブラウザのコンソールでのJavaScript実行 toio ブラウザで開いた toio Do(公式) BLE WebSocket 仲介 サーバー ブラウザで開いた
Scratch(公式) WebSocket HTML で表示された数値の取得 & 取得した数値の外部送信 外部から数値データを受信 & その数値に応じたキーイベント発生
なぜこのような事を?
1)公式版Scratch の作品で 物理連動などをさせてみたい (公式拡張で実現できなそうな内容の)
自分以外の人が作った Scratch作品に、外部機器・ サービス連動の追加を気軽に テストできると面白そう?
ゲーム作品でゴールしたら 複数のLEDテープが派手に 光ったりとか?
公式版での実行にこだわらなければ オープンソースの Scratch で独自拡張の開発をする形でも
公式版での実行にこだわらなければ オープンソースの Scratch で独自拡張の開発をする形でも MQTT を扱える拡張を作った話 @2年前の IoTLT
これをやった最大の理由...
2)思いついたから やってみたかった
思いつきの元になったもの Joy-Con・micro:bit をプレゼンリモコンにする話の記事 「【JavaScript】スイッチのJoy-Conをプレゼンリモコンにするワンライナー - Qiita」より
思いつきの元になったもの Joy-Con・micro:bit をプレゼンリモコンにする話の記事 「【JavaScript】スイッチのJoy-Conをプレゼンリモコンにするワンライナー - Qiita」より ブラウザの開発者ツールの コンソールでプログラム実行 というやり方の話が
・Scratch のサイトでも活用 できるだろうか? ・実行できるプログラムの 制約が何かあるか?
必要そうな最小要件などを考えてみる JavaScript で情報取得 可能な HTML の要素 がページ上にあれば JavaScript で発生さ せたキーイベントが
そのままキー入力の 代替になれば MQTT のライブラリ を読み込むか、標準 で扱える WebSocket が動けば Scratch上の情報を 読み取る Scratch上に影響を 及ぼす ネットワークを介 したやりとり
あとは試すのみ!
このあたりはサクッと ・キーイベント利用 ・通信をとりあえず WebSocket で
残るは情報取得
ブラウザの開発者ツールで探る 描画周りは Canvas要素内 とりあえず数字が出ていて 変化する部分を見てみたり
最終的には 変数の中身を描画領域に 表示させるこれが「div」! 「中を見る」・「プロジェクトページ」のどちらでも出ている
詳細はQiitaの記事に #Scratch 3.0 のキー入力イベントをブラウザのコンソール(開発者ツール)の JavaScript からランダム に繰り返し発生させてみる #Scratch 3.0(公式)などで独自拡張機能を使わない外部との通信【概要編】(ブラウザの開発者ツール のコンソール、JavaScript、WebSocket
が関連、 #toio でも利用可) Scratch 3.0(公式)などで独自拡張機能を使わない外部との通信【ソースコード編】(ブラウザの開発者 ツールのコンソール、JavaScript、WebSocket が関連)
独自拡張版のScratchでの事例 PC と有線接続して Groveモジュールなど が扱えるデバイス用の拡張に適用 ⇒ 「LINEアプリの操作」をネット経由で Scratch に受信させる流れ
活用法の模索はこれから!
【とあるイベントの話】 場所は仙台ですが...
6/25(土)@産業見本市会館 サンフェスタ toio のユーザーコミュニティで出展
終わり!