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

Transcript

1. JavaScript＋ビジュアルプログラミング ＋ガジェット＝？ 2022年1月26日 (水) エンジニアの自由研究発表会vol.5 @オンライン 豊田陽介（ ） @youtoy
2. 自己紹介 ビジュアルプログラミング や IoT関連、その他にも 豊田陽介（ ） 普段は、某通信会社勤務（＠埼玉） ※ 仕事は開発系ではなかったり @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ（IT系以外も） ・最近は技術雑誌での連載や、技術書出版も ・Microsoft MVP（2021/10 から） プライベートでの活動 ・ガジェット好き ・面白そうなもの・新しいものを色々試すのも好き その他 自宅にたくさん ↓直近のイベント 　は 2/24 に
3. タイトルにも出している 自分がよく使う技術 ▪ ビジュアルプログラミング ▪ JavaScript ▪ ガジェット
4. これらを使って自由研究で 作ったプロトタイプ
5. バーチャルとリアルを つなぐインタラクション
6. 自由研究で作ったプロトタイプ PC のカメラでとらえた指の動きが LEDテープの光と連動 ブラウザで取得 したカメラ映像 フルカラーLED テープ 機械学習による 画像内の手の認識
7. プロトタイプが実際に動いている様子 ちなみに大晦日ハッカソンというイベントで作ったもの
8. よく使っている技術 を組み合わせて 短時間で作成
9. キーワードについて それぞれの話を ▪ ビジュアルプログラミング ▪ JavaScript ▪ ガジェット
10. ビジュアルプログラミングを使う背景 ・開発環境の準備が簡単なものが多い 　⇒ ブラウザさえあれば開発環境が準備できる、という 　　 レベル感のものがいろいろ ・便利な拡張機能が用意されているものも 　⇒ 複雑な処理を隠蔽してくれる （個人的に）プロトタイプを サクッと作るのに便利
11. 【具体的なとある事例】便利な拡張機能 ボタン押下でフルカラーLEDテープ （LED 30個）を虹色に光らせる Microsoft MakeCode for micro:bit で neopixel用の 拡張ブロックを利用 たった 6つのブロック
12. 便利な拡張機能を使ってこんな試作 ダイソーのおもちゃの刀に LEDテープを仕込むと このようなものが！
13. 普段から面白そうと思う ことに色々手を出してみる
14. 新しい学びが いろいろ得られたりも
15. ビジュアルプログラミングでできること ・サーバーサイドの処理（Node-RED等） 　・HTTPサーバー、MQTTブローカー、WebSocketサーバー、など ・ネット経由での他サービスとの連携（UIFlow、Node-RED等） 　・HTTPリクエスト（GET、POST） ・デバイス間通信（UIFlow、Node-RED、他） 　・シリアル通信、BLE通信、など ・AIアシスタント関連開発（Voiceflow等） ・スマホアプリ開発（MIT App Inventor） 様々な処理・開発を扱えるものがあります
16. 適材適所で ・込み入った処理が扱い辛い（作れるけどテキストの 　プログラミングで書いたほうが楽な場合も） ・拡張機能を使っても対応可能な範囲が限られることも もちろん良いことずくめではなく 得手不得手みたいな話は、様々な開発環境・言語でも 同じことが起ある部分ではありますが...
17. 次のキーワードへ
18. JavaScript（ブラウザ上）でできること ・デバイスとの直接通信 　・Web Bluetooth API、Web Serial API、など ・IoT等にも使われるリアルタイム通信 　・WebSocket や MQTT（※クライアントサイド） ・機械学習（学習と推論） 　・Tensorflow.js やそれを使った仕組み、など 　 （画像、音を対象にした学習、それを用いた推論、 　　 自然言語処理系の学習や推論など） ・2D・3Dの描画処理 ・画面キャプチャ系の処理 ブラウザ上で 行える処理の例
19. つい数日前に作ってみたもの ブラウザで機械学習と画面キャプチャ関連処理
20. ・PC にブラウザが入っていれば OK （先ほどのものをあれこれ扱うなら Chrome がオススメ） 実行環境の準備が簡単 できることとメリット ・テキストベースのファイルを渡して試してもらえる ・自分が Webサイトで公開すれば URL を伝えるだけで OK 試してもらうのが簡単
21. ガジェットについてさらっと ・開発環境は自分が得意なもの、慣れてない人にも扱いやすい 　ものに対応していると便利 ・通信機能の有無は様々なので必要なものがあるか要確認 　（無線機能なし、Bluetoothのみ、Wi-Fi＋Bluetooth） 手軽に使うならセンサー等内蔵のものがオススメ 対応している開発環境や通信機能を要確認 ・電子工作の手間を省いてお試しをサクッと 　（もしくは接続の手間が少ない Grove を活用したり）
22. 異なる技術を組み合わせた プロトタイピングを 行いやすくする話
23. 過去事例：役割分担＋間をつなぐ MQTT 【C言語】 二酸化炭素濃度 取得、通信処理 【JavaScript】 二酸化炭素濃度を使った 処理や各通知系全般の 通信処理 MQTT HTTPリクエスト 【ビジュアル プログラミング】 通信処理、音・LEDの 制御系処理 二酸化炭素濃度 情報の通知
24. どれか1つだけでも できることが様々 ▪ ビジュアルプログラミング ▪ JavaScript ▪ ガジェット
25. 全部いっぺんにではなく どれか気になったものから というやり方でも
26. 終わり！