1. HTML5 canvasと
Google Maps APIで
遊んでみた
はてな Id:babydaemons
Twitter babydaemons

2. 自己紹介
・ 35歳、妻一人、男の子一人
・ 組込系・制御系から
オープン系・業務系までこなす
ホントはWeb系がやりたいPG/SE
・ 中小企業ブラックから
中堅企業ブラックへ転職：
→エイチームさんには落ちましたorz
・ Perfume “JPN”がマイブーム

3. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

4. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

5. Demo

6. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

7. http://code.google.com/
intl/ja/apis/maps/
日本語情報完備！

8. 今回使うのは：
・ Maps JavaScript API
・ Static Maps API

9. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

10. とても簡単。
指定した<div>要素を
APIに渡すだけ。

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. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

13. こいつを使えばよいっぽい↓
MapCanvasProjectionクラス：
・ fromLatLngToDivPixel()
・ fromDivPixelToLatLng()

14. だけど、
このインスタンスを
取得する方法が
判らない。orz

15. しょうがないので
ググりましたw
http://www.mwsoft.jp/
programming/googlemap/
google_map_v3_custom_overlay.html

16. OverlayViewを
継承して、
オレオレマーカーを
作るしか無いっぽい。

17. function BoundsMarker(map, latLng) {
this._latLng = latLng;
this.setMap(map);
}
BoundsMarker.prototype =
new google.maps.OverlayView();

18. オレオレマーカーの
インスタンスを作れば、
それから取得できる。
var projection =
marker.getProjection();

19. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

20. 今回使うのは：
・ Maps JavaScript API
・ Static Maps API

21. 使用制限
・ 1人の閲覧者が1日にリクエスト
できるユニークな（一意の）画像は
1000 件まで!!
・ 24 時間内の制限を超えた場合や
サービスを不正に使用した場合は
一時的に機能しなくなる!!
・ 制限を超える日が続くと
アクセスがブロックされる!!

22. エンドポイントにパラメータを
指定してGETする：
・ sensor GPSから取得?
・ center 地図の中心座標
・ size 地図のサイズ(pixel)
・ zoom ズームレベル
...etc
http://maps.google.com/maps/api/staticmap

23. OverlayViewを
継承して、
オレオレマーカーを
作るしか無いっぽい。

24. var img = new Image();
var url =
endpoint + "?" + params.join("&");
img.onload = function() {
/* 画像取得後の処理 */
}
img.url = url;

25. オレオレマーカーの
インスタンスを作れば、
それから取得できる。
var projection =
marker.getProjection();

26. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

27. HTML5 <canvas>
ペイントやGIMPみたいな
ドロー系ソフトっぽい機能を
JavaScript APIで提供

28. 超絶参考
http://www.html5.jp/canvas/

29. var canvas = $(“canvas”)[0];
var context =
canvas.getContext(“2d”)
context.drawImage(
img, 0, 0, width, height,
dx, dy, width, height);

30. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

31. <canvas>のAPI：
toDataURL()
を使う

32. var canvas = $(“canvas”)[0];
var context =
canvas.getContext(“2d”);
/* ここで何か描画 */
var url =
canvas.toDataURL(“image/png”);
$(“a#download”).attr(“href”, url);

33. ただし、
toDataURL()には
セキュリテイ上の
使用制限がある!!

34. それは：
HTMLやJavaScriptの
ダウンロード元と、
画像ファイルのダウンロード元が
一致している必要がある。
※画像が盗めちゃうから

35. ダメじゃん!!
保存できないじゃん!!

36. localhostにサーバ立てて
HTMLとJavaScriptと
Static Maps Wrapperを
そこに置けば解決w

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. /* 続き */
$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. /* 続き */
$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. Agenda
・ そもそも何作ったのさ??
・ Google Maps APIの情報は??
・ Google Mapsを組み込むには??
・ 地図上の座標を取得するには??
・ 指定座標の地図を取得するには??
・ 取得した地図を貼り合わせるには??
・ 貼りあわせた地図を保存するには??
・ その他、バッドノウハウ

41. Static Maps APIの
制限を掻い潜らなければ
ならない!!

42. 基本はコレ↓

43. その１:
User-Agentを
ランダム化する

44. その2:
Query Stringの
順序をランダム化する

45. その3:
座標の走査順序を
ランダム化する