1. 次世代ジオロケーション
サービスの開発⼿手法
ヤフー株式会社 R&D統括本部
河合太郎郎
1
11 9 9

2. アジェンダ
• ジオロケーションサービスとは
• ジオロケーションデベロッパーのため
のYahoo! Open Local
Platform（YOLP)
• YOLPを⽤用いたジオロケーションサー
ビスの開発実例例
2
11 9 9

3. ⾃自⼰己紹介
河合太郎郎
tarkawai@yahoo-‐‑‒corp.jp
http://twitter.com/inuro
http://facebook.com/inuro
株式会社アルプス社で地図ソフト「プロアトラス」シリーズの開発を担当
その後ヤフー株式会社でYahoo! Open Local Platformの企画・開発や、
おもしろ地図実験サイトLatLongLabの企画・開発・デザインを担当。
現在、ヤフー株式会社 R&D統括本部 プラットフォーム開発本部
⻄西⽇日本開発部 テクニカルリーダー。
3
11 9 9

4. ジオロケーション
サービスとは
4
11 9 9

5. ジオロケーション
サービスって？
航 空
真
写 宿泊
ニュース デート
花⾒見見
地図 ⽇日記
震 ーリ ング
位
カーナビ ツ
置
災 鉄道
ゲ
ー
天気
⼈人間の⽣生活すべてがジオロケーション
5
11 9 9

6. ジオロケーション
サービスの３つの要素
1. 位置情報コンテンツの作成
2. 位置情報コンテンツへのメタデータの付与
3. 位置情報コンテンツの表⽰示・集計・分析
6
11 9 9

7. １．位置情報
位置 コンテンツの作成
情報
演算可能な位置情報を
コンテンツに付与する
• 新しくできたお店の住所・場所・ビルのフロアなど
– コンテンツに対して位置情報を付与
• 被災地での通話実績データ
– 位置に対してデータをマッピング
• イベントがどのお店で開催されるか
– 位置情報が付与されたコンテンツは、それ⾃自体が位置情報オブジェク
トとして機能するようになる
• 地図そのもの
– ある絵に、どこからどこの範囲を描いたものであるか、という情報が
付与されることで地図になる
7
11 9 9

8. ２．位置情報コンテンツへの
メタ メタデータの付与
データ
サービスで使う様々な付加情報を
コンテンツに付与する
• お店のジャンルや電話番号、メニュー、外観写真など
– お店という位置情報オブジェクトに対してよりリッチな情
報の付与
• お店へのチェックイン
– お店という位置情報オブジェクトに対してチェックインと
いう個⼈人のアクティビティの付与
• ナビゲーション
– 現在位置に対して、「あと何kmか」「次どちらへ曲がる
べきか」というメタデータのリアルタイムな付与
8
11 9 9

9. ３．位置情報コンテンツの
表⽰示
集計
表⽰示・集計・分析
分析
コンテンツを様々な形式で表⽰示し
集計・分析して新たなデータを⽣生み出す
• 地図そのものの表⽰示
– 地図、航空写真、地形図
• あるコンテキストに基づくコンテンツの表⽰示
– レストラン検索索、通⾏行行実績マップ
• コンテンツの集計・分析
– 商圏分析結果のヒートマップ表⽰示
• AR（Augumented Reality）
– 視界内の映像の⽰示す位置を算出し、それに基づいてリンクされて
いるメタデータをビジュアライズ
9
11 9 9

10. 例例えばチェックイン
サービスでは
• 店舗の存在情報の調達
位置 – 網羅羅性をどうするか。商⽤用データ？User Generated Contents？
情報
• 店舗への位置情報の付与
– 住所、緯度度経度度など
• 店舗へのメタデータの付与
メタ – 店舗のカテゴリなど
データ
• ユーザーによる動的なメタデータ付与のシステム
– 店舗へのチェックイン、コメントなど
表⽰示 • データの集計・分析とそれに基づくスコアの算出
集計 – 「ラーメン屋に10回チェックインしたらバッジ付与」など
分析 データの表⽰示
•
– 地図上へのマッピングなど
10
11 9 9

11. じゃあ次世代ジオロケー
ションサービスってなに
？
11
11 9 9

12. 次世代ジオロケーション
サービスの３つの要素
1.リアルタイム
スマートフォンの普及により「個⼈人の現在の位置」を
サービスに組み込むことが可能に
2.クラウド
多量量のデータやAPIを容易易にホスト・配信可能に
3.ソーシャル
個⼈人のみに紐紐づいたサービスから「⼈人と⼈人との関係」
を軸にした集計・分析へ
12
11 9 9

