Yolp30分クッキング 2012北海道
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,389
On Slideshare
2,389
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 30分クッキング Yahoo! JAPANのエンジニアがその場で作るスマホ地図サービス ヤフー株式会社 大江 啓之 1
  • 2. Yahoo! Open Local Platform ?• Yahoo! JAPANの提供する地図・地域情報に 関するさまざまなAPI/SDKです。 YOLP SDKs YOLP APIs YOLPカセット 地域・ ユーザ ルート DB ギャラリー 拠点情 地図DB 報DB DB 2
  • 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. Who Uses YOLP? 4
  • 5. 5
  • 6. 6
  • 7. ライブコーディング スタート 7
  • 8. 1.環境構築!! Androidの構築方法については、Yahoo! JAPANから検索して調べてね! 8
  • 9. 2.アプリケーションIDを取得し、 書き換えます。 ***** ***** ******** 9https://e.developer.yahoo.co.jp/webservices/register_application
  • 10. 3. Yahoo! AndroidマップSDK ダウンロード!! 10http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/androidsdk/
  • 11. 4. 「YMapRouteApp」プロジェクト 作成!! 11
  • 12. 5. プロジェクトにYahoo! AndroidマップSDK を組み込む!! 12
  • 13. YOLP30分クッキングまずは、地図を表示します 13
  • 14. 6. 地図を表示させみよう!! まずはMapActivityを継承させる。import jp.co.yahoo.android.maps.*;public class YMapAppActivity extends MapActivity {} 14
  • 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. 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
  • 18. YOLP30分クッキング現在位置を表示します 18
  • 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. @Overridepublic boolean onOptionsItemSelected(MenuItem item){ switch(item.getItemId()){ case MENUITEM_GPS: return true; } return false;} 20
  • 21. MyLocationOverlayを使って、 現在位置の地図を表示しよう!!private MyLocationOverlay mMyLocationOverlay = null;//MyLocationOverlayインスタンス作成mMyLocationOverlay = newMyLocationOverlay(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. 現在位置の表示ができました!! 23
  • 24. YOLP30分クッキング近くのコンビニを検索します 24
  • 25. 7.Yahoo!ローカルサーチAPIを使って、 近所のコンビニを探そう!! 25http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html
  • 26. YOLP APIを使うということは・・。 インターネット YOLP APIインターネット(HTTP)を経由しAPIにリクエストを送信し、レスポンスを受信します。 26
  • 27. YolpLocalSearchについて。YolpLocalSearchはYahoo!ローカルサーチAPIにアクセスするために今回のセミナー用に用意したクラスです。お手元のYolpLocalSearch.javaのソース資料をご覧ください。※ソースはダウンロードもできます。 27
  • 28. YMapRouteAppActivity YolpLocalSearchListenerExecuteでサブスレッド実行。 より検索結果を返す。 YolpLocalSearch AsyncTask ::doInBackground ::onPostExecute サブスレッド終了後に サブスレッド内で実行 実行される。 APIにリクエスト送信、 レスポンスから必要な 受信処理を行う。 データを取り出す。 28
  • 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. Yahoo!ローカルサーチAPIにアク セスし近所のコンビニを検索!!public class YMapRouteAppActivity extends Activity implementsYolpLocalSearchListener {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(String name, 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. ピンが表示されましたー!! 34
  • 35. YOLP30分クッキングコンビニまでのルートを検索 35
  • 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. 現在位置からコンビニまでの ルートを検索!!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. //RouteOverlayListener設定routeOverlay.setRouteOverlayListener(this);//検索実行routeOverlay.search();//RouteOverlayをMapViewに追加mMapView.getOverlays().add(routeOverlay); 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. ルートが表示されましたー!! 40
  • 41. http://developer.yahoo.co.jp/webapi/map/ @yahoojpYOLP
  • 42. 各種ファイルをダウンロード!http://1st.geocities.jp/yjmapstaff/yolp/sdk/hokaiosc.zip 42
  • 43. ありがとうございました- THE END - 43