.htaccessファイルの設定

マニフェストファイルを「text/cache-manifest」タイプとして送出するための設定

AddType text/cache-manifest .manifest

データベース作成に挑戦

htmlのソース

<H1>Databaseへの書き込みと読み出し</H1>
<A href="#" onClick="saveDB();return false;">SaveDB</A><BR>
<A href="#" onClick="readDB();return false;">DBレコード読み込み</A><BR>
<DIV id="msg"></DIV>

javascriptのソース

// データベース作成
try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var myDB  = openDatabase(shortName, version, displayName, maxSize);
        // You should have a database instance in db.
    }
} catch(e) {
    // Error handling code goes here.
    if (e == 2) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
 return;
}

//alert("Database is: "+myDB );

// ページが構築されたら処理を行う
window.onload = function(){
    var ele = document.getElementById("msg");
    myDB.transaction(
        function(tx){
            tx.executeSql('CREATE TABLE gpstable(lat REAL, lng REAL, time REAL );');
        },
        function (err){
            if (err.code == 1) {
                ele.innerHTML = "データベースtestDBはすでにあります";
            }else{
                ele.innerHTML = "データベースエラーです : "+err.code;
            }
        },
        function (){ ele.innerHTML = "testDBを作成しました"; }
    );
}
// データベースへの保存
function saveDB(){
    myDB.transaction(
        function(tx){
            // 3つのデータを書き込む
            tx.executeSql('INSERT INTO gpstable values (12.3, 45.6, 78.9)');
        },
        function(err){ alert("データベースエラー : "+err.code); },
        function (){ document.getElementById("msg").innerHTML = "データを保存しました" }
    );
}
// 保存してあるデータを読み出す
function readDB(){
    myDB.transaction(
        function(tx){
            // 全てのデータを読み出す
            tx.executeSql('SELECT * from gpstable;',
            [ ],
            function (tx, rs){
                var txt = "";
                // データの数(rs.rows.length)だけ繰り返し読み出す
                for (var i=0; i<rs.rows.length; i++){
                    var row = rs.rows.item(i);
                    txt = txt + row.lat+","+row.lng+" : "+row.time+"<br>";
                }
                // 画面に表示する
                document.getElementById("msg").innerHTML = txt;
            });
        }
    );
}

初期画面

DBレコード読み込み　をクリックした時

SaveDBをクリックすると同じデータが追加される

ローカルストレージが使えるか確認する

htmlのソース

<h1>Sample</h1>
<div id="result">ローカルストレージは使えません</div>
</body>

javascriptのソース

if (window.localStorage){
document.getElementById("result").innerHTML = "ローカルストレージは使えます";
}

デバッグコンソールでhtml,JavaScript,CSSのエラーを確認

設定->Safari->デベロッパ->デバッグコンソールをONにします。

実際のエラー画面

Safariのデータベース

iPhoneのSafariはデータベースエンジンとして「SQLite」を実装しているそうです。
 データベースの容量制限は1つにつき約5MBまでだそうです。
HTML5のAPI「Client-side database storage」という仕組みです。
ASCII.jpのiPhoneがJavaScript＋SQLiteでGPSレコーダーに！ の記事が参考になります。
サンプルを動かすがエラーが出ます。
TypeError: Result of expression 'db' [undefined] is not an object.
エラーの確認はデバッグコンソールの設定をオンにします。

iOS 4になってからJavaScriptの文法が厳密になった様です。
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW2

データベースの確認は【設定】からSafariを選択します。

データベースの作成前と作成後
Cookieを受け入れる　の下に【データベース】という項目が出来ています。
電源を入れ直さないと表示されないようでした。

iphoneの画面を保存

「ホームボタン」を押した状態で，「スリープボタン」を押す。
写真として保存されています。
アルバムを確認して保存されているか確認します。

加速度センサーとジャイロセンサーの値を取得す

うまくデータを取得しているようです。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>iPhone iOS4.2</title>
</head>
  <body>
    <h1>加速度センサーテスト</h1>
    <h2>傾き加速度</h2>
    <div>x:<span id="x">0</span></div>
    <div>y:<span id="y">0</span></div>
    <div>z:<span id="z">0</span></div>
                
    <h2>傾きの重力加速度</h2>
    <div>xg:<span id="xg">0</span></div>
    <div>yg:<span id="yg">0</span></div>
    <div>zg:<span id="zg">0</span></div>
                
    <h2>回転加速度</h2>
    <div>alpha(Z):<span id="a">0</span></div>
    <div>beta(X):<span id="b">0</span></div>
    <div>gammma(Y):<span id="g">0</span></div>
            
    <script>
       window.addEventListener("devicemotion", function(evt){
       var x = evt.acceleration.x; // X方向の加速度
       var y = evt.acceleration.y; // Y方向の加速度
       var z = evt.acceleration.z; // Z方向の加速度
       var xg = evt.accelerationIncludingGravity.x; // X方向の傾き
       var yg = evt.accelerationIncludingGravity.y; // Y方向の傾き
       var zg = evt.accelerationIncludingGravity.z; // Z方向の傾き
       var a = evt.rotationRate.alpha; // Z方向の回転値
       var b = evt.rotationRate.beta; // X方向の回転値
       var g = evt.rotationRate.gamma; // Y方向の回転値
       document.getElementById("x").innerText = x;
       document.getElementById("y").innerText = y;
       document.getElementById("z").innerText = z;
       document.getElementById("xg").innerText = xg;
       document.getElementById("yg").innerText = yg;
       document.getElementById("zg").innerText = zg;
       document.getElementById("a").innerText = a;
       document.getElementById("b").innerText = b;
       document.getElementById("g").innerText = g;
            }, true);
        </script>
    </body>
    <html>