【個人開発】YouTubeの動画からキーボードのランキングを作成するアプリケーションを作ってみた

スポンサーリンク

はじめに

個人開発として、Keybaord Trend という Web アプリケーションを開発し、公開したので、どんな技術を使って、どんな構成で開発したのか紹介していきたいと思います。

Keyboard Trend とは

Keyboard Trend は、YouTube の動画をベースに作成したキーボードのランキングサイトになります。現状はシンプルに、なるべく特定のキーボードに限定されるようなキーワードで検索して、ヒットした動画数をベースに期間を限定したものと、期間を限定していないもので作成しています。

Keyboard Trends
The ranking based on YouTube.

コンセプトとしては、以前開発した個人開発のアプリケーションがデータベースを使わない構成だったので、何かしらデータベースを使ってみたいということで開発しました。ただ、最初は RDBMS で構築していたのですが、コストが高くなりそうだったので、NoSQL を使うことにしました。

【個人開発】アスキーアートを生成する簡単なアプリケーションを作ってみた
はじめに 初めて個人開発として、AA Generator という Web アプリケーションを開発し、公開するところまでやったので、AA Generator について簡単に紹介したいと思います。 AA Generator とは AA Gene...

アーキテクチャ

アーキテクチャは下記の通りです。

メインのプラットフォームとして、他のパブリッククラウドと比べて前提知識がある GCP を選択しています。フロントエンドは Typescript + Next.js(App Router)、バックエンドは Go + Gin で実装し、Cloud Run で動かしています。

Gin のディレクトリ構成は下記のボイラープレートを参考にしています。

GitHub - vsouza/go-gin-boilerplate: A starter project with Golang, Gin and DynamoDB
A starter project with Golang, Gin and DynamoDB. Contribute to vsouza/go-gin-boilerplate development by creating an account on GitHub.

また、Github Actions を利用して CI/CD パイプラインを実装しました。Cloud Build でソースコードのビルドとイメージ作成し、作成したイメージは Artifact Registry に格納しています。

ローカルで試す場合は、Docker Compose でコンテナを起動し、Firestore エミュレータを使って、開発していました。

使用した技術

使用した技術は下記の通りです。

  • Typescript: フロントエンドの実装言語
  • Next.js: フロントエンドのフレームワーク
  • Tailwind CSS: CSS フレームワーク
  • Material UI: 一部の UI (ページネーション)
  • Go: バックエンドの実装言語
  • Gin: バックエンドのフレームワーク
  • GCP
    • Cloud Run: アプリケーションのデプロイ先
    • Firestore: データベース
    • Cloud Storage: 画像用ストレージ
    • Cloud Function: バッチ処理
    • Cloud Scheduler: バッチ処理の定期実行
    • Cloud DNS: 名前解決
    • Cloud Build: ソースコードとイメージのビルド
    • Artifact Registry: コンテナイメージレジストリ
    • Cloud Domain: ドメイン取得
    • YouTube Data API: YouTube 動画の取得
  • Docker: コンテナ
  • Docker Compose: ローカル開発環境
  • GitHub Actions: CI/CD
  • GitHub Copilot: 実装サポート

今回初めて GitHub Copilot を契約して使ってみました。Tailwind CSS でのスタイリングやまだまだ使い慣れていない Go の書き方など非常に参考になりました。

今後実装したい機能

今後実装したい機能は下記の通りです。

  • キーボードの追加申請フォーム
  • ランキングスコア集計方法のアップデート
  • テストコードの実装

機能的にもかなり絞って公開したので、より充実したランキングにしていきたいと思います。

参考

タイトルとURLをコピーしました