13. ジオロケーションデベロッ
パーのためのYahoo! Open
Local Platform（YOLP）
13
11 9 9

14. YOLPとは
「Yahoo! Open Local Platform
（略略称：YOLP）は、
地域・⽣生活圏情報の流流通を⽬目的とした
情報基盤です」
データ＋API＋ストレージ
http://developer.yahoo.co.jp/webapi/map/
14
11 9 9

15. Yahoo!ロコの
地域情報データの利利⽤用
http://developer.yahoo.co.jp/webapi/map/
• Yahoo!ロコの地図データ
– 地図、航空写真、地下街図
• ローカルサーチAPI
– Yahoo! JAPANの地域情報系サービスを統合したYahoo!
ロコのデータを利利⽤用可能 メタ
• 店舗・施設など総数1,100万件の拠点情報 データ
• パートナー28社からの確度度の⾼高い情報の提供
• 店舗名寄せAPI 位置
– Yahoo!ロコのデータへ名寄せするAPI
情報
15
11 9 9

16. 位置情報コンテンツ
作成のためのAPI
http://developer.yahoo.co.jp/webapi/map/
• ジオコーダ
– 住所⽂文字列列から緯度度経度度を引くAPI
– 住所しか分からないコンテンツを位置情報コンテンツとして扱える
ようにする
• リバースジオコーダ
– 緯度度経度度から住所を引くAPI
– 住所以外にもその緯度度経度度に付与されたさまざまなメタデータを参
照可能（拡充予定）
• 道路路名称、ビル、公園、⼤大規模施設敷地内など
• コンテンツジオコーダ 位置
– テキストを渡すとその中に含まれる「場所を表すキーワード」を⾃自 情報
動的に抽出し、位置情報を付与する
16
11 9 9

17. データストレージ
http://developer.yahoo.co.jp/webapi/map/
• YOLPカセットギャラリーでユーザーデータのホスティ
ングを提供
– http://gallery.olp.yahoo.co.jp/
– 位置情報データのアップロード
– 位置やカテゴリなどの項⽬目に対しての検索索インデックス
の作成 メタ
データ
– 検索索APIの提供
• オープンな位置情報データリポジトリとして
– クリエイティブ・コモンズ・ライセンス利利⽤用可能
位置
情報
– オープンにすることで創造の連鎖を
17
11 9 9

18. マルチデバイス対応
http://developer.yahoo.co.jp/webapi/map/
• iOS SDK
• Android SDK
– 今秋公開予定
• Javascript API
– タッチインタフェース
• Static Map API 表⽰示
集計
– PNG/JPG/GIF 分析
18
11 9 9

19. 地図の
プリセットスタイル
http://developer.yahoo.co.jp/webapi/map/
• 専⾨門の地図デザイナーが設計
したスタイルを22種類⽤用意
• 加えてユーザー任意のスタイ
ルを指定可能
表⽰示
集計
分析
19
11 9 9

20. standard vold ⾏行行政⾊色分け図 midnight
brown red green blue
プリセットスタイルの⼀一例例
表⽰示
集計
分析
gray 20 simple 鉄道路路線図
11 9 9

21. 専⾨門家により編集・
メンテナンスされた地図
http://developer.yahoo.co.jp/webapi/map/
• 地図としての⾒見見やすさのノウハウ
• ⼤大規模な変更更については随時更更新
– 例例：名古屋第⼆二環状⾃自動⾞車車道
表⽰示
集計
分析
21
11 9 9

22. ヒートマップ・⽩白地図
http://developer.yahoo.co.jp/webapi/map/
• 点オブジェクトの集合に対し
て様々なビューを提供
– 標準的なマーカーのプロット
– ヒートマップ
– ⽩白地図
表⽰示
集計
分析
22
11 9 9

23. 経路路地図（略略地図）
http://developer.yahoo.co.jp/webapi/map/
• 経路路地図画像を⽣生成するAPI
– 経路路のラインを描画
– 経路路の周辺の道路路のみを描画
– 任意の位置にアイコン・テキストを
描画
• 9/8 公開予定
表⽰示
集計
分析
23
11 9 9

