Screenshots
Overview
概要
ブラウザに標準搭載されながら知られていない強力なWeb APIを、安全に試せるカタログサイトです。音声合成・認識(Speech)、MIDI、Bluetooth、振動、バッテリー、クリップボード、共有、画面ロック、デバイス方位、スポイト(EyeDropper)、ファイルシステム、通知の12種を1ページ1APIで扱い、すべて『対応判定→権限取得→ライブデモ→コード』の統一4ステップで提示。権限フローの違いを比較でき、非対応ブラウザにも空白ではなくUIモックのフォールバックを返します。マイクやクリップボードのデータは一切サーバーへ送りません。
How to use
遊び方・使い方
トップのカタログには、今のブラウザでの対応可否がライブ判定で表示されます。各APIページでは、まず対応判定パネルと権限モデルの図解を見て、次にボタン操作(常にクリック起点)でライブデモを実行。ピアノを弾いてMIDIログを見る、Bluetoothのバッテリー残量を読む、振動パターンを鳴らす、画面の色をスポイトで拾う、テキストファイルを開いて上書き保存する——などをその場で体験できます。最後に20〜40行のコードを読んでコピー可能。/matrixでAPI×ブラウザの対応表を一覧できます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19shikiTailwind CSS v4
唯一の実行時依存はコード表示のshikiのみ。権限はページ読込時に要求せずボタン操作で初めて発火させ、対応可否はaria-liveで読み上げます。ライトテーマのカタログ意匠で、カテゴリ(デバイス/メディア/OS/センサー/ファイル)ごとにアクセント色を分けています。
Highlights
工夫した点
- 対応判定はuseEffect後にstateへ反映し初期描画はスケルトンにすることで、ハイドレーション不一致を回避。判定ロジックはsrc/lib/detect.tsへ集約
- UA解析やポリフィルのライブラリを使わず、feature detectionとnavigator.userAgentDataで判定。EyeDropper等の未定義DOM型は自前の型定義で補う
- 各デモはnext/dynamic(ssr:false)で読み込み、アンマウント時にMIDI/Bluetooth/WakeLock/SpeechRecognitionを解放。DemoErrorBoundaryで失敗時も画面を保つ
To improve
改善したい点
- Chromium系のみ対応のAPI(Bluetooth/EyeDropper/File System Access等)が多く、Safari/Firefoxでは体験がフォールバックに留まる
- iOSの方位センサー等、実機の権限フロー差の検証を継続する必要がある
- 対応バージョン表は2026-07時点の手動検証で、自動更新の仕組みは未整備
What's next
今後の展望
- WebSerial・WebHID・WebUSB・WebCodecsなど対象APIの追加
- 対応表のcaniuseデータ連携による自動更新
- 各APIの組み合わせ実用サンプル(例: MIDI→音声合成)の追加