アプリケーション概要

アプリケーション名: tv-comment-app

テレビ番組に対してコメントを共有することができ、いいねを送ることもできるアプリになっています。

2022年5月14日以降に放送されたTV番組と放送日を選び、その番組に対してコメントを共有することができます。
また、コメントの閲覧やいいねを送ることもできます。

表示される番組と放送日は関東放送に準拠しています。

URL: https://tvcomment.net/ (現在は使えません)

使用技術

フロントエンド

• React 17.0.2
• TypeScript 4.6.2
• ChakraUI
• Apollo

バックエンド

• Go 1.18

DB

• MySQL 8.0

通信

• GraphQL

インフラ

• Docker / docker-compose(開発環境用)
• AWS ( ECS(Fargate), ECR, ALB, ACM, Route53, CloudFront, RDS, IGW, S3, VPC, IAM, CloudWatch, EC2(RDSへの踏み台サーバー用) )

その他使用ツール

• VS Code
• draw.io (DB設計・インフラ構成図作成)
• Canva (favicon作成)

DB設計

ER図

インフラ構成

要件

機能要件

• 番組一覧を表示
  - 50音ボタンで表示する番組を絞ることができる
  - 検索バーで表示する番組を絞ることができる
• 番組に紐づく放送日を表示
  - 日付を指定して、表示する放送日を絞ることができる
• 番組・放送日に紐づくコメントを表示
• コメントにいいねができる
• パンくずリストの設置
• コメント投稿ボタンの設置
  - 番組名・放送日が一致するものがなければエラー
• 日にちが変わるたびに、その日放送されるテレビ番組名・放送日を取得してDBを更新する

非機能要件

• コメント投稿機能ではSQLインジェクションを防ぐ
• レスポンスが来なかったらエラーを表示
• SSL/TLS通信にする
• SPAの実装

工夫したこと

1. コメント投稿機能
   指定する番組名・放送日がDBに保存されていなければ、コメント投稿をできないようにしました。
   番組名と放送日が存在するかselect文を使って確認し、存在したらinsert文でコメントをDBに保存する処理になっています。

2. 番組情報の更新処理
   番組情報の更新は日次処理で自動化させました。ECSのタスクスケジューリングで、毎日朝6時に情報を取得・更新させるようにしています。情報の取得はwebスクレイピングを行なって実現させています。

3. 関心の分離や計算量
   当たり前のことですが、関数は上位から下位方向のみ依存が発生するように気をつけました。
   また、配列・スライス作成時に要素数が決まっているときはcapacityを指定するなどして、計算量を少なくなるよう努めました。

苦労したこと

1. DB操作（Go）
   GoでDB操作を行う処理を書くとき、そもそもSQL自体の使い方が正しくなければ上手く動作しません。
   DB操作でエラーが発生した時はMySQLとGo両方とも確認して修正するため、時間がかかり大変でした。

2. 手戻りが発生したこと
   スクレイピング処理（Go）を作成し終えた後、テストコードを書いたら上手くテストが機能しない事態が発生しました。
   問題を解決するために、利用するサードパッケージを変えてコードを作り替えました。一度作成できたものを初めから作り直すことは精神的に辛かったです。

3. 日本語情報が不足していたこと
   Reactのライブラリとして利用したChakraUIやApolloは日本語情報が不足しており、利用方法を調べることが大変でした。
   英語の情報は豊富だったため、言語を英語にしてGoogle検索を行うことで対処しました。

利用方法

番組一覧の表示

上記のリンクを開くと番組一覧が表示されます。
表示される番組は、2022年5月14日から今日までに放送されたものです。

日にちが変わったらその日に放送されるテレビ番組を取得し、アプリへ更新させる日次処理を動かしています。

50音検索

番組の50音検索もすることができ、ひらがなのボタンを押したらその文字が頭文字になっている番組のみを画面に表示させます。

2022-05-10.12.23.46.mov

番組名で検索

番組名の検索もすることができます。検索バーに文字を入れて検索ボタンを押すと、その文字を含んだ番組のみが画面に表示されます。

2022-05-10.12.24.10.mov

放送日の表示

番組を選んだら、その番組の過去の放送日が表示されます。
表示させたい放送日の範囲を指定できる機能もついています。

コメントの表示・いいね

放送日を選んだら、その番組・放送日に対するコメントが表示されます。コメントに対していいねを送ることもできます。

コメントの投稿

また、投稿ボタンもついています。番組名と放送日を指定し、140字以内でコメントを投稿することができます。
番組名または放送日が一致しなければエラーが表示されます。

2022-05-10.12.24.41.mov

アプリ作成の背景

テレビやYoutubeを視聴することが多く、Youtubeでは動画と共にコメントをよく見ていました。
ただテレビ番組にはコメントの共有がないため、テレビ番組専用のコメント共有アプリがあったら使ってみたい・需要がありそうと考えて作成しました。

その他

• 作成時間： 約2ヶ月（250 ~ 300時間）