Yolp30分クッキング 2012北海道

30分クッキング Yahoo! JAPANのエンジニアが その場で作るスマホ地図サービス ヤフー株式会社 大江 啓之 1

Yahoo! Open Local Platform ? • Yahoo! JAPANの提供する地図・地域情報に 関するさまざまなAPI/SDKです。 YOLP SDKs YOLP APIs ユーザ DB YOLPカセット ギャラリー 地域・ 拠点情 報DB 地図DB ルート DB 2

POI検索・住所検索 Webページで地図 Yahoo!ローカルサーチAPI Yahoo! JavaScriptマップAPI Yahoo!ジオコーダAPI Yahoo!スタティックマップAPI Yahoo!リバースジオコーダAPI スマホアプリで地図 Yahoo! iOSマップSDK Yahoo! AndroidマップSDK 16 APIs ＆ 3 SDKs ＆ 1 Service POIホスティング YOLPカセットギャラリー カセットサーチAPI その他の便利API 経路地図API 施設内検索API 業種マスターAPI 測地系変換API 2点間距離API コンテンツジオコーダAPI 店舗名寄せAPI 標高API ルート沿い検索API SilverlightマップAPI SilverlightマップSDK 3

Who Uses YOLP？ 4

5

6

ライブコーディング スタート 7

１．環境構築！！ Androidの構築方法については、 Yahoo! JAPANから検索して調べてね！ 8

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

• https://e.developer.yahoo.co.jp/webservices/register_application

３． Yahoo! AndroidマップSDK ダウンロード！！ 10 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/androidsdk/

４． 「YMapRouteApp」プロジェクト 作成！！ 11

５． プロジェクトに Yahoo! AndroidマップSDK を組み込む！！ 12

YOLP30分クッキング まずは、地図を表示します 13

６． 地図を表示させみよう！！ まずはMapActivityを継承させる。 import jp.co.yahoo.android.maps.*; public class YMapAppActivity extends MapActivity { } 14

