LINEミニアプリ/LIFFアプリをサクッと作りたいならFirebase

by 捧隆二

Slide 1

Slide 1 text

LINE Developer Community LINEと繋がるプラットフォーム集合〜サーバレス特集 LINEミニアプリ/LIFFアプリをサクッと作りたいならFirebase 2022.06.19 捧隆⼆ 1

Slide 2

Slide 2 text

⾃⼰紹介捧隆⼆ (ささげりゅうじ) ITエンジニア⼤学院在学中に⼤阪でITスタートアップを起業。上京後、外資系ITコンサル、フィンテック企業を経験。 2019年にボイスアップラボの創業メンバーとして参画。LINE関連の開発に従事。 LINE BOOT AWARDS 2018 部⾨賞受賞。2021年よりLINE API Expert。趣味は温泉めぐり。 2 Arahabica @Arahabica1

Slide 3

Slide 3 text

⽬次 1. ⾃⼰紹介 2. このセッションの狙い 3. LINEミニアプリに載せるサービスの特徴 4. Firebaseの良い点 5. Firebaseのつらい点 6. まとめ 3

Slide 4

Slide 4 text

このセッションのねらい • LINEミニアプリ / LIFFアプリを作るときにFirebaseを選択肢に⼊れていただくこと • Firebaseを使う場合の良い点・つらい点を抑えていただくこと 4

Slide 5

Slide 5 text

LINEミニアプリに載せるサービスの特徴 5

Slide 6

Slide 6 text

LINEミニアプリに載せるサービスの特徴 • ⽐較的シンプルなサービス • オフラインでQRコードを読んでサクッと実⾏ 6

Slide 7

Slide 7 text

LINEミニアプリに載せるサービスの特徴 • ⽐較的シンプルなサービス • オフラインでQRコードを読んでサクッと実⾏ Ø 開発もサクッと作りたい 7

Slide 8

Slide 8 text

インフラはどこにしよう🤔 8

Slide 9

Slide 9 text

Firebaseが良いらしいよ🔥 9

Slide 10

Slide 10 text

Firebaseの良い点 10

Slide 11

Slide 11 text

Firebaseの良い点 • Firebaseは All in One • Firebaseは認証が楽 • Firebaseならリアルタイムにデータ更新 11

Slide 12

Slide 12 text

Firebaseは All in One 12

Slide 13

Slide 13 text

Firebaseは All in One • Firebase以外のクラウドでシステム構築する時 13

Slide 14

Slide 14 text

Firebaseは All in One • Firebase以外のクラウドでシステム構築する時 1. システム構成を考える 14 CDN LB Auth App App Storage DB

Slide 15

Slide 15 text

Firebaseは All in One • Firebase以外のクラウドでシステム構築する時 1. システム構成を考える 2. システム構成をYAMLで記述する 15

Slide 16

Slide 16 text

Firebaseは All in One • Firebase以外のクラウドでシステム構築する時 1. システム構成を考える 2. システム構成をYAMLで記述する 3. デプロイツールを使ってデプロイする 16

Slide 17

Slide 17 text

Firebaseは All in One • Firebaseでシステム構築する時 17

Slide 18

Slide 18 text

Firebaseは All in One • Firebaseでシステム構築する時 1. システム構成は最初からできています 18 Firestore (DB) Cloud Functions Authentication Cloud Storage Hosting

Slide 19

Slide 19 text

Firebaseは All in One • Firebaseでシステム構築する時 1. システム構成は最初からできています 2. 使いたい機能を有効化します 19 Firestore (DB) Cloud Functions Authentication Cloud Storage Hosting

Slide 20

Slide 20 text

Firebaseは All in One • Firebaseでシステム構築する時 1. システム構成は最初からできています 2. 使いたい機能を有効化します 3. デプロイします 20

Slide 21

Slide 21 text

Firebaseは All in One • Firebaseでシステム構築する時 1. システム構成は最初からできています 2. 使いたい機能を有効化します 3. デプロイします Ø ⾃分でシステム構成を考えなくて良いし書かなくて良い 21

Slide 22

Slide 22 text

Firebaseは All in One • Firebaseでシステム構築する時 1. システム構成は最初からできています 2. 使いたい機能を有効化します 3. デプロイします Ø ⾃分でシステム構成を考えなくて良いし書かなくて良い 22 拡張性が気になる… 😅

