1
/
5

【Tech Blog】ウマ娘フレンド募集掲示板の Firestore 設計と検索

本ストーリーは当社運営の「GameWith Developer Blog」の転載になります。

ウマ娘フレンド募集掲示板の Firestore 設計と検索 #GameWith #TechWith - GameWith Developer Blog
こんにちは。 GameWith のエンジニアの tiwu です! 自分が所属しているチームではいくつか攻略ツールを実装しており、去年はあつ森交換掲示板をリリースしたりしました! その際のブログはこちらになります! 今回はウマ娘フレンド募集掲示板を実装した際に得た Firestore の知見や工夫について書いていこうと思います! ウマ娘フレンド募集掲示板は、自分のプロフィールを投稿したり、いろいろな条件で他のプレイヤーを検索したりすることができます。 このツールもあつ森交換掲示板と同じく GameWith
https://tech.gamewith.co.jp/entry/2021/05/10/115007

はじめに                      

こんにちは。GameWithのエンジニアのtiwuです!

自分が所属しているチームではいくつか攻略ツールを実装しており、去年はあつ森交換掲示板をリリースしたりしました!

その際のブログはこちらになります!

ツール開発で firestore を初めて使って感じた利点と、ハマった落とし穴 #GameWith #TechWith - GameWith Developer Blog
こんばんは✋ @peka3 です。 ヘムロックがお気に入りです。 ブログは久しぶりに書きます。 最近は攻略ツールを開発をしております。 先日、あつ森でのアイテムを交換するためのツール「あつ森交換掲示板」を作りました。 フロントエンドは GameWithDesignSystem を使っています。 こちらについては以前の記事に詳しく載っているのでぜひ読んでみてください。 実装側としては Vue + TypeScript で Webコンポーネントを実装していくことになります。 そしてバックエンドなのですが、今回
https://tech.gamewith.co.jp/entry/2020/12/08/210746

今回はウマ娘フレンド募集掲示板を実装した際に得た Firestore の知見や工夫について書いていこうと思います!

ウマ娘フレンド募集掲示板              

ウマ娘フレンド募集掲示板は、自分のプロフィールを投稿したり、いろいろな条件で他のプレイヤーを検索したりすることができます。

このツールもあつ森交換掲示板と同じく GameWith Design System を利用し Vue + TypeScript で実装を行っています。

Firestore の設計                  

登録する内容は自分のフレンドコードに加えて、代表ウマ娘 + 親(継承元)1 + 親(継承元)2 の情報となっています。

代表ウマ娘, 親(継承元)1, 親(継承元)2 に関しては登録するデータの構造はほぼ同じになっているため、当初はサブコレクションを利用した設計を考えていました。

サブコレクションは、親になっているドキュメントを取得した際に一緒に取得できるわけではなく、親のドキュメントとは別に取得する必要があります。

そのため1つの募集を表示するために、募集ドキュメント + 代表ウマ娘ドキュメント + 親(継承元)1ドキュメント + 親(継承元)2ドキュメント = 4回ドキュメントを取得することになります。

Firestore は取得するドキュメントの数で課金されるため、1つの募集を表示するために4回ドキュメントの課金が発生します。

検索について                    

サブコレクションの検索

一覧のコストを考えサブコレクションでデータを持たず、募集ドキュメントでデータを持っていますが、検索面の理由もあり募集ドキュメントでデータを持つようにしています。

例えば代表ウマ娘が「スピード」因子を持つ募集を検索する場合、サブコレクションでデータを持っていると

①ウマ娘サブコレクションから代表ウマ娘が「スピード」因子を持つ、代表ウマ娘ドキュメントを取得
parent を利用して、親ドキュメントの documentId を取得
②親ドキュメントを documentId を利用して取得する
③とったフローで検索をすることになります。

表示と同じくドキュメント取得数が多くなるため、募集ドキュメントに検索に利用するデータをもたせています。

OR 検索の AND 検索

