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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

はじめに 2 スライド 98枚あります 1スライドあたり18秒スライドは事前公開済みです

Slide 3

Slide 3 text

セッション概要 3 TypeScriptならフロントエンドもバックエンドもインフラも！ついでにハードウェアも TypeScriptでやろう！

Slide 4

Slide 4 text

本スライドのゴール 4 TypeScriptでハードウェアを動かすとき、 ● ハードウェアとはどんなものか ● 作る際にどんな選択肢があるのか ● どの選択肢がよさそうなのかをなんとなくイメージできるようになる

Slide 5

Slide 5 text

5 木戸康平きどこうへい https://qiita.com/wicket https://github.com/9wick https://speakerdeck.com/9wick https://twitter.com/9wick https://9wick.com ハードウェアとソフトウェアの世界をいったりきたりしてます。 obniz（オブナイズ）というIoTツールを開発しています

Slide 6

Slide 6 text

6 ハードウェアってなに？

Slide 7

Slide 7 text

7 ハードウェアってなに？ソフトウェア vs ハードウェアではないキーボードもマウスも物理的に存在する

Slide 8

Slide 8 text

8 ハードウェアってなに？ハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）

Slide 9

Slide 9 text

9 ハードウェアってなに？ソフトっぽいハードっぽいハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）

Slide 10

Slide 10 text

10 ハードウェアってなに？ソフトっぽいハードっぽいハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）

Slide 11

Slide 11 text

11 ハードウェアってなに？ソフトっぽいハードっぽいハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）

Slide 12

Slide 12 text

12 ハードウェアってなに？ソフトっぽいハードっぽいハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）

Slide 13

Slide 13 text

13 ハードウェアってなに？ソフトっぽいハードっぽいハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）

Slide 14

Slide 14 text

14 ハードウェアってなに？ソフトっぽいハードっぽいハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）

Slide 15

Slide 15 text

15 ハードウェアってなに？ソフトっぽいハードっぽいハードウェアプログラミングの文脈では「入出力が定型化されていないもの」（個人見解）昔はハード寄りだった一般普及されてソフト寄りに

Slide 16

Slide 16 text

16 ハードウェアができると何がいいの？

Slide 17

Slide 17 text

17 圧倒的自由度🙌

Slide 18

Slide 18 text

18 ハードウェアができると何がいいの？

Slide 19

Slide 19 text

19 ハードウェアができると何がいいの？これが作れるようになる！

Slide 20

Slide 20 text

20 ハードウェアができると何がいいの？定型化された形状

Slide 21

Slide 21 text

21 ハードウェアができると何がいいの？他人が作ったハードを選ぶ定型化された形状

Slide 22

Slide 22 text

22 ハードウェアができると何がいいの？自分で形を決める他人が作ったハードを選ぶ定型化された形状

Slide 23

Slide 23 text

23 自由だからこそより良いものを目指せる

Slide 24

Slide 24 text

24 ハードウェアができると何がいいの？結局、我々は現実のものに慣れている紙の書き心地を再現するタブレット他、マテリアルデザイン/タンジブル等も紙に書くとデジタル化されるペン 360life.shinyusha.co.jp/articles/-/3465 より https://nuwapen.com/products/nuwa-pen より

Slide 25

Slide 25 text

25 ハードウェアができると何がいいの？ソフトとハードでは受ける印象が違う https://aibo.sony.jp/store/ より https://lovot.life/ より

Slide 26

Slide 26 text

26 ハードウェアができると何がいいの？できる領域もちがう

Slide 27

Slide 27 text

27 ハードウェアで世界が広がる！ 👍

Slide 28

Slide 28 text

28 でもどうやって作ったらいいの？

Slide 29

Slide 29 text

定型化されてないムズカシイ🫠 ＝

Slide 30

Slide 30 text

30 どうやって作ったらいいの？定型化されていないということは難易度が高い同じことをやろうと思っても複数のやり方があり技術選定が難しい

Slide 31

Slide 31 text

31 たとえば

Slide 32

Slide 32 text

