ブラウザのAPIであそぼう

はじめに

フロントエンド開発において、console.log() や fetch()は欠かせない存在です。
しかし、実はこれらはJavaScript言語自体の機能ではありません。
これらはブラウザが提供するWeb APIであり、JavaScriptはそれを呼び出しているに過ぎません。

これらのAPIには豊富な種類があります。
先日、Web API一覧のMDNのドキュメントを眺めていたら、知らないAPIがたくさんあることに気づきました。
そこで今回は、普段あんまり使うことがないけど便利そう・面白そうなAPIをサンプルを交えて紹介していきます！

ブラウザが提供する機能 - Web API

先述したように、console.log()やfetch()、DOM操作の機能などはJavaScriptという言語そのものの機能ではなく、ブラウザが提供する機能（API）です。
JavaScriptが準拠しているECMAScript仕様には、これらのAPIは定義されていません。
ブラウザが提供する機能についての標準仕様は、WHATWGやW3Cといった団体が機能ごとにまとめています。（例: Console Standard）
ブラウザごとにこれらの仕様を実装しているので、ブラウザによって使えるAPIが異なったりします。
ブラウザごとの対応状況は、ドキュメントに記載されていることが多いです。

ブラウザでなんでもできるぞ！色んなWeb API

面白い！使ってみたい！と思ったブラウザのAPIを紹介していきます。簡単なデモをAIに作ってもらいました。

1. File System Access API

概要・特徴:

ブラウザでファイルの読み書きができるようになります。
このAPIを使えば、ブラウザ上で動作するエディタのようなアプリケーションを作成することができます！
VS Code (Web版) などもこの技術を使っています。

使い方:

let fileHandle;

// ファイルを開く
[fileHandle] = await window.showOpenFilePicker();

// データを書き込む（上書き保存）
const writable = await fileHandle.createWritable();
await writable.write("Hello World!");
await writable.close();

2. Document Picture-in-Picture API

概要・特徴:

Picture-in-Picture (PiP) といえば動画プレイヤーのイメージがありますが、このAPIを使うと、任意のHTML要素（<div>など）を別ウィンドウとして切り離すことができます。
いつからか、Google Meetで別のタブを開くと参加者の映像が小さいウィンドウとしてポップアップされるようになりましたが、このAPIを使っているのかな。

使い方:

// 新しいPiPウィンドウを開く
const pipWindow = await documentPictureInPicture.requestWindow({
  width: 300,
  height: 300,
});

// 通常のDOM操作で、元の画面から要素を移動させる
pipWindow.document.body.append(myAppElement);

3. Gamepad API

概要・特徴:

PCやスマホに接続されたゲームコントローラーの入力を、JavaScriptから直接読み取ることができるAPIです。
ボタンのON/OFFだけでなく、アナログスティックの傾きもリアルタイムに取得できます。

デモとしてPS5のDualSenseを接続してみました。DualSenseのトリガーって、軽く絞ったりできるんですが、トリガーのinputも0/1ではなく0.4みたいな感じで「絞られ具合」が値として返ってきていて驚きました。PSボタンや、スティック押し込みも検知できる。すごいぞ！

使い方:

window.addEventListener("gamepadconnected", (e) => {
  console.log("コントローラー接続:", e.gamepad.id);
});

// ゲームループ内で入力を監視するのが一般的
function loop() {
  const gamepads = navigator.getGamepads();
  const gp = gamepads[0]; // 1つ目のコントローラー
  if (gp && gp.buttons[0].pressed) {
     // Aボタンが押された！
  }
  requestAnimationFrame(loop);
}

4. Summarizer API

概要・特徴:

ブラウザに内蔵されているAIモデルを用いて、テキストを要約するAPIです。（実験段階）対応しているブラウザは少なく、使用する際も、Chromeの実験用のフラグをonにしなくてはなりませんでしたが、非常に現代的なAPIです。
ブラウザに内蔵されているものを使うので、通信が発生しませんし、プライバシーも守られます。
要約タイプや、生成するテキストの長さを指定することができます。

使い方:

const summarizer = await window.ai.summarizer.create({
  type: 'tldr', 
  length: 'medium', 
  outputLanguage: 'ja'
});

const summary = await summarizer.summarize("長い文章...");
console.log(summary);

summarizer.destroy();

5. WebRTC API

概要・特徴:

プラグインなしでブラウザ同士がP2P（Peer-to-Peer）通信を行うためのAPIです。
ZoomやGoogle Meetなどのビデオ会議システムの基盤技術であり、映像・音声だけでなく、任意のデータ（テキストやファイル）も高速に送受信できます。

通信開始前に必要な、お互いの情報を交換する「シグナリング」という工程を手動で行なってデモをしてみました。本来は、シグナリングはサーバー経由で行われます。
「やっほー！」とスマホ側で打ち、PC側で「同期されてますね！」と打っています。即座に互いのデバイスに反映されていますね。（仕組みはもっと勉強せねば。。）

使い方:

const peer = new RTCPeerConnection();

// データ送信用のチャンネルを作成
const channel = peer.createDataChannel("chat");
channel.onopen = () => channel.send("やっほー！");

// 相手からのデータ受信を監視
peer.ondatachannel = (event) => {
  const receiveChannel = event.channel;
  receiveChannel.onmessage = (e) => console.log("受信:", e.data);
};

// ※ この後、シグナリング（相手との接続情報の交換）を経て通信開始

6. DeviceOrientation Event

概要・特徴:

センサーAPIの一つで、スマホやタブレットの内蔵ジャイロセンサーを利用して、デバイスの「傾き」や「回転」を検知します。iOSで動作させるにはユーザーの許可を得る必要がありました。
ARコンテンツの視点操作などに活用できます。
タブレットを傾けてボールを転がす迷路みたいなゲーム、昔やってました。

使い方:

// イベントリスナーで値を取得
window.addEventListener('deviceorientation', (event) => {
  const { alpha, beta, gamma } = event;
  console.log(`Z回転:${alpha}, X傾き:${beta}, Y傾き:${gamma}`);
});

7. document.designMode

概要・特徴:

最後はAPIじゃないんですが、調べていて面白いなと思ったものです。
これを有効にすると、表示しているWebページ全体がテキストエディタのように編集可能になります。昔からあるもののようです。
いたずらの用途しか思い浮かびません。

使い方:

document.designMode = 'on';

おわりに

Web API、意外と色んなことができるなと思いました。
これからもどんどんできることが増えていくだろうし、Webアプリケーションがもっと当たり前になっていくのかもしれませんね。
AI系のAPIも登場していたのにはびっくりしました。今後もウォッチしていこうと思います！