AniHani.link の技術選定メモ

## 方針 あにハニでも いつから.link っぽいの欲しい -> 作る? バックエンドをごりごりやりたくないのでなるべく baas(Firebase) を利用 フロントに集中 産物: https://fiahfy-anihani.firebaseapp.com ソース: https://github.com/fiahfy/anihani-link ### Database Firestore, nosql 使いたかったからそれで データは正規化しないほうがいいみたいだけど更新時にupdateし直すのがどうしてもめんどいのとjoinするデータがそもそも少ないので参照値を利用してる ただしデータ取得の実装によってはフロントでのリクエストが結構増える ### Batch ツイートを取ってきてパースしていい具合にDBにぶちこむ一番面倒な部分 Firebase Functions でそれっぽいことができるのでそこで実行 当初は Spark plan (無料枠) でなんとかしようと思ったが Functions から Googleネットワーク外への送信が不可(受信はOK) -> GAEで実行すればいいんじゃね? -> Deploy時に利用する Build API が課金状態じゃないと使えない = 自動的に Braze plan (従量制) -> Braze plan なら Firebase Functions でいいじゃん となり Firebase Functions に戻る 定期実行の仕組みが必要だがいくつかパターンがある模様 * `cron-job.org` から HTTPS リクエストを送信してフックで実行 * GAEをたてて cron service でGAEにリクエスト -> pub/sub か https 送信 -> functions でフック * Cloud Scheduler で pub/sub か https 送信 -> functions でフック 一番いまどきっぽいので Cloud Scheduler を選択 1アカウントにつき 月3つのjobまでは無料 超えてもそんなに高くない Cloud Scheduler で pub/sub に定期的にメッセージ送信 https でフックしてもいいけどその場合トークンかなんかでパスワードかけとかないと誰かから叩かれる ### Front-end `Vue.js`, `Nuxt.js` を選択、個人的に小さいサービスなら TypeScript すら面倒 + Vue.js とあまり相性が良くないので pure js (ES6) というか TypeScript 導入するくらいなら `React.js`, `Next.js` の方がよさげ module をいくつかつっこむ * `@nuxtjs/dotenv` `.env` 用 * `@nuxtjs/google-analytics` GA用 * `@nuxtjs/pwa` PWAとかmetaとかiconとか用 * `@nuxtjs/vuetify` マテリアルデザイン+component あとは firebase を plugin で初期化して firestore からデータを取得して表示 SSR はサイトの特性上恩恵があまりないのと面倒なのでなし 静的ホスティングで済ませたかったので `nuxt generate` してどこかにあげる generate する場合は `mode: spa` にするもんかと勝手に思ってたけど `universal` で恩恵があるっぽい(要調査 https://qiita.com/amishiro/items/11bd642728f6b5838189#universalssr%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A7%E4%BD%9C%E6%88%90 ### Hosting 静的ファイルをあげられればぶっちゃけどこでもいい 候補は Github Pages, Netlify, Firebase Hosting ググったら Netlify はたまに詰まるっていうのと Firebase Hosting は裏で Fastly 使ってるよってことだったので Firebase Hosting を選択 (ここだけ別管理にしても面倒なので) ## 構成 ``` +------+ | User | +------+ ^ | v +-----------------------------+ | Firebase Hosting(Nuxt.js) | +-----------------------------+ ^ | v +----------------------+ +------------+ | Firebase Firestore | <-> | CLI(Local) | +----------------------+ +------------+ ^ | v +----------------------+ | Firebase Functions | +----------------------+ ^ | +-------------------+ | Cloud Scheduler | +-------------------+ ``` ## TODO ツイートのパースがガバガバすぎてスケジュールの変更、キャンセルがうまく取れない あにまーれだけに関していうと 非公式wiki に綺麗なスケジュールがあるのでそっちから取る方がいいかも こだわると時間かかりそうだったのでフロントの実装が雑(ここは適宜) キャッシュ制御もしてない vuex もほとんど利用できてない iPhoneX で PWA で起動すると SafeArea に余裕で食い込む standaloneかどうか と portrait/landscape と iPhoneXかどうか が取れれば後は CSS でがんばればなんとかなりそうな気はする ログインシステム(認証) はそもそもメンバーが少ない(9人)からいらないでしょってことで省略 Bookmark 的なものが必要になっても local storage でいいんじゃね? という感じ それでも必要になったら Firebase Authentication DevOps?知らない子ですね...