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

Transcript

1. @27ma4_ton10 github.com/RyuseiNomi 推しの VTuber の 公式サイトを作った
2. とんと # Webエンジニア # マリオカート # VTuber(見る方) # Go / Swift / React @27ma4_ton10
3. https://kiyubi-kokon.netlify.app/ 作成したもの
4. ・React (Typescript) ・CSS ・Golang ・Node.js ・AWS Lambda ・AWS API Gateway ・AWS S3 ・AWS CloudFront 技術スタック
5. システム構成図
6. https://… 最新の 動画情報 JSON の返却 イベントの発火 JSONをポーリング API を叩く 動画情報 JSON の取得 ブラウザ JSON 画像の配布 画像の取得
7. ・タイトルのロード画面 ・ハンバーガーメニュー ・スクロールに連動したアニメーション ・最新の配信を常に表示する 拘りポイント
8. 拘りポイント１ ロード画面
9. ローディング画面とタイトル画面を 画像の読み込み状況によって出し分ける ✅
11. fetchImage が終わった後の処理 
 画像の読み込み処理 

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

14. 拘りポイント２ ハンバーガーメニュー
15. 簡単な仕組み
16. 半透明のボタン メニュー これをすることで
 メニューを開いた時に 
 背景を暗くすることができる 
 表示の制御は state で管理 

17. スクロールの仕組み
19. 移動対象の DOM の絶対位置を取得 
 window.scrollTo で移動させる 

20. アニメーションの仕組み
22. 右からふわっと出現するアニメーション 
 アニメーションを適用させたボタン 

23. 拘りポイント３ スクロールと連動した アニメーション
24. スクロールの度に現在の X 座標を取得して 特定のコンポーネントと比較する ✅
26. これ注目

27. https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
28. つまり、スクロールが実行されるたびに 
 toggleFadeIn メソッドが呼ばれるようになる 

29. あとはメソッドを 実装するだけ
30. X軸の座標と
 ターゲットとなるコンポーネントのX座標を取得 
 2つの座標を比較して、特定の位置に達したら 
 animation クラスを動的に追加する 

31. 拘りポイント４ 最新の動画を YouTube から取得
32. 最初にやろうとしたこと
 ブラウザ 動画情報 API を叩く YouTube API V3 の上限がかなり低く 約 100 リクエストほどで上限に達する
33. 最初にやろうとしたこと
 ブラウザ 動画情報 API を叩く 独自のAPIサーバを作成して取得する
34. APIサーバ ポーリング Lambda 関数 ブラウザ JSON
35. ポーリング Lambda 関数 JSON
36. ポーリング Lambda 関数 YouTube API から動画情報を取得して S3 バケットにアップロードする ✅ JSON
37. AWS SAM Lambda周りの構成管理や デプロイなどを コマンド１つで実現出来る
39. こんな感じに yamlファイルで Lambdaのパラメータを管理
40. あとはコードを 書くだけ
41. あとはコードを 書くだけ 中でやっていること ・動画データの取得 ・temp 配下に空っぽの json ファイルを作成 ・取得したデータを作成したファイルに書込む ・書き込まれたファイルを S3 にアップロード
43. APIサーバ
44. ブラウザ リクエストがあった際に S3 からファイルを取得して返す ✅ JSON
47. S3 のバケット情報
 S3 のファイルを取得する処理
 レスポンスを生成して返却

48. https://… ブラウザ
49. 上限 100 リクエストから ある程度は耐えられるように！
50. TODO フロントエンド ・SEO 対策の強化 ・画像のレンダー処理をもっと快適にする バックエンド ・JSON を捌く処理のリファクタ（Lambda） ・失敗時にアラートを飛ばす仕組み作り インフラ ・リクエスト数の上限の最適解を探す ・発生するコストの見積もり
51. (=´∀｀)人(´∀｀=)
52. 推しは推せる時に推しましょう