0
HTML5 canvasとGoogle Maps APIで    遊んでみた  はてな Id:babydaemons Twitter babydaemons
自己紹介・ 35歳、妻一人、男の子一人・ 組込系・制御系から  オープン系・業務系までこなす  ホントはWeb系がやりたいPG/SE・ 中小企業ブラックから  中堅企業ブラックへ転職:  →エイチームさんには落ちましたorz・ Perfume ...
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
Demo
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
http://code.google.com/   intl/ja/apis/maps/日本語情報完備!
今回使うのは:・ Maps JavaScript API・ Static Maps API
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
とても簡単。指定した<div>要素を APIに渡すだけ。
var center =  new google.maps.LatLng(35.700000, 137.000000);var mapOptions = {  zoom: 5,  center: center,  mapTypeId: goog...
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
こいつを使えばよいっぽい↓MapCanvasProjectionクラス:・ fromLatLngToDivPixel()・ fromDivPixelToLatLng()
だけど、このインスタンスを 取得する方法が 判らない。orz
しょうがないので    ググりましたw       http://www.mwsoft.jp/     programming/googlemap/google_map_v3_custom_overlay.html
OverlayViewを   継承して、 オレオレマーカーを作るしか無いっぽい。
function BoundsMarker(map, latLng) {  this._latLng = latLng;  this.setMap(map);}BoundsMarker.prototype =   new google.maps...
オレオレマーカーのインスタンスを作れば、それから取得できる。var projection =  marker.getProjection();
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
今回使うのは:・ Maps JavaScript API・ Static Maps API
使用制限・ 1人の閲覧者が1日にリクエスト  できるユニークな(一意の)画像は 1000 件まで!!・ 24 時間内の制限を超えた場合や  サービスを不正に使用した場合は 一時的に機能しなくなる!!・ 制限を超える日が続くと  アクセスがブロッ...
エンドポイントにパラメータを指定してGETする:・   sensor     GPSから取得?・   center     地図の中心座標・   size       地図のサイズ(pixel)・   zoom       ズームレベル    ...
OverlayViewを   継承して、 オレオレマーカーを作るしか無いっぽい。
var img = new Image();var url =   endpoint + "?" + params.join("&");img.onload = function() {   /* 画像取得後の処理 */ }img.url = ...
オレオレマーカーのインスタンスを作れば、それから取得できる。var projection =  marker.getProjection();
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
HTML5 <canvas>ペイントやGIMPみたいなドロー系ソフトっぽい機能をJavaScript APIで提供
超絶参考http://www.html5.jp/canvas/
var canvas = $(“canvas”)[0];var context =  canvas.getContext(“2d”)context.drawImage(  img, 0, 0, width, height,  dx, dy, w...
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
<canvas>のAPI: toDataURL()    を使う
var canvas = $(“canvas”)[0];var context =  canvas.getContext(“2d”);/* ここで何か描画 */var url =   canvas.toDataURL(“image/png”);...
ただし、toDataURL()には  セキュリテイ上の 使用制限がある!!
それは: HTMLやJavaScriptの   ダウンロード元と、画像ファイルのダウンロード元が 一致している必要がある。 ※画像が盗めちゃうから
ダメじゃん!!保存できないじゃん!!
localhostにサーバ立てて  HTMLとJavaScriptとStatic Maps Wrapperを    そこに置けば解決w
<?php$userAgents = array(/* 中略 */);$baseUrl = "http://maps.google.com/maps/api/staticmap?";$url = $baseUrl . $_SERVER[QUER...
/* 続き */$opts = array(  http => array(    method => "GET",    header => "Accept-Language: " .$_SERVER[HTTP_ACCEPT_LANGUAGE...
/* 続き */$wanted = "Content-Type: ";foreach ($http_response_header as $http_header){  if (stripos($http_header, $wanted, 0)...
Agenda・   そもそも何作ったのさ??・   Google Maps APIの情報は??・   Google Mapsを組み込むには??・   地図上の座標を取得するには??・   指定座標の地図を取得するには??・   取得した地図を貼...
Static Maps APIの制限を掻い潜らなければ     ならない!!
基本はコレ↓
その1:User-Agentをランダム化する
その2: Query Stringの順序をランダム化する
その3:座標の走査順序を ランダム化する
Upcoming SlideShare
Loading in...5
×

Html5 canvasとgoogle maps apiで遊んでみた

4,181

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,181
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 canvasとgoogle maps apiで遊んでみた"

  1. 1. HTML5 canvasとGoogle Maps APIで 遊んでみた はてな Id:babydaemons Twitter babydaemons
  2. 2. 自己紹介・ 35歳、妻一人、男の子一人・ 組込系・制御系から オープン系・業務系までこなす ホントはWeb系がやりたいPG/SE・ 中小企業ブラックから 中堅企業ブラックへ転職: →エイチームさんには落ちましたorz・ Perfume “JPN”がマイブーム
  3. 3. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  4. 4. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  5. 5. Demo
  6. 6. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  7. 7. http://code.google.com/ intl/ja/apis/maps/日本語情報完備!
  8. 8. 今回使うのは:・ Maps JavaScript API・ Static Maps API
  9. 9. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  10. 10. とても簡単。指定した<div>要素を APIに渡すだけ。
  11. 11. var center = new google.maps.LatLng(35.700000, 137.000000);var mapOptions = { zoom: 5, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map($("#map")[0], mapOptions);
  12. 12. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  13. 13. こいつを使えばよいっぽい↓MapCanvasProjectionクラス:・ fromLatLngToDivPixel()・ fromDivPixelToLatLng()
  14. 14. だけど、このインスタンスを 取得する方法が 判らない。orz
  15. 15. しょうがないので ググりましたw http://www.mwsoft.jp/ programming/googlemap/google_map_v3_custom_overlay.html
  16. 16. OverlayViewを 継承して、 オレオレマーカーを作るしか無いっぽい。
  17. 17. function BoundsMarker(map, latLng) { this._latLng = latLng; this.setMap(map);}BoundsMarker.prototype = new google.maps.OverlayView();
  18. 18. オレオレマーカーのインスタンスを作れば、それから取得できる。var projection = marker.getProjection();
  19. 19. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  20. 20. 今回使うのは:・ Maps JavaScript API・ Static Maps API
  21. 21. 使用制限・ 1人の閲覧者が1日にリクエスト できるユニークな(一意の)画像は 1000 件まで!!・ 24 時間内の制限を超えた場合や サービスを不正に使用した場合は 一時的に機能しなくなる!!・ 制限を超える日が続くと アクセスがブロックされる!!
  22. 22. エンドポイントにパラメータを指定してGETする:・ sensor GPSから取得?・ center 地図の中心座標・ size 地図のサイズ(pixel)・ zoom ズームレベル ...etchttp://maps.google.com/maps/api/staticmap
  23. 23. OverlayViewを 継承して、 オレオレマーカーを作るしか無いっぽい。
  24. 24. var img = new Image();var url = endpoint + "?" + params.join("&");img.onload = function() { /* 画像取得後の処理 */ }img.url = url;
  25. 25. オレオレマーカーのインスタンスを作れば、それから取得できる。var projection = marker.getProjection();
  26. 26. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  27. 27. HTML5 <canvas>ペイントやGIMPみたいなドロー系ソフトっぽい機能をJavaScript APIで提供
  28. 28. 超絶参考http://www.html5.jp/canvas/
  29. 29. var canvas = $(“canvas”)[0];var context = canvas.getContext(“2d”)context.drawImage( img, 0, 0, width, height, dx, dy, width, height);
  30. 30. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  31. 31. <canvas>のAPI: toDataURL() を使う
  32. 32. var canvas = $(“canvas”)[0];var context = canvas.getContext(“2d”);/* ここで何か描画 */var url = canvas.toDataURL(“image/png”);$(“a#download”).attr(“href”, url);
  33. 33. ただし、toDataURL()には セキュリテイ上の 使用制限がある!!
  34. 34. それは: HTMLやJavaScriptの ダウンロード元と、画像ファイルのダウンロード元が 一致している必要がある。 ※画像が盗めちゃうから
  35. 35. ダメじゃん!!保存できないじゃん!!
  36. 36. localhostにサーバ立てて HTMLとJavaScriptとStatic Maps Wrapperを そこに置けば解決w
  37. 37. <?php$userAgents = array(/* 中略 */);$baseUrl = "http://maps.google.com/maps/api/staticmap?";$url = $baseUrl . $_SERVER[QUERY_STRING];$userAgent = $userAgents[mt_rand(0, count($userAgents) - 1)];/* 続く */
  38. 38. /* 続き */$opts = array( http => array( method => "GET", header => "Accept-Language: " .$_SERVER[HTTP_ACCEPT_LANGUAGE] . "rn" . "User-Agent: " . $userAgent . "rn" ));$context = stream_context_create($opts);$handle = fopen($url, "rb", false, $context);$contents = stream_get_contents($handle);/* 続く */
  39. 39. /* 続き */$wanted = "Content-Type: ";foreach ($http_response_header as $http_header){ if (stripos($http_header, $wanted, 0) == 0) { header($http_header); }}fclose($handle);echo $contents;?>
  40. 40. Agenda・ そもそも何作ったのさ??・ Google Maps APIの情報は??・ Google Mapsを組み込むには??・ 地図上の座標を取得するには??・ 指定座標の地図を取得するには??・ 取得した地図を貼り合わせるには??・ 貼りあわせた地図を保存するには??・ その他、バッドノウハウ
  41. 41. Static Maps APIの制限を掻い潜らなければ ならない!!
  42. 42. 基本はコレ↓
  43. 43. その1:User-Agentをランダム化する
  44. 44. その2: Query Stringの順序をランダム化する
  45. 45. その3:座標の走査順序を ランダム化する
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×