はじめに
株式会社Relicが運営しているLoupeでは、現在ヨシモト∞ホールとのコラボ企画を開催しています！
「オズワルド」や「蛙亭」などヨシモト∞ホールで活躍中の芸人さんたちが、渋谷のオススメスポットを紹介してくれる企画になっているのでご興味がある方はぜひ確認してみてください。
今回はこの企画を開催するにあたってより多くのユーザーさんに企画を楽しんでもらえるように、Loupeの登録フローに変更を行ったので、その話を書きたいと思います。
※LoupeはiOS/Androidの両OSでサービスを提供していますが、今回の全国対応を実施したのはiOSのみでAndroidは旧仕様のままとなっております。
UIをどう変えたか
まずは視覚的に取り組み内容を理解してもらいやすいと思うので、UIの変更内容を共有します。
コラボ企画開催前は下記のUIで、1都3県の郵便番号もしくは住所を必須で登録する必要がありましたが、
コラボ企画開催以降は下記のUIに変更し、1都3県外も含めて最寄駅や地名などのランドマークでも登録できるようになりました。
実装をどう変えたか
変更前
コラボ企画以前は、あらかじめデータベースに1都3県分の住所情報をまとめる住所情報テーブルを用意しておき、郵便番号や住所を入力される毎に住所情報テーブルからデータを抽出してサジェストで表示していました。
-
サジェストの様子
-
住所情報テーブル（map_addresses）
カラム名 説明 id ID zipcode 郵便番号 prefecture 都道府県名 city 市区町村名 town 大字町丁目名 latitude 緯度 longitude 経度 radius_type 最大半径のタイプ prefecture_key 都道府県名_yomi city_key 市区町村名_yomi
データベースの住所情報は、国土交通省の国土数値情報と日本郵便の郵便番号情報を引っ張ってきて合わせたもので構成されています。
下のフロー図はマイエリア登録で郵便番号・住所が入力されてサジェストされるまでの流れです。
-
住所情報テーブルをDBに用意し1都3県の住所情報を作成しておき、入力された郵便番号を元に住所情報テーブルから都道府県、市区町村、大字町丁目を取得する。
-
取得した住所情報をサジェストで表示し、ユーザは当てはまる住所を選択する。
変更後
-
入力された地点名 or 郵便番号を元にGoogle APIで住所情報を取得する。
- 地点名の場合:
-
TextFieldに入力された文字列をクエリとして指定し、
findAutocompletePredictions()メソッドを使用して、[GMSAutocompletePrediction]（GMSAutocompletePredictionオブジェクトの配列）を引数として受け取り、住所情報を取得する。private func searchPlaces(with query: String, completion: @escaping (([GMSAutocompletePrediction]) -> Void)) { let filter = GMSAutocompleteFilter() filter.countries = ["JP"] let token = GMSAutocompleteSessionToken.init() placesClient.findAutocompletePredictions( fromQuery: query, filter: filter, sessionToken: token ) { (results, _) in if let results = results { completion(results) } } } -
GMSAutocompletePredictionの配列から取得したい地点の
placeIDを取得し、lookUpPlaceID(_ placeID: NSString)メソッドを使用して、地点のの詳細情報を取得する/// 選択した場所の座標を取得 private func lookUpPlaceID(with id: String, completion: @escaping ((GMSPlace) -> Void)) { placesClient.lookUpPlaceID(id) { [weak self] (place, error) in guard let self else { return } if let place = place { completion(place) } } }
-
郵便番号の場合:
- 1都3県以外も
GET api/v1/map_addressesから取得したかったが、DBに1都3県以外のの住所情報を用意する必要があったため、サーバ側の変更コストが高かった - そのため、DBに登録されていない郵便番号についてはCoreLocationから住所情報を取得している
/// CoreLocationで郵便番号を検索 func fetchAddressFromPostCode(postCode: String, completionHandler: @escaping ([CLPlacemark]?, Error?) -> Void) { let geocoder = CLGeocoder() geocoder.geocodeAddressString(postCode) { (placemarks, error) in completionHandler(placemarks, error) } } - 1都3県以外も
注意点
住所情報をGoogle Map APIのPlaces APIを使って取得することになるので、無料枠以上の利用になれば別途料金がかかります。
- Places APIの1リクエストあたりの料金（2023年9月現在）
0～100,000/月 100,001＋/月 0.017米ドル 0.0136米ドル - 1か月あたりの200米ドル分は無料
- 料金設定について
最後に
この記事に記載の仕様は、今後のプロダクト状況次第で変更になる可能性もありますので、その点は予めご了承ください。
詳細な数値は開示できないのですが、GoogleAPIを利用した登録処理の変更でCVRも改善することが出来ましたので、同じような取り組みをされている方の参考になれば幸いです。
ヨシモト∞ホールとのコラボ企画は10/10まで開催していて、毎日芸人さんがおすすめする渋谷の投稿が更新されますので、1都3県内の方も1都3県外の方も、ぜひLoupeを楽しんでもらえると嬉しいです。