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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
嘉音とんと
December 19, 2022
Technology
0
180
推しの VTuber の公式サイトを作った
嘉音とんと
December 19, 2022
Tweet
Share
More Decks by 嘉音とんと
See All by 嘉音とんと
CSSの歩き方
kanon_tonto
0
56
推しの VTuber の公式 Web サイトを作った Part.2
kanon_tonto
0
30
これまでに一番苦労したプロジェクト
kanon_tonto
0
26
ぼっちがリモートワークやってみた
kanon_tonto
0
92
Kanazawa.rbを振り返る
kanon_tonto
0
110
もう僕は勤怠を入力しなくても良い
kanon_tonto
0
49
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
Security Diaries of an Open Source IAM
ahus1
0
210
プロジェクトマネジメントをチームに宿す -ゼロからはじめるチームプロジェクトマネジメントは活動1年未満のチームの教科書です- / 20260304 Shigeki Morizane
shift_evolve
PRO
1
250
生成AIの利用とセキュリティ /gen-ai-and-security
mizutani
1
1.6k
GitLab Duo Agent Platform + Local LLMサービングで幸せになりたい
jyoshise
0
290
The_Evolution_of_Bits_AI_SRE.pdf
nulabinc
PRO
0
120
Dr. Werner Vogelsの14年のキーノートから紐解くエンジニアリング組織への処方箋@JAWS DAYS 2026
p0n
1
130
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
5
1.2k
Shifting from MCP to Skills / ベストプラクティスの変遷を辿る
yamanoku
4
790
[JAWSDAYS2026][D8]その起票、愛が足りてますか?AWSサポートを味方につける、技術的「ラブレター」の書き方
hirosys_
3
120
最強のAIエージェントを諦めたら品質が上がった話 / how quality improved after giving up on the strongest AI agent
kt2mikan
0
160
作りっぱなしで終わらせない! 価値を出し続ける AI エージェントのための「信頼性」設計 / Designing Reliability for AI Agents that Deliver Continuous Value
aoto
PRO
2
280
新職業『オーケストレーター』誕生 — エージェント10体を同時に回すAgentOps
gunta
4
1.8k
Featured
See All Featured
AI: The stuff that nobody shows you
jnunemaker
PRO
3
370
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8k
Building the Perfect Custom Keyboard
takai
2
710
Art, The Web, and Tiny UX
lynnandtonic
304
21k
A Tale of Four Properties
chriscoyier
163
24k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
250
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
WENDY [Excerpt]
tessaabrams
9
36k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
68
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
380
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) ・失敗時にアラートを飛ばす仕組み作り インフラ
・リクエスト数の上限の最適解を探す ・発生するコストの見積もり
(=´∀`)人(´∀`=)
推しは推せる時に推しましょう