Gdg geo2
Upcoming SlideShare
Loading in...5
×
 

Gdg geo2

on

  • 842 views

Geo x HTML5 on MapsAPI QuickHandson

Geo x HTML5 on MapsAPI QuickHandson

Statistics

Views

Total Views
842
Views on SlideShare
756
Embed Views
86

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 86

http://googlemaps.geo.jp 68
http://note.kehi.biz 18

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Gdg geo2 Gdg geo2 Presentation Transcript

  • Geo×HTML5 on MapsAPI �QuickHandson(3分クッキング) 春のGoogle勉強会 in高松�2013/3/17 石丸健太郎(@kehi GDG信州Manager & GDE Maps)13年3月24日日曜日
  • 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日日曜日
  • 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日日曜日
  • It’s real iceBreak?! きっとご利益のある 2年連続の諏訪湖の御神渡り13年3月24日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • Recipe5:�マーカー表示のパフォーマンスTips 完成図 材料 ・MapsAPI V3(JavaScriptAPI) ・JQuery 作り方 Sample1:矩形領域を指定して都度Ajax通信後マーカーを都度表示 Sample2:すべてのマーカー情報を受け取り後、矩形領域のみマーカーを表示 Which is faster ? 単品注文 vs 全部入り どっちがウマい?13年3月24日日曜日
  • Which is faster? マーカー都度読み込み VS 全部読み どっちが速い? 全部 ・地図をグリグリ動かして使うことを想定させるコンテンツ ・PC向けサイト 都度 ・一度計測したらほぼ動かす必要のないコンテンツ ・モバイル端末 Event 都度読込み 全部読込み JS処理 10ms/avg 112ms/avg ネットワーク 617ms/毎回 初回1290ms  2回目以降 0ms =2回以上なら全部読み・・だが?! FireBugで計測 console.time(); ・・・・ マーカー呼出処理 ・・・・ console.timeEnd();13年3月24日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • Recipe7:位置情報付きURIを実装するメリット 完成図 材料 ・URI ・URL Scheme 作り方 Sample1:(入口)他サイトやアプリからのスムーズな流入       →TwitterやFacebookからピンポイントに位置表示 Sample2:(出口)自サイトから他アプリへのスマートな遷移       →地図アプリで詳細を表示 参考:URLScheme developers.google.com/maps/documentation/ios/13年3月24日日曜日 urlscheme
  • Recipe8:�スマホ向けサイトをスマートに作る 完成図 材料 ・HTML5(Form:range) ・JqueryMobile 作り方 Sample1:スライダー表示 Sample2:GeolocationAPIのOptionsを制御 Example http://codezine.jp/article/detail/5652?p=213年3月24日日曜日
  • Recipe8:�スマートフォンサイト対応のUI 20pt 60pt ①356pt ④ 480pt ③460pt 356pt [444pt] ②416pt ※数値はViewPort値(ポイント) (Retinaのピクセル数は×2) ※iOS6では縦幅が176px広がった 分が表示幅にプラス(+88) 44pt portrait 320pt13年3月24日日曜日
  • Recipe8:�スマートフォンサイト対応のUI 20pt 60pt ①208pt④ 320pt ①356px 208pt ③300pt ②268pt 32pt 480pt [568pt] landscape13年3月24日日曜日
  • Recipe8:�スマートフォンサイト対応のUI13年3月24日日曜日
  • Recipe8:�スマートフォンサイト対応のUI① ① CSSで100%指定 →一番広く使えるとは限らない!13年3月24日日曜日
  • Recipe8:�スマートフォンサイト対応のUI① ② ① CSSで100%指定 →一番広く使えるとは限らない! ② JavaScriptでアドレスバーを隠した場合(Scrollto)13年3月24日日曜日
  • Recipe8:�スマートフォンサイト対応のUI① ② ③ ① CSSで100%指定 →一番広く使えるとは限らない! ② JavaScriptでアドレスバーを隠した場合(Scrollto) ③ ホーム画面からの起動でフルスクリーン表示(blackモード)13年3月24日日曜日
  • Recipe8:�スマートフォンサイト対応のUI① ② ③ ④ ① CSSで100%指定 →一番広く使えるとは限らない! ② JavaScriptでアドレスバーを隠した場合(Scrollto) ③ ホーム画面からの起動でフルスクリーン表示(blackモード) ④ ホーム画面からの起動でフルスクリーン表示 (black-translucentモード)13年3月24日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • 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日日曜日
  • Dessert: FirefoxOSを試す 完成図 材料 ・Firefox OS Simulator ・App manifest 作り方 インストール用のコードを追加して マニフェストファイルを設置 →アプリ vs Webサイト     参考:http://www.openspc2.org/reibun/Firefox_OS/B2G/index.html       (Firefox OS 使い方辞典)13年3月24日日曜日
  • MapsAPIの制限に関するQ&A 1:GoogleMapsAPI Version2が終わっちゃうってホント? 2:有料化について�突然請求が来ちゃうの?�アクセス不能になるの? ���� 3:無料の範囲はどこまで?�これっていいの?ダメなの?13年3月24日日曜日
  • MapsAPIの制限に関するQ&A 1:GoogleMapsAPI Version2が終わっちゃうってホント? →2013/5/19がXday (ただしサポート終了から3年のポリシー適用の初事例であり実際にどうなるのかは?) 2:有料化について�突然請求が来ちゃうの?�アクセス不能になるの? ���� 3:無料の範囲はどこまで?�これっていいの?ダメなの?13年3月24日日曜日
  • 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日日曜日
  • 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日日曜日
  • Closing: 0から1を生み出すには 製品化 ×3 ×3汎用化 0→1 ガレージ2人組から製品化へ  ※人月の神話 P5図1.1より13年3月24日日曜日
  • Closing: 1から10に育てるには 運営費用/モチベーション ×30 0→1 ×30機能拡張ファン維持/獲得 1→10 1製品から多くのファン獲得へ 13年3月24日日曜日
  • Closing: 10から100へのキャズム越え 社会化 ×300 0→1 1→10 キャズムライン ×300スケール収益安定性 10→100 多くのファンから当たり前のサービスへ 13年3月24日日曜日
  • THX a lot !! Let’s enjoy coding !(´‫)!`ڡ‬13年3月24日日曜日