橋本 Hashimoto   Baku

橋本 Hashimoto   Baku

好きなWeb API (メモ)

このページは個人的なメモ書きです。何かあればご連絡ください。

ツール制作に使える、baku89.iconのお気に入りのWeb標準たち。

Vue Fes Japan 2025で発表した内容をもとに初稿をまとめました。

マクトクさんいわく、「Project Fugu(ネイティブアプリでできることをWeb標準化する、Chroniumチーム主導のプロジェクト)感謝すぎるアーキテクチャ1」とのこと。


Web Speech API

Komaで、撮影コマが更新された際のタイムラインマーカーのラベルを読み上げるのに。

Gamepad API

Komaで、JoyConをコントローラーにするのに使いました。(実際はBndrで使用)

WebHID

HID(Human Interface Device)を、Gamepad APIよりもより低レイヤーなところから触ることができます。JoyConのバイブレーションを触ったり、光らせたり、ジャイロの値を取るのに使える。

tomayac/joy-con-webhidにコミットしました。

WebUSB API

Tethrで、USB接続されたカメラとのパケットをPicture Transfer Protocolの仕様どおりに解析し、をテザー制御するために使った。Komaのコア機能として開発しました。

MediaStream Image Capture API

このAPIのImageCaptureを使えば、webcamのホワイトバランスだとかをもう少し細かく調整が可能なことがある。あと、動画からフレームを切り出すよりもImageCapture.takePhoto()のほうが解像度や画角が広いです。

TethrのWebカムモードで、つかいました

File System API

Komaにおけるローカルファイルやフォルダの操作に。撮影した10–100MB単為のJPGやRaw画像連番を保存したり、読み出して URL.createObjectURL() し、プレビューウィンドウの<img src> に都度セットするのにも使っています。このサイトのCMSシステム、Morionでも使っています。

FileSystemHandleは、IndexedDBにそのまま保存可能。一度ユーザーにディレクトリを選択してもらえば、次からパーミッションなしでガンガンファイルを読み書きできます。

あと個人的にはFileSystemObserverは気になっています。ディレクトリ内のファイル変更を再帰的に検知して、自動的にアプリ側に反映できたらいいなぁ。

Origin Private File System (OPFS)

サイトのoriginごとに与えられる、File System APIで読み書き可能な専用のディレクトリ。Komaでは無名プロジェクトの保存や、ファイルのキャッシュに使っています。ローカルのファイルよりも少しだけ高速に読み書きできるって噂を聞いたことがあります。

Storage API

OPFSlocalStorageIndexedDBで使用可能な残容量などを取得できます。PCだと大体そのままシステムのハードドライブの残容量になることが多い?(少なくともmacOSでは)

setPointerCapture

TweeqDrag-to-tweak Interactionの実装に使いました。DOMの範囲を超えたドラッグを、そのDOMのpointermoveイベントとして検知し続けてくれる。

PointerLock API

元々はゲームのエイム操作とかで、ポインターの実位置をロックして、上下左右へのマウス移動を無限に取得できるようにするために策定されたっぽいです。TweeqDrag-to-tweak Interactionの実装で、ポインター位置を一時的に不可視にしてオーバーレイUIを表示させるために使用しています。

EyeDropper API

どマイナー、かつ、どニッチ。Tweeqのカラーピッカーで、画面上の色をスポイトするのに使えます。

Popover API

これもTweeqで使いました。

CSS Anchor Positioning

数年後にWidely Availableになりそうなので、Tweeqで使えそう。Floating UIの置き換えを目指せそう。