1. Google Maps API 使ってみた
Hiroki Kouchi
2012/08/18

2. 自己紹介
name Hiroki Kouchi
age 26（社会人4年生）
Twitter _hkouchi
work iOS Application Developer
hobby Application Development
(iOS, Android, Web)

3. 本スライドの背景
某友人の一言。
「Google Maps API
使ってみたいんだけど。」

4. 本スライドの背景
普段なら手伝うわけがない！ｗ
いくつか興味があったんです。

5. 興味を持ってた事
JavaScript全然書いた事ない
Googleの技術に
あんまり触れた事がない・・・
（それこそAndroidくらい）
Sublime Text 2使ってみたい

6. お盆休みもあるし、
ちょっとやってみっか！

7. 目標

8. なんか地図っぽいのが
表示されればいいや！
（おい

9. やってみた事
MAMPの環境構築
Google Maps JavaScript API の
サンプルを実行

10. では順番に。

11. MAMP
Webサーバー一式のパッケージ
（Mac用）
WindowsでいうXAMPP
Localで動かすだけならこれで十分

12. インストールして実行してみる
http://www.mamp.info/en/index.html

13. 「サーバを起動」

14. 起動されたっぽい！

15. こんなページが開かれる
http://localhost:8888/MAMP/?language=Japanese

16. ひとまずMAMPは完了。

17. Google Maps API
地図のアレだよ、アレ！
日本語ドキュメントも充実
https://developers.google.com/maps/
documentation/javascript/services

18. このチュートリアル
をやってみます

19. チュートリアルのコードは
こんな感じ

20. とりあえず動かしてみる
DocumentRoot
/Application/MAMP/htdocs
作成したHTMLを設置。
/Application/MAMP/htdocs/practice/geocoding.html

21. 以下にアクセスしてみる
http://localhost:8888/practice/geocoding.html

22. 意外と簡単・・・？
Mapの初期化は、以下を引数とする
表示させたいタグ
オプション（ハッシュ形式）
ズームのレベル
中央に表示させたい場所
Mapのタイプ

23. マーカー置いてみる
追加分

24. 動かしてみる
http://localhost:8888/practice/geocoding2.html

25. やっぱ簡単・・・？
Markerの初期化は、以下を引数とする
経度緯度
Mapオブジェクト
title

26. ジオコーディング
住所から経度緯度の情報へ変換して
くれる処理のこと
静的処理／動的処理がある
今回は静的処理だけやってみた

27. ジオコーディング
ドキュメント
https://developers.google.com/maps/documentation/
geocoding/index
リクエスト
http://maps.googleapis.com/maps/api/geocode/json?
address=天王洲アイル駅&sensor=false

28. これだけでJSONが返ってきた！

29. 注意事項
1日のリクエスト数には制限有り
無料ユーザ ： 2,500件
有料ユーザ ： 100,000件
制限を超えた場合、
一時的に利用停止となるらしい

30. とりあえずここまでしかやってません！

31. 所感
APIはシンプルで使いやすい
ジオコーディングやマーカー等も使
えると世界が広がりそう
Googleの地図情報を自分達で
利用できるのはとても面白い！

32. Google Mapsは多用されてるサービス
興味を持った人は、
一度触ってみては如何でしょう！

33. お疲れ様でした。

35. おまけ

36. あれを忘れてませんか
Sublime Text 2 を使ってみた
軽く使ってみての所感
行った設定とか軽く紹介

37. Sublime Text 2 って？
最近正式リリースされて、
人気急上昇なエディタ
Vimやemacsみたいに、
自分でもりもりカスタマイズして
使うエディタのようだ！

38. 導入にあたって
メリットって何？
デメリットってあるの？
そもそも何が便利なの？
わからないことだらけ・・・

39. とにかく使ってみようじゃないか！

40. 設定とか紹介
・Command + , で設定が開ける
・設定はJSON形式で記述
{
"font_size": 12.0,
"highlight_line": true,
"highlight_modified_tabs": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true
}

41. Pluginなど
まずPackage Controlを導入
http://wbond.net/sublime_packages/package_control/
installation

42. 導入後
Sublime Text 2
> Preferences
> Package Control

43. 導入後
Package Control: Install Package

44. 導入後
インストールしたいパッケージ名を入力
それだけ！

45. インストールしたPackage
All Autocomplete
開いている全てのファイルから補完
BracketHighlighter
選択中のタグや括弧の強調表示

46. 使ってみた所感
やっぱデザインが好き（見やすい）
一度入力した単語を補完してくれる
のが地味にありがたい
選択中のタグ、ラインの強調
軽い！（これ凄い大事）

47. 使ってみるべき機能
スニペット関連が便利らしい・・・
他に便利なパッケージがあれば
使ってみたいところ
コマンドとの連携も試してみたい
普段コマンドを使う人は重宝しそう

48. 便利なツールはどんどん使って、
生産性をもっと高めていきましょう！

49. 本当に、お疲れ様でした。