Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gdg geo2

931 views

Published on

Geo x HTML5 on MapsAPI QuickHandson

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Gdg geo2

  1. 1. Geo×HTML5 on MapsAPI �QuickHandson(3分クッキング) 春のGoogle勉強会 in高松�2013/3/17 石丸健太郎(@kehi GDG信州Manager & GDE Maps)13年3月24日日曜日
  2. 2. Menu ����������●Geo系API紹介篇�〜プレーンな地図からトッピング感覚で作ってみよう〜 1. 現在地取得と地名検索(Geolocation�&�Geocoding) 2. 地図と連動したストリートビューを表示(StreetView) 3. 地図に道案内を表示(DirectionsAPI) 4. �地図中のデータをカスタマイズ(StyledMap) ●Geo系API実践篇�〜�きっと役に立つ様々なTipsをご紹介〜 5. ���様々なマーカー表示とパフォーマンスTips 6. ���応用技で使いこなすStaticMapsAPI 7. ���位置情報付きのURIを実装するメリット 8. ���スマホ向けサイトをスマートに表示 9. ���Canvasを使って画像ファイルをLocalStorageに記録 � 10. ���パノラマ写真でマイストリートビューを実現 ●Geo系API番外篇 �����������・FirefoxOSを試す ������������・MapsAPIの制限に関する誤解?! ������������・0から1を生み出す為に SampleCode: http://googlemaps.geo.jp/gdg2/13年3月24日日曜日
  3. 3. Menu ����������●Geo系API紹介篇�〜プレーンな地図からトッピング感覚で作ってみよう〜 1. 現在地取得と地名検索(Geolocation�&�Geocoding) 2. 地図と連動したストリートビューを表示(StreetView) 3. 地図に道案内を表示(DirectionsAPI) 4. �地図中のデータをカスタマイズ(StyledMap) ●Geo系API実践篇�〜�きっと役に立つ様々なTipsをご紹介〜 5. ���様々なマーカー表示とパフォーマンスTips 6. ���応用技で使いこなすStaticMapsAPI 7. ���位置情報付きのURIを実装するメリット 8. ���スマホ向けサイトをスマートに表示 9. ���Canvasを使って画像ファイルをLocalStorageに記録 � 10. ���パノラマ写真でマイストリートビューを実現 ●Geo系API番外篇 �����������・FirefoxOSを試す ������������・MapsAPIの制限に関する誤解?! ������������・0から1を生み出す為に SampleCode: http://googlemaps.geo.jp/gdg2/13年3月24日日曜日
  4. 4. It’s real iceBreak?! きっとご利益のある 2年連続の諏訪湖の御神渡り13年3月24日日曜日
  5. 5. Recipe1-1:�現在地を取得して地図を表示 完成図 材料 ・MapsAPI V3(JavaScriptAPI) ・GeolocationAPI(HTML5) 作り方 Sample1:1度だけ位置情報を取得して表示する Sample2:誤差や計測回数を条件にして精度の高い位置情報を取得する API Reference http://code.google.com/intl/ja/apis/maps/documentation/javascript/basics.html#Geolocation http://dev.w3.org/geo/api/spec-source.html13年3月24日日曜日
  6. 6. GeoLocationAPI ①位置取得(GeoLocationAPI)  一度だけ取得:navigator.geolocation.getCurrentPosition(success,error,option); 定期的に取得:navigator.geolocation.watchPosition(success,error,option); // 位置情報を受信した時の処理 function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var currentPos = new google.maps.LatLng(lat, lng); map.setCenter(currentPos); //位置の探索を終了 navigator.geolocation.clearWatch(wid); }13年3月24日日曜日
  7. 7. Data Get var httpObj = createHttpRequest(); httpObj.open("GET",url,true); httpObj.onreadystatechange = function() { if (httpObj.readyState == 4 && httpObj.status == 200){ if(httpObj.responseText != ""){ obj = eval("("+httpObj.responseText+")"); } } httpObj.send(null); }$(function() { $.getJSON("data.json",function(obj){ hoge(obj); });});13年3月24日日曜日
  8. 8. Do it yourself //マーカーの消去は自分で function clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } } } markersArray.push(marker); //infoWindowの消去も自分で google.maps.event.addListener(marker, "click", function() { infowindow = new google.maps.InfoWindow({ content: html }); if (currentInfoWindow) { currentInfoWindow.close(); } infowindow.open(map, marker); currentInfoWindow = infowindow; 8 });13年3月24日日曜日
  9. 9. Recipe1-2:�地名で検索して地図を表示 完成図 材料 ・MapsAPI V3(JavaScriptAPI) ・GeocodingAPI(Geo) 作り方 Sample1:自由入力した地名を検索して遷移 JavaScriptだけでなくHTTPによる呼び出しも可能(サーバ処理で便利) API Reference http://code.google.com/intl/ja/apis/maps/documentation/geocoding/13年3月24日日曜日
  10. 10. Geocoding //JavaScript API var gc = new google.maps.Geocoder(); gc.geocode({ address : adrs }, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); }else{ alert(status+" : 場所が見つかりませんでした"); } }); //HTTP Geocoding API http://maps.googleapis.com/maps/api/geocode/json?address=地名&sensor=true or false ※所在地→緯度経度だけでなく、緯度経度→所在地(逆Geocoding)も対応 13年3月24日日曜日
  11. 11. Recipe2:�地図と連動したストリートビューを表示 完成図 材料 ・MapsAPI V3(JavaScriptAPI)  →.StreetViewPanorama 作り方 Sample1:ペグマンから表示 Sample2:API経由で自由な位置に表示 API Reference http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView13年3月24日日曜日
  12. 12. StreetView // ストリートビュー var svp = new google.maps.StreetViewPanorama( document.getElementById("streetview"), { position : new google.maps.LatLng(lat,lng) } ); if(svp.getVisible()){ map.setStreetView(svp); }13年3月24日日曜日
  13. 13. Recipe3:�地図に道案内を表示 完成図 材料 ・MapsAPI V3(JavaScriptAPI) ・DerectionsAPI(Geo) ・DistanceMatrixAPI(Geo) 作り方 Sample1:道案内を設置する Sample2:中間地点の文字を変更 Sample3:距離を計測 API Reference http://code.google.com/intl/ja/apis/maps/documentation/directions/ https://developers.google.com/maps/documentation/distancematrix/?hl=ja13年3月24日日曜日
  14. 14. Directions //ディレクション(道案内) var directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions); directionsRenderer.setMap(map); var request = { origin: point1, destination: point2, travelMode: google.maps.DirectionsTravelMode.WALKING }; var directionsService = new google.maps.DirectionsService(); directionsService.route(request, function(result, status){ if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); } }); 1413年3月24日日曜日
  15. 15. Recipe4:�StyledMapで地図中のデータをカスタマイズ 完成図 材料 ・StyledMapType ex)Clean Air Asia 作り方 Sample1:StyledMapWizardでカスタマイズしたStaticMapを生成 Sample2:地図を夜にする?! StyledMapWizard http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html13年3月24日日曜日
  16. 16. Menu ����������●Geo系API紹介篇�〜プレーンな地図からトッピング感覚で作ってみよう〜 1. 現在地取得と地名検索(Geolocation�&�Geocoding) 2. 地図と連動したストリートビューを表示(StreetView) 3. 地図に道案内を表示(DirectionsAPI) 4. �地図中のデータをカスタマイズ(StyledMap) ●Geo系API実践篇�〜�きっと役に立つ様々なTipsをご紹介〜 5. ���様々なマーカー表示とパフォーマンスTips 6. ���応用技で使いこなすStaticMapsAPI 7. ���位置情報付きのURIを実装するメリット 8. ���スマホ向けサイトをスマートに表示 9. ���Canvasを使って画像ファイルをLocalStorageに記録 � 10. ���パノラマ写真でマイストリートビューを実現 ●Geo系API番外篇 �����������・FirefoxOSを試す ������������・MapsAPIの制限に関する誤解?! ������������・0から1を生み出す為に SampleCode: http://googlemaps.geo.jp/gdg2/13年3月24日日曜日
  17. 17. Recipe5:�マーカー表示のパフォーマンスTips 完成図 材料 ・MapsAPI V3(JavaScriptAPI) ・JQuery 作り方 Sample1:矩形領域を指定して都度Ajax通信後マーカーを都度表示 Sample2:すべてのマーカー情報を受け取り後、矩形領域のみマーカーを表示 Which is faster ? 単品注文 vs 全部入り どっちがウマい?13年3月24日日曜日
  18. 18. Which is faster? マーカー都度読み込み VS 全部読み どっちが速い? 全部 ・地図をグリグリ動かして使うことを想定させるコンテンツ ・PC向けサイト 都度 ・一度計測したらほぼ動かす必要のないコンテンツ ・モバイル端末 Event 都度読込み 全部読込み JS処理 10ms/avg 112ms/avg ネットワーク 617ms/毎回 初回1290ms  2回目以降 0ms =2回以上なら全部読み・・だが?! FireBugで計測 console.time(); ・・・・ マーカー呼出処理 ・・・・ console.timeEnd();13年3月24日日曜日
  19. 19. Tips : 位置情報の様々な表現方法 コンテンツ容量やネットワーク速度対策だけでなく描画すべきコンテンツが 多い場合はマーカーの表現方法を変えるのが効果的! MarkerClusteringの例 http://www.fusonic.net/en/blog/2009/12/11/clustering-for-google-maps-v3-with-fluster2/ JS HeatMapの例 https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps Other(FusionTables) https://googlemaps.geo.jp/gdg2/5/sample3.html13年3月24日日曜日
  20. 20. Tips : 緯度経度取得 //For Client rc = map.getBounds(); mapArea = rc.getSouthWest() +","+rc.getNorthEast(); var url = "http://hoge/fuga.php?ll="+mapArea+"&cache="+(new Date()).getTime(); var httpObj = createHttpRequest(); httpObj.open("GET",url,true); httpObj.send(null); //For Server $sql = "SELECT * FROM hoge where ((lat BETWEEN $swlat and $nelat) and (lng BETWEEN $swlng and $nelng))"; //圧縮送信も効果的 NE(lat,lng) PHPならob-gzhandler 1行! SW(lat,lng)13年3月24日日曜日
  21. 21. Recipe6:�応用技で使いこなすStaticMapsAPI 完成図 材料 ・MapsAPI V3(JavaScriptAPI) ・StreetView ImageAPI(ImageAPIs) ・StaticMapsAPI V2 (ImageAPIs) ・DerectionsAPI(Geo) 作り方 Sample1:Streetviewで表示と同場所同角度の静止画を表示 Sample2:それぞれのscale指定を比較 Sample3:スタティックなルート表示 Sample4:出発地点と到着地点を独立表示 API Reference http://code.google.com/intl/ja/apis/maps/documentation/directions/ http://code.google.com/intl/ja/apis/maps/documentation/streetview/13年3月24日日曜日
  22. 22. Recipe7:位置情報付きURIを実装するメリット 完成図 材料 ・URI ・URL Scheme 作り方 Sample1:(入口)他サイトやアプリからのスムーズな流入       →TwitterやFacebookからピンポイントに位置表示 Sample2:(出口)自サイトから他アプリへのスマートな遷移       →地図アプリで詳細を表示 参考:URLScheme developers.google.com/maps/documentation/ios/13年3月24日日曜日 urlscheme
  23. 23. Recipe8:�スマホ向けサイトをスマートに作る 完成図 材料 ・HTML5(Form:range) ・JqueryMobile 作り方 Sample1:スライダー表示 Sample2:GeolocationAPIのOptionsを制御 Example http://codezine.jp/article/detail/5652?p=213年3月24日日曜日
  24. 24. Recipe8:�スマートフォンサイト対応のUI 20pt 60pt ①356pt ④ 480pt ③460pt 356pt [444pt] ②416pt ※数値はViewPort値(ポイント) (Retinaのピクセル数は×2) ※iOS6では縦幅が176px広がった 分が表示幅にプラス(+88) 44pt portrait 320pt13年3月24日日曜日
  25. 25. Recipe8:�スマートフォンサイト対応のUI 20pt 60pt ①208pt④ 320pt ①356px 208pt ③300pt ②268pt 32pt 480pt [568pt] landscape13年3月24日日曜日
  26. 26. Recipe8:�スマートフォンサイト対応のUI13年3月24日日曜日
  27. 27. Recipe8:�スマートフォンサイト対応のUI① ① CSSで100%指定 →一番広く使えるとは限らない!13年3月24日日曜日
  28. 28. Recipe8:�スマートフォンサイト対応のUI① ② ① CSSで100%指定 →一番広く使えるとは限らない! ② JavaScriptでアドレスバーを隠した場合(Scrollto)13年3月24日日曜日
  29. 29. Recipe8:�スマートフォンサイト対応のUI① ② ③ ① CSSで100%指定 →一番広く使えるとは限らない! ② JavaScriptでアドレスバーを隠した場合(Scrollto) ③ ホーム画面からの起動でフルスクリーン表示(blackモード)13年3月24日日曜日
  30. 30. Recipe8:�スマートフォンサイト対応のUI① ② ③ ④ ① CSSで100%指定 →一番広く使えるとは限らない! ② JavaScriptでアドレスバーを隠した場合(Scrollto) ③ ホーム画面からの起動でフルスクリーン表示(blackモード) ④ ホーム画面からの起動でフルスクリーン表示 (black-translucentモード)13年3月24日日曜日
  31. 31. Recipe8:�スマートフォンサイト対応のUI iPhone4 iPhone5 iPhone4以前のピクセル 指定のままだと 間<link rel="stylesheet" media="all and (orientation:portrait)" href="iphone5_portrait.css"> //①<link rel="stylesheet" media="all and (orientation:landscape)" href="iphone5_landscape.css"> //② ① #gmap { ② #gmap { position : absolute; position : absolute; top:0px; top:0px; left:0px; left:0px; width: 320px; width: 568px; height:504px; height:268px; } }13年3月24日日曜日
  32. 32. Recipe9: Canvasを使って画像をLocalStorageに記録 完成図 材料 ・MapsAPI V3(JavaScriptAPI) ・PlacesAPI(Geo) ・WebStorage(HTML5) ・Canvas(HTML5) 作り方 Sample1: Canvasを使って画像ファイルをLocalStorageに記録 API Reference http://www.html5.jp/canvas/ref.html13年3月24日日曜日
  33. 33. Recipe10: パノラマ写真でマイ・ストリートビューを実現 完成図 材料 ・MapsAPI V3(JavaScriptAPI)   ※カスタムストリートビューの解説 ・GeocodingAPI(Geo) ・Form、FileAPI(HTML5) 作り方 ・iPhone5標準のカメラでパノラマ写真撮影 →180度なので2枚撮って合体  →写真のExifから緯度経度抽出(緯度経度から住所やランドマーク取得)   →画像のリサイズ(1024px × 2048px)と分割(縦4横8 / 256px/1)    →画像データをSQLiteに突っ込む     →StreetView APIで表示 →(゜Д゜)ウマー13年3月24日日曜日
  34. 34. Recipe10: パノラマ写真でマイ・ストリートビューを実現 function getCustomPanoramaTileUrl(panoID, zoom, tileX, tileY) { return "/path/" + panoID + / + tileX + _ +tileY + .jpg; } function getCustomPanorama(panoID) { var streetViewPanoramaData = { links: [], copyright: kehi, tiles: { tileSize: new google.maps.Size(256, 256), worldSize: new google.maps.Size(2048, 1024), centerHeading: 0, getTileUrl: getCustomPanoramaTileUrl } }; 0_0.jpg 1_0.jpg 2_0.jpg 3_0.jpg 4_0.jpg 0_1.jpg 1_1.jpg 2_1.jpg 3_1.jpg 4_1.jpg 0_2.jpg 1_2.jpg 2_2.jpg 3_2.jpg 4_2.jpg 0_3.jpg 1_3.jpg 2_3.jpg 3_3.jpg 4_3.jpg13年3月24日日曜日
  35. 35. Recipe10: パノラマ写真でマイ・ストリートビューを実現 1:パノラマ写真180度×2枚撮影(開始地点は真北heading0)(C) →HTML5からカメラアクセス http://dev.classmethod.jp/smartphone/ios6-safari-html5/ 2:2枚をファイルアップロード(C) →MobileSafari対応(AndroidはVersionいくつから対応?   Ajax方式→ http://d.hatena.ne.jp/takuya_1st/20121101/1351754417 � 通常のPOST→� http://www.php-labo.net/tutorial/php/upload.html FileAPI経由のリサイズ→ http://blog.champierre.com/971 3:Exifから緯度経度を抽出(S) →PHPのExif_Read_dataから緯度経度の処理 �������http://www.phppro.jp/qa/857    →Client側でExif取得(jquery.exif.js)� ����������������http://www.nihilogic.dk/labs/exifjquery/ 4:緯度経度から住所もしくはランドマークを取得 →Google GeocodingAPI https://developers.google.com/maps/documentation/geocoding/?hl=ja 5:緯度経度、ランドマーク、画像バイナリをSQLiteに登録 http://jp.php.net/manual/ja/pdo.lobs.php13年3月24日日曜日
  36. 36. Recipe10: パノラマ写真でマイ・ストリートビューを実現 6:画像を合体(S)→PHPのGDなどのイメージ関数 http://symfoware.blog68.fc2.com/blog-entry-910.html 7:画像のリサイズ(2048×1024)(S) GD http://b.n-at.me/archives/132 Webサービス http://www.image440.com/ JS http://b.n-at.me/archives/231 (おまけ) ※画像処理系Webサービスまとめ http://cg.xyamu.net/2d_links/entry143.html ※全部HTML5でできるようになればいいのに・・・あるいはJSライブラリ http://www.html5.jp/canvas/ref.html 8:画像の分割(256*256)縦8横4分割(S or Web) Webサービス http://picslice.com/ え?JSで?? http://today-only.net/img-shuffle/ 9:StreetViewに適用    http://googlemaps.googlermania.com/google_maps_api_v3/ja/custom_streetview/3.html13年3月24日日曜日
  37. 37. Recipe10: パノラマ写真でマイ・ストリートビューを実現 6:画像を合体(S)→PHPのGDなどのイメージ関数 http://symfoware.blog68.fc2.com/blog-entry-910.html 7:画像のリサイズ(2048×1024)(S) GD http://b.n-at.me/archives/132 Webサービス http://www.image440.com/ JS http://b.n-at.me/archives/231 (おまけ) ※画像処理系Webサービスまとめ http://cg.xyamu.net/2d_links/entry143.html ※全部HTML5でできるようになればいいのに・・・あるいはJSライブラリ http://www.html5.jp/canvas/ref.html 8:画像の分割(256*256)縦8横4分割(S or Web) Webサービス http://picslice.com/ え?JSで?? http://today-only.net/img-shuffle/ 9:StreetViewに適用    http://googlemaps.googlermania.com/google_maps_api_v3/ja/custom_streetview/3.html え?今の機能ぜんぶAndroid4.2の カメラアプリに標準装備されている? ですって!w13年3月24日日曜日
  38. 38. Menu ����������●Geo系API紹介篇�〜プレーンな地図からトッピング感覚で作ってみよう〜 1. 現在地取得と地名検索(Geolocation�&�Geocoding) 2. 地図と連動したストリートビューを表示(StreetView) 3. 地図に道案内を表示(DirectionsAPI) 4. �地図中のデータをカスタマイズ(StyledMap) ●Geo系API実践篇�〜�きっと役に立つ様々なTipsをご紹介〜 5. ���様々なマーカー表示とパフォーマンスTips 6. ���応用技で使いこなすStaticMapsAPI 7. ���位置情報付きのURIを実装するメリット 8. ���スマホ向けサイトをスマートに表示 9. ���Canvasを使って画像ファイルをLocalStorageに記録 � 10. ���パノラマ写真でマイストリートビューを実現 ●Geo系API番外篇 �����������・FirefoxOSを試す ������������・MapsAPIの制限に関する誤解?! ������������・0から1を生み出す為に SampleCode: http://googlemaps.geo.jp/gdg2/13年3月24日日曜日
  39. 39. Dessert: FirefoxOSを試す 完成図 材料 ・Firefox OS Simulator ・App manifest 作り方 インストール用のコードを追加して マニフェストファイルを設置 →アプリ vs Webサイト     参考:http://www.openspc2.org/reibun/Firefox_OS/B2G/index.html       (Firefox OS 使い方辞典)13年3月24日日曜日
  40. 40. MapsAPIの制限に関するQ&A 1:GoogleMapsAPI Version2が終わっちゃうってホント? 2:有料化について�突然請求が来ちゃうの?�アクセス不能になるの? ���� 3:無料の範囲はどこまで?�これっていいの?ダメなの?13年3月24日日曜日
  41. 41. MapsAPIの制限に関するQ&A 1:GoogleMapsAPI Version2が終わっちゃうってホント? →2013/5/19がXday (ただしサポート終了から3年のポリシー適用の初事例であり実際にどうなるのかは?) 2:有料化について�突然請求が来ちゃうの?�アクセス不能になるの? ���� 3:無料の範囲はどこまで?�これっていいの?ダメなの?13年3月24日日曜日
  42. 42. MapsAPIの制限に関するQ&A 1:GoogleMapsAPI Version2が終わっちゃうってホント? →2013/5/19がXday (ただしサポート終了から3年のポリシー適用の初事例であり実際にどうなるのかは?) 2:有料化について�突然請求が来ちゃうの?�アクセス不能になるの? ���� →制限を90日以上連続して超過した場合 �������(25000回APIロード/日�(StyledMapやGeo系APIは2500回) (StaticMapsは1000回/同一IP制限も)�� むしろこの制限を突破する方が難しい数。心配するより逆にチャレンジすべき目標に! 3:無料の範囲はどこまで?�これっていいの?ダメなの?13年3月24日日曜日
  43. 43. MapsAPIの制限に関するQ&A 1:GoogleMapsAPI Version2が終わっちゃうってホント? →2013/5/19がXday (ただしサポート終了から3年のポリシー適用の初事例であり実際にどうなるのかは?) 2:有料化について�突然請求が来ちゃうの?�アクセス不能になるの? ���� →制限を90日以上連続して超過した場合 �������(25000回APIロード/日�(StyledMapやGeo系APIは2500回) (StaticMapsは1000回/同一IP制限も)�� むしろこの制限を突破する方が難しい数。心配するより逆にチャレンジすべき目標に! 3:無料の範囲はどこまで?�これっていいの?ダメなの? →誰でも無償で同じ機能が利用可能か・・・がポイント →フェアユースという考え方(Don’t be evil)13年3月24日日曜日
  44. 44. Closing: 0から1を生み出すには 製品化 ×3 ×3汎用化 0→1 ガレージ2人組から製品化へ  ※人月の神話 P5図1.1より13年3月24日日曜日
  45. 45. Closing: 1から10に育てるには 運営費用/モチベーション ×30 0→1 ×30機能拡張ファン維持/獲得 1→10 1製品から多くのファン獲得へ 13年3月24日日曜日
  46. 46. Closing: 10から100へのキャズム越え 社会化 ×300 0→1 1→10 キャズムライン ×300スケール収益安定性 10→100 多くのファンから当たり前のサービスへ 13年3月24日日曜日
  47. 47. THX a lot !! Let’s enjoy coding !(´‫)!`ڡ‬13年3月24日日曜日

×