1.
20220716 #JSFES
プロジェクト河豚🐡でWebの未来を感じてみよう
プロトアウトスタジオ 菅原のびすけ
@n0bisuke

2.
菅原 のびすけ
dotstudio, Inc.
・プロトタイピング専門スクール「プロトアウトスタジオ」の運営
- デジタルハリウッド大学大学院 非常勤講師 プロダクトプロトタイピングI
・個人活動
- IoTLT （国内最大のIoTコミュニティ）
- LINE API Expert / Microsoft MVP / IBM Champion
- 社会勉強で居酒屋 養老乃瀧でアルバイト
（一軒め酒場 新橋店 で働いてました。）
nobisuke sugawara

3.
JSっぽい活動

4.
Project Fugu 🐡
ウェブ・ケイパビリティ・プロジェクトとも呼ばれるこのプロジェクトは、
これまでネイティブアプリケーションでしか実現できなかった機能を追加
することで、ウェブプラットフォームを改善するものです。(DeepL翻訳)
🐡
引用: https://felixgerschau.com/web-capabilities-project-fugu-google/#what-is-project-fugu
Project Fugu 🐡 は、ウェブ上で動作する新しいクラスのアプリケーションを実
現するために、ウェブの機能のギャップを埋めるための取り組みです。(DeepL翻訳)
引用: https://www.chromium.org/teams/web-capabilities-fugu/

