Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
推しの VTuber の公式サイトを作った
Search
嘉音とんと
December 19, 2022
Technology
0
170
推しの VTuber の公式サイトを作った
嘉音とんと
December 19, 2022
Tweet
Share
More Decks by 嘉音とんと
See All by 嘉音とんと
CSSの歩き方
kanon_tonto
0
49
推しの VTuber の公式 Web サイトを作った Part.2
kanon_tonto
0
26
これまでに一番苦労したプロジェクト
kanon_tonto
0
23
ぼっちがリモートワークやってみた
kanon_tonto
0
89
Kanazawa.rbを振り返る
kanon_tonto
0
100
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
46
Goで始めるWebsocketプログラミング
kanon_tonto
0
160
AWS Lambdaでファイルをこねくり回す
kanon_tonto
0
430
iOSアプリをリリースするまで
kanon_tonto
2
410
Other Decks in Technology
See All in Technology
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
460
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
350
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
350
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.8k
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
170
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
210
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
480
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
740
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
410
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Optimizing for Happiness
mojombo
379
70k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
278
23k
For a Future-Friendly Web
brad_frost
179
9.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Producing Creativity
orderedlist
PRO
346
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
@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 画像の配布 画像の取得
・タイトルのロード画面 ・ハンバーガーメニュー ・スクロールに連動したアニメーション ・最新の配信を常に表示する 拘りポイント
拘りポイント1 ロード画面
ローディング画面とタイトル画面を 画像の読み込み状況によって出し分ける ✅
None
fetchImage が終わった後の処理 画像の読み込み処理
None
ロード中のぐるぐる タイトル
拘りポイント2 ハンバーガーメニュー
簡単な仕組み
半透明のボタン メニュー これをすることで メニューを開いた時に 背景を暗くすることができる 表示の制御は state で管理
スクロールの仕組み
None
移動対象の DOM の絶対位置を取得 window.scrollTo で移動させる
アニメーションの仕組み
None
右からふわっと出現するアニメーション アニメーションを適用させたボタン
拘りポイント3 スクロールと連動した アニメーション
スクロールの度に現在の X 座標を取得して 特定のコンポーネントと比較する ✅
None
これ注目
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
つまり、スクロールが実行されるたびに toggleFadeIn メソッドが呼ばれるようになる
あとはメソッドを 実装するだけ
X軸の座標と ターゲットとなるコンポーネントのX座標を取得 2つの座標を比較して、特定の位置に達したら animation クラスを動的に追加する
拘りポイント4 最新の動画を YouTube から取得
最初にやろうとしたこと ブラウザ 動画情報 API を叩く YouTube API V3 の上限がかなり低く 約
100 リクエストほどで上限に達する
最初にやろうとしたこと ブラウザ 動画情報 API を叩く 独自のAPIサーバを作成して取得する
APIサーバ ポーリング Lambda 関数 ブラウザ JSON
ポーリング Lambda 関数 JSON
ポーリング Lambda 関数 YouTube API から動画情報を取得して S3 バケットにアップロードする ✅ JSON
AWS SAM Lambda周りの構成管理や デプロイなどを コマンド1つで実現出来る
None
こんな感じに yamlファイルで Lambdaのパラメータを管理
あとはコードを 書くだけ
あとはコードを 書くだけ 中でやっていること ・動画データの取得 ・temp 配下に空っぽの json ファイルを作成 ・取得したデータを作成したファイルに書込む ・書き込まれたファイルを
S3 にアップロード
None
APIサーバ
ブラウザ リクエストがあった際に S3 からファイルを取得して返す ✅ JSON
None
None
S3 のバケット情報 S3 のファイルを取得する処理 レスポンスを生成して返却
https://… ブラウザ
上限 100 リクエストから ある程度は耐えられるように!
TODO フロントエンド ・SEO 対策の強化 ・画像のレンダー処理をもっと快適にする バックエンド ・JSON を捌く処理のリファクタ(Lambda) ・失敗時にアラートを飛ばす仕組み作り インフラ
・リクエスト数の上限の最適解を探す ・発生するコストの見積もり
(=´∀`)人(´∀`=)
推しは推せる時に推しましょう