YOLP 30分クッキング

3,744 views

Published on

Yahoo! JAPAN のエンジニアが
その場で作るスマホ地図サービス

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,744
On SlideShare
0
From Embeds
0
Number of Embeds
163
Actions
Shares
0
Downloads
7
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

YOLP 30分クッキング

  1. 1. Y O L P 30分 クッキングYahoo! JAPAN のエンジニアがその場で作るスマホ地図サービス 大野 道誉 / 鋤柄 ひかり
  2. 2. はじめまして 大野 道誉 鋤柄 ひかり @elpeo @picacchヤフーで日々プログラミングをし ヤフーの地図系サービスや開発者ています。エンジニア歴10年。主 さん向けの地図、地域情報APIに地図や位置情報系のバックエン サービス、YOLPの企画・ディレドを担当しています。 クションをしています。今日は、Yahoo! Open Local 今日は、アシスタントとしてライPlatform(YOLP)のAPIを活用 ブコーディングの解説を担当しまし、30分でひとつの簡易サービ す。スを完成させます。 2
  3. 3. 今日のレシピ2012年05月12日(土) 旬の地図とラインで作る 道案内投稿サービス 地図好きにはたまらないサービスですね 開発時間 30分  難易度 ★☆☆☆☆ 3
  4. 4. 材料Yahoo! Open Local Platform(YOLP)  Yahoo! JavaScriptマップAPI  Yahoo!ジオコーダAPI  アプリケーションIDルートラボ (作成したルートの投稿先サービス)ルートラボconnect (ルートラボへ投稿するためのインターフェース)jQuery情熱と好奇心 少々 4
  5. 5. 材料Yahoo! Open Local Platform(YOLP)  Yahoo! JavaScriptマップAPI  Yahoo!ジオコーダAPI  アプリケーションIDルートラボ (作成したルートの投稿先サービス)ルートラボconnect (ルートラボへ投稿するためのインターフェース)jQuery情熱と好奇心 少々 5
  6. 6. YOLPとは?ヤフー・オープン・ローカル・プラットフォーム 地図・地域情報系APIサービス
  7. 7. 7
  8. 8. 材料Yahoo! Open Local Platform(YOLP)  Yahoo! JavaScriptマップAPI  Yahoo!ジオコーダAPI  アプリケーションIDルートラボ (作成したルートの投稿先サービス)ルートラボconnect (ルートラボへ投稿するためのインターフェース)jQuery情熱と好奇心 少々 8
  9. 9. ルートラボとは?
  10. 10. 材料Yahoo! Open Local Platform(YOLP)  Yahoo! JavaScriptマップAPI  Yahoo!ジオコーダAPI  アプリケーションIDルートラボ (作成したルートの投稿先サービス)ルートラボconnect (ルートラボへ投稿するためのインターフェース)jQuery情熱と好奇心 少々 11
  11. 11. 材料Yahoo! Open Local Platform(YOLP)  Yahoo! JavaScriptマップAPI  Yahoo!ジオコーダAPI  アプリケーションIDルートラボ (作成したルートの投稿先サービス)ルートラボconnect (ルートラボへ投稿するためのインターフェース)jQuery情熱と好奇心 少々 12
  12. 12. 1.地図を表示する 2.地図に線を描く 3.ルートラボに投稿するYOLP 30分 クッキングまずは、地図を表示します。
  13. 13. 01 Yahoo! JavaScriptマップAPIの「一 番シンプルな地図の表示」のサンプ ルをコピーします。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index1-2 14
  14. 14. 02 アプリケーションIDを取得し、書き 換えます。 *********** ************** **************https://e.developer.yahoo.co.jp/webservices/register_application 15
  15. 15. 03 地図をプレビューし、サイズ、縮尺 を変更してみます。 16
  16. 16. 04 jQueryをインクルードし、 jQuery 仕様に書き換えます。http://jquery.com/ 17
  17. 17. 05 地図の場所を移動するために、住所 検索ボックスを追加します。 18
  18. 18. 06 Yahoo!ジオコーダAPIを使って、住 所検索機能を組み込みます。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/geocoder.html 19
  19. 19. 07 Yahoo! JavaScriptマップAPIの panTo()メソッドで、住所検索結果 に地図が移動するようにします。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index6-2 20
  20. 20. Yahoo!ジオコーダAPIは、経度、緯度の順番で返ってきます。Yahoo! JavaScriptマップAPIのpanTo()メソッドで指定する時には順番を逆にします。 },function(data){ if(data.Feature){ var lonlat = data.Feature[0].Geometry.Coordinates.split(/,/); ymap.panTo(new Y.LatLng(parseFloat(lonlat[1]),parseFloat(lonlat[0]))); } }); return false;});
  21. 21. 1.地図を表示する 2.地図に線を描く 3.ルートラボに投稿するYOLP 30分 クッキングここまで、地図の表示と住所検索を実装完了。ここから、地図に線を引きます。
  22. 22. 08 Yahoo! JavaScriptマップAPIの Class Polylineを指定して、地図上に 線を引けるようにします。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 23
  23. 23. ポリラインのデータは後から地図上で指定するので、最初は空の配列を用意します。var polyline = new Y.Polyline([]);
  24. 24. 09 startDrawing()を使って、クリック で線を引けるようにします。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 25
  25. 25. 10 ルートの作成を完了させるためのボ タンを設置します。 26
  26. 26. 11 finalizeDrawing()で作成中のポリラ インを確定させます。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 27
  27. 27. 12 setDraggableを有効にして、ポリラ インをマウスドラッグにより編集可 能にします。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 28
  28. 28. 1.地図を表示する 2.地図に線を描く 3.ルートラボに投稿するYOLP 30分 クッキングこれで、ルート作成まで完成!ここから、ルートラボへの投稿までの流れを作ります。
  29. 29. 13 ルートの作成が完了したら、ルート ラボへの投稿ボタンが表示されるよ うに設定します。 30
  30. 30. 14 ルートラボconnectに渡すデータ形 式を確認します。http://latlonglab.yahoo.co.jp/route/connect 31
  31. 31. 15 getLatLngs()でルートの緯度経度を 取得し、ルートラボconnectに渡し ます。http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Feature 32
  32. 32. 完成!
  33. 33. 今日の完成品http://yahoo.jp/8spcVA 34
  34. 34. 今日のレシピのおさらい 1.地図を表示する 2.地図に線を描く 3.ルートラボに投稿する 35
  35. 35. 公式アカウント @yahoojpYOLP 最新情報をお知らせヤフー・オープン・ローカル・プラットフォーム 地図・地域情報系APIサービス http://developer.yahoo.co.jp/webapi/map/ YOLP 検索
  36. 36. ありがとうございました- THE END -

×