5.
Project Fugu 🐡
🐡
僕なりの意訳
従来ネイティブアプリでしか扱えなかったデバイスの機能に
JavaScript(Web）からアクセスできるようにするAPIの機能検討プロジェクト
(≒Webの未来をディスカッションしている場所の一つ）

6.
現状、PWAなどの界隈がウォッチしてる人多いかも
🐡
=> アイコンに通知表示っぽい表示 => OS起動時にアプリとして起動
Run on OS Login
Badging API
画像元: https://felixgerschau.com/web-capabilities-project-fugu-google/#what-is-project-fugu

7.
通信やセンサなどハードウェア機能にアクセスできるAPIも
🐡
Web Bluetooth
Web NFC
Web USB
Web Serial
今日はこの辺りの動きを中心に紹介できればと思います。

8.
Chromiumのプロジェクトチーム14個のうちの一つ 🐡
https://sites.google.com/a/chromium.org/dev/teams

9.
Chromiumのプロジェクトチーム14個のうちの一つ 🐡
https://sites.google.com/a/chromium.org/dev/teams
一つだけ絵文字入りで異質w

10.
Fugu API Tracker 🐡
ここのサイトに色々なAPIがまとまってます。

11.
https://docs.google.com/spreadsheets/d/1de0ZYDOcafNXXwMcg4EZhT0346QM-
QFvZfoD8Z
ff
HeA/edit#gid=557099940
🐡
※スプレッドシートも公開されてました。

12.
🐡
APIはステータスが分かれています。
- Shipped
- Developer Trial
- Origin Trial
- Started
- Under Consideration

13.
- Shipped => 使える
- Developer Trial => フラグ付きで使える
- Origin Trial => 特定オリジンで試せる
- Started => 最近使えるようになった
- Under Consideration => ディスカッション中
🐡
APIはステータスが分かれています。

14.
ハードウェアっぽい界隈でも使われる機能のどんなものが
JavaScriptで触れるかいくつか見てみましょう。
🐡

15.
Web Bluetooth
🐡
引用: https://www.w3.org/community/web-bluetooth/
navigator.bluetooth.requestDevice()
そのままですが、WebブラウザからBluetooth制御が出来ます。

16.
WebHID API
🐡
IoTLT vol69 https://www.youtube.com/watch?v=Jynrd0VbIig
HIDデバイス(GamePadやキーボードやマウスをはじめとした色々)の制御
(2020年11月でオリジントライアルだった)

17.
Web USB
🐡
2017年 IoTLT vol29
ブラウザからUSBアクセス データやりとりができます。
当時はオリジントライアルでしたが、今はShippedです。

18.
Web NFC 🐡
2020年6月 IoTLT vol64
ブラウザからNFCにアクセスできます。
当時はオリジントライアルでしたが、今はShippedです。

19.
Ambient Light Sensor API 🐡
2021年9月 IoTLT vol79
PCなどに実は付いている環境光センサーから値を取得できる。
現状Developer Trial

20.
従来は、電子工作などで扱おうとすると別途デバイス用意と実装が必要だった
NFC
🐡
照度センサ Bluetoothモジュールやマイコン
=> デバイス用意せずに電子工作の世界に近いことがやれるように
=> 将来的にハードウェア製品のお供がWebアプリケーションに変わるかも？

21.
議論中の機能(Under Consideration)
🐡
Better Printing
=> 印刷用のCanvasAPI、PDFの生成など
=> 紙印刷の状況をもっと良くしたいっぽい雰囲気
IR Blaster Capability
=> 赤外線！

22.
議論中の機能(Under Consideration) 🐡
Bluetooth Advertiser
=> Webアプリケーションからアドバタイズパケットを送信することができる
Bluetooth Peripheral Mode
=> Bluetoothをペリフェラルにすることができるモード
※セントラルとペリフェラル
(PCがセントラル、 イヤホンやAirtagなどデバイスがペリフェラル)
=> PCやスマホは今まで、他のデバイスにアクセスしてデータを管理する側(セントラル)
だったけど、PCやスマホをデバイス側として扱う流れ(古いスマホとかの活用イメージ?)
=> WebBluetooth間での通信ができそう。
スマホとPCで開いたWebアプリがインターネット使わずに通信

23.
他にもこんなAPIも…
🐡
画面ロック制御
Shape Detection API
Face/Barcode/Text
Wake Lock API
ジオフェンシング
特定エリア検出

24.
議論中の機能(Under Consideration)
🐡
Ability to create virtual microphone and camera devices
=> 仮想カメラとマイクを生成する機能
Remote desktop control
=> ビデオ会議などでリモートの誰かに自信のPCをコントロールさせたい
=> コロナ禍からのオンライン時代で発生したユースケースっぽい

25.
関連ページ - Project Fugu API showcase
🐡
https://developer.chrome.com/blog/fugu-showcase/?api=webusb
各APIを使ったWebサイトが紹介されてます。

26.
将来的に…
🐡
JavaScriptで色々できるようになっていきますね

27.
ところで、気になりますよね。
🐡

28.
なぜ河豚🐡なのか
🐡

29.
なぜ河豚なのか？
🐡
美味しいけど調理方法を間違えると死んでしまう
ってところの自戒を込めてる。
ハードウェアにJavaScriptからアクセスできるってことは
セキュリティ的にはけっこう怖い。
このLT中に「セキュリティ怖くね？」とか言ってる人もたぶんいる
Webに機能を持たせすぎるなって人もたぶんいる
働き方や生活の仕方が変わることによってプラットホームが増えたりユースケースは増えている
コロナ禍なども含め、開始当時のWebとはもはや別のものなので、今後もこういった形で
進化していくはず

30.
今でこそIoTLTというハードウェアや電子工作系のイベントを主催し
てるのですが、もともとWebエンジニアをしていました。
🐡
「JavaScriptでもっとハードウェアハックが出来ると楽しいのになぁ」
と思っていたのでこの辺りの動きは嬉しいです。
Webな人にもハードウェア周りに興味を持ってもらえると幸いです。

31.
締め
🐡
Webを美味しく頂けるように…
番宣: IoTLT vol89 7/19(火) の夜にソフトバンク本社で開催します。
https://iotlt.connpass.com/event/252034/ 遊びに来てください！
ちょっとでもハード面白そうって思ったかたぜひ :)
JavaScriptでハードウェア制御できる時代になってきているので、
Web界隈の皆さんも物理世界ハックを楽しんでみてください！