Slide 23

Slide 23 text

Firebaseは All in One • Firebaseでシステムを拡張したいとき • FirebaseはGCPの⼀員なのでGCPの他のサービスと連携可能 23 Firestore (DB) Cloud Functions Authentication Cloud Storage Hosting Google Cloud の他のサービス

Slide 24

Slide 24 text

Firebaseは認証が楽 24

Slide 25

Slide 25 text

Firebaseは認証が楽 • LINEミニアプリは認証が楽 25

Slide 26

Slide 26 text

Firebaseは認証が楽 • LINEミニアプリは認証が楽 • そもそもユーザー登録画⾯がありません • LINE内のユーザー情報を使えるから 26 Excellent Mini App すぐ使える

Slide 27

Slide 27 text

Firebaseは認証が楽 • LINEミニアプリはユーザーにとって認証が楽 • そもそもユーザー登録画⾯がありません • LINE内のユーザー情報を使えるから 27 Excellent Mini App すぐ使える

Slide 28

Slide 28 text

Firebaseは認証が楽 • LINEミニアプリは開発者にとって認証がたいへん 28

Slide 29

Slide 29 text

Firebaseは認証が楽 • LINEミニアプリは開発者にとって認証がたいへん 1. ミニアプリを初期化 29 LINE ミニアプリ Server 1. 初期化

Slide 30

Slide 30 text

Firebaseは認証が楽 • LINEミニアプリは開発者にとって認証がたいへん 1. ミニアプリを初期化 2. トークン取得 30 LINE ミニアプリ Server 1. 初期化 2. トークン取得

Slide 31

Slide 31 text

Firebaseは認証が楽 • LINEミニアプリは開発者にとって認証がたいへん 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 31 LINE ミニアプリ Server 1. 初期化 2. トークン取得 3. トークン送付

Slide 32

Slide 32 text

Firebaseは認証が楽 • LINEミニアプリは開発者にとって認証がたいへん 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 32 LINE ミニアプリ Server 1. 初期化 2. トークン取得 3. トークン送付 4. トークン検証

Slide 33

Slide 33 text

Firebaseは認証が楽 • LINEミニアプリは開発者にとって認証がたいへん 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. 認証情報共有 33 LINE ミニアプリ Server 1. 初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. 認証情報共有

Slide 34

Slide 34 text

Firebaseは認証が楽 • LINEミニアプリは開発者にとって認証がたいへん 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. 認証情報共有 Ø ここが⼀番たいへん Ø 認証ライブラリが想定していない 34 LINE ミニアプリ Server 1. 初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. 認証情報共有

Slide 35

Slide 35 text

Firebaseは認証が楽 • Firebase Authenticationのカスタムトークン作成機能を使うと対応可能 35

Slide 36

Slide 36 text

Firebaseは認証が楽 • Firebase Authenticationのカスタムトークン作成機能を使うと対応可能 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 36 LINE Cloud Functions Authentication 1. 2. 3. 4.

Slide 37

Slide 37 text

Firebaseは認証が楽 • Firebase Authenticationのカスタムトークン作成機能を使うと対応可能 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. カスタムトークン作成 37 LINE Cloud Functions Authentication 1. 2. 3. 4. 5. トークン作成

Slide 38

Slide 38 text

Firebaseは認証が楽 • Firebase Authenticationのカスタムトークン作成機能を使うと対応可能 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. カスタムトークン作成 6. カスタムトークン取得 38 LINE Cloud Functions Authentication 1. 2. 3. 4. 5. トークン作成 6. トークン取得

Slide 39

Slide 39 text

Firebaseは認証が楽 • Firebase Authenticationのカスタムトークン作成機能を使うと対応可能 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. カスタムトークン作成 6. カスタムトークン取得 7. カスタムトークンで認証 39 LINE Cloud Functions Authentication 1. 2. 3. 4. 5. トークン作成 6. トークン取得 7. トークンで認証

Slide 40

Slide 40 text

