秋葉です、こんにちは。4月ですね... なんだか暖かくなるのはウレシいのですが、こう切ないのはなぜでしょうか？ なんて言ってもしょうがないので、今回も書きます。
前回はiPhoneアプリからPHPに文字列を送りましたね。HTMLフォームでやっていることが、iPhoneアプリでも出来るってことがわかりました。
さて、今回はもうちょっと突っ込んで位置情報を送りましょう。そうです、緯度と経度です！ さっそく試してみましょ！
前回はiPhoneアプリからPHPに文字列を送りましたね。HTMLフォームでやっていることが、iPhoneアプリでも出来るってことがわかりました。
さて、今回はもうちょっと突っ込んで位置情報を送りましょう。そうです、緯度と経度です！ さっそく試してみましょ！
◆位置情報を取得しよう
まず、前回のapp.jsの最終行に書いたコードですが、これはまた後ほど使うとして、今は一旦コメントアウトしておきましょう。
/*
var xhr = Ti.Network.createHTTPClient({
onload: function (e){
alert(this.responseText);
}
});
xhr.open("POST", "http://akibahideki.com/digicre/120317/index.php
");
xhr.send({name:"秋葉秀樹"});
*/
では、このあとにコードを書いていきます。まずは位置の情報を取得するために以下のコードを追加して、iPhoneシミュレータで実行しましょう。
Titanium.Geolocation.getCurrentPosition(function (ev){
if( !ev.success || ev.error ) {
} else {
var coords = ev.coords;
var ichi = "緯度="+coords.latitude+"&経度="+coords.longitude;
alert(ichi);
}
})
最初に、位置情報を取得していいのかどうかの確認が聞かれます。OKを押してそのまま進んでください。するとalert画面が出て、見事！ 緯度と経度を取得できました。
<
>◆位置情報をサーバに送ろう
さて座標を取れたので、これをしっかりサーバに送りましょう。
今回のPHPは
< http://akibahideki.com/digicre/120317/index.php
>
を使います（前回のPHPの場所と同じアドレスです）
まずはその前に、この端末がネットワークにつながっているか、を判定しましょう。前回は省略しましたが、オフラインの時には送れないようにした方がいいですので、オンライン（ネットにつながっている）の確認が出来たあとに、位置情報を取ってサーバに送信するという流れで進めましょう。
まずは、先ほどのコードをこちらのようにif文で包んであげましょう。
if(Titanium.Network.online === false) {
alert("オフラインです");
}else{
Titanium.Geolocation.getCurrentPosition(function (ev){
if( !ev.success || ev.error ) {
} else {
var coords = ev.coords;
var ichi = "緯度="+coords.latitude+"&経度="+coords.longitude;
alert(ichi);
}
})
}
ネットにつながっていたら先ほどと変わりはないでしょう。もしもオフラインの時は「オフラインです」のアラートが出てきます。
さてさて、次は上記のプログラムで緯度と経度をalertしているあたりに、前回のPHP送信用のプログラムを仕込みます。
if(Titanium.Network.online === false) {
alert("オフラインです");
}else{
Titanium.Geolocation.getCurrentPosition(function (ev){
if( !ev.success || ev.error ) {
} else {
var xhr = Ti.Network.createHTTPClient({
onload: function (e){
alert(this.responseText);
}
});
var coords = ev.coords;
var ichi = "緯度="+coords.latitude+"&経度="+coords.longitude;
xhr.open("POST", "http://akibahideki.com/digicre/120317/index.php
");
xhr.send({name:ichi});
}
})
}
変数ichiに緯度と経度の文字列を一気に入れて送信しています。PHPの内容は前回のままですから、私の名前を送ったところが、位置情報に差し変わって送信されます。結果は以下の通りです。
<
>うまく送信されました。このままでは緯度と経度が混ざった状態で送られるので、今度は送る方、受ける方で、緯度と経度のデータを分解していきましょう。
PHPでは2つのデータが独立して扱えるようにするのです。まずはapp.js側ですが、xhr.send({name:ichi}); の部分ですね、ここを {ido:緯度, keido:経度}となるように送りましょう。
xhr.open("POST", "http://akibahideki.com/digicre/120317/index.php
");
xhr.send({name:ichi});
を以下に変更します（PHPのアドレスも変わっているので注意）。
xhr.open("POST", "http://akibahideki.com/digicre/120402/index.php
");
xhr.send({"ido":coords.latitude, "keido":coords.longitude});
さらに今回は
< http://akibahideki.com/digicre/120317/index.php
>の新しい場所にPHPをつくります。このようにしましょう。
<?php
header("Content-type: text/html; charset=utf-8");
$ido = $_POST["ido"];
$keido = $_POST["keido"];
print("緯度:".$ido."\n経度:".$keido);
?>
つまり、idoとkeidoが入ったJavaScriptオブジェクトの一塊のデータを、PHPがしっかり独立して取得できたということです。ばっちり、このようにPHPが返事をしてiPhoneに文字が返ってきました、成功です！
<
>◆送った位置情報をサーバに保存しよう
今度は、送った位置情報をテキストファイルに保存してみましょう。サーバにdata.txtというファイルに、以下のようなルールで書き込みます。
（緯度の値）,（経度の値）改行...
（緯度の値）,（経度の値）改行...
（緯度の値）,（経度の値）改行...
となります、緯度と経度はカンマ区切りで、一件送ったら改行を入れて何件でもログが残せるようにします。PHPを次のように変更しましょう。
<?php
header("Content-type: text/html; charset=utf-8");
$ido = $_POST["ido"];
$keido = $_POST["keido"];
$fp = fopen("data.txt","w");
fputs($fp, $ido.",".$keido."\n");
fclose($fp);
print("緯度:".$ido."\n経度:".$keido);
?>
これで一応はOKです。テキストファイルが同じ場所に存在しなかったら、新しく「data.txt」というファイルを作ってくれます。
これでもう一度Titanuim Studioで実行してみましょう。
<
>ばっちりです、緯度、経度がテキストファイルに保存されました。
◆送った座標でGoogle Mapにピンを立てよう
次に、これをマップに落とし込むためのmap.phpという新しいファイルをつくってみます。
以下のソースを書いたらdata.txtなどが置かれているサーバにアップします。
ファイル名はmap.phpとしましょう、よってURLは
< http://akibahideki.com/digicre/120402/map.html
>
となります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Mapに落とし込むテスト</title>
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.min.js
"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false
"></script>
<script type="text/javascript">
function init() {
var ichi = null;
$.ajax({ // data.txtを読み込む
url: "data.txt",
success: function (data){
ichi = data.split("\n")[0].split(","); // data.txtに記録された一番最初の行の緯度と経度を取得
//ここからGoogleMapの設定
var latlng = new google.maps.LatLng(ichi[0],ichi[1]);//ここにichi[0]が経度でichi[1]が緯度として入る
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ //マーカーを立てる
position: latlng,
map: map
});
}
});
}
</script>
</head>
<body onLoad="init()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
<
>ばっちりです！ iPhoneで取得した位置情報がサーバで処理されてGoogle Mapにピン立てされました！（道路の真ん中だけど...）
これで今回は終了です。次回はいよいよカメラ撮影をして、サーバにアップします。しかしここから先は「iPhone Developer Program」に登録しないと、実機転送が出来ないんですね。。
実機を使わないと撮影は出来ませんので。前にもお伝えした通り自己責任で登録してください。そして登録のしかたなどは色々なサイトで紹介している内容を学習しておいてください。
【Titanium StudioでiPhone実機転送をする方法 | zaru blog】
< http://zaru.tofu-kun.org/2011/08/09/taitanium-studio%E3%81%A7iphone%E5%AE%9F%E6%A9%9F%E8%BB%A2%E9%80%81%E3%82%92%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
>
【titanium STUDIO 1.0 を使ってみた - uirouのひとりごと】
< http://d.hatena.ne.jp/mojimojikun/20110626/1309061426
>
ではでは、もうひと踏ん張り、がんばりましょう！
【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign......多種スキルを持つ。Web標準技術だけに執着せず、すべてのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。