7.1 Geolocation API
Web APIs (Web Application Programming Interfaces) は、ウェブアプリケーションがブラウザやユーザーのデバイスの機能と連携するための重要な手段を提供してくれるんだ。ここで、GeolocationとNotificationsを含むいくつかのAPIとその使い方を見ていこう。
Geolocation APIを使うと、ウェブアプリケーションがユーザーのデバイスの地理的位置情報を取得できるんだよ。これは、マップ、ナビゲーション、ジオターゲティングといったアプリケーションで役立つね。
位置情報へのアクセス許可のリクエスト
Geolocation APIを使用するには、ウェブアプリケーションがユーザーに対して位置情報へのアクセス許可を求める必要があるんだ。これは、navigator.geolocation.getCurrentPosition()メソッドを使って行うよ。
Geolocation APIの使用例:
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
},
(error) => {
console.error('Error getting geolocation:', error);
},
{
enableHighAccuracy: true, // 高精度
timeout: 5000, // 応答待ちのタイムアウト(ms)
maximumAge: 0 // キャッシュデータを使用できる最大時間(ms)
}
);
} else {
console.log('このブラウザではGeolocationがサポートされていません。');
}
位置情報の追跡
navigator.geolocation.watchPosition()メソッドでユーザーの位置の変化を追跡できるよ。
位置の追跡の例:
let watchId;
if ('geolocation' in navigator) {
watchId = navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
},
(error) => {
console.error('Error getting geolocation:', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// 位置追跡の停止
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications APIを使うと、ウェブアプリケーションがユーザーのシステムに通知を表示できるんだ。これは、ブラウザのタブが非アクティブな場合でもユーザーの注意を引くのに役立つよ。
通知送信の許可のリクエスト
Notifications APIを利用するために、ウェブアプリケーションはユーザーに通知送信の許可を求めなきゃね。
許可リクエストの例:
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('通知の許可が得られました。');
} else {
console.log('通知の許可が拒否されました。');
}
});
} else {
console.log('このブラウザでは通知がサポートされていません。');
}
通知の送信
許可が得られた後は、Notificationコンストラクタを使って通知を送信できるよ。
通知送信の例:
if (Notification.permission === 'granted') {
const options = {
body: 'これは通知ボディです',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('Hello, world!', options);
// 通知をクリックした時の処理
notification.onclick = (event) => {
event.preventDefault(); // デフォルトの遷移を防止
window.open(notification.data.url, '_blank');
};
}
7.3 他の便利なWeb API
1. DeviceOrientation API
DeviceOrientation APIは、デバイスの空間における位置を取得できるんだ。
DeviceOrientation APIの使用例:
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
});
2. Battery Status API
Battery Status APIは、デバイスのバッテリー状態についての情報を提供してくれるよ。
Battery Status APIの使用例:
navigator.getBattery().then((battery) => {
console.log(`Battery level: ${battery.level * 100}%`);
console.log(`Battery charging: ${battery.charging}`);
battery.addEventListener('levelchange', () => {
console.log(`Battery level changed: ${battery.level * 100}%`);
});
battery.addEventListener('chargingchange', () => {
console.log(`Battery charging state changed: ${battery.charging}`);
});
});
3. Fullscreen API
Fullscreen APIは、ウェブページをフルスクリーンモードに切り替えられるんだ。
Fullscreen APIの使用例:
const element = document.documentElement; // ドキュメント全体
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`フルスクリーンモードを有効にしようとした際のエラー: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION