HTML5で位置情報取得 / HTML5をiPhoneのWebViewで表示させる簡易アプリ作成方法

HTML5で何かアプリを作ってみようということで、

・HTML5を使って位置情報を取得するサンプル

を作りましたのでそのメモを。

iPhoneアプリでHTML5を表示させる簡易Webブラウザ

１、View-Based Application　にて、新規プロジェクトを作成

２、ViewControllerクラスを編集

#import <UIKit/UIKit.h>

@interface WebViewSampleViewController : UIViewController {

	UIWindow *window;
	IBOutlet UINavigationBar *navigationBar;
	IBOutlet UIWebView *webView;
	IBOutlet UIToolbar *toolBar;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationBar *navigationBar;
@property (nonatomic, retain) IBOutlet UIWebView *webView;
@property (nonatomic, retain) IBOutlet UIToolbar *toolBar;

@end

#import "WebViewSampleViewController.h"

#define FIRST_URL @"http://192.168.1.100/hogehoge" //環境によって変更

@implementation WebViewViewController

@synthesize navigationBar;
@synthesize webView;
@synthesize toolBar;
@synthesize window;

- (void)viewDidLoad {
    [super viewDidLoad];
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:FIRST_URL]]];
}	

- (void)dealloc {
	[navigationBar release];
	[toolBar release];
	[webView release];
        [super dealloc];
}

３、viewControlelr.xib　に、　

UINavigationBar
UIToolBar
UIWebView

を追加し、IBOutlet　とリンクさせます。

そのとき、ついでに、「go back」、「reload」、「go forward」ボタンを追加。webviewが選択された状態で右クリックし、「Recieved Action」で、それぞれのアクションと、ボタンをリンクさせました。

本来は、InterfaceBuilder　を使わずに、

などを参考にしてコードで書いたほうがよいのでしょうが、今回の主目的はHTML5だったので、手軽なIBで作りました。次は、Androidで簡易WEBブラウザアプリをつくって表示させてみたいと思います。

HTML5を使って位置情報を取得するサンプル

現在地とそこから緯度経度にそれぞれ具体的な計算を施して、目的地を表示させる簡単なものを参考書をもとに作ってみました。

・緯度経度を使って計算方法に関しては、

　→緯度経度から距離と方位を求めるプログラム

あたりが参考になるみたいですが、そこまで凝ったものは今回作成しきれず。。。明日からの課題ですな。

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<!-- 画面をズームしないようにする -->
<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
<!-- Google Maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- メインプログラム -->
<script type="text/javascript">
  window.onload = function() {

    // geolocation に対応しているかチェック
    if (navigator.geolocation == undefined) {
      alert("位置情報が利用できません。"); return;
    }
    // 位置情報の取得
    navigator.geolocation.getCurrentPosition(
      successCallback,
      errorCallback);
      
     // 成功したとき
    function successCallback(position) {

      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
      var uri = "http://maps.google.co.jp/m/?q=" + lat + "," + lon;
      
      var map_div = document.getElementById("map_div");
      // 表示位置を決める
      var latlng = new google.maps.LatLng(lat, lon);
	
       var gmap = new google.maps.Map(
        map_div, {
          zoom:16,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       });
	   
	  // メッセージを印としてつける
      var marker = new google.maps.Marker({
         position: latlng,
         map: gmap,
         title: "現在地"
	  });
	  
	　// 印をタップした時のイベント
    　google.maps.event.addListener(marker, 'click', function(event) {
      　　alert("現在地" + "  " + lat + "+" + lon);
    　});
	
	   // destination point 
	   var destinationLat =   lat + 0.003;
	   var destinationLon =  lon + 0.001;
	   var destinationLatlng = new google.maps.LatLng(destinationLat, destinationLon);
	   
	　var destinationMaker = new google.maps.Marker({
			position: destinationLatlng,
			map: gmap,
			title:"目的地"
		});
		
		google.maps.event.addListener(destinationMaker, 'click', function(event) {
			alert("目的地" + "  " + destinationLat + "+" + destinationLon);
		});
	
		document.getElementById("present_location_value").innerHTML =  lat + "+" + lon;
		document.getElementById("destination_location_value").innerHTML = destinationLat + "+" + destinationLon;
    }
    
    // 失敗したとき
    function errorCallback(err) {
        alert("失敗("+err.code+")"+err.message);
    }

  };
</script>
</head><body>
<!-- 地図の表示場所 -->
<div id="map_div" style="width:300px; height:200px;"></div>
<div id="present_location_string"><p>現在地の緯度経度</p></div>
<div id="present_location_value"></div>
<div id="destination_location_string"><p>目的地の緯度経度</p></div>
<div id="destination_location_value"></div>
</body></html>

これをベースに位置情報系のものを使用したアプリを引き続き作っていきます。