YOLP 30分クッキング

111 Views

May 11, 12

スライド概要

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

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

7.

ルートラボとは?

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

完成!

30.

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

31.

今日のレシピのおさらい 1.地図を表示する 2.地図に線を描く 3.ルートラボに投稿する 31

32.

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

33.

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