あらすじ

先日、アプリを実装してリリースをしようと準備をしていたのですが、関連するサービスの終了が発表されリリースできなくなってしまいました。簡単なサービスではありましたが、実装したアプリのアウトプットとしての説明兼供養としてこの記事を書きました。

開発に至る経緯

自分は毎期アニメを見るようなオタクなのですが、あのアニメいつ始まるんだっけ？🤔となることが多く、パッと放送開始日を確認できるものがあればラクだなあと思っていました。既存のサービスだと放送日以外の情報も載せていてごちゃっとしていて見にくかったりページが重いケースもありました。そのためそのサクッと確認できるものを作ろうと思い、実装してみるかと思い立ったのが経緯です。
アプリの画面はこんな感じです。

アプリの詳細

アーキテクチャ

クローラーで放送日のデータを他サービスからスクレイピングしてDBに登録、DBから放送日データを取得するAPIをフロントから叩く流れです。

機能

アニメの放送データを一覧形式で表示します。アニメごとに、各テレビ局の初回放送日時が確認できます。

技術的なポイント

フロントエンド

とにかくすぐ作ってみたかったため、以下の既存ソースを流用させていただき、不要な機能は削除しつつmaterial uiのコンポーネントを差し替える形で実装しました。

多くの放送局で放送予定があるアニメだと20局近くになるため、一覧画面の中で放送データの表示が縦に長くなる問題がありました。そのためmaterial uiのアコーディオンコンポーネントを採用して改造し、初期表示としては1アニメごと最大3放送データとし、クリックして全放送データ表示とすることで一覧表示画面が縦に長くなる問題を軽減しました。
また、既存ソースで設定されていたPWAの仕組みは勉強になりました…！

バックエンド

こちらもすぐ作ってみたかったということで、扱い慣れたJava、またOpenAPI、swagger、Redocを採用してソース、API仕様書自動生成も活用しています。自動デプロイの仕組みは入れていないものの、自動テストは取り入れました。

クローラー

cronでpythonを起動して、スクレイピングを行います。クローリング、スクレイピングということでここはほぼpython一択かと思います。

DB

ここも使い慣れたポスグレを利用しています。
大量アクセスは見込んでいないためスケーラビリティは重視しませんでしたが、スクレイピング時に数秒程度ですが書き込みを行うためリードレプリカを取り入れてDBへ負荷分散をしています。

インフラ

リリースする場合は、節約のためフロントエンドはVercelのサーバー、バックエンド（クローラー含む）はfly.ioを利用する想定でした。
試作段階では、自宅のラズパイサーバーにすべてデプロイしアプリを動作させています。フロントエンドにはnginx、バックエンドにはTomcatを使用しています。
同一サーバー内で複数のポスグレインスタンスを併存させるのは初の取り組みでしたが、以下記事を元に実現させることができました。

デザイン

ロゴはhatchfulを利用して無料で自動生成しました。なんとなく顔っぽいと思ってもらえると想定通りなのですが、アニメ→映像→光の三原色と連想し、光の三原色を横に並べて左右両目と鼻を表しています。アニメを目を通じて楽しむことを意味します。wanimeというタイトルもwatchとanimeをくっつけた造語です。

反省点や改善点

やはりもっと早くに動き出せていればという後悔は大きいです。これまで学習目的でのサービス公開はいくつか経験がありますが、実際に使う目的があってアプリを作ったのは初めてでしたので、それが思わぬ形でリリース、運用できなかったのは非常に残念でした。次こそはちゃんとリリース、運用までもっていきたい所存です。

アプリ自体の改善点としては、まず検索機能の追加、またユーザー機能も入れてユーザーが見たいアニメを記録できる機能の追加はイメージしていました。本番環境にリリースした場合は、自動デプロイも組み込めるため入れたいなと思います。また、Reactは入門中というところでしたので、フロント側にもテストコードを入れCICDに乗せていくのも良いテーマかと思いました。