未知なるWeb開発ツールと出会えるサイト。作りました。
こんなことを思ったことはありませんか？
- いつも同じツールばかりで、たまには使ったことないツールで開発してみたい
- 個人開発で使うツールを探したいけどどうやって探せばいいかわからない
- 世の中にどんなツールやサービスがあるのか手軽に知りたい
そんなあなたのためにこの度『Web Tool Catalog』をリリースしました！🎉
本稿では Web Tool Catalog の紹介と開発話を綴っていきます
Web Tool Catalogって何？
Web Tool Catalog を3行で説明すると、
Web開発に役立つツールやサービスを
7種類のカテゴリーに分けて
一覧表示で見れるサイト
です。
7つのカテゴリーというのは「CMS」データベース、ストレージ、認証、ホスティング、フレームワーク、ビルドツールの7つです。
以上です。
はい、まぁぶっちゃけちゃえばただのまとめサイトなのであんまり説明することもないんですよね😅
アイキャッチとして各ツールのホームページのOGP画像を表示しているので、このサイトをバーっと眺めてるだけでもブランドイメージが伝わってきて楽しいと思います。「このツールのホームページがカッコイイから使ってみよ」とかいいかもですね。（実務だと問題ありますが...）
とにかく百聞は一見にしかずということで、ちょっとでいいので実際に見てもらえると感涙でございます
さて、余談ですが、このサイトは開発環境作るところからリリースまで9時間という超スピード（？）開発だったんですよね。
というのもこの開発は「土日の2日間でリリースまで持ってく」という固い信念のもとスタートしたんですよね。個人開発って長期化するほどモチベ下がっちゃいますから内容薄くてもとにかく早くリリースするのが大事ってじっちゃんが言ってた気がします。
そんな訳でリリースしたての現時点では内容が少しばかり薄いですが、今後もアップデートしていくのでたまに覗きにきてくれると嬉しいです dogeza...
技術的な話
せっかくなので技術的な話も少し。技術選定の時に考えてたことを書いていきます。
とりあえず最終的な構成はこんな感じ。
フレームワーク
- 今回の開発で重要視してたのは「土日の2日間でリリースまで持ってく」なので個人的に馴染みのあるNext.jsを選択
- 時間無制限でいいなら、Rust製のZolaっていうフレームワークを使ってみたかった(ビルドがクソ早いらしい)
バックエンド
- 今回はDBだけでOK
- モダンめなものを使いたい気持ちがあったので、候補としてSupabase、Vercel Postgres、PlanetScaleが挙がった
- 当初はサイトに管理ページを作成してそこからDBにデータを入れるつもりだったが、SupabaseはGUIで直接データを入れられるということに気づき採用。しかもそのGUIもかなり使いやすくて良きだった↓
ホスティング
Next使うならVercel一択だよね。
翻訳API
それぞれのツールのカードにある説明文はツールのホームページの meta descriptionから取得しているのだが、当然そのほとんど英語なのである。
一応日本人向けに作っているので、英語表記はまずいだろうということで meta descriptionを日本語に翻訳するAPIを探す旅に出た。
初めはChat GPTのAPIを使おうと思ったが、日本語ということもあり結構お金がかかるなぁ...と。
そこでいつもお世話になっているDeeplさんのAPIの料金表を見てみると、500,000文字/月まで無料だと！料金面で圧倒的な差を見せつけたDeeplに軍配が上がりました。
最後に
今回色々なツールやサービスを調べていく中でCockroach DB（ゴキブリDB）というパンチの効いた名前のサービスを発見しました。ゴキブリ並みの耐久力があるDB的な意味なんですかね。今度使ってみようと思います。
みたいな感じで思わぬ形で新しいツールやサービスと出会えるのでぜひご覧になってみてください。
Discussion