2011年3月14日月曜日

デバッグコンソールで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を受け入れる の下に【データベース】という項目が出来ています。
電源を入れ直さないと表示されないようでした。

2011年3月5日土曜日

やれる事だけでがまん

やっぱりMacが無いとだめだ、
HTML5 + JavaScript だとカメラ操作やフィルアクセスが出来ない。

2011年3月4日金曜日

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>