ありがとう.io

ありがとう.io

cvありがとうっていうYoutubeチャンネルがあるんだけど、これが本当にすごい。俺も何かしたくなったというのがモチベーション。

上記のYoutubeチャンネルの動画をサジェスト検索とかできるようにしたつもりです。

技術

  • Go
  • SQLite/Litestream
  • Next.js/Vercel
  • Cloud Run

Litestreamで何か作ってみたかったというモチベーションがあった。個人開発の予算でキモになるのがデータストアだと思っていて、RDBのマネージドサービスって結構お高くつく印象がある。別サービスだとFirestoreとか使ってたりするけど、やっぱりRDBを使ってSQLを書きたいというかNoSQL的なので全部やるのはやっぱしんどそうだよなーという感じがある。最近Vercel Postgresとかいうのも出てきたし、調べればいろいろ出ては来るんだけど (Neon, PlanetScale) 今回はSQLite + Litestreamという構成でやってみた。

そしてコンピューティング環境も考える。大したサービスではないしアクセスがない間は節約したいということでCloud Runを使うことにした。で言語なんだけど、Cloud RunでコールドスタートさせるととりあえずGoが速そうなのでGoで書くことにする。Goで何か書いてみたかったというのもあるので。

設計とか実装

なんだかんだいつもbatch/api/webで分けてやっている。

こんな arigatou.io

Batch

Goで書いたbatchサービス。cvありがとうYoutubeチャンネルから動画の情報を引っ張ってSQLiteに登録してLitestreamでCloud Storageへレプリケーションする。Cloud Run Jobsでスケジューリング含めて動かしている。

API

GoでREST APIのサービスを作る。batchで登録したSQLiteDBをLitestreamでrestoreして起動するようにしている。Cloud Runでコールドスタートさせる時はちょっと時間かかるけどそれほど気にならないとは思う。APIは一応認証を必要にしている。

Web

web側はNext.jsで作った。なんだかんだこれが一番大変だった。最初はReact/Viteでやってみてたんだけど、APIの認証部分でサーバーサイドのコードを動かさないといけなさそうで、Next.jsでやることにした。ただ、Next.jsがメジャーバージョン13になってて勢いで13で作ろうとしてよくわからなくて大変だった。

実はWebのコードをCloud Runで動かすようにして、DBを見に行くサーバーサイドのコードをWeb側に持たせてしまえばAPIを別で作る必要は多分なくて、認証とかもスキップできるはず。でもLitestreamでスタンドアロンなAPIを作ってそれを利用するってことをやってみたかったので今回はやめた。

検索でサジェストを出したくてちょっと頑張った。あとはページングじゃなくてスクロールで全部出るようにしたくでそれも頑張っている。スクロールで出す場合は全件ヒットした場合に糞重くなるのでそれを回避するためになんかいろいろやっている。要は表示する部分だけ読み込む的なやつ。あと、最初はYoutube自体を埋め込んでいたんだけど (iframeっていうんだっけ?) なんかめちゃくちゃエラーが出た (よく覚えていない) のでサムネイル画像方式にしている。

  • サジェスト: react-autosuggest
  • スクロールで表示する部分だけ読み込む的な: tanstack/react-virtual
  • モーダル: react-hooks-use-modal

を使ってます。

サジェスト用のキーワードはbatchで取り込むときにキーワード一覧としてSQLiteに保持するようにしてる。

まとめ

Reactチョット理解したと思う。まだ浅いけどね。Goはまだ激浅である。

あとはcvありがとうのチャンネル管理者に何も言ってないという。何か問題があれば閉じることになります。

あと本当は .cv ドメインにしたかったんだけど高すぎて断念した。年12,000円ぐらいかかるっていうのと、まあそれぐらいなら良かったんだけど、なんか特殊なドメインのせいか月7,000円ぐらいかかるらしくさすがに止めた。.ty もとれなさそうだったので本当に関係ないんだけど .io にしました。ここが一番悔しいところ。まあでも .io ということで、ありがとうに関係するテック系スタートアップを起業する布石になっているかもしれない。今のところ何も思いついていない。アイデア募集中です。