【JavaScript】NavigatorAPI ブラウザとデバイスの機能にアクセスする方法

Navigatorオブジェクトとは

Navigatorオブジェクトは、ブラウザの状態や機能に関する情報を持っていて、window.navigatorからいつでも参照できます。

// 基本的な情報の取得
console.log(navigator.userAgent);      // ユーザーエージェント文字列
console.log(navigator.language);       // ブラウザの優先言語
console.log(navigator.onLine);         // オンライン状態 (true/false)

ユーザー環境の基本情報

言語と地域

ユーザーの言語設定などを取得できるので、表示の切り替えなどに役立ちます。

const preferredLanguage = navigator.language;
const supportedLanguages = navigator.languages;

console.log(`優先言語: ${preferredLanguage}`);
console.log(`対応言語リスト: ${supportedLanguages.join(', ')}`);

オンライン状態

ユーザーがインターネットに接続しているかどうかを判定できます。オフライン時の機能提供などに利用されます。

if (navigator.onLine) {
  console.log('現在オンラインです。');
}

// 接続状態の変化を監視
window.addEventListener('online', () => console.log('オンラインに復帰しました。'));
window.addEventListener('offline', () => console.log('オフラインになりました。'));

デバイス情報

パフォーマンスの最適化に役立つ、ハードウェアに関する情報も取得できます。

• navigator.hardwareConcurrency: 利用できるCPUの論理コア数を返します
• navigator.deviceMemory: デバイスのおおよそのメモリ容量（GB単位）を返します

console.log(`CPUコア数: ${navigator.hardwareConcurrency}`);
console.log(`デバイスメモリ (GB): ${navigator.deviceMemory}`);

ユーザーエージェント

User Agent Data

userAgent文字列の代替として推奨されている、よりプライバシーに配慮したAPIです。ブラウザのブランドやバージョン、プラットフォーム情報などを構造化されたデータとして取得できます。

if ('userAgentData' in navigator) {
  console.log('ブランド:', navigator.userAgentData.brands);
  console.log('プラットフォーム:', navigator.userAgentData.platform);
  console.log('モバイル:', navigator.userAgentData.mobile);
  
  // 高エントロピーヒントを取得
  navigator.userAgentData.getHighEntropyValues(['model', 'uaFullVersion'])
    .then(values => {
      console.log('詳細情報:', values);
    });
}

WebDriver検出

ブラウザが自動テストツール（例: Selenium）によって制御されているかどうかを示すboolean値を返します。ボット対策などで利用されることがあります。

if (navigator.webdriver) {
  console.log('自動テストツールによって制御されています');
} else {
  console.log('通常のブラウザ操作です');
}

ネットワーク接続

Connection API

ユーザーのネットワーク接続に関する詳細な情報（例: 4g, wifi）や、回線速度の推定値（downlink）、データセーバーモードが有効か、などを取得できます。低速回線のユーザーに対して、表示するコンテンツを最適化する際などに役立ちます。

if ('connection' in navigator) {
  const connection = navigator.connection;
  console.log(`接続タイプ: ${connection.effectiveType}`);
  console.log(`ダウンロード速度: ${connection.downlink} Mbps`);
  console.log(`RTT: ${connection.rtt} ms`);
  console.log(`データセーバーモード: ${connection.saveData}`);
  
  // 接続状態の変化を監視
  connection.addEventListener('change', () => {
    console.log('接続状態が変更されました');
  });
}

機能と権限

Cookie

ブラウザでCookieが有効になっているかを確認する、シンプルですが重要なプロパティです。

if (navigator.cookieEnabled) {
  console.log('Cookieが有効です');
} else {
  console.log('Cookieが無効です');
}

権限確認

permissions.query()メソッドを使うことで、「位置情報」や「通知」などの権限が現在どのような状態（granted, prompt, denied）にあるかを、許可ダイアログを出す前に確認できます。ユーザー体験を向上させる上で非常に重要です。

async function checkPermission(permissionName: string) {
  try {
    const result = await navigator.permissions.query({ name: permissionName });
    console.log(`${permissionName}の権限状態: ${result.state}`);
    
    // 権限状態の変化を監視
    result.addEventListener('change', () => {
      console.log(`${permissionName}の権限が変更されました: ${result.state}`);
    });
  } catch (err) {
    console.error('権限確認に失敗しました:', err);
  }
}

