YJTC19 A-1 もう道に迷わない！ Yahoo! MAPにおけるAR体験 #yjtc

465 Views

January 25, 19

#yjtc #スライド

スライド概要

Yahoo! JAPAN Tech Conference 2019 A-1の資料です

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

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

またはPlayer版

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

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 194.1K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 92.3K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 82.9K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 65.5K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 43.5K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 33.7K

各ページのテキスト

19 Yahoo! JAPAN Tech Conference 2019 もう道に迷わない！ Yahoo! MAPにおけるAR体験メディアカンパニー検索統括本部ローカル検索本部 | 徳元健太テクノロジーグループデータ&サイエンスソリューション統括本部スマートデバイス本部 | 廣橋孝紀 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved.

Yahoo! MAP Yahoo! MAP 1タップで素敵なお店に出会える! 無料ダウンロードはこちらから App Store Google Play 新しくなった Yahoo! MAPの3つの特長かんたんスポット検索おでかけ情報わかりやすい道案内近所で何が起こってる? 防犯マップ防犯マップで近所の安全を確認! くわしくはこちら見えてる景色で道案内あと534m ARモード実際の風景に、矢印や看板などを重ねたルート案内! ※2 くわしくはこちら Tポイントが貯まる! チェックイン対象のお店でチェックインするだけで、 Tポイントが貯まる! ※1 ※3 くわしくはこちら何時間後に雨が降る? 雨雲レーダー 6時間先までの雨雲の動きが地図で見られて便利! ※1 今どこが混んでる? 混雑レーダー日本全国の混雑状況がヒートマップで確認できる! 駅の中も、地下街も屋内マップ大きな駅や地下街の中もわかる! Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

ARKit ・iOS 11以降で利用できるARに関する機能の実装をサポートしているフレームワーク・ARモードは6DoF(Six degrees of freedom)を必要とするためA9チップ以降のものが搭載された端末のみサポート 3DoF 6DoF Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

10.

ARKit+CoreLocation ・ARConfiguration.worldAlignment. gravityAndHeadingを指定・原点の位置情報とARKitにより構築された世界空間の原点は相互に変換可能 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

11.

ARKit+CoreLocation (x1, z1) d [m] (0, 0) θ (lat1, lon1) d [m] (lat0, lon0) γ (x1, z1) = [cos(θ) -sin(θ) sin(θ) cos(θ)] [x z] Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

12.

13.

オブジェクトの配置・ARモードは3Dでオブジェクトを表現するためSceneKitを利用・SCNNodeに対し適切なGeometry、Textureを設定することでオブジェクトを表現・けんさく、看板についてはオリジナルの3Dデータを使用 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

14.

15.

16.

17.

18.

19.

看板あと300.1km position θ ・ルートラインと看板の間にマージンを設定し回転させることでユーザーに見やすい位置に配置・進行方向と次の方向から左右どちらに置くか判定しユーザーに見えやすいように Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

20.

21.

22.

足跡 position θ ・ARSCNViewより参照した pointOfViewのpositionを取得・現在位置の座標から移動距離と角度を計算・足跡はランダムで出すように materialに設定している Textureを動的に設定 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

23.

24.

[beta]

実装
protocol LocationInfoProvidable {
// 現在の位置情報(GPS)を取得
func location(completion: @escaping (CLLocation?)->())
// 指定したWorld座標に最も近いルートラインの座標を返す
func nearbyRoutePoint(from origin: SCNVector3) -> SCNVector3?
// 位置情報に関するイベントを受け取るためのdelegate
var delegate: LocationInfoProviderDelegate? { get set }
}
protocol LocationInfoProviderDelegate: class {
// 電子コンパスによる更新情報を通知
func arLocationInfoProvider(_ provider: ARLocationInfoProvidable,
requestUpdateHeading heading: CLHeading)
// 位置(GPS)の更新情報を通知
func arLocationInfoProvider(_ provider: ARLocationInfoProvidable,
requestUpdateLocation location: CLLocation,
oldLocation: CLLocation?)
}
Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19
Yahoo! JAPAN
Tech Conference 2019

25.

実装 locationInfoProvider.location { [weak self] location in guard let origin = location else { self?.displayError() return } self?.addNodes(origin: origin) } Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

26.

