2025年に入って3度目の自分のサイト再構築をしていた時（どうか突っ込まないでください）、私はあることを思い出しました。それは、「ブラウザは実は魔法のような存在だ」ということです。

私たちが日々扱う終わりなきフォームバリデーションやエラー状態、APIコールの裏側で、Webにはまだ「奇妙な小さな機能」がたくさん詰まっています。それはまるで、昔のゲームで隠しステージを見つけた時のような、思わずニヤリとしてしまうようなものです。

私たちは普段、fetch() や addEventListener() といったお決まりのツールキットにこだわりがちです。しかしブラウザAPIにはエンジニアリングというより「イースターエッグ（隠し要素）」に近い、忘れ去られた層が存在します。CRUDアプリというより、「えっ、こんなところで何してるの？！」という感覚に近いものです。

正直なところ、B2Bダッシュボードの開発でスプリント112あたりを回しているような状況なら、あなたには少しの楽しみが必要でしょう。これらのAPIは、ただ奇妙なものを作るためだけのものではありません。Web開発の楽しさや遊び心、そして純粋な有用さを再発見させてくれるものです。

プログラムでスマホを振動させるのは、確かに面白い。でも、その同じAPIを使えば、モバイルでのエラーハンドリングをよりアクセシブル（親切）にできます。

MIDIキーボードでタイピングをするのは、単なる宴会芸に過ぎないでしょう。でもそれは、代替ハードウェアを必要とする人々にとって正当な入力方法にもなり得るのです。

一見すると常軌を逸しているように見えるこれらの機能も、それぞれが「心地よいインターフェース」「予想外のインタラクション」、そして「思慮深いアクセシビリティの向上」への扉を開いてくれます。

それでは、驚くほど奇妙で素晴らしい5つのブラウザAPIを紹介しましょう。これらは遊び心にあふれ、便利で、Reactコンポーネントのデバッグよりもきっと楽しいはずです。

1. Battery Status API：世話焼き（だけど少し不気味）な友人

• 実用的なユースケース： 電力消費を考慮したUXの設計
• 楽しいユースケース： バッテリー低下時のディスコパーティー

ノートPCのバッテリーが10%を切った時、私のWebサイトはディスコに変わり、「充電しろ！」と叫び始めます。どうやら私のコンピュータは、私の人生の選択に意見したいようです。

navigator.getBattery().then(battery => {
  function checkBattery() {
    if (battery.level < 0.1) {
      document.body.style.animation = 'disco 0.5s infinite';
      document.body.insertAdjacentHTML('beforeend', '<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; z-index: 9999;">🔋 GO CHARGE YOURSELF! 🔋</div>');
    }
  }
  battery.addEventListener('levelchange', checkBattery);
});

しかし、落とし穴も…

注意点として、Battery Status APIはプライバシー上の懸念から、ほとんどのブラウザで非推奨となっています。Firefoxでは2016年に削除され、現在は特定のバージョンのChrome系ブラウザでしかサポートされていません。しかし、イースターエッグや実験的な機能としては、今でも完璧（かつ時として便利）です。

思慮深いユースケース：電力を考慮したUX

あなたのサイトが訪問者のバッテリー残量を気遣うことができます。残量が少ない？ それなら自動的に軽量テーマに切り替えたり、アニメーションをオフにしたり、PCが切れる前に保存を促したりしましょう。会計ソフトやCMS、ERPといった、重要な作業を伴うサイトには最適です。

その他の試せること

• バッテリー低下時にビデオの画質を下げる
• 残量20%以下で重いアニメーションを無効化する
• 「作業を保存してください」という警告を表示する

2. Vibration API：コードで語るスマホシェイカー

• 実用的なユースケース： エラーやメッセージの触覚フィードバック
• 楽しいユースケース： リズムゲームやビートに同期した振動

振動パターンでメッセージを送ってみましょう。準備はいいですか？モールス信号で「HELLO」を送ります。

// モールス信号 "HELLO": .... . .-.. .-.. ---
if ("vibrate" in navigator) {
  navigator.vibrate([
    100, 50, 100, 50, 100, 50, 100, // H: ....
    300, // pause
    100, // E: .
    300, // pause
    100, 50, 300, 50, 100, 50, 100, // L: .-..
    300, // pause
    100, 50, 300, 50, 100, 50, 100, // L: .-..
    300, // pause
    300, 50, 300, 50, 300 // O: ---
  ]);
}

