ラクマのAndroidアプリの検索オートコンプリート機能を改善した話

自己紹介

はじめまして。ラクマでAndroidエンジニアをしている者です。
趣味は筋肉トレーニングです 💪

環境

Android Studio 4.1.1

記事の目的

ラクマAndoridは、2014年から続くサービスのため、レガシーなコードもいくつかありますが、基本的なアーキテクチャはMVVMを採用しています。本稿ではMVVMアーキテクチャを使用して、ラクマの検索オートコンプリートがどう改善されたか記載させていただきます。

背景

皆さんはインターネットで買い物をする際、欲しい商品がなかなか見つからない、検索できない、これじゃないんだけどな。という歯がゆい思いを一度は体験したことはありませんか？ラクマではそのようなマイナス体験を減らし、よりユーザーの方がいち早く商品にたどりつけるようにするため、検索周りの改善に日々取り組んでおります。

そんなプロジェクトのひとつとして「検索オートコンプリート」の改善プロジェクトに携わる機会をいただいたので、ラクマのコアバリューである「User First」を推めた改善内容を機能紹介と共にまとめてみようと筆を執りました。

構成

前置きとしてラクマAndroidのアーキテクチャについて軽くご紹介します。ラクマAndoridの方針としてMVVMが推奨されているため、基本的にMVVMで構成されています。テスタブルであることなど理由は様々ありますが、具体的な詳細につきましてはまたの機会にご説明したいと思っております。

フロー

オートコンプリートのフローとしてはざっくり下記のようになります。

EditTextのonTextChangedがテキスト欄にテキストを入力することで発火され、ViewModel側でTextChangeのイベントを受け取り、Repository経由で検索クエリをAPIにCallするという運びです。結果としてそのクエリにそったデータが返ってくることになります。また、Repository内では引数として受け取った検索クエリをkeyとして検索結果をキャッシュしています。オートコンプリートの性質上、キーワード変更がかかる段階で都度検索結果を更新しないといけないため、一度検索したものであっても都度APIに問い合わせをするとサーバーへの負荷が大きくなります。そこで一度入力したキーワードの結果に関してはキャッシュしたものを返している形をとっています。

修正前

修正前は ブランド よく検索されているキーワード を分けて表示していましたが、その後の検索結果画面で絞り込みをする方が一定数いました。そこで、最初から絞り込んだ結果を表示してあげることで手間を軽減できるのではないかと、改善に着手することになりました。

修正内容

よりスムーズに絞り込まれた検索結果にたどり着けるようにするため、オートコンプリートする結果のレイアウトにカテゴリ・ブランドを含めようというのが今回の改善になります。

<変更前のオートコンプリート>  
・キーワード補完  
・ブランド名補完  
<変更後のオートコンプリート>  
・キーワード補完  
・キーワード補完 + カテゴリ補完  
・キーワード補完 + ブランド補完

今回の改修のポイントとして、既存項目に ブランド、よく検索されているキーワード が存在していますが、共にテキストとイメージだけのレイアウトで共通のテキスト・イメージのデータを持つモデルを扱っていました。

上記説明にもありましたが、今回は扱うデータによってカテゴリが含まれていたり、ブランドが含まれていたりするため、共通する部分は切り出し、各レイアウトの種類に合わせてモデルを設計したところにあります。そうすることでビジネス要件が変わり、例えば画像だけ表示するオートコンプリートをだしたい！なんてことになっても、他のモデルに影響を与えることはなくなると考えました。

幸い、ビジネスロジックがViewと疎結合になっていたこともあり、改修に時間はかかりませんでした。 Repositoryパターンで設計されているのでRepositoryで加工したデータをレイアウトの構成タイプに合わせて返すだけでView側にはレイアウトの追加以外で手を入れることはほとんどありませんでした。