実装 func addNodes(origin: CLLocation) { self.navigationView.origin = origin let routeLineNodes = self.routeLineNodes(coordinates: self.coordinates) // originを起点に作成したルートラインのSCNNodeを全てスケジューリングする self.navigationView.scheduleNodes(routeLineNodes, priority: .high) } func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) { // 5つずつSCNNodeを追加 self.navigationView.worldNode.addScheduledNodes(quantity: 5) } Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

27.

28.

29.

30.

空間補正の仕組み protocol LocationInfoProviderDelegate: class { // 電子コンパスによる更新情報を通知 func arLocationInfoProvider(_ provider: ARLocationInfoProvidable, requestUpdateHeading heading: CLHeading) // 位置(GPS)の更新情報を通知 func arLocationInfoProvider(_ provider: ARLocationInfoProvidable, requestUpdateLocation location: CLLocation, oldLocation: CLLocation?) } Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

31.

32.

33.

[beta]

空間補正の仕組み
func arLocationInfoProvider(_ provider: ARLocationInfoProvidable,
requestUpdateLocation location: CLLocation,
oldLocation: CLLocation?) {
// ARの空間上での現在位置を取得
guard let arPosition = self.navigationView.pointOfView?.worldPosition else {
return
}
// GPSによる位置情報をARの世界座標に変換した結果
let gpsPosition = location.coordinate.relativeVector3(to: origin.coordinate)
// 位置の差が誤差の円の範囲内であれば何もしない
guard gpsPosition.distance(to: arPosition) > location.horizontalAccuracy else {
return
}
// 対象となるSCNNodeに対して補正 (※ SCNVector3に独自でoperatorを実装してあります)
let difference = gpsPosition - arPosition
self.navigationView.worldNode.correctableNode.worldPosition -= SCNVector3(difference.x, 0, difference.z)
}
Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19
Yahoo! JAPAN
Tech Conference 2019

34.

まとめ・ARKit + CoreLocationで現実世界上でのナビゲーションができる・ARの世界座標と現実での緯度経度は相互に変換できる・GeometryとTexture(Material)を適切に設定することで様々なオブジェクトをARの世界に配置することができる・GPSや電子コンパスの情報と、AR空間上での現在地を比較することで位置や方向の補正が可能 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

35.

36.

今回デザインした画面案内終了白川公園地図モード歩きスマホ危険必ず立ち止まってご利用くださいスマートフォンを注視しながらの歩行は大変危険です。周囲の状況をよく見て、安全なご利用に十分ご留意ください。アプリの設定メニューから免責事項をご確認の上、ご利用ください。確認してARモードを開始する案内終了白川公園地図モード案内終了紀尾井町ビル地図表示空間の認識に失敗しました夜間や暗闇では、光量不足でAR表示の精度が低くなります。地図表示でのナビをご利用ください。地図表示に戻る Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

37.

38.

39.

40.

41.

42.

ルート案内時のそれぞれのユースケースの説明通常の2Dマップ ARモード G ・ルート案内画面：地図・目的地位置までのルート把握・地図全体を俯瞰できる・ルート案内画面：現実・今この瞬間に向かうべき方向の把握・周辺にフォーカスできる Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

43.

44.

45.

46.

47.

48.

暗闇時の使用に対するフィードバック案内終了紀尾井町ビル地図表示空間の認識に失敗しました夜間や暗闇では、光量不足でAR表示の精度が低くなります。地図表示でのナビをご利用ください。地図表示に戻る暗闇などユーザーにとって危ないシーンには使用できないようにする Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

49.

歩きスマホに対するフィードバック案内終了白川公園地図モード歩きスマホ危険必ず立ち止まってご利用くださいスマートフォンを注視しながらの歩行は大変危険です。周囲の状況をよく見て、安全なご利用に十分ご留意ください。アプリの設定メニューから免責事項をご確認の上、ご利用ください。確認してARモードを開始するユーザーファーストを考慮し、表示タイミング・グラフィック・文言で訴えかける Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

50.

51.

52.

53.

54.

3D看板についてあと200m ※イメージ Texture あと200m あと200m あと200m あと200m Primary Blue Primary Red Tertiary Orange Tertiary Purple あと200m あと200m あと200m あと200m Tertiary Pink Tertiary Green Tertiary Yellow Tertiary Yellowgreen あと200m 合計 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

55.

56.

57.

58.

59.

60.

61.

62.

63.

64.

65.

慣れ親しんでるツール + 開発側との連携を選択 Prott ・画面共有・大まかな画面遷移 Flinto ・よりリッチな画面遷移の共有 Adobe® After Effect® ・マイクロインタラクションの作成 GitHub ・進捗やタスクなどを管理 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

66.

67.

68.

69.

70.

71.

72.

73.

74.

同じ機能でもAR体験ではユースケースが変わる通常の2Dマップ ARモード G ・目的地位置までの把握・今この瞬間に向かうべき方向・地図全体を俯瞰できる・周辺にフォーカスできる・ルート案内画面：地図・ルート案内画面：現実 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

75.

76.

77.

デザインの進め方において重要なこと・ARデザインだからと言って新しくプロトタイプを学習しなくても大丈夫 →慣れ親しんでいるツールの組み合わせでスピード重視の開発体制を実現・開発側に共有する物を細かく、実装確認を多くする →このサイクルを増やすことによってより精度の高いデザインに仕上げることが可能 Copyright 2019 Yahoo Japan Corporation. All Rights Reserved. 19 Yahoo! JAPAN Tech Conference 2019

78.