Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Cd931bc05e7cee46b9a950a63e47ba4c?s=128

you(@youtoy)

January 26, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

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. 終わり!