デバイス情報確認

デバイス情報確認が必要な理由

Web制作において、ユーザーが使用するデバイスの情報を把握することは重要です。
画面サイズやブラウザの種類、OSなどによって表示や挙動が変化する可能性があるため、実装時のデバッグや検証作業において、正確なデバイス情報は欠かせません。

ユーザーエージェントによる環境判別

navigator.userAgentを用いることで、アクセス元のデバイスやブラウザの情報を取得できます。
例えば、特定のバージョンのAndroidブラウザでimgの表示が崩れるような問題が発生した際には、ユーザーエージェント情報が有効な判断材料となります。

画面サイズとレスポンシブ対応

デバイスによってwidthやheightの解像度が異なるため、レスポンシブ対応では実際の表示領域に基づくレイアウト調整が求められます。
特にpicture要素やsrcset属性を使った画像切り替えでは、画面幅に応じた条件分岐が有効に働いているかの確認が重要です。

ピクセル比と高解像度対応

window.devicePixelRatioの値を確認することで、Retinaディスプレイなどの高解像度デバイスにおける画像の鮮明さを担保できます。
必要に応じて2倍サイズのimgやcanvasを用意することで、高品質な見た目を保つことが可能になります。

デバッグ時のログ添付にも有効

表示崩れや挙動不良の問い合わせに対して、ユーザーのデバイス情報を確認・共有できれば、再現性の高い検証が行えます。
不具合の原因が画像フォーマット、altの読み上げ仕様、あるいはJSの仕様差かどうかを切り分けるためにも、こうした情報は非常に有用です。

// テーブルに新しい行を追加、または既存の行を更新する関数
function addRow(item, value) {
	const table = document.getElementById('device-info');
	// 既に同じ項目の行があるか探す
	let existingRow = null; for (let i = 0; i < table.rows.length; i++) {
		if (table.rows[i].cells[0].textContent === item) {
			existingRow = table.rows[i]; break;
		}
	}
	if (existingRow) {
		// 既存の行があれば値を更新
		existingRow.cells[1].textContent = value;
	} else {
		// 新しい行を作って追加
		const row = table.insertRow(-1);
		// 項目名のセル(th)を作成
		const th = document.createElement('th');
		th.textContent = item; row.appendChild(th);
		// 値のセル(td)を作成
		const td = document.createElement('td');
		td.textContent = value;
		row.appendChild(td);
	}
}

ここでは「同じ項目が既にテーブルにあるか」をチェックし、あれば内容を更新、なければ新しい行を追加しています。こうすることで重複を避け、最新の情報だけを表示できます。

// 外部APIからグローバルIPアドレスを取得する関数
function getGlobalIP() {
	fetch('https://api.ipify.org?format=json') .then(response => response.json()) .then(data => {
		addRow('グローバルIPアドレス', data.ip);
	}) .catch(error => {
		addRow('グローバルIPアドレス', '取得できませんでした');
		console.error('IPアドレスの取得に失敗:', error);
	});
}

このコードはインターネット上のサービスを使ってユーザーのグローバルIPを取得します。非同期通信（fetch）を使い、成功したら表示、失敗したらエラーメッセージを表示する堅牢な作りになっています。

// 現在のブラウザの表示サイズを取得して表示する関数
function updateBrowserSize() {
	const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; addRow('現在のブラウザサイズ', `${width}x${height}px`);
}

画面の幅や高さはブラウザやデバイスによって違うため、複数の方法で取得しています。こうすることでどんな環境でも正確にブラウザサイズを表示可能です。

// ページ読み込み時に各種デバイス情報を取得してテーブルに追加する関数
function loadDeviceInfo() {
	// ユーザーエージェント、プラットフォーム、言語など
	addRow('ユーザーエージェント', navigator.userAgent);
	addRow('プラットフォーム', navigator.platform);
	addRow('言語', navigator.language);
	addRow('画面解像度', `${screen.width}x${screen.height}`);
	updateBrowserSize();
	addRow('色深度', screen.colorDepth);
	addRow('デバイスピクセル比', window.devicePixelRatio);
	addRow('インターネット接続', navigator.onLine ? 'オンライン' : 'オフライン');
	addRow('クッキー有効', navigator.cookieEnabled ? '有効' : '無効');
	// さらにタッチ対応やWebGL、バッテリー状態もチェック
	// ...
	getGlobalIP();
}

ブラウザやデバイスの多彩な情報をまとめて取得し、一覧表示します。これによりユーザーや開発者が環境を把握しやすくなるため、サイト改善やトラブルシューティングに役立ちます。

// ページ読み込み時に情報取得を開始
window.addEventListener('load', loadDeviceInfo);
// 画面サイズが変わったらブラウザサイズを更新
window.addEventListener('resize', updateBrowserSize);

情報をページ表示後に取得し、ユーザーが画面サイズを変えた時も表示を更新します。