Firebaseは認証が楽 • Firebase Authenticationのカスタムトークン作成機能を使うと対応可能 1. ミニアプリを初期化 2. トークン取得 3. トークン送付 4. トークン検証 5. カスタムトークン作成 6. カスタムトークン取得 7. カスタムトークンで認証 • 詳細は記事参照 • https://qiita.com/Arahabica/items/8f5c7472ded92128535f 40 LINE Cloud Functions Authentication 1. 2. 3. 4. 5. トークン作成 6. トークン取得 7. トークンで認証

Slide 41

Slide 41 text

Firebaseならリアルタイムにデータ更新 41

Slide 42

Slide 42 text

Firebaseならリアルタイムにデータ更新 • Firestore • Firebaseの提供するNoSQLデータベース • クライアントから直接DBを読める • データの変更をリアルタイムで監視できる 42

Slide 43

Slide 43 text

Firebaseならリアルタイムにデータ更新 • Firestore • Firebaseの提供するNoSQLデータベース • クライアントから直接DBを読める • データの変更をリアルタイムで監視できる Ø Firebaseの⼀番の⽬⽟機能。めちゃくちゃ楽できます。 43

Slide 44

Slide 44 text

Firebaseならリアルタイムにデータ更新 • Firestore • Firebaseの提供するNoSQLデータベース • クライアントから直接DBを読める • データの変更をリアルタイムで監視できる Ø Firebaseの⼀番の⽬⽟機能。めちゃくちゃ楽できます。 44 セキュリティ的にちょっと 😅

Slide 45

Slide 45 text

Firebaseならリアルタイムにデータ更新 • Firestore • Firebaseの提供するNoSQLデータベース • クライアントから直接DBを読める • データの変更をリアルタイムで監視できる • 誰がどのデータを読み書きできるかを設定できる 45

Slide 46

Slide 46 text

Firebaseのつらい点 • ベンダーロックイン • Firestoreはスキーマレス • コールドスタート • エミュレーターが弱い 46

Slide 47

Slide 47 text

Firebaseのつらい点 • ベンダーロックイン • Firestoreはスキーマレス • コールドスタート(解決済み) • エミュレーターが弱い(解決済み) 47

Slide 48

Slide 48 text

ベンダーロックイン • Firestoreの挙動がかなり特殊 • ただ、NoSQLは基本的にそれぞれ特徴があって互換性なし Ø 覚悟して使うしかない 48

Slide 49

Slide 49 text

ベンダーロックイン • Firestoreの挙動がかなり特殊 • ただ、NoSQLは基本的にそれぞれ特徴があって互換性なし Ø 覚悟して使うしかない • 余談 • Supabase • FirebaseのOSS代替を⾃称するプロダクト • “Supabase is an open source Firebase alternative.” • 実際はRDBベースでちょっと違いそう Ø 気になる⽅は調べてみてください 49

Slide 50

Slide 50 text

Firestoreはスキーマレス • Firestoreは事前にスキーマ(テーブル定義)を定義する必要なし • 多くのNoSQLに共通の特徴 50

Slide 51

Slide 51 text

Firestoreはスキーマレス • Firestoreは事前にスキーマ(テーブル定義)を定義する必要なし • 多くのNoSQLに共通の特徴 • 開発開始当初は楽だが、⻑くなるとむしろ負担に Ø プロジェクトが成⻑したらアプリケーションレイヤーでスキーマを管理しよう 51

Slide 52

Slide 52 text

コールドスタート • Cloud Functions for Firebaseはコールドスタート • アクセスがないときにはサーバが停⽌ • 初回アクセス時にはサーバの⽴ち上げに2秒ほどかかる 52 今どき、アクセスして2秒以上待つのは… 😅

Slide 53

Slide 53 text

コールドスタート(解決済み) 53 • Cloud Functions for Firebaseはコールドスタート • アクセスがないときにはサーバが停⽌ • 初回アクセス時にはサーバの⽴ち上げに2秒ほどかかる • 最⼩インスタンスが設定可能に🎉 (2021/08) • 最⼩インスタンスを1に設定しておけば、常に1インスタンス起動 • ただ、その分コストはかかります

Slide 54

Slide 54 text

エミュレーターが弱い • 開発中の動作確認・テストでいちいちデプロイするのは⾯倒 Ø Firebase Emulator Suiteを使う Ø ローカルで動くFirebaseのエミュレーター 54

Slide 55

Slide 55 text

