エンジニア達の「完全に理解した」Talk #73
807 Views
January 27, 26
スライド概要
フリーランスプログラマです。 Angular, CHIRIMEN Open Hardware, MDN Web Doc 推しの人です。
関連スライド
各ページのテキスト
Web Serial を完全に理解した エンジニア達の「完全に理解した」Talk #73
自己紹介 akihiko.KIgure a.k.a グレさん 渋谷とグンマー帝国の 2 拠点でフロントエンド開発をしています。 AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
個人的推しOSS ※アルファベット順 Angular CHIRIMEN Open Hardware Firebase
個人的推しOSS ※アルファベット順 Google Cloud MDN Web Docs Nx Rust
今日テーマ Web Serial RxJS
今日お話する事 ● シリアル通信とは ● Web Serial とは ● npm パッケージの紹介 ● デモ ● おまけ
Q：シリアル通信知っていますか？ 1️⃣：知らない 2️⃣：知っている
シリアル通信とは（ざっくり） ・1bitずつ順番にデータを送る ・RX / TX ・マイコン・センサーの世界では「当たり前」 AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
シリアルケーブル・コネクタ
シリアル通信イメージ
本題：Web Serial API とは？
ブラウザから直接シリアル通信ができる！
何が凄いの？
Web 技術だけで、物理世界と 直接つながるのが一番凄い！！！
AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
注意：Chrome, Edge, Opera の PC 版のみ使えます AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
何故 Chrome, Edge, Opera の PC 版のみなのか？
Mozilla の立場（Firefox） Mozilla は Web Serial API を有害（Harmful）であると分類しています。 文献: Mozilla Specification Positions - Web Serial API AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性 があり ます。 主な理由: ・認証の弱い ・一般ユーザーがシリアル接続を許可する危険を理解出来ない
Apple / WebKit の立場（Safari） Apple も WebKit エンジンにおいて、Web Serial を含むいくつかの ハードウェアアクセス API の実装を拒否しています。 文献: WebKit Standards Positions - Web Serial API ※1 Tracking Prevention in WebKit ※2 主な理由: ・フィンガープリントの悪用されるリスク ・ウェブのサンドボックスの原則を壊す AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能 AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能 性があり ます。 性があり ます。 ※1 ※2
Chromium プロジェクト（Chrome, Edge, Opera）の立場 一方で、Google を中心とする Chromium プロジェクトは 利便性を優先しています。 文献: Web Serial API - Chrome Platform Status AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能 性があり ます。 主な理由: ・教育・業務用途の価値が大きい ・セキュリティについては、ユーザー操作・HTTPS 必須で、制御
ウェブのあり方に対する哲学の違い ブラウザ Chromium系 哲学 ウェブを「アプリ実行プラットフォーム」 にしたい Mozilla / Apple ウェブを「安全でプライベートな閲覧環境」 に保ちたい Web Serial への見解 肯定的。 十分なガードレール（許可ダイアログ等）が あれば、強力な機能を提供すべき。 否定的。 ユーザーがリスクを理解できない強力な権限や 追跡に繋がる情報の露出は避けるべき。
W3C Community Group Draft Report AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
Web Serail の JavaScript 実装イメージ 接続実装イメージ 送信・受信実装イメージ AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
でも・・・生 API は辛い
そこで作った OSS ※npm パッケージ
@gurezo/web-serial-rxjs Web Serial を RxJS でラップしたライブラリ AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
npm パッケージの話の前に
What is RxJS AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能 性があり ます。
何度も届くデータを安全に分かり易く扱うための仕組み
たとえ話 Promise → 宅配便（1 回だけ届く） RxJS → ラジオ放送・川の流れ（ずっと流れてくる）
なぜ Web Serial と相性がいいの？
シリアル通信は： ・デバイスからデータが 何度も ・いつ来るか分からず ・途中で止める必要がある これは Promise より RxJS の得意分野
RxJS を使うと何が嬉しい？ ・無限ループを書かなくていい ・停止するときは「やめる」と言うだけ ・エラーや切断も自然に扱える ・データ加工が読みやすくなる
JavaScript の Promise と RxJS の比較 観点 Promise RxJS（Observable） 扱える値 1 回だけの結果 時間とともに流れる値 データの性質 単発 ストリーム（連続） 複数データ 不向き 得意 開始タイミング 即時実行 subscribe したとき 停止方法 基本できない unsubscribe で停止可能 無限データ while / 再帰が必要 自然に扱える エラー処理 catch error イベントとして扱える リソース解放 手動で書く必要あり unsubscribe に集約できる 変換・加工 then を繋ぐ map / filter / buffer など豊富 UI との相性 普通 非常に良い テスト モックしにくい Observable を簡単に差し替え可能 シリアル通信との相性 悪い 非常に良い
RxJS のまとめ Promise →「結果を 1 回受け取るための仕組み」 RxJS →「いつ来るか分からないデータの流れを扱うための仕組み」 Web Serial API は後者なので、RxJS でラップするのが自然
という訳で、デモをします！
ハード接続例 Chrome Type B to C Raspberry Pi Zero と 拡張ボード（任意） パソコン
デモ動画のダウンロードリンク AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
下記フレームワークのサンプルがあります。 AI ,テ 生 メ ア グ ー プ ラ キ 成 ル フ リ ス コ ケ ィ ト ン カ ー ル テ シ ン ユ ョ ン ツ ー は ザー 誤イ り を ン 含 タ ー む フ 可 ェ イ 能ス 性があり ます。 ・Angular ・Vanilla JavaScript ・Vanilla TypeScript ・React ・Svelte ・Vue
何故 npm パッケージを公開したか？
Web Serial API そのままだと使い難い
OSS にコントリビュートして 人様のお役に立ちたい！！！
これ言ってみたかった
おまけ：ハード紹介
Raspberry Pi Zero 2 WH AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可 能性があり ます。 スイッチサイエンス AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可 AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可 KSY 秋月電子通商 能性があり ます。 能性があり ます。
GeeekPi Raspberry Pi Zero 2 W/Zero/Zero W用 Raspberry Pi USBドングル拡張ボードキット QR コ ード 自動的に生成さ れた説明
UGREEN OTGケーブル Type-C 変換アダプタ タイプC USB 変換 USB3.0メス 高速転送 Android スマートフォン タブレット MacBook Pro USBホストケーブル Type-C端末とType-A機器接続 17CM QR コ ード 自動的に生成さ れた説明
ハードの紹介の gist AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。
まとめ Web Serial できるよ にんげんだもの ぐれを
ご静聴ありがとうございました！