配信者の推し活が捗るサイトを作りました

推し配信者の活動を簡単にチェックできるLismisというサイトを作りました。YoutubeやTwitchの配信や動画、Twitterのスペースといったメインコンテンツはもちろん、イベントやグッズの販売スケジュールなども簡単に共有できます。

https://lismis.live/ja-jp

モチベーション

zennでは技術面にフォーカスしてアウトプットする予定なので、「なぜ作ったのか」「どういうサイトなのか」などの心情面についてはnoteに書きましたので、こちらも御覧ください。

https://note.com/lismis/n/n9c11ed9c8bf2

製作期間

思いついたのは去年の夏でした。作り切るモチベーションを維持するため、サイト名を決めると同時に即ドメインを取りました。
休日の時間が取れる時に実装し、およそ半年後、翌年2月にα版としてリリースしました。
そして10月、サイトの目指すところをイチから見つめ直し、デザインを全面リニューアルしてのβ版リリースまでこぎ着けました。
ここまでおよそ1年の道のりを、少しづつアウトプットしていけたらと思います。

バックエンド

個人サイトなので運営コスト(金銭/手間)はかけず、かつスピード感を持ってリリースできるよう意識しています。
本業はいわゆるソーシャルゲーム/ライブゲームのバックエンドエンジニアなので、先にバックエンド構成から考えました。

そして最終的に下記のような Docker / Cloud Run / Cloud SQL / PHP という構成に落ち着きました。だいぶシンプルで手間がかからず満足しています。
使っているものを個別に挙げるとこんな感じです。

• GCP
• PHP8
• Cloud Run
• Cloud SQL
• Cloud Scheduler
• Secret Manager
• Cloud Build
• Container Registry

GCPが使いやすい

一番の決め手は無料枠とマネージドサービスの充実度合いでした。
個人で運営しているので、下記の点からGCPのCloud Runを選びました。

https://cloud.google.com/

• 無料枠でそれなりに使える
• 特にトラフィックが少ないうちは規模的にk8sはコストに見合わない
• インフラ面で考えることが少ない
• LoadBalancerを別途建てなくてもすぐに使える
• ローカルで動作確認したコンテナをそのままデプロイできる
  • ミドルウェアや言語のバージョンアップが自由
• イメージのロールバックが簡単
• 将来的にSpannerも使いたい
  • 金銭的に最小構成でも月額1万円ほどかかってしまうので見送り…
  • Cloud SQLは最小月額1000円程度はかかる

ほかにも、Cloud SchedulerやSecret Manager、Cloud Buildなど便利なプロダクトが揃っていることも決め手でした。

データストアは、ツールアプリのような個人利用だけではないのでfirebaseは採用せずCloud SQLにしています。書いた通り将来的にトラフィックが増えたらSpannerにしたいと思っています。

言語

PythonやRust、Golang、Node、Scala、Kotlinといろいろ候補はありましたが、スピードを重視して一番使い慣れているphpを採用しました。
その他の言語だとどうしても不明点を調べたり追加習得する箇所が出てきてしまうので、考える速度と同じ速度で実装できるphpに決めました。(勉強を兼ねるなら新言語を試していたと思いますが。)

ただphpも8以上にすると今度はGoogleのライブラリが対応していなかったので、7.4にしています。 php改めて検証したところ8でも普通に使えるようになったのでphpは8になりました。
フレームワークはできるだけ軽量で、クリーンアーキテクチャにしたいのでシンプルなSlimを選びました。

フロントエンド

最初からSPAで作るのはコストが重いと考え、当初はMPA/jQueryで最速リリースを目指しました。
CSSフレームワークとしてBulmaを採用していたこともあり、できるだけ手をかけずにリリースできればと思っていたのですが、少し凝ったことをしたいと思うと逆につらい場面が多かったです。

というわけで最終的には下記のようにMPA/React、かつBulmaとstyled-componentが同居するという半端な状態でリリースしています。(機能開発が落ち着いたら完全にrouterを使ってSPA、sytled-component一本にしようと考えています。)

• Typescript
• React
• Bulma
• Styled Component
• Webpack
• eslint
• prettier

肝心のYoutube/Twitch/Twitter連携やセキュリティ面や、サイトマップにOGPなど、サイト運営の基本的なところから学び直しました。デザイン面に至っては専門外なのでゼロから手探りしています。こういった個別の課題と対処した方法は今後の記事でも個別に取り上げていく予定です。

本業はゲーム処理実装が主なので、ルールが異なるというか、前提条件がかなり異なるのですが、もともとやっていたWebサイトづくりは懐かしくも新鮮で、とても楽しくできました。

さいごに

細かいバグも直したりスケジュール作成のUI/UXをもう少し改善したいですし、落ち着いたらFlutterでアプリ版もリリースしたり色々やりたいですね。もちろんもっと多くの人に使ってもらいたい、というのが一番大きいですが。

zennではこれまでハマったところや今後の実装など技術面でのアウトプットを続けていくつもりですので、サイトだけでなく記事に関するご意見・ご感想もお待ちしています！

ぜひLismisを使ってみてください。
楽しい推し活ライフを！

https://lismis.live/ja-jp