Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Yolp30分クッキング 2012北海道

2,620 views

Published on

  • Be the first to comment

Yolp30分クッキング 2012北海道

  1. 1. 30分クッキング Yahoo! JAPANのエンジニアがその場で作るスマホ地図サービス ヤフー株式会社 大江 啓之 1
  2. 2. Yahoo! Open Local Platform ?• Yahoo! JAPANの提供する地図・地域情報に 関するさまざまなAPI/SDKです。 YOLP SDKs YOLP APIs YOLPカセット 地域・ ユーザ ルート DB ギャラリー 拠点情 地図DB 報DB DB 2
  3. 3. Webページで地図 POI検索・住所検索Yahoo! JavaScriptマップAPI Yahoo!ローカルサーチAPI Yahoo!ジオコーダAPIYahoo!スタティックマップ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. 4. Who Uses YOLP? 4
  5. 5. 5
  6. 6. 6
  7. 7. ライブコーディング スタート 7
  8. 8. 1.環境構築!! Androidの構築方法については、Yahoo! JAPANから検索して調べてね! 8
  9. 9. 2.アプリケーションIDを取得し、 書き換えます。 ***** ***** ******** 9https://e.developer.yahoo.co.jp/webservices/register_application
  10. 10. 3. Yahoo! AndroidマップSDK ダウンロード!! 10http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/androidsdk/
  11. 11. 4. 「YMapRouteApp」プロジェクト 作成!! 11
  12. 12. 5. プロジェクトにYahoo! AndroidマップSDK を組み込む!! 12
  13. 13. YOLP30分クッキングまずは、地図を表示します 13
  14. 14. 6. 地図を表示させみよう!! まずはMapActivityを継承させる。import jp.co.yahoo.android.maps.*;public class YMapAppActivity extends MapActivity {} 14
  15. 15. MapView作成しActivityに追加しよう。@Override public void onCreate( Bundle savedInstanceState){ super.onCreate(savedInstanceState); //MapViewインスタンス作成 MapView mapView = new MapView(this,”APPID”); //ActivityにMapViewを追加 setContentView(mapView);} 15
  16. 16. AndroidManifest.xmlにネットワーク、GPSのパーミッションを記述。<uses-permission android:name="android.permission.INTERNET" /><uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permissionandroid:name="android.permission.ACCESS_MOCK_LOCATION" /> 16
  17. 17. 地図の表示ができましたー!! 17
  18. 18. YOLP30分クッキング現在位置を表示します 18
  19. 19. 5.現在位置に地図を移動させよー!! ちょっとメニューを追加・・・。private static final int MENUITEM_GPS = 1;@Overridepublic boolean onCreateOptionsMenu(Menu menu){ boolean ret=super.onCreateOptionsMenu(menu); menu.add(Menu.NONE,MENUITEM_GPS,Menu.NONE,"現在位置"); return ret;} 19
  20. 20. @Overridepublic boolean onOptionsItemSelected(MenuItem item){ switch(item.getItemId()){ case MENUITEM_GPS: return true; } return false;} 20
  21. 21. MyLocationOverlayを使って、 現在位置の地図を表示しよう!!private MyLocationOverlay mMyLocationOverlay = null;//MyLocationOverlayインスタンス作成mMyLocationOverlay = newMyLocationOverlay(getApplicationContext(), mMapView);//MyLocationOverlayインスタンス作成mMyLocationOverlay.enableMyLocation();//MyLocationOverlayをMapViewに追加mMapView.getOverlays().add(mMyLocationOverlay); 21
  22. 22. MyLocationOverlayを使って、 現在位置の地図を表示しよう!!//位置情報が更新されて場合、地図の移動を行うmMyLocationOverlay.runOnFirstFix(new Runnable(){ public void run() { if (mMapView.getMapController() != null) { //現在位置座標を取得 GeoPoint p = mMyLocationOverlay.getMyLocation(); mMapView.getMapController().animateTo(p); } }}); 22
  23. 23. 現在位置の表示ができました!! 23
  24. 24. YOLP30分クッキング近くのコンビニを検索します 24
  25. 25. 7.Yahoo!ローカルサーチAPIを使って、 近所のコンビニを探そう!! 25http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html
  26. 26. YOLP APIを使うということは・・。 インターネット YOLP APIインターネット(HTTP)を経由しAPIにリクエストを送信し、レスポンスを受信します。 26
  27. 27. YolpLocalSearchについて。YolpLocalSearchはYahoo!ローカルサーチAPIにアクセスするために今回のセミナー用に用意したクラスです。お手元のYolpLocalSearch.javaのソース資料をご覧ください。※ソースはダウンロードもできます。 27
  28. 28. YMapRouteAppActivity YolpLocalSearchListenerExecuteでサブスレッド実行。 より検索結果を返す。 YolpLocalSearch AsyncTask ::doInBackground ::onPostExecute サブスレッド終了後に サブスレッド内で実行 実行される。 APIにリクエスト送信、 レスポンスから必要な 受信処理を行う。 データを取り出す。 28
  29. 29. またまたメニューを追加・・・。private static final int MENUITEM_SEARCH = 2;@Overridepublic 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. 30. Yahoo!ローカルサーチAPIにアク セスし近所のコンビニを検索!!public class YMapRouteAppActivity extends Activity implementsYolpLocalSearchListener {case MENUITEM_SEARCH: YolpLocalSearch yolpLocalSearch = new YolpLocalSearch(mMapView.getMapCenter(),this); yolpLocalSearch.execute("コンビニ"); return true; 30
  31. 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. 32. 検索結果を受け取り、ピンを配置!!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
  33. 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. 34. ピンが表示されましたー!! 34
  35. 35. YOLP30分クッキングコンビニまでのルートを検索 35
  36. 36. またまたメニューを追加・・・。private static final int MENUITEM_ROUTE_SEARCH = 3;@Overridepublic 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. 37. 現在位置からコンビニまでの ルートを検索!!public class YMapRouteAppActivity extends Activity implementsYolpLocalSearchListener, RouteOverlayListener{//RouteOverlayインスタンス作成RouteOverlay routeOverlay = new RouteOverlay(this,”APPID");//目的地名routeOverlay.setGoalTitle(mName);//出発地(現在位置)、最寄りのコンビニ位置を設定routeOverlay.setRoutePos(mMyLocationOverlay.getMyLocation(),mGp,RouteOverlay.TRAFFIC_WALK); 37
  38. 38. //RouteOverlayListener設定routeOverlay.setRouteOverlayListener(this);//検索実行routeOverlay.search();//RouteOverlayをMapViewに追加mMapView.getOverlays().add(routeOverlay); 38
  39. 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. 40. ルートが表示されましたー!! 40
  41. 41. http://developer.yahoo.co.jp/webapi/map/ @yahoojpYOLP
  42. 42. 各種ファイルをダウンロード!http://1st.geocities.jp/yjmapstaff/yolp/sdk/hokaiosc.zip 42
  43. 43. ありがとうございました- THE END - 43

×