WEBストレージ
スマートフォン版 Yahoo! JAPANトップでは検索履歴、位置情報履歴、履歴取得のオプションなどにHTML5のWEBストレージのひとつである、ローカルストレージを使用しています。
ローカルストレージとは、キー・バリュー型のデータ保持領域を提供してくれるHTML5の機能です。JavaScriptから簡単、かつ強力にデータの保持をしてくれるため、WEBアプリケーションを開発する際に役立ちます。またCookieと違い、大容量のデータ（iPhoneの場合数メガバイト単位）を保持しておくこともできるので、ページ内のデータをまるごとキャッシュし、次回以降のアクセスはローカルストレージのデータを表示する、というように作ることも可能です。
またほぼ同じ機能として、セッションストレージというものも用意されています。こちらも同じようにキー・バリュー型のストレージですが、1回のセッションごとにデータがクリアされるという特徴があります。新規ウインドウを開いてもそこからは別セッションという扱いになるため、データはクリアされています。
履歴のように構造化されたデータは直接WEBストレージに保存できません。JSONなどの文字列に変換してから保存し、読み取るときは逆にパースします。以下にサンプルを示します。JSONを安全に扱うためにYUIライブラリを利用しています。
<!DOCTYPE html>
<html>
<head>
<title>ローカルストレージテスト</title>
<meta charset="utf-8">
<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">
</head>
<body>
<input type="text" id="input">
<input type="button" value="保存" onclick="save()">
<input type="button" value="クリア" onclick="clearAll()">
<ul id="view"></ul>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo/yahoo-min.js&2.8.1/build/json/json-min.js"></script>
<script>
var view = document.getElementById("view");
var input = document.getElementById("input");
// ローカルストレージ内のJSONをパース
var data = typeof localStorage.history !== "undefined" ? YAHOO.lang.JSON.parse(localStorage.history) : [];
for(var i = 0; i < data.length; i++) {
view.innerHTML += "<li>" + data[i] + "</li>";
}
function save () {
data.push(input.value);
// 文字列にしてからローカルストレージへ保存
localStorage.history = YAHOO.lang.JSON.stringify(data);
view.innerHTML += "<li>" + input.value + "</li>";
input.value = "";
}
function clearAll () {
localStorage.clear();
view.innerHTML = "";
input.value = "";
}
</script>
</body>
</html>
- ローカルストレージテスト サンプルページ（Webkitブラウザでしか動作しません）
ユーザーの意志でWEBストレージ上のデータを操作する手段は、今のところほぼありません。例えば、iPhoneの設定画面から［Safari］-［キャッシュのクリア］などを実行しても、データは保持されたままとなります。iOSの再インストールやアップデートなどでクリアされるようです。ただし、ブックマークレットなどURLバーからJavaScriptにアクセスすれば、データの改変や削除をユーザー自身で行うことも可能です。開発者はこのことに注意してアプリケーションの設計と実装を行う必要があります。
さらに通常の方法ではドメイン間をまたいだデータのやりとりはできない点や、Cookieとは違いHTTPヘッダーには含まれないため直接サーバーサイドでデータのやり取りをすることができない点などにも注意する必要があります。
GeoLocation API
HTML5の関連情報としてよく話題にのぼるのがGeoLocation APIを利用した位置情報連携です。スマートフォン端末で利用できるGeoLocation APIには主に以下のような特徴があります。
- JavaScriptから位置情報を取得できる
- 位置情報を取得する際にユーザーに許可を求めるアラートが表示される
- 緯度経度や、その精度を取得できる
GeoLocation APIは以下のようにして、JavaScriptから簡単に利用できます。
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
alert("緯度: " + lat + ", 経度: " + lon);
});
スマートフォン版Yahoo! JAPANトップでは、ヤフーが持っているリバースジオコーダAPIを使って、位置情報を住所情報に変換しています。ここで取得した位置情報は、路線やグルメや地図へのリンク用パラメータ、そして検索の一部にも使われています。例えば、位置情報を取得したあとに、「ラーメン」と検索してみてください。現在いる場所の近くのラーメン情報が表示されると思います。