MapView作成しActivityに追加しよう。 @Override public void onCreate( Bundle savedInstanceState) { super.onCreate(savedInstanceState); //MapViewインスタンス作成 MapView mapView = new MapView(this,”APPID”); //ActivityにMapViewを追加 setContentView(mapView); } 15

AndroidManifest.xmlに ネットワーク、GPSのパーミッションを記述。 <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" /> 16

地図の表示ができましたー！！ 17

YOLP30分クッキング 現在位置を表示します 18

５．現在位置に地図を移動させよー！！ ちょっとメニューを追加・・・。 private static final int MENUITEM_GPS = 1; @Override public boolean onCreateOptionsMenu(Menu menu){ boolean ret=super.onCreateOptionsMenu(menu); menu.add(Menu.NONE,MENUITEM_GPS,Menu.NONE,"現在位置"); return ret; } 19

@Override public boolean onOptionsItemSelected(MenuItem item){ switch(item.getItemId()){ case MENUITEM_GPS: return true; } return false; } 20

MyLocationOverlayを使って、 現在位置の地図を表示しよう！！ private MyLocationOverlay mMyLocationOverlay = null; //MyLocationOverlayインスタンス作成 mMyLocationOverlay = new MyLocationOverlay(getApplicationContext(), mMapView); //MyLocationOverlayインスタンス作成 mMyLocationOverlay.enableMyLocation(); //MyLocationOverlayをMapViewに追加 mMapView.getOverlays().add(mMyLocationOverlay); 21

MyLocationOverlayを使って、 現在位置の地図を表示しよう！！ //位置情報が更新されて場合、地図の移動を行う mMyLocationOverlay.runOnFirstFix(new Runnable(){ public void run() { if (mMapView.getMapController() != null) { //現在位置座標を取得 GeoPoint p = mMyLocationOverlay.getMyLocation(); mMapView.getMapController().animateTo(p); } } }); 22

現在位置の表示ができました！！ 23

YOLP30分クッキング 近くのコンビニを検索します 24

７．Yahoo!ローカルサーチAPIを使って、 近所のコンビニを探そう！！ 25 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html

YOLP APIを使うということは・・。 インターネット YOLP API インターネット（HTTP）を経由しAPIにリクエ ストを送信し、レスポンスを受信します。 26

YolpLocalSearchについて。 YolpLocalSearchはYahoo!ローカルサーチAPIに アクセスするために今回のセミナー用に用意し たクラスです。 お手元のYolpLocalSearch.javaのソース資料を ご覧ください。 ※ソースはダウンロードもできます。 27

YMapRouteAppActivity YolpLocalSearchListener より検索結果を返す。 Executeでサブスレッド実行。 YolpLocalSearch AsyncTask ::doInBackground ::onPostExecute サブスレッド内で実行 APIにリクエスト送信、 受信処理を行う。 サブスレッド終了後に 実行される。 レスポンスから必要な データを取り出す。 28

またまたメニューを追加・・・。 private static final int MENUITEM_SEARCH = 2; @Override public boolean onCreateOptionsMenu(Menu menu){ boolean ret=super.onCreateOptionsMenu(menu); menu.add(Menu.NONE,MENUITEM_GPS,Menu.NONE,"現在位置"); menu.add(Menu.NONE,MENUITEM_SEARCH,Menu.NONE,“検索"); return ret; } 29

Yahoo!ローカルサーチAPIにアク
セスし近所のコンビニを検索！！
public class YMapRouteAppActivity extends Activity implements
YolpLocalSearchListener {

case MENUITEM_SEARCH:
YolpLocalSearch yolpLocalSearch =
new YolpLocalSearch(mMapView.getMapCenter(),this);
yolpLocalSearch.execute("コンビニ");
return true;
30

Yahoo!ローカルサーチAPIを使う！！ http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch “?appid=アプリケーションID“+ "&query="+query+ //キーワード "&lat="+mCenter.getLatitudeE6()/1E6+ //検索中心 緯度 "&lon="+mCenter.getLongitudeE6()/1E6+ //検索中心 経度 “&dist=2”+ //範囲 中心半径(2km) "&sort=dist"; //近い順ソート 31

• http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch

検索結果を受け取り、ピンを配置！！ public boolean finishYolpLocalSearch(String name, GeoPoint gp) { //ピンを表示 PinOverlay pinOverlay = new PinOverlay(PinOverlay.PIN_VIOLET); //MapViewにPinOverlayを追加 mMapView.getOverlays().add(pinOverlay); //ピンの位置を設定 pinOverlay.addPoint(gp,null); } 32

ピンをタップ、ポップアップが表示！！ //ポップアップ PopupOverlay popupOverlay = new PopupOverlay(){ @Override public void onTap(OverlayItem item){ //ポップアップをタッチした際の処理 } }; //pinOverlayにPopupOverlayを設定 pinOverlay.setOnFocusChangeListener(popupOverlay); //MapViewにPopupOverlayを追加 mMapView.getOverlays().add(popupOverlay); //pinOverlayにコンビニ位置、コンビニ名を設定 pinOverlay.addPoint(gp,name,name); 33

ピンが表示されましたー！！ 34

YOLP30分クッキング コンビニまでのルートを検索 35

またまたメニューを追加・・・。
private static final int MENUITEM_ROUTE_SEARCH = 3;
@Override
public boolean onCreateOptionsMenu(Menu menu){
boolean ret=super.onCreateOptionsMenu(menu);
menu.add(Menu.NONE,MENUITEM_GPS,Menu.NONE,"現在位置");
menu.add(Menu.NONE,MENUITEM_SEARCH,Menu.NONE,“検索");
menu.add(Menu.NONE,MENUITEM_ROUTE_SEARCH,Menu.NONE,"
ルート検索");
return ret;
}
case MENUITEM_ROUTE_SEARCH:

return true;

36

現在位置からコンビニまでの ルートを検索！！ public class YMapRouteAppActivity extends Activity implements YolpLocalSearchListener, RouteOverlayListener{ //RouteOverlayインスタンス作成 RouteOverlay routeOverlay = new RouteOverlay(this,”APPID"); //目的地名 routeOverlay.setGoalTitle(mName); //出発地（現在位置）、最寄りのコンビニ位置を設定 routeOverlay.setRoutePos(mMyLocationOverlay.getMyLocation(),mGp ,RouteOverlay.TRAFFIC_WALK); 37

//RouteOverlayListener設定 routeOverlay.setRouteOverlayListener(this); //検索実行 routeOverlay.search(); //RouteOverlayをMapViewに追加 mMapView.getOverlays().add(routeOverlay); 38

ルート検索完了！！ クルクルを止めますー。 public boolean errorRouteSearch(RouteOverlay arg0, int arg1) { mDialog.dismiss(); mDialog = null; return false; } public boolean finishRouteSearch(RouteOverlay arg0) { mDialog.dismiss(); mDialog = null; return false; } 39

ルートが表示されましたー！！ 40

developer.yahoo.co.jp/webapi/map/ http:// ＠yahoojpYOLP

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

各種ファイルをダウンロード！ http://1st.geocities.jp/yjmapstaff/ yolp/sdk/hokaiosc.zip 42

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