YOLP 30分クッキング

Y O L P 30分 クッキング Yahoo! JAPAN のエンジニアが その場で作るスマホ地図サービス 大野 道誉 / 鋤柄 ひかり

はじめまして 大野 道誉 @elpeo ヤフーで日々プログラミングを しています。エンジニア歴10 年。主に地図や位置情報系の バ ッ ク エ ン ド を 担 当 して い ま す。 今日は、Yahoo! Open Local Platform（YOLP）のAPIを活 用し、30分でひとつの簡易 サービスを完成させます。 鋤柄 ひかり @picacch ヤフーの地図系サービスや開発 者さん向けの地図、地域情報 APIサービス、YOLPの企画・ ディレクションをしています。 今日は、アシスタントとしてラ イブコーディングの解説を担当 します。 2

今日のレシピ 2012年05月12日（土） 旬の地図とラインで作る 道案内投稿サービス 地図好きにはたまらないサービスですね 開発時間 難易度 30分 ★☆☆☆☆ 3

材料 Yahoo! Open Local Platform（YOLP） Yahoo! JavaScriptマップAPI Yahoo!ジオコーダAPI アプリケーションID ルートラボ （作成したルートの投稿先サービス） ルートラボconnect （ルートラボへ投稿するためのインターフェース） jQuery 情熱と好奇心 少々 4

YOLPとは？ ヤフー・オープン・ローカル・プラットフォーム 地図・地域情報系APIサービス

6

ルートラボとは？

１．地図を表示する ２．地図に線を描く ３．ルートラボに投稿する YOLP 30分 クッキング まずは、地図を表示します。

01 Yahoo! JavaScriptマップAPIの 「一番シンプルな地図の表示」のサ ンプルをコピーします。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index1-2 10

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

02 アプリケーションIDを取得し、書き 換えます。 *********** ************** ************** https://e.developer.yahoo.co.jp/webservices/register_application 11

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

03 地図をプレビューし、サイズ、縮尺 を変更してみます。 12

04 jQueryをインクルードし、 jQuery 仕様に書き換えます。 http://jquery.com/ 13

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

05 地図の場所を移動するために、住所 検索ボックスを追加します。 14

06 Yahoo!ジオコーダAPIを使って、住 所検索機能を組み込みます。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/geocoder.html 15

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

07 Yahoo! JavaScriptマップAPIの panTo()メソッドで、住所検索結果 に地図が移動するようにします。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index6-2 16

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

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; });

１．地図を表示する ２．地図に線を描く ３．ルートラボに投稿する YOLP 30分 クッキング ここまで、地図の表示と 住所検索を実装完了。 ここから、地図に線を引きます。

08 Yahoo! JavaScriptマップAPIの Class Polylineを指定して、地図上 に線を引けるようにします。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 19

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

ポリラインのデータは後から地図上で指定するので、最初は空の配列を用意 します。 var polyline = new Y.Polyline([]);

09 startDrawing()を使って、クリック で線を引けるようにします。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 21

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

10 ルートの作成を完了させるためのボ タンを設置します。 22

11 finalizeDrawing()で作成中のポリラ インを確定させます。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 23

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

12 setDraggableを有効にして、ポリ ラインをマウスドラッグにより編集 可能にします。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline 24

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

１．地図を表示する ２．地図に線を描く ３．ルートラボに投稿する YOLP 30分 クッキング これで、ルート作成まで完成！ ここから、ルートラボへの投稿 までの流れを作ります。

13 ルートの作成が完了したら、ルート ラボへの投稿ボタンが表示されるよ うに設定します。 26

14 ルートラボconnectに渡すデータ形 式を確認します。 http://latlonglab.yahoo.co.jp/route/connect 27

• http://latlonglab.yahoo.co.jp/route/connect

15 getLatLngs()でルートの緯度経度 を取得し、ルートラボconnectに渡 します。 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Feature 28

• http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/

完成！

今日の完成品 http://yahoo.jp/8spcVA 30

• http://yahoo.jp/8spcVA

今日のレシピのおさらい １．地図を表示する ２．地図に線を描く ３．ルートラボに投稿する 31

公式アカウント @yahoojpYOLP 最新情報をお知らせ ヤフー・オープン・ローカル・プラットフォーム 地図・地域情報系APIサービス http://developer.yahoo.co.jp/webapi/map/ YOLP 検索

• http://developer.yahoo.co.jp/webapi/map/

ありがとうございました - THE END -