2010年12月22日

【師走なので、簡潔に】iPhoneのwebアプリを作成する際にで使えそうな機能について簡単にまとめてみた

asial

こんにちは、橋本です。
早いもので、2010年も残すところあと10日。
アシアルの営業日は残すところあと２日です。

こんな忙しいときにブログ当番が回ってきて、目がまわりそうなのですが、
弱音を吐いていても仕方ないので、さくっとブログ書いちゃおうと思います。

さて、今日はiPhoneのwebアプリを作成する際にで使えそうな機能について、
使い方を簡単にまとめていきたいと思います。

内容もコードも簡潔に。師走なので。

1. 位置情報の取得
iPhoneのsafariから位置情報を取得するときには、GeoLocationAPIを使用します。

サンプルコードを以下に


<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>location sample</title>
    <script type="text/javascript">
        <!--
            function init()
            {
                // 位置情報の取得
                navigator.geolocation.getCurrentPosition(success, failed);
            }
            function success(position)
            {
                alert('今の位置は、緯度:' + position.coords.latitude + '、軽度:' + position.coords.longitude + 'だよ！');
            }
            function failed()
            {
                alert('位置情報が取れなかったよ！');
            }
        //-->
    </script>
</head>
<body onload="init">
</body>
</html>

サンプルはこちら

2. タッチイベントの取得
タッチイベントについては、以前に記事にまとめたことがあるので、そちらを参照してください。
iPhone向けwebアプリを作ってみる-タッチイベント、ジェスチャーイベントに関するまとめ-

3. 加速度センサー、ジャイロセンサーの取得
iOS4.2から、iPhoneのsafariで加速度センサー、ジャイロセンサーの情報を取得できるようになりました。
取得方法については、以下のサンプルコードを参考にしてください。


<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>device motion</title>
    <script type="text/javascript">
        <!--
            function init()
            {
                window.addEventListener('devicemotion', window_devicemotionHandler);
                window.addEventListener('deviceorientation', window_deviceorientationHandler);
            }
            function window_devicemotionHandler(event)
            {
                var x = document.getElementById('x');
                var y = document.getElementById('y');
                var z = document.getElementById('z');
                x.value = event.acceleration.x;
                y.value = event.acceleration.y;
                z.value = event.acceleration.z;
            }
            function window_deviceorientationHandler(event)
            {
                var alpha = document.getElementById('alpha');
                var beta = document.getElementById('beta');
                var gamma = document.getElementById('gamma');
                alpha.value = event.alpha;
                beta.value = event.beta;
                gamma.value = event.gamma;
            }
        //-->
    </script>
</head>
<body onload="init()">
    <section id="motion">
        <h2>加速度センサー</h2>
        <ul>
            <li>
                <label for="x">X:</label>
                <input id="x" type="text" value="" readonly="true">
            </li>
            <li>
                <label for="y">Y:</label>
                <input id="y" type="text" value="" readonly="true">
            </li>
            <li>
                <label for="z">Z:</label>
                <input id="z" type="text" value="" readonly="true">
            </li>
        </ul>
    </section>
    <section id="orientation">
        <h2>ジャイロセンサー</h2>
        <ul>
            <li>
                <label for="alpha">Alpha:</label>
                <input id="alpha" type="text" value="" readonly="true">
            </li>
            <li>
                <label for="beta">Beta:</label>
                <input id="beta" type="text" value="" readonly="true">
            </li>
            <li>
                <label for="gamma">Gamma:</label>
                <input id="gamma" type="text" value="" readonly="true">
            </li>
        </ul>
    </section>
</body>
</html>