あなたのスマートフォンが電信機になりました！

Vibration APIの何が良いのか？

Vibration APIを使えば、Webサイトから文字通りユーザーのスマホを揺らすことができます。現代のモバイルブラウザでサポートされています（iOS Safariは残念ながら非対応）。

正当な使い道（本当に）

Webベースのゲームやアプリにおいて、触覚フィードバックは臨場感を高めます。キャラがダメージを受けたら「ブルッ」。タイマーが切れたら「微振動」。フォームの入力エラーなら「クイックな振動」で注意を引く。クリエイティブな活用例には以下があります：

• ビートに同期した振動を伴うリズムゲーム
• 視覚障害者のためのアクセシビリティ機能
• 呼吸パターンに合わせた振動を出す瞑想アプリ

3. Web Speech API：ブラウザの内なる独り言

• 実用的なユースケース： インクルーシブデザイン、スクリーンリーダーの強化、音声操作フォーム
• 楽しいユースケース： 喋るフォーチュンクッキー、高音のロボットボイス

私は、プログラミングの格言をバカバカしいほど高音のロボットボイスで届ける「喋るフォーチュンクッキー」サイトを作りました。ブラウザをモチベーショナル・スピーカーにしたかったからです。

const fortunes = [
  "You will debug for exactly three hours and discover the bug was a missing semicolon.",
  "A wild merge conflict will appear in your near future.",
  "Your code will work perfectly in staging but break spectacularly in production.",
  "You are the chosen one. But only until the next deploy."
];

function speakFortune() {
  const fortune = fortunes[Math.floor(Math.random() * fortunes.length)];
  const utterance = new SpeechSynthesisUtterance(fortune);
  utterance.pitch = 1.5; // 少しおどけた感じにする
  utterance.rate = 0.9;
  speechSynthesis.speak(utterance);
}

ブラウザがロボットボイスでプログラミングの知恵を授けてくれるのは、どこか魔法のような感覚があります。

Web Speech APIは実は強力

このAPIは2つの魔法から成ります。「音声合成（Speech Synthesis）」がブラウザに喋らせ、「音声認識（Speech Recognition）」がブラウザに聞き取らせます。音声合成については、Chrome、Firefox、そしてSafariでも十分にサポートされています。

via GIPHY

真のアクセシビリティ向上

このAPIはアクセシビリティにおいて驚異的です。ダッシュボードの更新内容を自動で読み上げたり、複雑なUI要素に音声説明を加えたり、音声制御のナビゲーションを作成したり。これこそが最高のインクルーシブデザインです。

実用的なユースケース

• スクリーンリーダーの機能強化
• 音声制御フォーム
• 視覚障害者向けのオーディオフィードバック
• 発音確認ができる言語学習アプリ

4. WebHID API：ハンドルがスクロールバーになる時

• 実用的なユースケース： アクセシブルなWeb UIの設計
• 楽しいユースケース： スクロールをマリオカート風に

Webの入力といえばキーボードやマウスのことだと思っていた時代を覚えていますか？ 新たなレベルへようこそ。それがWebHIDです。

私は古いレーシングホイール（ハンドル型コントローラー）をUSBでブラウザに繋ぎ、ハンドルを左右に切ることでブログ記事をスクロールできるようにしました。だってできるんですから！

人間工学的だったか？ 全く違います。 客観的に見て最高だったか？ もちろんです。

const devices = await navigator.hid.requestDevice({ filters: [ { vendorId: 0x046d } ]});
if (devices.length) {
  await devices[0].open();
  devices[0].addEventListener('inputreport', (e) => {
    // Assume axis 0 is steering
    const steer = e.data.getInt8(0);
    window.scrollBy(0, steer); // Steer = scroll!
  });
}

突然、LogRocketの記事を読むのがマリオカートをプレイしているような気分になりました。生産性には危険ですが、金曜午後の実験としては最高です。

そもそもWebHIDとは？

WebHID APIを使えば、WebサイトがHID（Human Interface Device）と直接通信できます。ゲームパッド、MIDIドラム、バーコードスキャナー、あるいは引き出しの奥に眠っている謎のUSBハードウェアまで。現在はChrome 89+やEdge 89+でサポートされていますが、FirefoxやSafariでは未対応です。

本当に役に立つの？

