PhoneGap を使って、簡単な Android アプリケーションを動かしてみる

前準備

JavaScript を使う HTML ファイルの例

compass.getCurrentHeading: コンパスの向きの取得．向きは 9 から 359.99 までの角度で得られる

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            Compass Example
        </title>
        
        <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
        <script type="text/javascript" charset="utf-8">
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
              navigator.compass.getCurrentHeading(onSuccess, onError);
            }
            function onSuccess(heading) {
              alert('Heading: ' + heading.magneticHeading);
            }
            function onError(compassError) {
              alert('Compass Error: ' + compassError.code);
            }
        </script>  
    </head>

    <body>
      <p>getCurrentHeading</p>          
    </body>
</html>

◆ 実行結果の例

compass.watchHeading: コンパスの向きの取得．向きは 9 から 359.99 までの角度で得られる. 定期的に取得を行う関数で、その時間間隔を設定できる。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="MSThemeCompatible" CONTENT="yes" /> <title> Compass Example </title> <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> <script type="text/javascript" charset="utf-8"> function startWatch() { // 500 mili second var options = { frequency: 500 }; watchID = navigator.compass.watchHeading(onSuccess, onError, options); } function stopWatch() { if (watchID) { navigator.compass.clearWatch(watchID); watchID = null; } } function onSuccess(heading) { var element = document.getElementById('heading'); element.innerHTML = 'Heading: ' + heading.magneticHeading; } function onError(compassError) { alert('Compass error: ' + compassError.code); } </script> </head> <body> <div id="heading">Waiting for heading...</div> <button onclick="startWatch();">Start Watching</button> <button onclick="stopWatch();">Stop Watching</button> </body> </html>

◆ 実行結果の例

Geolocation

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            Geolocation Example
        </title>
        
        <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
        <script type="text/javascript" charset="utf-8">
                          
          document.addEventListener("deviceready", onDeviceReady, false);
          function onDeviceReady() {
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
          }
          function onSuccess(position) {
            var element = document.getElementById('geolocation');
            element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                                'Longitude: '          + position.coords.longitude             + '<br />' +
                                'Altitude: '           + position.coords.altitude              + '<br />' +
                                'Accuracy: '           + position.coords.accuracy              + '<br />' +
                                'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                                'Heading: '            + position.coords.heading               + '<br />' +
                                'Speed: '              + position.coords.speed                 + '<br />' +
                                'Timestamp: '          + new Date(position.timestamp)          + '<br />';
          }
          function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
          }
          </script>  
    </head>

    <body>
    <div id="geolocation">Waiting for geolocation ...</div>
    </body>
</html>

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            Geolocation Example
        </title>
        
        <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
        <script type="text/javascript" charset="utf-8">
             
          document.addEventListener("deviceready", onDeviceReady, false);
          var watchID = null;
          function onDeviceReady() {
            // Update every 2 seconds
            var options = { frequency: 2000 };
            watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
          }
          function onSuccess(position) {
            var element = document.getElementById('geolocation');
            element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' +
                                'Longitude: ' + position.coords.longitude     + '<br />' +
                                '<hr />'      + element.innerHTML;
          }
          function onError(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
          }
        </script>  
    </head>

    <body>
      <div id="geolocation">Waiting for geolocation ...</div>
    </body>
</html>