Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firestoreを使ってメディアアプリを作ってみた
Search
gree_tech
PRO
July 08, 2019
Technology
0
150
Firestoreを使ってメディアアプリを作ってみた
「集まれKotlin好き!Kotlin愛好会 vol.11 」で発表された資料です。
https://love-kotlin.connpass.com/event/130013/
gree_tech
PRO
July 08, 2019
Tweet
Share
More Decks by gree_tech
See All by gree_tech
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
200
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
150
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
150
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
120
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
160
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
250
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
180
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
230
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
400
Other Decks in Technology
See All in Technology
Qiita埋め込み用スライド
naoki_0531
0
5.2k
DevFest 2024 Incheon / Songdo - Compose UI 조합 심화
wisemuji
0
120
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
360
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
事業貢献を考えるための技術改善の目標設計と改善実績 / Targeted design of technical improvements to consider business contribution and improvement performance
oomatomo
0
100
祝!Iceberg祭開幕!re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
3
320
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
130
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
150
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
270
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
490
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
17
4.8k
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
110
Featured
See All Featured
Making Projects Easy
brettharned
116
5.9k
A designer walks into a library…
pauljervisheath
205
24k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Raft: Consensus for Rubyists
vanstee
137
6.7k
Building Adaptive Systems
keathley
38
2.3k
Producing Creativity
orderedlist
PRO
341
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Cult of Friendly URLs
andyhume
78
6.1k
Transcript
Firestoreを使ってメディアアプリを 作ってみた
Masahiro Higuchi / 樋口雅拓 • グリーグループのリミア株式会社で、LIMIA という住まい領域のメディアを 作っています。ゲーム会社ですが、最近はメディアに力を入れています。 • 機械学習のエンジニアですが、iOS,
Android,JSなどもやっている何でも屋 です。4歳の娘のパパ。twitter: @mahiguch1 • https://limia.jp/ • https://arine.jp/ • https://aumo.jp/ • https://www.mine-3m.com/mine/
LIMIAとは? • メディアサービス • 記事一覧を表示し、タップすると 記事詳細を閲覧できる。 • 記事詳細の最下部に別の記事 への回遊導線が付いている
興味があること LIMIAに最も適したシステムは、何だろう? • インフラ: Kubernetes/ECS/Lambda/CF/Firebase • Backend FW: gin/Laravel/Django/Rails/protobuf/使わない •
アプリ: MVC/MVVM/VIPER/クリーンアーキテクチャ 選択肢が多すぎて、よくわからない! → とりあえず色々試してみよう。
今回試したこと • インフラ: Kubernetes/ECS/Lambda/CF/Firebase • Backend FW: gin/Laravel/Django/Rails/protobuf/使わない • アプリ:
MVC/MVVM/VIPER/クリーンアーキテクチャ Firebase/Firestoreを使って、メディアアプリを作ってみました。 インフラ構築面倒なので、まずはアプリだけでできるものを。w
Firestoreの説明
Firestoreとは? • FirestoreはFirebaseの機能の一つ。Document Databaseと呼ばれるも の。2019年1月31日にGAになった。 • SDKがあり、iOS/Androidから直接アクセス可能。 • データの入力はFirebase管理画面から可能。 —>
つまり、アプリ実装のみで、ClientServer型のシステムを構築できる!
Firestoreのモデル • Document DatabaseとはNoSQLの一種。 • OracleやMySQLといったRDBでは事前にSchemaを定義しておくが、Document Databaseで は後から自由に変更できる。 jsonをそのまま格納できるイメージ。 •
データはDocumentという場所に格納され、それが Collectionでまとめられている。 • 分かりやすくMySQLで例えると、Collectionがテーブル、Documentがレコード。 —> 正直分かりづらいと思うので、画面とコードを見ながら説明していきます!
Firestoreへのデータ入力方法 • 左: コレクション • 中: ドキュメント • 右: ドキュメントの中身
管理画面があるので、ここから 入力できる。
Firestoreからのデータ取得方法 Collectionと Documentを指 定することで取得 可能。
Firestoreから複数データ取得方法 SQLのように whereで絞り込み が可能
では本題
今回作った検証アプリについて 記事の一覧を表示したい。画面には、記事画像、記事タイトル、ユーザ名が表示され ている。Modelとしては、Firestoreで次のように持つ。 • Article: id, title, image_url, user_id •
User: id, name つまり、ArticleとUserの両方のデータを使って一覧表示を作る。 普通はRDBでjoinするかBFF APIを作るが、Firestoreで実装するとどうなるか試して みた。
None
まとめ • 体感速度は思ったより早い。 • データ取得処理がかなり複雑になる。 • 次は同じモデルをgolang+grpcのサーバと通信させて速度比較してみた い。 ご静聴、ありがとうございました!