エミュレーターが弱い • 開発中の動作確認・テストでいちいちデプロイするのは⾯倒 Ø Firebase Emulator Suiteを使う Ø ローカルで動くFirebaseのエミュレーター • Firebase Emulator Suiteの制限 • Firestoreの変更をトリガーにCloud Functionを実⾏できない • Firebase Authenticationを実⾏できない • Firebase Storageを実⾏できない • Firebase Extentionsを実⾏できない 55

Slide 56

Slide 56 text

エミュレーターが弱い • 開発中の動作確認・テストでいちいちデプロイするのは⾯倒 Ø Firebase Emulator Suiteを使う Ø ローカルで動くFirebaseのエミュレーター • Firebase Emulator Suiteの制限 • Firestoreの変更をトリガーにCloud Functionを実⾏できる🎉 (2019/05 ~ ) • Firebase Authenticationを実⾏できない • Firebase Storageを実⾏できない • Firebase Extentionsを実⾏できない 56

Slide 57

Slide 57 text

エミュレーターが弱い • 開発中の動作確認・テストでいちいちデプロイするのは⾯倒 Ø Firebase Emulator Suiteを使う Ø ローカルで動くFirebaseのエミュレーター • Firebase Emulator Suiteの制限 • Firestoreの変更をトリガーにCloud Functionを実⾏できる (2019/05 ~ ) • Firebase Authenticationを実⾏できる🎉 (2020/10 ~ ) • Firebase Storageを実⾏できない • Firebase Extentionsを実⾏できない 57

Slide 58

Slide 58 text

エミュレーターが弱い • 開発中の動作確認・テストでいちいちデプロイするのは⾯倒 Ø Firebase Emulator Suiteを使う Ø ローカルで動くFirebaseのエミュレーター • Firebase Emulator Suiteの制限 • Firestoreの変更をトリガーにCloud Functionを実⾏できる (2019/05 ~ ) • Firebase Authenticationを実⾏できる (2020/10 ~ ) • Firebase Storageを実⾏できる🎉 (2021/05 ~ ) • Firebase Extentionsを実⾏できない 58

Slide 59

Slide 59 text

エミュレーターが弱い • 開発中の動作確認・テストでいちいちデプロイするのは⾯倒 Ø Firebase Emulator Suiteを使う Ø ローカルで動くFirebaseのエミュレーター • Firebase Emulator Suiteの制限 • Firestoreの変更をトリガーにCloud Functionを実⾏できる (2019/05 ~ ) • Firebase Authenticationを実⾏できる (2020/10 ~ ) • Firebase Storageを実⾏できる (2021/05 ~ ) • Firebase Extentionsを実⾏できる🎉 (2022/05 ~ ) 59

Slide 60

Slide 60 text

Emulatorが弱い(解決済み) • 開発中の動作確認・テストでいちいちデプロイするのは⾯倒 Ø Firebase Emulator Suiteを使う Ø ローカルで動くFirebaseのエミュレーター • Firebase Emulator Suiteの制限(解決済み) • Firestoreの変更をトリガーにCloud Functionを実⾏できる (2019/05 ~ ) • Firebase Authenticationを実⾏できる (2020/10 ~ ) • Firebase Storageを実⾏できる (2021/05 ~ ) • Firebase Extentionsを実⾏できる (2021/05 ~ ) 60

Slide 61

Slide 61 text

まとめ 61

Slide 62

Slide 62 text

Firebaseの良い点 • Firebaseは All in One Ø ⾃分でシステム構成を考えなくて良い • Firebaseは認証が楽 Ø LINEミニアプリのめんどうな認証も突破できる • Firebaseならリアルタイムにデータ更新 Ø Firebaseの⼀番の⽬⽟機能。めちゃくちゃ楽できます。 62

Slide 63

Slide 63 text

Firebaseのつらい点 • ベンダーロックイン Ø ⻑い付き合いになる覚悟はしよう • Firestoreはスキーマレス Ø プロジェクトが⼤きくなったら、アプリケーションを⼯夫しよう • コールドスタート(解決済み) Ø お⾦で解決できるようになりました • Emulatorが弱い(解決済み) Ø 最近ようやく、まともに動くようになりました 63

Slide 64

Slide 64 text

ご静聴ありがとうございました 64