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
330
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
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.2k
生成AIを開発組織にインストールするために: REALITYにおけるガバナンス・技術・文化へのアプローチ
gree_tech
PRO
0
75
安く・手軽に・現場発 既存資産を生かすSlack×AI検索Botの作り方
gree_tech
PRO
0
66
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
1
460
あうもんと学ぶGenAIOps
gree_tech
PRO
0
55
MVP開発における生成AIの活用と導入事例
gree_tech
PRO
0
74
機械学習・生成AIが拓く事業価値創出の最前線
gree_tech
PRO
0
95
コンテンツモデレーションにおける適切な監査範囲の考察
gree_tech
PRO
0
50
新サービス立ち上げの裏側 - QUANT for Shopsで実践した開発から運用まで
gree_tech
PRO
0
60
Other Decks in Technology
See All in Technology
AI時代の発信活動 ~技術者として認知してもらうための発信法~ / 20251028 Masaki Okuda
shift_evolve
PRO
1
110
Kubernetes self-healing of your workload
hwchiu
0
580
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
120
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
500
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
AI時代、“平均値”ではいられない
uhyo
8
2.6k
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
知覚とデザイン
rinchoku
1
610
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
140
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
280
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Automating Front-end Workflow
addyosmani
1371
200k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Designing for Performance
lara
610
69k
Bash Introduction
62gerente
615
210k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Visualization
eitanlees
149
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Code Review Best Practice
trishagee
72
19k
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のサーバと通信させて速度比較してみた い。 ご静聴、ありがとうございました!