24. チェックインAPI
（提供予定）
http://developer.yahoo.co.jp/webapi/map/
• 店舗や位置に対するチェックイン機能
表⽰示
• メンテナンスされた店舗情報 集計
分析
• サービス独⾃自の店舗情報の登録
メタ
• 画像やコメントの登録 データ
位置
パートナー向けに近⽇日先⾏行行公開予定 情報
24
11 9 9

25. YOLPを⽤用いた
ジオロケーションサービスの
開発実例例
25
11 9 9

26. YOLPで作ろう
ジオロケーションサービス
• ラーメン屋ヒートマップ
• リアルタイムマクドナルドナビ
• YOLPじゃない違う地図を表⽰示してみる
– 基盤地図25000（WMS）
– OpenStreetMap（地図タイル）
26
11 9 9

27. ラーメン屋ヒートマップ
• ダブルクリックした市区町村のラーメン屋
の分布をヒートマップで表⽰示
– JavascriptマップAPI
• スタイル地図
• ヒートマップレイヤー
– ローカルサーチAPI
– 業種コードAPI
27
11 9 9

28. 表⽰示する地図の選択
• 市区町村単位で分布を表⽰示したいので、区
別しやすいよう「⾏行行政⾊色分け図」を選択
var stylemaplayer = new Y.StyleMapLayer("district");
var layerset = new Y.LayerSet(" ", [stylemaplayer]);
map.addLayerSet("stylemap",layerset);
map.drawMap(new Y.LatLng(34.6812,135.2022), 14, "stylemap");
28
11 9 9

29. ダブルクリックされた
市区町村を特定する
• ダブルクリックされた緯度度経度度をリバースジオコーダ
に通して⾏行行政コードを取得する
– ⾏行行政コード＝全国地⽅方公共団体コード
var geoCoder = new Y.GeoCoder();
map.bind("dblclick", function(latlng){
geoCoder.execute({"latlng": latlng}, function(ydf) {
if (ydf.result.count > 0){
var code = ydf.features[0].property.AddressElement[1].Code;
searchRamen(code);
}
});
});
29
11 9 9