32 この会場でセッションの聴講人数を計測したい！あなたならどうしますか

Slide 33

Slide 33 text

33 人数カウント方法カメラで画像分析

Slide 34

Slide 34 text

34 人数カウント方法カメラで画像分析駅の改札方式

Slide 35

Slide 35 text

35 人数カウント方法カメラで画像分析駅の改札方式椅子で体重を測る

Slide 36

Slide 36 text

36 人数カウント方法カメラで画像分析駅の改札方式椅子で体重を測る無線タグを配り電波を見る

Slide 37

Slide 37 text

37 人数カウント方法カメラで画像分析駅の改札方式椅子で体重を測る無線タグを配り電波を見るどれも「技術的には」可能そう

Slide 38

Slide 38 text

38 人数カウント方法カメラで画像分析駅の改札方式椅子で体重を測る無線タグを配り電波を見るボツ案：CO2濃度の変化を測るどれも「技術的には」可能そう

Slide 39

Slide 39 text

39 精度ちゃんと出るかな？

Slide 40

Slide 40 text

40 人数カウント方法精度カメラ画像分析そこそこ駅の改札方式かなり良い椅子で体重計測立ち見問題無線タグを配る悪い

Slide 41

Slide 41 text

41 それぞれどれらいコストかかるかな？自分で形を決める他人が作ったハードを選ぶ定型化された形状

Slide 42

Slide 42 text

42 人数カウント方法精度コストカメラ画像分析そこそこ 1部屋5万円〜駅の改札方式かなり良い 1台10万円〜椅子で体重計測立ち見問題 1座席1000円〜無線タグを配る悪い 1人数百円 Alibaba（中国のEC）で売ってた売ってないから自作想定

Slide 43

Slide 43 text

43 開発難しない？

Slide 44

Slide 44 text

44 人数カウント方法精度コスト開発カメラ画像分析そこそこ 1部屋5万円〜大変駅の改札方式かなり良い 1台10万円〜楽椅子で体重計測立ち見問題 1座席1000円〜少し大変無線タグを配る悪い 1人数百円少し大変

Slide 45

Slide 45 text

45 運用できる？

Slide 46

Slide 46 text

46 人数カウント方法精度コスト開発運用カメラ画像分析そこそこ 1部屋5万円〜大変楽駅の改札方式かなり良い 1台10万円〜楽待ち行列計算設置大変椅子で体重計測立ち見問題 1座席1000円〜少し大変設置大変無線タグを配る悪い 1人数百円少し大変回収大変紛失リスク

Slide 47

Slide 47 text

47 会場が大きなっても大丈夫？

Slide 48

Slide 48 text

48 人数カウント方法精度コスト開発運用スケールカメラ画像分析そこそこ 1部屋5万円〜大変楽画角重複問題駅の改札方式かなり良い 1台10万円〜楽待ち行列計算設置大変しやすい椅子で体重計測立ち見問題 1座席1000円〜少し大変設置大変しやすい無線タグを配る悪い 1人数百円少し大変回収大変紛失リスク電波混信

Slide 49

Slide 49 text

49 このバランスをとらないといけない

Slide 50

Slide 50 text

考えることが多すぎる😡 だからムズカシイ

Slide 51

Slide 51 text

51 どれが正解かはケースバイケース

Slide 52

Slide 52 text

52 ちなみに、自分ならどうするか

Slide 53

Slide 53 text

53 自分ならどうするかこれを買ってきて入口/出口で押して貰う https://www.amazon.co.jp/dp/B0C36Y3RPK

Slide 54

Slide 54 text

54 自分ならどうするか精度センサコスト開発運用スケールカメラ画像分析そこそこ 1部屋5万円〜大変楽画角重複問題駅の改札方式かなり良い 1台10万円〜楽待ち行列計算設置大変しやすい椅子で体重計測立ち見問題 1座席1000円〜少し大変設置大変しやすい無線タグを配る悪い 1人数百円少し大変回収大変紛失リスク電波混信ボタン参加者リテラシー依存 1部屋1500円〜楽待ち行列計算しやすい