Firestore では (A or B or C) and (D or E or F) といった where-in の AND 検索はできません。

ウマ娘フレンド募集掲示板では、A or B or C で100件取得、D or E or F で100件取得し、重複を抽出をするようなロジックを組んで検索を実現しています。

ページング                     

ウマ娘フレンド募集掲示板では SNS の一覧のように、続きを読み込むというページング機能を実装しています(指定したページを表示する機能はありません)

シンプルな AND 検索と、OR 検索の AND 検索で実装方法を変えているのでそれぞれ紹介します。

AND 検索

AND 検索の場合は公式の例のようにシンプルな実装になっています。

startAt, startAfterを利用することでクエリの開始点を指定することができるため、前回の末尾のスナップショットを保持して利用することで実現しています。

OR 検索の AND 検索

前述したように、 (A or B or C) and (D or E or F) といった where-in の AND 検索はできないため、A or B or C で100件取得、D or E or F で100件取得し、重複を抽出をするようなロジックを組んで検索を実現しています。

AND 検索のページングのように1回のクエリで取得できないため、各クエリ毎にスナップショットを保持する設計で実現しています。

また、取得後の結果で重複を判定するため、過去に取得したデータも保持してします(下記サンプルでは細かいところは省略しています)

終わりに                      

今回の知見をまとめると

  • ドキュメント毎の課金なので、一覧を実装する際に可能な限り一覧のドキュメントでデータを持つ
  • (A or B or C) and (D or E or F) といった where-in の AND 検索はできない
  • シンプルなページングであれば簡単に実現ができる

上記3点がポイントとなります。

(A or B or C) and (D or E or F) といった where-in の AND 検索ができないのは、多くの人が詰まるポイントかなと今回感じました。

これからもチャレンジしていくので、よろしくおねがいします!

☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

現在、GameWithでは「ゲームをより楽しめる世界を創る」というMissionの下、そんな世界を実現するべく仲間を募集しております。記事をご覧頂き、少しでもご興味を持って頂けましたら嬉しい限りです。

サーバサイドエンジニア
月間5億PV・4000万UUのGameWithがサーバサイドエンジニア募集
※8月1日より全国ネットでCM放映も開始しております※ 「この世界には、いったいどれだけゲームがあるのだろう。あなたのまだ知らない面白いゲームはたくさんある。さあ、GameWithで見つけよう!」 ■https://www.youtube.com/watch?v=imamzyL5t4o 《創業5期目で東証マザーズ上場、7期目で東証一部へ市場変更、経団連へ加盟》 株式会社GameWithは六本木ヒルズ森タワーに本社を置く、2013年に創業した企業です。社名に「Game」とありますが、私たちはゲーム開発会社ではなく、業界最大級のトラフィックを誇る日本有数のWebメディアを運営するWebサービス会社です。 ゲーム攻略メディアからスタートし、現在は新作ゲームレビューや動画事業、コミュニティなどを展開し、それぞれ業界トップクラスへと成長させ、2017年に東証マザーズへ上場をし、 2019年8月に東証一部へ市場変更いたしました。 《主なサービス》 ・ゲーム攻略メディア運営 ・ゲームレビューメディア運営 ・動画配信 ・ユーザー向けのコミュニティ運営 ・ゲーム攻略アプリetc... *株式会社GameWith 公式ホームページhttps://gamewith.co.jp/ *ゲーム情報・攻略サイト 「GameWith」https://gamewith.jp/ 《目指すは世界のゲームインフラ》 今後は「世界のゲームインフラになる」というビジョンに基づき、ゲームを楽しむことに関わる全ての人たちのインフラのような存在を目指し、メディア事業にとどまることなく、 ゲームをより楽しむための、あらゆる事業領域に進出してまいります。
株式会社GameWith
株式会社GameWithでは一緒に働く仲間を募集しています
同じタグの記事
今週のランキング
このストーリーが気になったら、直接話を聞きに行こう