30. 市区町村内の
ラーメン屋を検索索する
• ⾏行行政コード、業種コード、カセットIDを指定しローカルサーチ
へのクエリを準備する
– ラーメン屋の業種コード：0106
– 電話帳カセットのID： d8a23e9e64a4c817227ab09858bc1330
var appId = your_app_id;
var cassetteId = "d8a23e9e64a4c817227ab09858bc1330";
var searchRamen = function(code){
var url = "http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch"
+ "?appid=" + appId
+ "&cid=" + cassetteId
+ "&gc=0106"
+ "&results=100"
+ "&ac=” + code;
30
11 9 9

31. 検索索結果を
ヒートマップ表⽰示する
• Y.GeoXmlHeatmapLayerの引数にローカルサーチの
クエリを渡す
– ⾃自動的に検索索を⾏行行いヒートマップを⽣生成
var appId = your_app_id;
var cassetteId = "d8a23e9e64a4c817227ab09858bc1330";
var searchRamen = function(code){
var url = "http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch"
+ "?appid=" + appId
+ "&cid=" + cassetteId
+ "&gc=0106"
+ "&results=100"
+ "&ac=” + code;
heatmapLayer = new Y.GeoXmlHeatmapLayer(url);
map.addLayer(this.heatmapLayer);
}
31
11 9 9

32. 完成
• デモ（http://inuro.in/yolp/heatmap.html）
32
11 9 9

33. リアルタイム
マクドナルドナビ
• 現在位置から最寄りのマクドナルド
までのルートを表⽰示し続けるだけの
iPhone⽤用Webサービス
– JavascriptマップAPI
• 経路路探索索プラグイン
（Y.RouteSearchPlugin）
– ローカルサーチAPI
• YOLPカセットギャラリーのマクドナルド
カセット
– Geolocation API
33
11 9 9

34. 現在位置を監視する
• GeolocationAPIのwatchPositionで現在位置の変化を
検知したら最寄りのマクドナルドを検索索
– そのままだと頻繁に検索索が⾛走るので、前回から1分あるい
は100m変化があった場合のみ再検索索を⾏行行う
var lasttime = 0;
var lastlatlng = new Y.LatLng(0,0);
if(navigator.geolocation){
navigator.geolocation.watchPosition(function(pos){
var latlng = new Y.LatLng(pos.coords.latitude,pos.coords.longitude);
var time = new Date().getTime();
if(time - lasttime > 60000 && latlng.distance(lastlatlng) > 0.1){
lasttime = time;
lastlatlng = latlng;
searchNearestMcDonald(latlng);
}
! });
}
34
11 9 9

35. 現在位置から最も近い
マクドナルドを検索索
• マクドナルドに限定してローカルサーチを実⾏行行
– マクドナルドのカセットIDは d115e2a62c8f28cb03a493dc407fa03f
– 必要な検索索結果は1件のみ、最も距離離が近いものを
var searchNearestMcDonald = function(latlng){
$.ajax({
url: "http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch",
dataType: "jsonp",
data:{
appid: your_app_id,
cid: "d115e2a62c8f28cb03a493dc407fa03f",
results: 1,
lat: latlng.lat(),
lon: latlng.lng(),
sort: "dist",
output: "json"
},
success: updateRoute
});
}
35
11 9 9

36. ルートを検索索し
地図上に描く
• 経路路探索索プラグイン（Y.RouteSearchPlugin）を利利⽤用
– 初期化時に2点を渡すとルートを検索索し地図に描画して
くれる
var updateRoute = function(result){
var coords = result.Feature[0].Geometry.Coordinates.split(",");
if(plugin){
map.removePlugin(plugin);
}
plugin = new Y.RouteSearchPlugin({latlngs:[
latlng,
new Y.LatLng(coords[1],coords[0])
]});
map.addPlugin(plugin);
}
36
11 9 9

37. 完成
• デモ（http://inuro.in/
yolp/mcdo.html）
37
11 9 9

38. YOLPじゃない地図を
表⽰示してみる
• 基盤地図25000
– WMS（Web Map Service）
• OpenStreetMap
– SlippyMap形式地図タイル
38
11 9 9

39. 基盤地図25000
レイヤーの実装
• Y.ImageTileLayerのgetImageSrcをオーバーライド
– タイルの位置にあうように画像の取得をリクエストする
var kibanLayer = new Y.ImageTileLayer();
kibanLayer.getImageSrc = function(x, y, z){
! var sw = this.fromTileToLatLng(x, y, 0, 0);
! var ne = this.fromTileToLatLng(x+1, y+1, 0, 0);
! var proj = map.getProjection();
! var p1 = proj.fromPixelToMeters(proj.fromLatLngToPixel(sw, z), z);
! var p2 = proj.fromPixelToMeters(proj.fromLatLngToPixel(ne, z), z);
! var bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
! var url = "http://www.finds.jp/ws/kiban25000gwc.cgi" +
! ! "?VERSION=1.1.1" +
! ! "&REQUEST=GetMap" +
! ! "&SRS=EPSG:900913" +
! ! "&WIDTH=256" +
! ! "&HEIGHT=256" +
! ! "&FORMAT=image/png" +
! ! "&LAYERS=kiban25000:AllT" +
! ! "&BBOX=" + bbox;
! return url;
}
39
11 9 9

40. OpenStreetMap
レイヤーの実装
• Y.ImageTileLayerのgetImageSrcをオーバーライド
– タイルの呼び出しをOpenStreetMapの⽅方式に合わせる
var osmLayer = new Y.ImageTileLayer();
osmLayer.getImageSrc = function(x, y, z){
//OSM zoom YOLP 1
var zoom = z - 1;
//
var g = Math.pow(2, zoom);
//y OSM OSM (0,0) YOLP
y = Math.floor((y + 0.5) * -1 + g / 2);
var url = "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + y + ".png";
return url;
}
40
11 9 9

41. レイヤーセットの構築
• 作成したレイヤーを地図に読み込む
– ⽐比較⽤用に通常の地図もレイヤーセットに追加
var setlist = {
normal: new Y.LayerSet(" ", [new Y.NormalLayer()]),
kiban: new Y.LayerSet(" 25000", [kibanLayer]),
osm: new Y.LayerSet("OpenStreetMap", [osmLayer])
};
var map = new Y.Map("map", {layerSets: setlist});
map.drawMap(new Y.LatLng(34.6812,135.2022), 15, "normal");
41
11 9 9

42. 完成
• デモ（http://inuro.in/yolp/osm.html）
42
11 9 9

43. ありがとうございました
質問等あればこちらまで
tarkawai@yahoo-‐‑‒corp.jp
http://twitter.com/inuro
http://facebook.com/inuro
43
11 9 9