Slide 55

Slide 55 text

55 「いい方法」に後で気づくのもハードウェアあるある😔

Slide 56

Slide 56 text

56 でもそこが面白い😆

Slide 57

Slide 57 text

57 ひときゅうい途中までのまとめ ● ハードウェアは入出力が不定形。圧倒的自由度がある ● 一つのことをやるにも複数のやり方がある ● 選択肢のメリット・デメリットバランスを取るのが大変ここまでで18分切りたい

Slide 58

Slide 58 text

58 TypeScriptでハードウェアをやるメリット

Slide 59

Slide 59 text

59 TypeScriptでやるメリット開発難易度が劇的に下がる（vs C言語）精度センサコスト開発運用スケールカメラ画像分析そこそこ 1部屋5万円〜大変楽画角重複問題駅の改札方式かなり良い 1台10万円〜楽待ち行列計算設置大変しやすい椅子で体重計測立ち見問題 1座席1000円〜少し大変設置大変しやすい無線タグを配る悪い 1人数百円少し大変回収大変紛失リスク電波混信ボタン参加者リテラシー依存 1部屋1000円〜楽待ち行列計算しやすい上記は全部TypeScriptで実現可能

Slide 60

Slide 60 text

60 C言語でできることは TypeScriptでもできる！ ※個人の感想です

Slide 61

Slide 61 text

ただしコンピューティングコストも考えないといけない 💰💰💰

Slide 62

Slide 62 text

62 具体例

Slide 63

Slide 63 text

処理性能メモリストレージ値段 C言語 TypeScript MacBookPro 動く動く ESP32 動くぎり動く PIC 動く動かない 63 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として

Slide 64

Slide 64 text

処理性能メモリストレージ値段 C言語 TypeScript MacBookPro M3 4.05GHz 8コアCPU 16GB 255GB 248,800円動く動く ESP32 動くぎり動く PIC 動く動かない 64 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として

Slide 65

Slide 65 text

処理性能メモリストレージ値段 C言語 TypeScript MacBookPro M3 4.05GHz 8コアCPU 16GB 255GB 248,800円動く動く ESP32 240MHz 536kB 4MB 530円動くぎり動く PIC 動く動かない 65 TypeScript vs C言語 ※単純比較できるものではないですがイメージのための概要として

Slide 66

Slide 66 text

処理性能メモリストレージ値段 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言語 ※単純比較できるものではないですがイメージのための概要として

Slide 67

Slide 67 text

処理性能メモリストレージ値段 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言語 ※単純比較できるものではないですがイメージのための概要として

Slide 68

Slide 68 text

68 コストかて良ればすべてTypeScriptでできる

Slide 69

Slide 69 text

69 できるだコストもかたない ↓ 動作の仕組みで工夫できる

Slide 70

Slide 70 text

70 TypeScriptはどこで動のか

Slide 71

Slide 71 text

71 TypeScriptのコンパイル(tsc)は本番環境CPUでやっていますか？

Slide 72

Slide 72 text

72 TypeScriptはどこで動のか大抵の場合はtscは別の場所でやっている本番環境コンパイル済プログラム（JavaScript） Local / CD上 tscで使うCPUはこっち

Slide 73

Slide 73 text

73 TypeScriptを動かす場所に種類がある

Slide 74

Slide 74 text

75 TypeScriptはどこで動のかデバイスサーバー Cloud デバイスクラウド接続型有線接続型スタンドアロン型デバイス PC 常時通信デバイス JSデプロイ型 PC PC デバイスバイナリデプロイ型常時通信専用 OS 専用 OS 専用 OS 機能特化型デバイスで・Webhook型・API型・BLE通信型などなど

Slide 75

Slide 75 text

76 デバイス比較（一部）汎用性デバイス単価開発運用スケール Raspberry Pi スタンドアロン型大高い楽しにくいしやすい Moddable スタンドアロン型大普通楽しにくいしやすい MakeCode バイナリデプロイ型小安い楽しにくいしやすい Johnny Five 有線接続型中普通楽しやすいしにくい obniz クラウド接続型大高め楽しやすいしやすい ※個人の感覚ですやりたいことができるか？の列

