1 Yahoo! JAPANのエンジニアが その場で作るスマホ地図サービス ヤフー株式会社 大江 啓之 30分クッキング
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Yahoo! JAPANのエンジニアが その場で作るスマホ地図サービス
ヤフー株式会社
大江 啓之
30分クッキング
2
Yahoo! Open Local Platform ?
• Yahoo! JAPANの提供する地図・地域情報に関するさまざまなAPI/SDKです。
地域・ 拠点情報DB
地図DB ルート
DB
YOLP APIs
YOLP SDKs
YOLPカセット ギャラリー ユーザ
DB
3
Yahoo! JavaScriptマップAPI
Yahoo!スタティックマップAPI
Yahoo! iOSマップSDK
Yahoo! AndroidマップSDK
Yahoo!ローカルサーチAPI
Yahoo!ジオコーダAPI
Yahoo!リバースジオコーダAPI
YOLPカセットギャラリー
カセットサーチAPI
経路地図API 施設内検索API
コンテンツジオコーダAPI
ルート沿い検索API
2点間距離API
業種マスターAPI
店舗名寄せAPI
測地系変換API
標高API
SilverlightマップAPI SilverlightマップSDK
Webページで地図
スマホアプリで地図 POIホスティング
POI検索・住所検索
その他の便利API
16 APIs ＆
3 SDKs ＆
1 Service
4
Who Uses YOLP？
5
6
7
ライブコーディング
スタート
8
１．環境構築！！
Androidの構築方法については、 Yahoo! JAPANから検索して調べてね！
9
２．アプリケーションIDを取得し、 書き換えます。
https://e.developer.yahoo.co.jp/webservices/register_application
* * * * *
* * * * *
* * * * * * * *
10
３． Yahoo! AndroidマップSDK ダウンロード！！
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/androidsdk/
11
４． 「YMapRouteApp」プロジェクト作成！！
12
５． プロジェクトに Yahoo! AndroidマップSDK
を組み込む！！
13
まずは、地図を表示します
YOLP30分クッキング
14
６． 地図を表示させみよう！！
import jp.co.yahoo.android.maps.*; public class YMapAppActivity extends MapActivity { }
まずはMapActivityを継承させる。
15
@Override public void onCreate( Bundle savedInstanceState) { super.onCreate(savedInstanceState); //MapViewインスタンス作成 MapView mapView = new MapView(this,”APPID”); //ActivityにMapViewを追加 setContentView(mapView); }
MapView作成しActivityに追加しよう。
16
<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" />
AndroidManifest.xmlに ネットワーク、GPSのパーミッションを記述。
17
地図の表示ができましたー！！
18
現在位置を表示します
YOLP30分クッキング
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; }
ちょっとメニューを追加・・・。
20
@Override public boolean onOptionsItemSelected(MenuItem item){ switch(item.getItemId()){ case MENUITEM_GPS: return true; } return false; }
21
//MyLocationOverlayインスタンス作成 mMyLocationOverlay = new MyLocationOverlay(getApplicationContext(), mMapView); //MyLocationOverlayインスタンス作成 mMyLocationOverlay.enableMyLocation(); //MyLocationOverlayをMapViewに追加 mMapView.getOverlays().add(mMyLocationOverlay);
MyLocationOverlayを使って、 現在位置の地図を表示しよう！！
private MyLocationOverlay mMyLocationOverlay = null;
22
//位置情報が更新されて場合、地図の移動を行う mMyLocationOverlay.runOnFirstFix(new Runnable(){ public void run() { if (mMapView.getMapController() != null) { //現在位置座標を取得 GeoPoint p = mMyLocationOverlay.getMyLocation(); mMapView.getMapController().animateTo(p); } } });
MyLocationOverlayを使って、 現在位置の地図を表示しよう！！
23
現在位置の表示ができました！！
24
近くのコンビニを検索します
YOLP30分クッキング
25
７．Yahoo!ローカルサーチAPIを使って、 近所のコンビニを探そう！！
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html
26
YOLP APIを使うということは・・。
YOLP API
インターネット
インターネット（HTTP）を経由しAPIにリクエストを送信し、レスポンスを受信します。
27
YolpLocalSearchについて。
YolpLocalSearchはYahoo!ローカルサーチAPIに
アクセスするために今回のセミナー用に用意したクラスです。 お手元のYolpLocalSearch.javaのソース資料をご覧ください。 ※ソースはダウンロードもできます。
28
YMapRouteAppActivity
YolpLocalSearch
AsyncTask
::doInBackground ::onPostExecute
サブスレッド内で実行 APIにリクエスト送信、受信処理を行う。
Executeでサブスレッド実行。 YolpLocalSearchListener より検索結果を返す。
サブスレッド終了後に実行される。
レスポンスから必要なデータを取り出す。
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; }
またまたメニューを追加・・・。
30
case MENUITEM_SEARCH: YolpLocalSearch yolpLocalSearch = new YolpLocalSearch(mMapView.getMapCenter(),this); yolpLocalSearch.execute("コンビニ"); return true;
Yahoo!ローカルサーチAPIにアクセスし近所のコンビニを検索！！
public class YMapRouteAppActivity extends Activity implements YolpLocalSearchListener {
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"; //近い順ソート
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); }
検索結果を受け取り、ピンを配置！！
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);
ピンをタップ、ポップアップが表示！！
34
ピンが表示されましたー！！
35
コンビニまでのルートを検索
YOLP30分クッキング
36
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;
37
//RouteOverlayインスタンス作成 RouteOverlay routeOverlay = new RouteOverlay(this,”APPID"); //目的地名 routeOverlay.setGoalTitle(mName); //出発地（現在位置）、最寄りのコンビニ位置を設定 routeOverlay.setRoutePos(mMyLocationOverlay.getMyLocation(),mGp,RouteOverlay.TRAFFIC_WALK);
現在位置からコンビニまでの ルートを検索！！ public class YMapRouteAppActivity extends Activity implements YolpLocalSearchListener, RouteOverlayListener{
38
//RouteOverlayListener設定 routeOverlay.setRouteOverlayListener(this); //検索実行 routeOverlay.search(); //RouteOverlayをMapViewに追加 mMapView.getOverlays().add(routeOverlay);
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; }
ルート検索完了！！ クルクルを止めますー。
40
ルートが表示されましたー！！
http://developer.yahoo.co.jp/webapi/map/
＠yahoojpYOLP
42
http://1st.geocities.jp/yjmapstaff/yolp/sdk/hokaiosc.zip
各種ファイルをダウンロード！
43
ありがとうございました
- THE END -
Related Documents
