ハードウェアを動かすTypeScriptの世界

TypeScriptはIoTの領域でも使われており、様々なハードウェアと連動させて動かすことができます。 Webブラウザ経由でBluetoothを制御したり、スマートフォンの加速度センサで動きをセンシングしたりなど、ディスプレイの外側の現実世界と連動させることもやりやすい時代になりました。 選択肢が増えた分、「やりたいこと」に対して「どれを使うのが適切なのか」「将来的な拡張性があるのはどれか」などの選定が難しくなってきています。

本発表では、みんな大好きラズベリーパイから、Microsoftが出したDeviceScriptや、組み込みマイコンをどうやってTypeScriptで制御する際の選択肢など、IoT/ハードウェアにおけるTypeScriptの選択肢とそれぞれの違い、および実際に使う際に気をつけないといけない点などについてお話いたします。

Transcript

1. ハードウェアを動かす TypeScriptの世界
2. はじめに 2 スライド 98枚あります 1スライドあたり18秒 スライドは事前公開済みです
3. セッション概要 3 TypeScriptならフロントエンドも バックエンドもインフラも！ ついでにハードウェアも TypeScriptでやろう！
4. 本スライドのゴール 4 TypeScriptでハードウェアを動かすとき、 • ハードウェアとはどんなものか • 作る際にどんな選択肢があるのか • どの選択肢がよさそうなのか をなんとなくイメージできるようになる
5. 5 木戸康平 きど こうへい https://qiita.com/wicket https://github.com/9wick https://speakerdeck.com/9wick https://twitter.com/9wick https://9wick.com ハードウェアとソフトウェアの世界を いったりきたりしてます。 obniz（オブナイズ）というIoTツールを 開発しています
6. 6 ハードウェアってなに？
7. 7 ハードウェアってなに？ ソフトウェア vs ハードウェア ではない キーボードもマウスも物理的に存在する
8. 8 ハードウェアってなに？ ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解）
9. 9 ハードウェアってなに？ ソフトっぽい ハードっぽい ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解）
10. 10 ハードウェアってなに？ ソフトっぽい ハードっぽい ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解）
11. 11 ハードウェアってなに？ ソフトっぽい ハードっぽい ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解）
12. 12 ハードウェアってなに？ ソフトっぽい ハードっぽい ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解）
13. 13 ハードウェアってなに？ ソフトっぽい ハードっぽい ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解）
14. 14 ハードウェアってなに？ ソフトっぽい ハードっぽい ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解）
15. 15 ハードウェアってなに？ ソフトっぽい ハードっぽい ハードウェアプログラミングの文脈では 「入出力が定型化されていないもの」（個人見解） 昔はハード寄りだった 一般普及されてソフト寄りに
16. 16 ハードウェアができると 何がいいの？
17. 17 圧倒的自由度🙌
18. 18 ハードウェアができると何がいいの？
19. 19 ハードウェアができると何がいいの？ これが作れるようになる！
20. 20 ハードウェアができると何がいいの？ 定型化された形状
21. 21 ハードウェアができると何がいいの？ 他人が作った ハードを選ぶ 定型化された形状
22. 22 ハードウェアができると何がいいの？ 自分で形を決める 他人が作った ハードを選ぶ 定型化された形状
23. 23 自由だからこそ より良いものを目指せる
24. 24 ハードウェアができると何がいいの？ 結局、我々は現実のものに慣れている 紙の書き心地を再現するタブレット 他、マテリアルデザイン/タンジブル等も 紙に書くとデジタル化されるペン 360life.shinyusha.co.jp/articles/-/3465 より https://nuwapen.com/products/nuwa-pen より
25. 25 ハードウェアができると何がいいの？ ソフトとハードでは受ける印象が違う https://aibo.sony.jp/store/ より https://lovot.life/ より
26. 26 ハードウェアができると何がいいの？ できる領域もちがう
27. 27 ハードウェアで 世界が広がる！ 👍
28. 28 でも どうやって作ったらいいの？
29. 定型化されてない ムズカシイ🫠 ＝
30. 30 どうやって作ったらいいの？ 定型化されていないということは難易度が高い 同じことをやろうと思っても複数のやり方があり 技術選定が難しい
31. 31 たとえば
32. 32 この会場でセッションの 聴講人数を計測したい！ あなたならどうしますか
33. 33 人数カウント方法 カメラで 画像分析
34. 34 人数カウント方法 カメラで 画像分析 駅の 改札方式
35. 35 人数カウント方法 カメラで 画像分析 駅の 改札方式 椅子で 体重を測る
36. 36 人数カウント方法 カメラで 画像分析 駅の 改札方式 椅子で 体重を測る 無線タグを配り 電波を見る
37. 37 人数カウント方法 カメラで 画像分析 駅の 改札方式 椅子で 体重を測る 無線タグを配り 電波を見る どれも「技術的には」可能そう
38. 38 人数カウント方法 カメラで 画像分析 駅の 改札方式 椅子で 体重を測る 無線タグを配り 電波を見る ボツ案：CO2濃度の変化を測る どれも「技術的には」可能そう
39. 39 精度ちゃんと出るかな？
40. 40 人数カウント方法 精度 カメラ画像分析 そこそこ 駅の改札方式 かなり良い 椅子で体重計測 立ち見問題 無線タグを配る 悪い
41. 41 それぞれ どれ らいコストかかるかな？ 自分で形を決 める 他人が作った ハードを選ぶ 定型化された 形状
42. 42 人数カウント方法 精度 コスト カメラ画像分析 そこそこ 1部屋5万円〜 駅の改札方式 かなり良い 1台10万円〜 椅子で体重計測 立ち見問題 1座席1000円〜 無線タグを配る 悪い 1人数百円 Alibaba（中国のEC） で売ってた 売ってないから 自作想定
43. 43 開発難し ない？
44. 44 人数カウント方法 精度 コスト 開発 カメラ画像分析 そこそこ 1部屋5万円〜 大変 駅の改札方式 かなり良い 1台10万円〜 楽 椅子で体重計測 立ち見問題 1座席1000円〜 少し大変 無線タグを配る 悪い 1人数百円 少し大変
45. 45 運用できる？
46. 46 人数カウント方法 精度 コスト 開発 運用 カメラ画像分析 そこそこ 1部屋5万円〜 大変 楽 駅の改札方式 かなり良い 1台10万円〜 楽 待ち行列計算 設置大変 椅子で体重計測 立ち見問題 1座席1000円〜 少し大変 設置大変 無線タグを配る 悪い 1人数百円 少し大変 回収大変 紛失リスク
47. 47 会場が大き なっても大丈夫？
48. 48 人数カウント方法 精度 コスト 開発 運用 スケール カメラ画像分析 そこそこ 1部屋5万円〜 大変 楽 画角重複問題 駅の改札方式 かなり良い 1台10万円〜 楽 待ち行列計算 設置大変 しやすい 椅子で体重計測 立ち見問題 1座席1000円〜 少し大変 設置大変 しやすい 無線タグを配る 悪い 1人数百円 少し大変 回収大変 紛失リスク 電波混信
49. 49 このバランスを とらないといけない
50. 考えることが多すぎる😡 だからムズカシイ
51. 51 どれが正解かは ケースバイケース
52. 52 ちなみに、自分ならどうするか
53. 53 自分ならどうするか これを買ってきて 入口/出口で押して貰う https://www.amazon.co.jp/dp/B0C36Y3RPK
54. 54 自分ならどうするか 精度 センサコスト 開発 運用 スケール カメラ画像分析 そこそこ 1部屋5万円〜 大変 楽 画角重複問題 駅の改札方式 かなり良い 1台10万円〜 楽 待ち行列計算 設置大変 しやすい 椅子で体重計測 立ち見問題 1座席1000円〜 少し大変 設置大変 しやすい 無線タグを配る 悪い 1人数百円 少し大変 回収大変 紛失リスク 電波混信 ボタン 参加者 リテラシー依存 1部屋1500円〜 楽 待ち行列計算 しやすい
55. 55 「いい方法」に後で気づくのも ハードウェアあるある😔
56. 56 でもそこが面白い😆
57. 57 ひときゅう い 途中までのまとめ • ハードウェアは入出力が不定形。圧倒的自由度がある • 一つのことをやるにも複数のやり方がある • 選択肢のメリット・デメリットバランスを取るのが大変 ここまでで18分切りたい
58. 58 TypeScriptで ハードウェアをやるメリット
59. 59 TypeScriptでやるメリット 開発難易度が劇的に下がる（vs C言語） 精度 センサコスト 開発 運用 スケール カメラ画像分析 そこそこ 1部屋5万円〜 大変 楽 画角重複問題 駅の改札方式 かなり良い 1台10万円〜 楽 待ち行列計算設 置大変 しやすい 椅子で体重計測 立ち見問題 1座席1000円〜 少し大変 設置大変 しやすい 無線タグを配る 悪い 1人数百円 少し大変 回収大変 紛失リスク 電波混信 ボタン 参加者 リテラシー依存 1部屋1000円〜 楽 待ち行列計算 しやすい 上記は全部TypeScriptで実現可能
60. 60 C言語でできることは TypeScriptでもできる！ ※個人の感想です
61. ただし コンピューティングコストも 考えないといけない 💰💰💰
62. 62 具体例
63. 処理性能 メモリ ストレージ 値段 C言語 TypeScript MacBookPro 動く 動く ESP32 動く ぎり動く PIC 動く 動かない 63 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として
64. 処理性能 メモリ ストレージ 値段 C言語 TypeScript MacBookPro M3 4.05GHz 8コアCPU 16GB 255GB 248,800円 動く 動く ESP32 動く ぎり動く PIC 動く 動かない 64 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として
65. 処理性能 メモリ ストレージ 値段 C言語 TypeScript MacBookPro M3 4.05GHz 8コアCPU 16GB 255GB 248,800円 動く 動く ESP32 240MHz 536kB 4MB 530円 動く ぎり動く PIC 動く 動かない 65 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として
66. 処理性能 メモリ ストレージ 値段 C言語 TypeScript MacBookPro M3 4.05GHz 8コアCPU 16GB 255GB 248,800円 動く 動く ESP32 240MHz 536kB 4MB 530円 動く ぎり動く PIC 32MHz 2kB 3.5kB 160円 動く 動かない 66 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として
67. 処理性能 メモリ ストレージ 値段 C言語 TypeScript MacBookPro M3 4.05GHz 8コアCPU 16GB 255GB 248,800円 動く 動く ESP32 240MHz 536kB 4MB 530円 動く ぎり動く PIC 32MHz 2kB 3.5kB 160円 動く 動かない 67 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として
68. 68 コストか て良 れば すべてTypeScriptでできる
69. 69 できるだ コストもか た ない ↓ 動作の仕組みで工夫できる
70. 70 TypeScriptはどこで動 のか
71. 71 TypeScriptのコンパイル(tsc)は 本番環境CPUでやっていますか？
72. 72 TypeScriptはどこで動 のか 大抵の場合はtscは別の場所でやっている 本番環境 コンパイル済 プログラム （JavaScript） Local / CD上 tscで使うCPUは こっち
73. 73 TypeScriptを動かす場所に 種類がある
74. 75 TypeScriptはどこで動 のか デバイス サーバー Cloud デバイス クラウド接続型 有線接続型 スタンドアロン型 デバイス PC 常時通信 デバイス JSデプロイ型 PC PC デバイス バイナリデプロイ型 常時通信 専用 OS 専用 OS 専用 OS 機能特化型デバイスで ・Webhook型 ・API型 ・BLE通信型 などなど
75. 76 デバイス比較（一部） 汎用性 デバイス単価 開発 運用 スケール Raspberry Pi スタンドアロン型 大 高い 楽 しにくい しやすい Moddable スタンドアロン型 大 普通 楽 しにくい しやすい MakeCode バイナリデプロイ型 小 安い 楽 しにくい しやすい Johnny Five 有線接続型 中 普通 楽 しやすい しにくい obniz クラウド接続型 大 高め 楽 しやすい しやすい ※個人の感覚です やりたいことが できるか？の列
76. 77 デバイスマップ 専用機 汎用機 デバイスコスト 高 デバイスコスト 安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚です スマスピ Edison.js
77. 78 1台なら高級でもいい ど 100万台作るなら１円でも安 したい…
78. 79 デバイスマップ 専用機 汎用機 デバイスコスト 高 デバイスコスト 安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚です スマスピ Edison.js
79. 80 TypeScriptは少量多品種に向いている ＝ハードウェア入門には最適！
80. 81 ピックアップ紹介
81. 82 ピックアップ紹介 - RaspberryPi デバイス スタンドアロン型 ⦿ 小型のコンピューター ⦿ IoT以外でもよく使われる ⦿ PCでTSを動かすのと同じようにできる ⦿ 最近RaspberryPi5がでた ⦿ ¥11,000~15,000/台
82. 83 ピックアップ紹介 - obniz デバイス サーバー Cloud クラウド接続型 常時通信 専用 OS ⦿ 各デバイスについたIDでインターネット越しに 接続して操作するデバイス ⦿ クラウド接続型なので、AWSなどから動かせる ⦿ アプリアップデートなどがクラウドと同様にで きて楽 ⦿ ¥6,000~¥22,000/台
83. 84 ピックアップ紹介 - DeviceScript PC デバイス バイナリデプロイ型＋α もどき 専用 VM Bin ⦿ Microsoftが2023年に唐突に出した ⦿ TS”もどき”をコンパイルしてバイナリ を生成 / 専用VMで実行 ⦿ まだExperimental Project ⦿ VSCodeとの連携/デバッグがしやすい ⦿ ¥600~2,000/台 https://microsoft.github.io/devicescript
84. 85 ピックアップ紹介 - moddable ⦿ Embedded JavaScript （組み込み向けJSランタイム） ⦿ ｽﾀｯｸﾁｬﾝで使われている ⦿ バイナリデプロイが主体だがevalもできる ⦿ ¥600~2,000/台 ⦿ 詳しくは16:40からのセッションを 聞こう！ PC デバイス バイナリデプロイ型 | JSデプロイ型 専用 VM
85. 86 ピックアップ紹介 - Edison.js ⦿ FirmataというPC/マイコンの 通信プロトコルを使っている ⦿ ¥1,500~6,000/台 ⦿ 詳しくは17:20からのセッションを 聞こう！ 有線接続型 デバイス PC 常時通信 専用 OS
86. 87 デバイスマップ 専用機 汎用機 デバイスコスト 高 デバイスコスト 安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚です スマスピ Edison.js
87. 88 あくまでこれは コンピューティングコストの話
88. 89 精度 センサコスト 開発 運用 スケール カメラ画像分析 そこそこ 1部屋5万円〜 大変 楽 画角重複問題 駅の改札方式 かなり良い 1台10万円〜 楽 待ち行列計算設 置大変 しやすい 椅子で体重計測 立ち見問題 1座席1000円〜 少し大変 設置大変 しやすい 無線タグを配る 悪い 1人数百円 少し大変 回収大変 紛失リスク 電波混信 ボタン 参加者 リテラシー依存 1部屋1000円〜 楽 待ち行列計算 しやすい これは センサの話
89. 90 これは 頭脳の話 専用機 汎用機 デバイスコスト 高 デバイスコスト 安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚です スマスピ
90. 91 精度 センサコスト 開発 運用 スケール カメラ画像分析 そこそこ 1部屋5万円〜 大変 楽 画角重複問題 駅の改札方式 かなり良い 1台10万円〜 楽 待ち行列計算設置 大変 しやすい 椅子で体重計測 立ち見問題 1座席1000円〜 少し大変 設置大変 しやすい 無線タグを配る 悪い 1人数百円 少し大変 回収大変 紛失リスク 電波混信 ボタン 参加者 リテラシー依存 1部屋1000円〜 楽 待ち行列計算 しやすい 組み合わせ 専用機 汎用機 デバイスコスト高 デバイスコスト安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed スマスピ
91. 92 デバイスコスト コンピューティングコスト ＋ センサコスト ＋ 筐体コスト ＋ …… ＝
92. 93 トータルコストを踏まえた 選定が必要
93. 考えることが多すぎる😡 （再掲）
94. 95 でも やれることは広い😆
95. 96 やってみると楽しいはず！
96. 97 ぜひハードウェアも 触ってみて ださい
97. ハードウェアを動かす TypeScriptの世界
98. 99 Fin