【受講メモ】MixLeap Live Study #63 - 移動・交通サービスを支えるヤフーのエンジニアリング
2020年11月26日に行われた「移動・交通サービスを支えるYahooのエンジニアリング」に参加しました！
ただ聞くだけでは意味がないので、受講メモとしてnoteに残しておきます。
Yahooの移動・交通サービスの歴史
1996年 Yahooジャパン
1998年 地図、路線情報
2014年 カーナビ
2017年 MAP（リニューアル）
ヤフーでのMapboxの利用について
Maxboxの紹介
Mapboxとは
・地図情報プラットフォームの会社
・サンフランシスコ（本社）、ワシントンDC（本社）、ミンスク、ヘルシンキ、香港、上海、北京、東京シンガポールに９つのオフィスがある
・従業員：約600名
・毎月６億人以上のユーザにアプローチ
６億人以上が使ったデータを交通情報などとして編集して配信しています。
ヤフーがMapboxを採用している理由は、親会社のソフトバンクとマップボックスJPが合弁会社を作っているためです。
なぜMapboxにしたか
・Mapbox移行の目的
ヤフーはこれまで少数精鋭で地図エンジンを作成
（なかなかすべてのユーザの要望に応えることは困難）
→多数精鋭でMapboxは地図プラットフォームを作っている
（より多くのユーザに価値を届けることができる）
Mapbox機能紹介
主な利用プラットフォーム
・地図ライブラリ
・管理ツール
Mapbox Studio
統計ツール
・各種API、データ
MTS（TileSetsAPI）
StaticImagesAPI
Mapbox Traffic Data etc
移行することによって、スクロールの感覚が滑らかになり、使っていて気持ちよくなった。
Mapbox Studio
・独自のフォント、アイコン、テクスチャを追加
・独自のデータをインポート
・各プラットフォームで利用（iOS、Android、ウェブ）
具体的には、UIを使って簡単にビルを３Dにしたり、色を変えたり、カテゴリ別にPOIを表示したりすることができる。
Mapbox活用事例について
Mapboxに移行することで統計ツールで様々な分析をすることができる。
１．Mapboxの渋滞情報の利用
Mapbox Traffic Data
・渋滞情報を提供
・約８分ごとに更新
・Mapboxが収集したデータを可視化
２．MTS（TilesetAPI）
・リアルタイムに店舗情報を配信したりすることができる
・その他、混雑レーダー等
・geojsonを使って、３Dに表現することもできる
３．ヤフーのMapbox利用現状
各サービスでもすでに導入済み
・Yahooトップ、Yahoo天気、Yahooくらし
・Yahooロコ、Yahoo不動産、Yahooトラベル
・Yahoo路線、Yahoo地図、Yahooカーナビ等
４．その他興味を持ったコンテンツ
データがあれば簡単すぐに可視化できる
・コロナのデータを使った円グラフを地図に追加
・コメント投稿をヒートマップで表現
・ゲーム風地図
その他、ユースケースとして、フェイスブック社が使っているものやスナップチャットというアプリを使ったりすることができる。
まとめ
Mapboxにして良かったこと１
・たくさんのデータやプラットフォームが用意されている
・地図スクロールの操作感が向上した
・独自デザインや独自データを簡単に作成、配信できる
・ベクタータイルが使えることで表現ができる
移行する前よりできることが確実に増えた
Mapboxにして良かったこと２
地図デザインの課題解決は誰でもできるわけではなく、時間もかかるため、Studioがあることで地図デザインの敷居が低下した。
例）
・カーナビでは、ルート周辺のランドマークを目立たせる
・不動産では、コンビニや駅情報が見やすいデザインにする
それぞれ別々のサービスごとに配信することができるようになった。
いろいろな課題に関しても、移行する上で課題はあったが、日本に会社ができたことで、そこんメンバーとコミュニケーションできるようになり、解決できるようになった。
PC版Yahoo!地図のリニューアルで苦労した話
Yahoo地図の歴史
・サービス開始：1998年4月20日
・当時は、「 Yahoo！地図情報」という名称
・20年以上運用され続けてきたサービス
・当初からキーワード検索をはじめ、住所、日本地図、路線図、郵便番号などのキーワードによる検索機能
Yahoo！地図の機能
周辺検索、住所検索、ルート検索、距離計測、雨雲・混雑、印刷など
・周辺検索：キーワード検索と同じようなもの。
・住所検索：住所くだりという機能を利用して、住所を細部まで降っていく機能
・ルート検索：出発地と目的地を検索して、そこまでのルートを検索できる。
・距離計測：地図上をクリックしていくと、スタートやゴールにマーカーが表示されていって、各地転換の距離や標高が表示される。
・雨雲・混雑：地図上のどこに雨雲があるのか、混雑しているのか地図上に表示できる機能。
・印刷：今の地図の情報を印刷できる機能。ビジネス利用として、印刷を使うコアなユーザーが多い。
リニューアルについて
リニューアル経緯１：レガシーなシステム
・長期間の運用で技術がレガシー化
・類似したドキュメントが散乱し、正解が不明瞭
・メンテナンスが困難
→モダンな技術への刷新が必要となる。
リニューアル後の技術
・TypeScript,React ,Redux
リニューアル経緯２：UIが古めかしい
・地図面のMapb oxへの移行が進められていた
・地図デザインの刷新
→新地図デザインにあったUIへの変更が必要
・ルート検索の概要
ルート検索
・公共交通機関、自転車、徒歩の3つの交通手段で検索が可能
・公共交通機関での検索では、細かく条件を設定可能
・自動車、徒歩での検索では、経由地を設定可能
・右クリックメニューから、地点を設定可能
・クリックした地点の住所情報がフォームに入る
・検索結果のマーカーをドラッグすると、再検索できる
その中でも、時刻指定や表示順序、料金が安い順などのソート機能により、細かい設定が可能。
ルート検索の実装で苦労した点
１．自動検索処理
・いつ起こるのか
出発地、目的地、経由地を右クリックで設定
出発地、目的地を入れ替える等
・問題点
検索リクエストが複数回走る
クエリが入ってないのに検索が走る
→なぜ問題が起こったのか
実装にはReact Hooksを利用
useEffect：副作用の処理を関数コンポーネントで扱える
検索リクエストが実装してあるuseEffectが一度の操作で複数回呼ばれた
→対処方法
処理前に条件を追加し、処理を走らないようにする
→結果
useEffect内の条件が増え、複雑化
管理コストが大きい
２．経由地の管理
・フォームが最大12個存在
・経由地は配列で管理
・どの経由地フォームでフォーカスされているか、削除ボタンが押されたか
・経由地だけうまく動かない機能があった
なぜ起こったのか、結果等
自動検索処理の場合と同様に、useEffectの条件判定の複雑さが原因。
さらに、フォームの多さが複雑さを増した。
→発生させないために以下のことに気をつける
・テストの拡充
従来：手動テスト、単体テスト
→時間や手間がかかる
今後：手動テスト部分を自動化したい
ルート検索の実装でスムーズに進行した点
ルート線、マーカーの描画
・Mapboxの関数を利用
・ルート
軽度緯度配列、線の色など
addLayer関数
情報をjsonにまとめてaddLayerに渡すだけで、ルート線を地図免状に描画することができる。
マーカー
緯度軽度と作成したsvgデータを用いて描画を行い、マーカーに対する処理はマップボックスの各処理を使用。
イベント処理はMapboxの各関数
Mapboxの使い方がホームページに載っているため、スムーズに実装することが可能。
まとめ
・リニューアルによって技術的負債を解決できた
・メンテナンスが簡単になった
・UI,UXの改善ができた
・テストの重要性を改めて感じた
・機能面に関してもほぼ削ぎ落とすことなくリニューアルができた
・機能ごとのユーザーの利用頻度、意見をもとに決定
Yahoo！MAPが全力でコロナ対策に乗り出した話
Yahoo！MAPでころな文脈で再実装された機能「混雑レーダ」について
混雑レーダーに表示する３要素
１．混雑レーダー
２．混雑アイコン表示
３．混雑予報
混雑レーダーとは
・混雑度に応じて色分けされたヒートマップ
・アプリでは最新情報〜過去24時間分の情報が確認可能。
・ Yahoo！JAPANが提供する各アプリ上で、位置情報の利用を許可しているユーザーのデータの情報を統計化して利用
技術の紹介と開発エピソード
コロナ時代の攻略法６選のうち１つを紹介
アプリケーションログの可視化を極めて健全化
混雑レーダーの提供終了（１／３１）
サービス運営コストとニーズのバランスを鑑み、今年（2020年）1月末に「混雑レーダー」の提供を終了。
Yahooでも感染症への対応を検討していた最中、ユーザーから”混雑レーダーを再開してほしい”という要望が何件も寄せられていた。
１．混雑レーダーの復活
混雑レーダー負荷つを掲げ、4/1にプロジェクト発足。
延命を考慮されていない実装があるなどの課題はあったが、それらを解決し、4/10にリリース完了。わずか７営業日のこと。
混雑レーダーを実現するためのシステム（概略）
許可をいただいたユーザーの位置情報をもとに統計化し、エリアごとの混雑状況を分析。
ジェネレータと呼ばれる画像生成のサーバーが統計情報を参照して、地図タイル画像を配布する。
統計情報とは？
時間帯・エリア・人数のレベルで位置情報ログを検知し、処理すること。
Yahoo！JAPANの情報の取り扱いについて基本的な考え方や方針は「プライバシーセンター」としてまとめている。
２．混雑レーダーの改善
混雑レーダーの前処理を確認し、時間短縮できる部分を探し出す。
最新データの表示までの時間を可能な限り早めた。
最新２時間前→最新２０分前
更新間隔１時間毎→１０分毎
どうやってやったのか？
まず、プログラムを見える化する（可視化）
4月に開発されたプログラムにログを仕込んで動作の見えるかを実行した。
→可視化後動かしてみると、たまに調子が悪いことがわかった。
・対策
失敗した場合に備えリカバリー策を用意し、実装に取り組むことで混雑レーダー２０分前更新を実現することができた。
・こだわり
安定をとって３０分前更新にするか迷いはあったが、９割方、２０分前提供ができるのであれば、その価値を提供したかった。
攻略法 アプリケーションログの可視化を極めて健全化
Yahoo社内にはログをWEBで確認できるPFがある。
ーメリット
PCを開いてサーバーにログインしなくても良い（＝スマホでも確認可能）
URLでログを関係者に共有できる
→状況を把握でき、無事に問題を解決
例えば、エラーログの場合、あらゆる障害パターンを可視化でき、手順化できる。
極めると、あらゆる障害パターンに応じた最高の回避方法があり、自動で行われる（フェイルセーフ）
起こりうる異常系のパターンを一つ一つ潰していけば、最終的には人間が対応すべきことは０になる（はず。）
まとめ
１．混雑レーダーはサービス運営コストとニーズのバランスを鑑み、一度クローズされていた。
→コロナウイルスの感染拡大により復活させた。
２．混雑レーダーは、位置情報を統計化した状態で提供している。
→プライバシーに配慮。不用意に個人情報が利用できないように工夫している
３．混雑レーダー復活後、利用者として不便に感じる点（2時間前更新）を解消。
→解消するためのキーポイントはログの可視化。BE開発では可視化が特に重要。
４．YahooにはログをWEBで確認できるプラットフォームがあり、活用している。
→今後の開発に集中できるように、運用を踏まえて開発ができることが理想。
↓その他の詳細はデブサミ関西（２０２０）で確認
↓登壇内容をまとめた記事
Yahoo！カーナビが抱える課題とFlutterを用いた課題解決について
１．Yahooカーナビについて
・2014年サービス開始
・iOS、Android対応のスマホあぷり
・直近のアップデート
・ドライブ記録機機能の追加（2020/05）
・Mapboxシャニ地図エンジンを変更（2020/06）
・混雑予報機能の追加（2020/08）
課題１：レガシーコード
・Swift,ObjectiveーCが混在（コア部分いついてはObjectiveーCが大半）
・Java,Kotlinが混在（コア部分についてはJavaが大半）
→長年改変し続けており、仕様が固まっていないため、コードの変更によって予期せぬ副作用が発生する
課題２：人数の増減
2019/10
iOS2名→３名
Android3名→１名
OS間の差分を押さえながら開発効率を上げたい
→Flutterの導入
２．Flutterについて
Flutterとは？
・Google社より2018年にリリースされた開発用フレームワーク
・Dart言語によって記述される
・Stadia,Baidu,GROUPON,Squareなど海外の企業を中心にプロダクトへの導入例もある
・マルチプラットフォームでの開発に対応
・既存のアプリに対して一部のみの適用も可能
マルチプラットフォーム開発
一つのソースコードで複数のプラットフォームに対応できる
→OSでの仕様差が発生しにくい&開発工数の削減ができる
部分的な導入が可能
アプリではなく、SDKという形でコンパイルを行うことで既存のプロジェクトに対して部分的な導入を行うことができる
学習環境
公式がYouTube上でパッケージやセキュリティについての回折動画を公開している
オンライン上で有志による解説記事が掲載されている
デメリット：アプリサイズの増大
部分的な導入に際してSDKという形で組み込むためアプリサイズが増大する
・現状でおよそ30MB程度
・開発を行うことができる（ほぼ使用必須の外部ライブラリも）
→ライブラリを導入する度にOSSの使用許諾の権利について調査を行う必要がある
→Dart,Flutterも含めたライブラリが頻繁に更新されるため、その都度権利関係について確認を行う手間が発生する。
３．現状、今後の展望
現状
・本番アプリにはまだ導入されていない
・現在開発中の画面のOS噛んで共通利用される部分についてはFlutterを用いて開発されている
・週一回開発チームでモブプロを行い、開発Tipsや仕様についての共有を行う
・コア機能（ex：地図面部分）は外部ライブラリ（Mapbox等）を使用している関係上導入予定なし
今後の展望
・使える部分については検討の上、積極的に導入を進める
・OSS使用のコストは許容するが、自前で開発できそうなら自前で開発
・モブプロやペアプロを使って知識の属人化を防ぐ
イベントに参加してみて
現役エンジニアさんの話が直に聞けて非常に良い経験になりました。
個人的にYahooカーナビにはかなりお世話になっているので、開発の裏側が知れてうれしかったですね。
今はまだ使う側ですが、いつか作る側として携われたら良いですね。
またイベントがあれば参加します！