Slide 76

Slide 76 text

77 デバイスマップ専用機汎用機デバイスコスト高デバイスコスト安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚ですスマスピ Edison.js

Slide 77

Slide 77 text

78 1台なら高級でもいいど 100万台作るなら１円でも安したい…

Slide 78

Slide 78 text

79 デバイスマップ専用機汎用機デバイスコスト高デバイスコスト安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚ですスマスピ Edison.js

Slide 79

Slide 79 text

80 TypeScriptは少量多品種に向いている＝ハードウェア入門には最適！

Slide 80

Slide 80 text

81 ピックアップ紹介

Slide 81

Slide 81 text

82 ピックアップ紹介 - RaspberryPi デバイススタンドアロン型 ⦿ 小型のコンピューター ⦿ IoT以外でもよく使われる ⦿ PCでTSを動かすのと同じようにできる ⦿ 最近RaspberryPi5がでた ⦿ ¥11,000~15,000/台

Slide 82

Slide 82 text

83 ピックアップ紹介 - obniz デバイスサーバー Cloud クラウド接続型常時通信専用 OS ⦿ 各デバイスについたIDでインターネット越しに接続して操作するデバイス ⦿ クラウド接続型なので、AWSなどから動かせる ⦿ アプリアップデートなどがクラウドと同様にできて楽 ⦿ ¥6,000~¥22,000/台

Slide 83

Slide 83 text

84 ピックアップ紹介 - DeviceScript PC デバイスバイナリデプロイ型＋α もどき専用 VM Bin ⦿ Microsoftが2023年に唐突に出した ⦿ TS”もどき”をコンパイルしてバイナリを生成 / 専用VMで実行 ⦿ まだExperimental Project ⦿ VSCodeとの連携/デバッグがしやすい ⦿ ¥600~2,000/台 https://microsoft.github.io/devicescript

Slide 84

Slide 84 text

85 ピックアップ紹介 - moddable ⦿ Embedded JavaScript （組み込み向けJSランタイム） ⦿ ｽﾀｯｸﾁｬﾝで使われている ⦿ バイナリデプロイが主体だがevalもできる ⦿ ¥600~2,000/台 ⦿ 詳しくは16:40からのセッションを聞こう！ PC デバイスバイナリデプロイ型 | JSデプロイ型専用 VM

Slide 85

Slide 85 text

86 ピックアップ紹介 - Edison.js ⦿ FirmataというPC/マイコンの通信プロトコルを使っている ⦿ ¥1,500~6,000/台 ⦿ 詳しくは17:20からのセッションを聞こう！有線接続型デバイス PC 常時通信専用 OS

Slide 86

Slide 86 text

87 デバイスマップ専用機汎用機デバイスコスト高デバイスコスト安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚ですスマスピ Edison.js

Slide 87

Slide 87 text

88 あくまでこれはコンピューティングコストの話

Slide 88

Slide 88 text

89 精度センサコスト開発運用スケールカメラ画像分析そこそこ 1部屋5万円〜大変楽画角重複問題駅の改札方式かなり良い 1台10万円〜楽待ち行列計算設置大変しやすい椅子で体重計測立ち見問題 1座席1000円〜少し大変設置大変しやすい無線タグを配る悪い 1人数百円少し大変回収大変紛失リスク電波混信ボタン参加者リテラシー依存 1部屋1000円〜楽待ち行列計算しやすいこれはセンサの話

Slide 89

Slide 89 text

90 これは頭脳の話専用機汎用機デバイスコスト高デバイスコスト安 Arduino RaspberryPi obniz Moddable Johnny Five PIC STM webiot C言語ゾーン TypeScriptゾーン Toio SH /H8 mbed ※個人の感覚ですスマスピ

Slide 90

Slide 90 text

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 スマスピ

Slide 91

Slide 91 text

92 デバイスコストコンピューティングコスト＋センサコスト＋筐体コスト＋ …… ＝