推しの VTuber の公式サイトを作った

@27ma4_ton10 github.com/RyuseiNomi 推しの VTuber の公式サイトを作った

とんと # Webエンジニア # マリオカート # VTuber(見る方) # Go /
Swift / React @27ma4_ton10

https://kiyubi-kokon.netlify.app/ 作成したもの

・React (Typescript) ・CSS ・Golang ・Node.js ・AWS Lambda ・AWS API Gateway
・AWS S3 ・AWS CloudFront 技術スタック

システム構成図

https://… 最新の動画情報 JSON の返却イベントの発火 JSONをポーリング API を叩く動画情報
JSON の取得ブラウザ JSON 画像の配布画像の取得

・タイトルのロード画面・ハンバーガーメニュー・スクロールに連動したアニメーション・最新の配信を常に表示する拘りポイント

拘りポイント１ロード画面

ローディング画面とタイトル画面を画像の読み込み状況によって出し分ける ✅

fetchImage が終わった後の処理   画像の読み込み処理  

ロード中のぐるぐる  タイトル 

拘りポイント２ハンバーガーメニュー

簡単な仕組み

半透明のボタンメニューこれをすることで  メニューを開いた時に   背景を暗くすることができる   表示の制御は state で管理
 

スクロールの仕組み

移動対象の DOM の絶対位置を取得   window.scrollTo で移動させる  

アニメーションの仕組み

右からふわっと出現するアニメーション   アニメーションを適用させたボタン  

拘りポイント３スクロールと連動したアニメーション

スクロールの度に現在の X 座標を取得して特定のコンポーネントと比較する ✅

これ注目 

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

つまり、スクロールが実行されるたびに   toggleFadeIn メソッドが呼ばれるようになる  

あとはメソッドを実装するだけ

X軸の座標と  ターゲットとなるコンポーネントのX座標を取得   2つの座標を比較して、特定の位置に達したら   animation クラスを動的に追加する  

拘りポイント４最新の動画を YouTube から取得

最初にやろうとしたこと  ブラウザ動画情報 API を叩く YouTube API V3 の上限がかなり低く約
100 リクエストほどで上限に達する

最初にやろうとしたこと  ブラウザ動画情報 API を叩く独自のAPIサーバを作成して取得する

APIサーバポーリング Lambda 関数ブラウザ JSON

ポーリング Lambda 関数 JSON

ポーリング Lambda 関数 YouTube API から動画情報を取得して S3 バケットにアップロードする ✅ JSON

AWS SAM Lambda周りの構成管理やデプロイなどをコマンド１つで実現出来る

こんな感じに yamlファイルで Lambdaのパラメータを管理

あとはコードを書くだけ

あとはコードを書くだけ中でやっていること・動画データの取得・temp 配下に空っぽの json ファイルを作成・取得したデータを作成したファイルに書込む・書き込まれたファイルを
S3 にアップロード

APIサーバ

ブラウザリクエストがあった際に S3 からファイルを取得して返す ✅ JSON

S3 のバケット情報  S3 のファイルを取得する処理  レスポンスを生成して返却 

https://… ブラウザ

上限 100 リクエストからある程度は耐えられるように！

TODO フロントエンド・SEO 対策の強化・画像のレンダー処理をもっと快適にするバックエンド・JSON を捌く処理のリファクタ（Lambda）・失敗時にアラートを飛ばす仕組み作りインフラ
・リクエスト数の上限の最適解を探す・発生するコストの見積もり

(=´∀｀)人(´∀｀=)

推しは推せる時に推しましょう 

推しの VTuber の公式サイトを作った

推しの VTuber の公式サイトを作った

More Decks by とんと

Other Decks in Technology

Featured

Transcript