もちろんです。STEMフェアの学生たちと協力したり、アクセシブルなWeb UIを設計したりする場面を想像してください。誰かがカスタムジョイスティックや特殊なコントローラーを持っていれば、それをネイティブに動かすことができます。ダウンロードや仲介ソフトは不要、ブラウザから「繋ぐだけ」です。WASMのようですが、良いものです。

他のぶっ飛んだアイデア

• PlayStationコントローラーの入力で動くSVG blob
• MIDIドラムパッドで発動する紙吹雪
• バーコードスキャナーでイースターエッグを解除

5. WebMIDI API：キーストロークを音符に変える

• 実用的なユースケース： インタラクティブなサウンドデザイン
• 楽しいユースケース： リックロール（釣り動画）の絶好のチャンス

埃を被ったMIDIキーボードを引っ張り出し、鍵盤を叩くたびに画面上のあちこちにランダムな絵文字が現れるようにしました。我が家ではこれが「生産性」と呼ばれています。

navigator.requestMIDIAccess().then((access) => {
  for (const input of access.inputs.values()) {
    input.onmidimessage = (msg) => {
      if (msg.data[0] === 144 && msg.data[2] > 0) { // Note-on message
        const emoji = ['🎵', '🎶', '🎸', '🥁', '🎹', '🎺', '🎷'][Math.floor(Math.random() * 7)];
        document.body.insertAdjacentHTML('beforeend', `<span style="font-size: 2rem; position: absolute; left: ${Math.random() * 100}%; top: ${Math.random() * 100}%;">${emoji}</span>` );
      }
    };
  }
});

演奏するたびにWebサイトが視覚的なシンフォニーへと変わります。馬鹿げているけれど楽しく、驚くほど引き込まれます（そしてリックロールの絶好の機会でもある）。

via GIPHY

真面目な側面：共同音楽制作

WebMIDI APIはブラウザを、MIDIメッセージの送受信が可能な楽器へと変貌させます。大陸を超えてミュージシャンがセッションできるWebアプリを想像してください。ベルリンの誰かが弾いた音でモントリオールのシンセを鳴らし、東京の照明を制御し、あなたのブラウザでビジュアライザーを作る。何もインストールせず、ブラウザだけでリアルタイムの音楽コラボレーションが可能になります。

他にも試せるぶっ飛んだ活用法

• ブラウザベースのDAW（デジタル・オーディオ・ワークステーション）やシーケンサー
• 音楽理論を学べる知育アプリ
• インタラクティブなサウンドデザイン・ツール

ボーナスラウンド：さらなるWebの魔法

もっとブラウザの奇妙さを知りたいなら：

• Ambient Light API：部屋の照明に合わせてサイトのテーマを変化させる（動けばラッキー）
• Device Motion API：スマホの傾きに反応するデジタル溶岩ランプを作る
• Clipboard API：コンテンツを自動でフォーマットする「スマート・ペースト」を作成

特にAmbient Light APIは面白いです。照度（ルクス）を検知してUIを調整できるので、Kindleのような読書体験やスマートホームのインターフェースに最適です。

なぜ「奇妙なもの」にこだわるのか？

実のところ、これらのAPIのほとんどは、次のSaaSダッシュボードに革命を起こすようなものではありません。しかし、もっと重要なことを教えてくれます。それは、「Webは今でも実験と喜び、そして嬉しい驚きに満ちた場所である」ということです。

私がWebサイトを作り始めた頃、すべてが可能だと感じられました。これらのAPIはその感覚を呼び戻してくれます。以下のような場面に最適です：

• 学習：ブラウザの内部的な仕組みを理解する
• プロトタイピング：複雑な設定なしに突飛なアイデアを試す
• アクセシビリティ：より包括的な体験を創造する
• 喜び：Webをもう少しだけ魔法のような場所に変える

これらのAPIは、スキルを磨き、型破りなアイデアを形にし、誰にとっても楽しい体験を構築するための完璧な口実になります。平凡な枠を超えて、遊び心を再発見しましょう。

次にフォーム作成やAPIコールの繰り返しに行き詰まったら、これらのAPIを1つ手に取って、「素晴らしいほどに無駄なもの」を作ってみてください。Webの奇妙さを保ってくれたことに、未来の自分が感謝するでしょう。

※訳者註：本翻訳記事は執筆者の意図を尊重するため、原文掲載内容をそのまま掲載しております。また、記載されている会社名、製品名は、各社の商標または登録商標です。