HTML5 Advent Calendar
公開日：
この記事は、HTML5 Advent Calendar2012の17日目のエントリです。
こんにちは。x-fitチームエバンジェリストの渡辺です。いま＠ITで連載をさせていただいていますが、仕事柄、Webサイトのスマートフォン表示や動作について調べています。スマートフォンのHTML5に対する対応の度合いはOSやバージョンによってかなりの差がありますが、HTML5のAPIについて、マイナーではあるもののスマートフォンをはじめとしたスマートデバイスで使えたら便利そうなもののご紹介と、そのAPIの現在の対応状況を調べてみようと思います。ご紹介するAPIは、"5 More HTML5 APIs You Didn’t Know Existed"から選びました。サンプルコードも一部を引用・改変しています。
Fullscreen API
Fullscreen APIは、ブラウザの全画面表示を行うためのAPIです。スマートデバイスは、画面サイズがそれほど大きくありません。画面サイズいっぱいに動画やコンテンツを表示することができれば、ユーザの視線を集中させることができるようになるでしょう。
サンプルコード
Fullscreen APIのサンプルコードは以下のようなものです。「Launch Fullscreen」ボタンは画面全体を、「Launch Fullscreen for an Element」ボタンは、画面のオレンジの要素のみを全画面で表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<title>full screen API</title>
<style type="text/css">
#anElement{
padding: 20px;
background-color: orange;
border-style: solid;
border-width: 2px;
border-color: red;
}
</style>
</head>
<body>
<div id="anElement">
an Element
</div>
<div style="padding:20px;">
<button onclick="launchFullScreen(document.documentElement);">Launch Fullscreen</button>
<button onclick="launchFullScreen(document.getElementById('anElement'));">Launch Fullscreen for an Element</button>
<button onclick="cancelFullScreen();">Hide Fullscreen</button>
</div>
<script type="text/javascript">
//Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
function cancelFullScreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
</script>
</body>
</html>
確認結果
いくつかの機種で確認してみました。使用したブラウザはiOS・Androidの代表的ブラウザです。表中で「－」になっているところは、そのブラウザが搭載されていない、またはアプリとしてインストールできないことを示しています。
| 機種 | OS・Version | ブラウザ | |||||
| Androidブラウザ | Chrome | Safari | Opera mini(iOS) Opera mobile(Android) |
Firefox | IE | ||
| iPhone 4 | iOS 4.0 | - | - | × | - | - | - |
| iPhone 5 | iOS 6.0 | - | - | × | × | - | - |
| Xperia arc | Android_2.3 | × | - | - | × | ○ | - |
| GALAXY NEXUS | Android_4.0 | × | × | - | × | ○ | - |
| htc J butterfly | Android_4.1 | × | × | - | × | ○ | - |
| IS12T | Windows Phone 7.5 |
- | - | - | - | - | × |
動作したときの画面キャプチャ（Launch Fullscreenボタンを押したときと、Launch Fullscreen for an Elementボタンを押したとき）
getUserMedia API
getUserMedia APIは、ブラウザが起動しているデバイスのカメラ、マイクのようなストリームを生成できるメディアを操作するためのAPIです。
サンプルコード
getUserMedia APIのサンプルコードは以下のようなものです。画面上部に、カメラからの映像をストリームで取得し、「Snap Photo」ボタンでキャプチャした画像を画面下部に表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Video Capture</title>
<style type="text/css">
#video,#canvas{
border-style: solid;
border-width: 1px;
border-color: gray;
}
</style>
</head>
<body>
<video id="video" width="320" height="240" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 320, 240);
});
}, false);
</script>
</body>
</html>
確認結果
| 機種 | OS・Version | ブラウザ | |||||
| Androidブラウザ | Chrome | Safari | Opera mini(iOS) Opera mobile(Android) |
Firefox | IE | ||
| iPhone 4 | iOS 4.0 | - | - | × | - | - | - |
| iPhone 5 | iOS 6.0 | - | - | × | × | - | - |
| Xperia arc | Android_2.3 | × | - | - | ○ | × | - |
| GALAXY NEXUS | Android_4.0 | × | × | - | ○ | × | - |
| htc J butterfly | Android_4.1 | × | × | - | ○ | × | - |
| IS12T | Windows Phone 7.5 |
- | - | - | - | - | × |
動作した時の画面キャプチャ
Battery API
Battery APIは、モバイルデバイス用に特化したAPIと言えます。バッテリーの充電ステータスや、残量などを知ることができます。
サンプルコード
Battery APIのサンプルコードは以下のようなものです。充電しているかどうか、バッテリー残量、放電時間を表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<title>battery</title>
</head>
<body>
<div id="message"></div>
<script type="text/javascript">
//Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// A few useful battery properties
var batProps = "";
batProps = batProps + "Battery charging: "+battery.charging; // true
batProps = batProps + "Battery level: ", battery.level; // 0.58
batProps = batProps + "Battery discharging time: ", battery.dischargingTime;
$("#message").html(batProps);
// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
alert("Battery charge change: "+battery.charging);
}, false);
</script>
</body>
</html>
確認結果
| 機種 | OS・Version | ブラウザ | |||||
| Androidブラウザ | Chrome | Safari | Opera mini(iOS) Opera mobile(Android) |
Firefox | IE | ||
| iPhone 4 | iOS 4.0 | - | - | × | - | - | - |
| iPhone 5 | iOS 6.0 | - | - | × | × | - | - |
| Xperia arc | Android_2.3 | × | - | - | × | ○ | - |
| GALAXY NEXUS | Android_4.0 | × | × | - | × | ○ | - |
| htc J butterfly | Android_4.1 | × | × | - | × | ○ | - |
| IS12T | Windows Phone 7.5 |
- | - | - | - | - | × |
動作した時の画面キャプチャ
総評
ご紹介したAPIのスマートフォンでの対応は、まだ芳しくない状態ですね。とくに各機種とも、標準ブラウザに相当するブラウザはまだサポートされていません。サードパーティブラウザでは、サポートされているものもありました。アプリとして使ってもらうために積極的に新機能を追従しようとしているのかもしれませんね。
Tweet
