Yolp30分クッキング 2012北海道

>100 Views

June 15, 12

スライド概要

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

Who Uses YOLP? 4

7.

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

8.

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

9.

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

10.

3. Yahoo! AndroidマップSDK ダウンロード!! 10 http://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-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.

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

18.

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

19.

5.現在位置に地図を移動させよー!! ちょっとメニューを追加・・・。 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(MenuItem item){ 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.

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

24.

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

25.

7.Yahoo!ローカルサーチAPIを使って、 近所のコンビニを探そう!! 25 http://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 YolpLocalSearchListener より検索結果を返す。 Executeでサブスレッド実行。 YolpLocalSearch AsyncTask ::doInBackground ::onPostExecute サブスレッド内で実行 APIにリクエスト送信、 受信処理を行う。 サブスレッド終了後に 実行される。 レスポンスから必要な データを取り出す。 28

29.

またまたメニューを追加・・・。 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

30.
[beta]
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(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.
[beta]
またまたメニューを追加・・・。
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

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.

//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.

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

42.

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

43.

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