Tweet
Tweet

Slide 1

Slide 1 text

Firebaseのリソースをフルに使って スクレイピングアプリを作った話

Slide 2

Slide 2 text

Agenda 1. 開発の動機 2. 要件 3. 構成図 4. アプリ紹介 5. 作ってみての所感 6. まとめ

Slide 3

Slide 3 text

1. 開発の動機

Slide 4

Slide 4 text

定期的に更新情報を 確認しているサイトがある

Slide 5

Slide 5 text

Firebase 勉強したい （元Fire Fighterだけに）

Slide 6

Slide 6 text

Firebaseで、 スクレイピングだ….!!!

Slide 7

Slide 7 text

2. 要件・仕様

Slide 8

Slide 8 text

● HPでのみ予約状況を公開しているお店 ● いつも人気でキャンセル待ち ● 予約状況は不定期に更新される ● 空き情報のメルマガなどはない ● 定期的にHPを確認するしかない 想定

Slide 9

Slide 9 text

仕様

Slide 10

Slide 10 text

仕様.1 HPから予約情報を取得できる FirebaseFunctionsでPuppeteerを 動かしてスクショを取得

Slide 11

Slide 11 text

仕様.2 定期的に実行できる FirebaseのCloud Scheduler で指定周期で実行

Slide 12

Slide 12 text

仕様.3 情報を通知できる Firebase Functionsで Slackに通知を送る

Slide 13

Slide 13 text

仕様.4 差分がある時だけ通知する ImageMagickで画像の差分を取得 差分がある時だけ通知を実行

Slide 14

Slide 14 text

仕様.5 管理画面で対象を管理したい Firebase Auth + Vue.jsで 認証機能付き管理画面作成 Firebase Hosting にホスト

Slide 15

Slide 15 text

3. システム構成

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

4. アプリ紹介

Slide 18

Slide 18 text

DEMO
 https://contact-form-demo-83958.firebaseapp.com/ 


Slide 19

Slide 19 text

5. 所感

Slide 20

Slide 20 text

5-1. 良かったところ

Slide 21

Slide 21 text

何より楽 インフラ考えなくて良い

Slide 22

Slide 22 text

TypeScript だけで完結

Slide 23

Slide 23 text

一通りのFirebaseの リソース触れた

Slide 24

Slide 24 text

5-2. 詰まったところ

Slide 25

Slide 25 text

無料プランでは動作しない

Slide 26

Slide 26 text

Cloud Schedulerの SDK経由のアップデート

Slide 27

Slide 27 text

node経由での ImageMagickの使い方 https://github.com/kawamataryo/firebase-fucnctions-auto-image-di ff/blob/master/functions/src/lib/imageMagick.ts#L25

Slide 28

Slide 28 text

6. まとめ

Slide 29

Slide 29 text

Firebaseいいぞ.. !!!

Slide 30

Slide 30 text

おわり