BLOG
HTML+Javascriptでスマートフォンアプリ開発！[3：スマートフォンの機能を使ってみよう]
こんにちは。
未来工作ゼミのハカセ。よーだです。
思い出したように帰ってきたプログラミング講座。
開発環境の構築と言語の簡単な解説を経て、ようやくスマートフォンアプリ開発っぽいことをしてみようと思います。
準備
[1：はじめてみよう]で準備した開発環境とMonacaデバッガーをインストールしたスマートフォンを用意します。
[2：HTMLとJavascript]で編集したプロジェクトを開いておきましょう。
位置情報を表示してみよう
HTMLとJavascriptを以下のように編集します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
function hello_world() {
alert("画面に表示したい文字列");
}
function input_text(text_box) {
alert(text_box.value);
}
let lat;
let long;
let altitude;
let speed;
let geolocationSuccess = function(position) {
lat.innerHTML = position.coords.latitude;
long.innerHTML = position.coords.longitude;
altitude.innerHTML = position.coords.altitude;
speed.innerHTML = position.coords.speed;
};
let options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function init() {
lat = document.getElementById("lat");
long = document.getElementById("long");
altitude = document.getElementById("altitude");
speed = document.getElementById("speed");
navigator.geolocation.watchPosition(geolocationSuccess, null, options);
}
</script>
</head>
<body onload="init();">
<input type="button" value="hello world" onclick="hello_world();">
<input type="text" value="hello world" onchange="input_text(this);">
<dl>
<dt>緯度：</dt><dd id="lat"></dd>
<dt>経度：</dt><dd id="long"></dd>
<dt>高さ：</dt><dd id="altitude"></dd>
<dt>速度：</dt><dd id="speed"></dd>
</dl>
</body>
</html>
Monacaデバッガーで実行してみよう
コードを保存したら、Monacaデバッガーでプロジェクトを実行してみましょう。
スマートフォンで位置情報に関する許可をするか聞かれた場合は、必ず許可を選択します。
うまくコードが反映されていると、緯度経度、高さ（メートル）、位置から推測した対地速度（メートル/秒）が表示されます。
機械の測定で誤差が出るため、止まっていても緯度経度や速度は変化することがあります。
コード解説
<body onload="init();">
<input type="button" value="hello world" onclick="hello_world();">
<input type="text" value="hello world" onchange="input_text(this);">
<dl>
<dt>緯度：</dt><dd id="lat"></dd>
<dt>経度：</dt><dd id="long"></dd>
<dt>高さ：</dt><dd id="altitude"></dd>
<dt>速度：</dt><dd id="speed"></dd>
</dl>
</body>
bodyタグのonload属性で、init()という初期化のための関数を呼び出しています。onloadは文書の読み込みが完了した時に一度だけ呼び出されるイベントで、初期化処理を行うのに適しています。
dlタグはタイトルと値を持つリストを定義するタグです。各情報の名前と値を表示する欄を定義しています。id属性はHTMLのなかの要素を一意に特定するための文字通りID値を指定する属性です。このID値を利用してJavascriptなどから要素にアクセスできます。
let lat;
let long;
let altitude;
let speed;
let geolocationSuccess = function(position) {
lat.innerHTML = position.coords.latitude;
long.innerHTML = position.coords.longitude;
altitude.innerHTML = position.coords.altitude;
speed.innerHTML = position.coords.speed;
};
let options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function init() {
lat = document.getElementById("lat");
long = document.getElementById("long");
altitude = document.getElementById("altitude");
speed = document.getElementById("speed");
navigator.geolocation.watchPosition(geolocationSuccess, null, options);
}
letは変数を定義することを明示するキーワードです。lat、long、altitude、speedという変数を定義しています。
この変数にはinit()関数でHTMLで定義したdlの要素を、document.getElementById()関数でIDの値を指定してJavascriptで操作できる変数として取得します。
navigator.geolocation.watchPositionが位置情報の取得を行うメソッドです。
引数の一つ目はgeolocationSuccess という関数です。Javascriptでは処理が成功した時に呼び出してほしい関数を引数として渡すコールバックという手法をとる場合があります。
ここでは位置情報が更新されるたびに呼び出される関数としてgeolocationSuccess を設定しています。
geolocationSuccess では引数としてわたってきた位置情報（position）から緯度経度と高さ、速度をそれぞれTHML要素の内部要素に設定しています。
position.coords.latitude：緯度の値が設定された変数です。
position.coords.longitude：経度の値が設定された変数です。
position.coords.altitude：高さの値が設定された変数です。
position.coords.speed：速度の値が設定された変数です。
エラーかな？と思ったら
うまく動かなかったり、表示がおかしかったりする場合はIDEのデバッガーペインに赤いエラーログが出ていないかを確認しましょう。
エラーの内容についてのメッセージと、ファイルのどの処理でエラーになっているかが大体表示されています。
エラーメッセージ自体は英語で出力されますが、翻訳サイトなどを使ってメッセージを確認しましょう。
たとえば上記の例だと、navigetorという変数が定義されていないというメッセージが出力されています。これはnavigatorタイプミスして、navigetorと書いてしまっているためです。
プログラムでエラーになったときに一番重要なのは、IDEやソフトが出力するメッセージです。インターネットで検索する前にエラーメッセージと出力されている場所をじっくり検証する癖をつけましょう。
むすび
駆け足で位置情報を画面に表示するプログラムを紹介しましたが、コードを参考に動かすことができたでしょうか。
この記事では画面に表示するだけでしたが、Javascriptの処理で緯度経度が一定の範囲内であればダイアログを表示する。だったり、音を鳴らすの様な処理をすることもできます。
スマートフォンの情報を取得することができれば、ぐっとアプリっぽい機能を持たせることができそうです。
参考サイト：https://cordova.apache.org
TOP
