JavaScript＋ビジュアルプログラミング＋ガジェット＝？ / エンジニアの自由研究発表会vol.5

Slide 1

Slide 1 text

JavaScript＋ビジュアルプログラミング＋ガジェット＝？ 2022年1月26日 (水) エンジニアの自由研究発表会vol.5 @オンライン豊田陽介（） @youtoy

Slide 2

Slide 2 text

自己紹介ビジュアルプログラミングや IoT関連、その他にも豊田陽介（）普段は、某通信会社勤務（＠埼玉） ※ 仕事は開発系ではなかったり @youtoy ・IT系イベント主催、登壇や運営なども・子ども向けの活動いろいろ（IT系以外も）・最近は技術雑誌での連載や、技術書出版も・Microsoft MVP（2021/10 から）プライベートでの活動・ガジェット好き・面白そうなもの・新しいものを色々試すのも好きその他自宅にたくさん ↓直近のイベント　は 2/24 に

Slide 3

Slide 3 text

タイトルにも出している自分がよく使う技術 ■ ビジュアルプログラミング ■ JavaScript ■ ガジェット

Slide 4

Slide 4 text

これらを使って自由研究で作ったプロトタイプ

Slide 5

Slide 5 text

バーチャルとリアルをつなぐインタラクション

Slide 6

Slide 6 text

自由研究で作ったプロトタイプ PC のカメラでとらえた指の動きが LEDテープの光と連動ブラウザで取得したカメラ映像フルカラーLED テープ機械学習による画像内の手の認識

Slide 7

Slide 7 text

プロトタイプが実際に動いている様子ちなみに大晦日ハッカソンというイベントで作ったもの

Slide 8

Slide 8 text

よく使っている技術を組み合わせて短時間で作成

Slide 9

Slide 9 text

キーワードについてそれぞれの話を ■ ビジュアルプログラミング ■ JavaScript ■ ガジェット

Slide 10

Slide 10 text

ビジュアルプログラミングを使う背景・開発環境の準備が簡単なものが多い　⇒ ブラウザさえあれば開発環境が準備できる、という　　レベル感のものがいろいろ・便利な拡張機能が用意されているものも　⇒ 複雑な処理を隠蔽してくれる（個人的に）プロトタイプをサクッと作るのに便利

Slide 11

Slide 11 text

【具体的なとある事例】便利な拡張機能ボタン押下でフルカラーLEDテープ（LED 30個）を虹色に光らせる Microsoft MakeCode for micro:bit で neopixel用の拡張ブロックを利用たった 6つのブロック

Slide 12

Slide 12 text

便利な拡張機能を使ってこんな試作ダイソーのおもちゃの刀に LEDテープを仕込むとこのようなものが！

Slide 13

Slide 13 text

普段から面白そうと思うことに色々手を出してみる

Slide 14

Slide 14 text

新しい学びがいろいろ得られたりも

Slide 15

Slide 15 text

ビジュアルプログラミングでできること・サーバーサイドの処理（Node-RED等）　・HTTPサーバー、MQTTブローカー、WebSocketサーバー、など・ネット経由での他サービスとの連携（UIFlow、Node-RED等）　・HTTPリクエスト（GET、POST）・デバイス間通信（UIFlow、Node-RED、他）　・シリアル通信、BLE通信、など・AIアシスタント関連開発（Voiceﬂow等）・スマホアプリ開発（MIT App Inventor）様々な処理・開発を扱えるものがあります

Slide 16

Slide 16 text

適材適所で・込み入った処理が扱い辛い（作れるけどテキストの　プログラミングで書いたほうが楽な場合も）・拡張機能を使っても対応可能な範囲が限られることももちろん良いことずくめではなく得手不得手みたいな話は、様々な開発環境・言語でも同じことが起ある部分ではありますが...

Slide 17

Slide 17 text

次のキーワードへ

Slide 18

Slide 18 text

JavaScript（ブラウザ上）でできること・デバイスとの直接通信　・Web Bluetooth API、Web Serial API、など・IoT等にも使われるリアルタイム通信　・WebSocket や MQTT（※クライアントサイド）・機械学習（学習と推論）　・Tensorﬂow.js やそれを使った仕組み、など　（画像、音を対象にした学習、それを用いた推論、　　自然言語処理系の学習や推論など）・2D・3Dの描画処理・画面キャプチャ系の処理ブラウザ上で行える処理の例

Slide 19

Slide 19 text

つい数日前に作ってみたものブラウザで機械学習と画面キャプチャ関連処理

Slide 20

Slide 20 text

・PC にブラウザが入っていれば OK （先ほどのものをあれこれ扱うなら Chrome がオススメ）実行環境の準備が簡単できることとメリット・テキストベースのファイルを渡して試してもらえる・自分が Webサイトで公開すれば URL を伝えるだけで OK 試してもらうのが簡単

Slide 21

Slide 21 text

ガジェットについてさらっと・開発環境は自分が得意なもの、慣れてない人にも扱いやすい　ものに対応していると便利・通信機能の有無は様々なので必要なものがあるか要確認　（無線機能なし、Bluetoothのみ、Wi-Fi＋Bluetooth）手軽に使うならセンサー等内蔵のものがオススメ対応している開発環境や通信機能を要確認・電子工作の手間を省いてお試しをサクッと　（もしくは接続の手間が少ない Grove を活用したり）

Slide 22

Slide 22 text

異なる技術を組み合わせたプロトタイピングを行いやすくする話

Slide 23

Slide 23 text

過去事例：役割分担＋間をつなぐ MQTT 【C言語】二酸化炭素濃度取得、通信処理【JavaScript】二酸化炭素濃度を使った処理や各通知系全般の通信処理 MQTT HTTPリクエスト【ビジュアルプログラミング】通信処理、音・LEDの制御系処理二酸化炭素濃度情報の通知

Slide 24

Slide 24 text

どれか1つだけでもできることが様々 ■ ビジュアルプログラミング ■ JavaScript ■ ガジェット

Slide 25

Slide 25 text

全部いっぺんにではなくどれか気になったものからというやり方でも

Slide 26

Slide 26 text

終わり！