// 例: 位置情報の権限確認
checkPermission('geolocation');

クリップボードと共有

クリップボード操作

システムのクリップボードを安全に操作するためのAPIです。ユーザーのクリックといった操作に応じて使うのが基本です。

async function copyText(text: string) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('クリップボードにコピーしました。');
  } catch (err) {
    console.error('コピーに失敗しました:', err);
  }
}

Web Share API

OSが標準で持っている「共有」機能を呼び出せます。

async function shareContent() {
  const shareData = {
    title: 'ページのタイトル',
    text: 'このページを共有します。',
    url: window.location.href,
  };

  if (navigator.canShare && navigator.canShare(shareData)) {
    try {
      await navigator.share(shareData);
      console.log('正常に共有されました。');
    } catch (err) {
      console.error('共有に失敗しました:', err);
    }
  } else {
    console.log('このブラウザは共有に対応していません。');
  }
}

ハードウェアとセンサーへのアクセス

Navigatorを通じて、カメラや位置情報といった、より高度なデバイスの機能も使えます。これらの多くは、利用する際にユーザーの許可が必要です。

メディアデバイス

カメラやマイクといったメディア入力デバイスにアクセスします。

async function startCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    const videoElement = document.querySelector('video');
    if (videoElement) {
      videoElement.srcObject = stream;
    }
  } catch (err) {
    console.error('メディアデバイスへのアクセスに失敗しました:', err);
  }
}

位置情報

デバイスの物理的な位置情報を取得します。

navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    console.log(`現在の位置: 緯度 ${latitude}, 経度 ${longitude}`);
  },
  (error) => {
    console.error('位置情報の取得に失敗しました:', error.message);
  }
);

その他のAPI

この他にも、Navigatorは特定のハードウェアと連携するためのAPIも用意しています。

• navigator.bluetooth: Bluetoothデバイスとの通信
• navigator.usb: USBデバイスとの通信
• navigator.serial: シリアルポートを介した通信

その他のメソッド

Beacon API

ページを離れる直前などに、サーバーへ確実にデータを送信したい場合に使います。Google Analyticsなどの分析ツールで内部的に利用されている、信頼性の高いデータ送信方法です。

// ページを離れる前にデータを送信
window.addEventListener('beforeunload', () => {
  const data = JSON.stringify({
    timestamp: Date.now(),
    action: 'page_exit'
  });
  
  navigator.sendBeacon('/api/analytics', data);
});

Vibration API

デバイスを振動させるAPIです。触覚的なフィードバックをユーザーに与えたい場合に使います。

// 基本的な振動（200ms）
navigator.vibrate(200);

// パターンを指定した振動
// [振動時間, 休止時間, 振動時間, 休止時間...]
navigator.vibrate([100, 30, 100, 30, 100]);

// 振動を停止
navigator.vibrate(0);

Service Workerとストレージ管理

Service Worker

Service Workerを登録・管理し、PWA（プログレッシブウェブアプリ）のオフライン対応やプッシュ通知などで使われます。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Workerが登録されました:', registration);
    })
    .catch(error => {
      console.error('Service Workerの登録に失敗しました:', error);
    });
}

ストレージ管理

ブラウザのストレージ使用量を確認したり、永続化ストレージの許可を要求したりできます。

async function checkStorage() {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    const estimate = await navigator.storage.estimate();
    console.log(`使用量: ${estimate.usage} bytes`);
    console.log(`空き容量: ${estimate.quota} bytes`);
  }
}

注意点とベストプラクティス

機能の有無の確認とエラー処理

Navigator APIの機能は、全てのブラウザで使えるわけではありません。そのため、APIを使う前には、if ('share' in navigator)のように機能が存在するかどうかを確認し、使えない場合の処理も用意しておくことが重要です。

また、ユーザーの許可が必要なAPI（位置情報やメディアデバイスなど）は、try...catchブロックで囲むか、Promiseの.catch()でエラーを適切に処理するようにしましょう。

まとめ

Navigator APIを使えば、Webアプリケーションからブラウザやデバイスの様々な機能にアクセスできます。ただし、使える機能はブラウザによって異なるため、利用前には必ず機能の有無を確認し、ユーザーのプライバシーにも配慮しながら使うようにしましょう。