--- title: Web APIs I like date: 2025-10-27T09:24:15.581Z updated: 2026-01-08T14:50:52.751Z tags: - list url: https://baku89.com/%E5%A5%BD%E3%81%8D%E3%81%AAWeb_API --- # Web APIs I like [ツール制作](/tools)に使える、[baku89#icon](/baku89#icon)のお気に入りのWeb標準たち。 [Vue Fes Japan 2025](/vuefes2025)で発表した内容をもとに初稿をまとめました。 [マクトク](/mactkg)さんいわく、「[Project Fugu](https://developer.chrome.com/docs/capabilities)（ネイティブアプリでできることをWeb標準化する、Chroniumチーム主導のプロジェクト）感謝すぎるアーキテクチャ[1](#user-content-fn-mctk)」とのこと。 --- ### [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) [Koma](/koma)で、撮影コマが更新された際のタイムラインマーカーのラベルを読み上げるのに。 ### [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) [Koma](/koma)で、JoyConをコントローラーにするのに使いました。（実際は[Bndr](/bndr)で使用） ![](https://wp.baku89.com/wp-content/uploads/2025/10/apis.jpg) ### [WebHID](https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API) HID（Human Interface Device）を、Gamepad APIよりもより低レイヤーなところから触ることができます。JoyConのバイブレーションを触ったり、光らせたり、ジャイロの値を取るのに使える。 [tomayac/joy-con-webhid](https://github.com/tomayac/joy-con-webhid)にコミットしました。 ### [WebUSB API](https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API) [Tethr](/Tethr)で、USB接続されたカメラとのパケットを[Picture Transfer Protocol](/ptp)の仕様どおりに解析し、をテザー制御するために使った。[Koma](/koma)のコア機能として開発しました。 ### [MediaStream Image Capture API](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API) このAPIの[ImageCapture](/ImageCapture)を使えば、webcamのホワイトバランスだとかをもう少し細かく調整が可能なことがある。あと、動画からフレームを切り出すよりも`ImageCapture.takePhoto()`のほうが解像度や画角が広いです。 [Tethr](/Tethr)のWebカムモードで、つかいました ### [File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) [Koma](/koma)におけるローカルファイルやフォルダの操作に。撮影した10–100MB単為のJPGやRaw画像連番を保存したり、読み出して `URL.createObjectURL()` し、プレビューウィンドウの`` に都度セットするのにも使っています。このサイトのCMSシステム、[Morion](/morion)でも使っています。 [FileSystemHandle](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemHandle)は、`IndexedDB`にそのまま保存可能。一度ユーザーにディレクトリを選択してもらえば、次からパーミッションなしでガンガンファイルを読み書きできます。 あと個人的には[FileSystemObserver](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemObserver)は気になっています。ディレクトリ内のファイル変更を再帰的に検知して、自動的にアプリ側に反映できたらいいなぁ。 ### [Origin Private File System (OPFS)](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) サイトのoriginごとに与えられる、`File System API`で読み書き可能な専用のディレクトリ。[Koma](/koma)では無名プロジェクトの保存や、ファイルのキャッシュに使っています。ローカルのファイルよりも少しだけ高速に読み書きできるって噂を聞いたことがあります。 ### [Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API) `OPFS`や`localStorage`、`IndexedDB`で使用可能な残容量などを取得できます。PCだと大体そのままシステムのハードドライブの残容量になることが多い？（少なくともmacOSでは） ### [setPointerCapture](https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture) [Tweeq](/tweeq)の[Drag-to-tweak Interaction](/Drag-to-tweak_Interaction)の実装に使いました。DOMの範囲を超えたドラッグを、そのDOMの`pointermove`イベントとして検知し続けてくれる。 ### [PointerLock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) 元々はゲームのエイム操作とかで、ポインターの実位置をロックして、上下左右へのマウス移動を無限に取得できるようにするために策定されたっぽいです。[Tweeq](/tweeq)の[Drag-to-tweak Interaction](/Drag-to-tweak_Interaction)の実装で、ポインター位置を一時的に不可視にしてオーバーレイUIを表示させるために使用しています。 ### [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) どマイナー、かつ、どニッチ。[Tweeq](/tweeq)のカラーピッカーで、画面上の色をスポイトするのに使えます。 ### [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) これも[Tweeq](/tweeq)で使いました。 ### [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) 数年後にWidely Availableになりそうなので、[Tweeq](/tweeq)で使えそう。[Floating UI](https://floating-ui.com/)の置き換えを目指せそう。 ## Footnotes 1. [↩](#user-content-fnref-mctk)