Yolp30分クッキング 2012北海道

  • 1,659 views
Uploaded on

 

  • 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
1,659
On Slideshare
0
From Embeds
0
Number of Embeds
1

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