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 の知見や工夫について書いていこうと思います!

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

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

【ウマ娘】フレンド募集掲示板|星3因子&完凸絞り込み検索 - ゲームウィズ(GameWith)
GameWithのウマ娘フレンド掲示板です。完凸育成サポートキャラや星3因子(★3因子)レンタルを見つけることができるので、使いたいキャラを探す際にご利用ください。
https://gamewith.jp/uma-musume/article/show/260740

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

GameWithのリプレイスについて vol.2 ~Web Components を Vue で書いたら最高だった編~ #GameWith #TechWith - GameWith Developer Blog
こんにちは!Incremental Stream Team の@53able, @inosy22, @nog です! 前回のブログでは Gamewith で行っているリプレイスの概要について紹介しました。 今回は Web Components を Vueで開発するための、システム( GameWithDesignSystem)を開発したので紹介したいと思います。 Vue で実装したコンポーネントを Web Components として配布をし、どんなプロジェクトでも利用できるコンポーネントを提供するシステム
https://tech.gamewith.co.jp/entry/2020/04/21/185819

Firestore の設計                  

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

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

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

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

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

Cloud Firestore の課金について | Firebase
"type": "thumb-down", "id": "missingTheInformationINeed", "label":"必要な情報がない" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"複雑すぎる / 手順が多すぎる" },{ "type": "thumb-down", "id": "outOfDate", "label":"最新ではない" },{ "type": "thumb-down", "i
https://firebase.google.com/docs/firestore/pricing?hl=ja

検索について                    

サブコレクションの検索

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

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

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

CollectionReference | JavaScript SDK | Firebase
Reference for CollectionReference
https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference#parent
FieldPath | JavaScript SDK | Firebase
Reference for FieldPath
https://firebase.google.com/docs/reference/js/firebase.firestore.FieldPath#documentid

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

OR 検索の AND 検索

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

データのクエリとフィルタ | Firestore | Google Cloud
"type": "thumb-down", "id": "hardToUnderstand", "label":"わかりにくい" },{ "type": "thumb-down", "id": "incorrectInformationOrSampleCode", "label":"情報またはサンプルコードが不正確" },{ "type": "thumb-down", "id": "missingTheInformationSamplesINeed", "label":"必要な情報 / サンプルがない"
https://cloud.google.com/firestore/docs/query-data/queries?hl=ja#query_limitations

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

ページング                     

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

クエリカーソルを使用したデータのページ設定 | Firebase
"type": "thumb-down", "id": "missingTheInformationINeed", "label":"必要な情報がない" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"複雑すぎる / 手順が多すぎる" },{ "type": "thumb-down", "id": "outOfDate", "label":"最新ではない" },{ "type": "thumb-down", "i
https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja

シンプルな 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の下、そんな世界を実現するべく仲間を募集しております。記事をご覧頂き、少しでもご興味を持って頂けましたら嬉しい限りです。

バックエンドエンジニア
月間アクティブユーザー4500万のサービスのバックエンドエンジニアを募集!
----------------------------------------------------------------------- ゲーム業界の発展とゲーマーの地位向上を牽引 ----------------------------------------------------------------------- GameWithは、「ゲームをより楽しめる世界を創る」をミッションに掲げ、「ゲームに熱中し、ゲームで繋がり、ゲームを仕事にし誇れる」ための基盤を作り、ゲーム業界の発展とゲーマーの地位向上を牽引する会社です。 ゲームメディア事業を軸に成長してきた当社は、2013年に創業し、2017年に東証マザーズ上場、2019年には東証一部に市場変更しています。(現在はスタンダード市場) 現在もゲームメディア「GameWith」は月間約5~9億PVを誇る国内最大級のゲームメディアとして成長を続けていますが、当社ではメディア事業にとどまることなく積極的な事業拡大を行っています。 ----------------------------------------------------------------------- GameWithのサービス・事業 ※グループ会社含む ----------------------------------------------------------------------- ・ゲームメディア「GameWith」(https://gamewith.jp/) ・NFTゲーム「EGGRYPTO」(https://eggrypto.com/) ・オンラインゲーム向け光回線「GameWith光」(https://gamewith-hikari.gamewith.co.jp/) ・ゲーム実況クリエイターブランド「GGG-Studio」(https://ggg-studio.com/) ・eスポーツチーム「DetonatioN Focus Me」(http://team-detonation.net/) ・NFTゲームメディア「GameWith NFT」(https://gamewith-nft.jp/) ・ゲーム情報メディア・コミュニティ「アットウィキ」(https://atwiki.jp/) ・合弁会社GameWithARTERIA(https://www.gamewith-arteria.com/) ■当社ホームページ https://gamewith.co.jp/
株式会社GameWith
株式会社GameWith's job postings

Weekly ranking

Show other rankings
Invitation from 株式会社GameWith
If this story triggered your interest, have a chat with the team?