Download as PDF, PPTX
Yolp30分クッキング 2012北海道
- 1. 30分クッキング Yahoo! JAPANのエンジニアが その場で作るスマホ地図サービス ヤフー株式会社 大江 啓之 1
- 2. Yahoo! Open LocalPlatform ? • Yahoo! JAPANの提供する地図・地域情報に 関するさまざまなAPI/SDKです。 YOLP SDKs YOLP APIs YOLPカセット 地域・ ユーザ ルート DB ギャラリー 拠点情 地図DB 報DB DB 2
- 3. Webページで地図 POI検索・住所検索 Yahoo! JavaScriptマップAPI Yahoo!ローカルサーチAPI Yahoo!ジオコーダAPI Yahoo!スタティックマップAPI Yahoo!リバースジオコーダAPI 16 APIs スマホアプリで地図 ＆ POIホスティング Yahoo! iOSマップSDK 3 SDKs YOLPカセットギャラリー ＆ Yahoo! AndroidマップSDK カセットサーチAPI 1 Service その他の便利API 経路地図API 施設内検索API 業種マスターAPI 測地系変換API 2点間距離API コンテンツジオコーダAPI 店舗名寄せAPI 標高API ルート沿い検索API SilverlightマップAPI SilverlightマップSDK 3
- 4.
- 5.
- 6.
- 7.
- 8. １．環境構築！！ Androidの構築方法については、 Yahoo!JAPANから検索して調べてね！ 8
- 9. ２．アプリケーションIDを取得し、 書き換えます。 ***** ***** ******** 9 https://e.developer.yahoo.co.jp/webservices/register_application
- 10. ３． Yahoo! AndroidマップSDK ダウンロード！！ 10 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/androidsdk/
- 11. ４． 「YMapRouteApp」プロジェクト 作成！！ 11
- 12. ５． プロジェクトに Yahoo! AndroidマップSDK を組み込む！！ 12
- 13.
- 14. ６． 地図を表示させみよう！！ まずはMapActivityを継承させる。 import jp.co.yahoo.android.maps.*; public class YMapAppActivity extends MapActivity { } 14
- 15. MapView作成しActivityに追加しよう。 @Override public voidonCreate( Bundle savedInstanceState) { super.onCreate(savedInstanceState); //MapViewインスタンス作成 MapView mapView = new MapView(this,”APPID”); //ActivityにMapViewを追加 setContentView(mapView); } 15
- 16. 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.
- 18.
- 19. ５．現在位置に地図を移動させよー！！ ちょっとメニューを追加・・・。 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
- 20. @Override public boolean onOptionsItemSelected(MenuItemitem){ switch(item.getItemId()){ case MENUITEM_GPS: return true; } return false; } 20
- 21. MyLocationOverlayを使って、 現在位置の地図を表示しよう！！ private MyLocationOverlay mMyLocationOverlay = null; //MyLocationOverlayインスタンス作成 mMyLocationOverlay = new MyLocationOverlay(getApplicationContext(), mMapView); //MyLocationOverlayインスタンス作成 mMyLocationOverlay.enableMyLocation(); //MyLocationOverlayをMapViewに追加 mMapView.getOverlays().add(mMyLocationOverlay); 21
- 22. MyLocationOverlayを使って、 現在位置の地図を表示しよう！！ //位置情報が更新されて場合、地図の移動を行う mMyLocationOverlay.runOnFirstFix(new Runnable(){ public void run() { if (mMapView.getMapController() != null) { //現在位置座標を取得 GeoPoint p = mMyLocationOverlay.getMyLocation(); mMapView.getMapController().animateTo(p); } } }); 22
- 23.
- 24.
- 25. ７．Yahoo!ローカルサーチAPIを使って、 近所のコンビニを探そう！！ 25 http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html
- 26. YOLP APIを使うということは・・。 インターネット YOLP API インターネット（HTTP）を経由しAPIにリクエ ストを送信し、レスポンスを受信します。 26
- 27.
- 28. YMapRouteAppActivity YolpLocalSearchListener Executeでサブスレッド実行。 より検索結果を返す。 YolpLocalSearch AsyncTask ::doInBackground ::onPostExecute サブスレッド終了後に サブスレッド内で実行 実行される。 APIにリクエスト送信、 レスポンスから必要な 受信処理を行う。 データを取り出す。 28
- 29. またまたメニューを追加・・・。 private static finalint 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
- 30. Yahoo!ローカルサーチAPIにアク セスし近所のコンビニを検索！！ public class YMapRouteAppActivity extends Activity implements YolpLocalSearchListener { case MENUITEM_SEARCH: YolpLocalSearch yolpLocalSearch = new YolpLocalSearch(mMapView.getMapCenter(),this); yolpLocalSearch.execute("コンビニ"); return true; 30
- 31. 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
- 32. 検索結果を受け取り、ピンを配置！！ public boolean finishYolpLocalSearch(Stringname, GeoPoint gp) { //ピンを表示 PinOverlay pinOverlay = new PinOverlay(PinOverlay.PIN_VIOLET); //MapViewにPinOverlayを追加 mMapView.getOverlays().add(pinOverlay); //ピンの位置を設定 pinOverlay.addPoint(gp,null); } 32
- 33. ピンをタップ、ポップアップが表示！！ //ポップアップ 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.
- 35.
- 36. またまたメニューを追加・・・。 private static finalint 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
- 37. 現在位置からコンビニまでの ルートを検索！！ 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
- 38.
- 39. ルート検索完了！！ クルクルを止めますー。 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.
- 41. http://developer.yahoo.co.jp/webapi/map/ ＠yahoojpYOLP
- 42.
- 43.