Upgrade to Pro — share decks privately, control downloads, hide ads and more …

無限LT #3 発表1回目 Firebaseでスクレイピングした話

0a16f7b8629f2facca2a1e80a73c5423?s=47 ryo
September 15, 2019
0
82

無限LT #3 発表1回目 Firebaseでスクレイピングした話

0a16f7b8629f2facca2a1e80a73c5423?s=128

ryo

September 15, 2019
Tweet

More Decks by ryo

See All by ryo
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
2
140
Python の dotted path をコピーするVS Code 拡張を作ってみた / I made a copy python path.
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
0
98
OSS活動ことはじめ / begin oss activities
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
7
1k
閲覧履歴、ブックマーク、タブを 横断的に検索できる Chrome拡張を作った話 / introduction to chikamichi
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
3
220
esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
2
1.7k
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
7
3.5k
Firebase + Bolt で もくもく会用のSlack botを作った話 / Build slack bot with firebase + Bolt
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
2
5.4k
Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究 / ref vs reactive Vue Composition API Deep in
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
12
13k
僕とQiitaと、ときどきLT 〜アウトプット駆動でスキルを磨く〜
0a16f7b8629f2facca2a1e80a73c5423?s=48 kawamataryo
0
330

Featured

See All Featured
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.7k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
266
21k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
297
140k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Imperfection Machines: The Place of Print at Facebook
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
12k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.8k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
A designer walks into a library…
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
64k
A Modern Web Designer's Workflow
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
689
180k

Transcript

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

  2. Agenda 1. 開発の動機 2. 要件 3. 構成図 4. アプリ紹介 5.

    作ってみての所感 6. まとめ

  3. 1. 開発の動機

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

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

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

  7. 2. 要件・仕様

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

    想定

  9. 仕様

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

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

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

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

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

  15. 3. システム構成

  16. None

  17. 4. アプリ紹介

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


  19. 5. 所感

  20. 5-1. 良かったところ

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

  22. TypeScript だけで完結

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

  24. 5-2. 詰まったところ

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

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

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

  28. 6. まとめ

  29. Firebaseいいぞ.. !!!

  30. おわり