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
思いつきで推しの誕生日記念コンテンツを2日で作る技術
Search
AnaTofuZ
April 27, 2025
Technology
0
92
思いつきで推しの誕生日記念コンテンツを2日で作る技術
2025/04/27の甲斐国もくもく会x山梨WordPressMeetup〜春のLT大会〜
https://kainokuni.connpass.com/event/345088/
でのLTです
AnaTofuZ
April 27, 2025
Tweet
Share
More Decks by AnaTofuZ
See All by AnaTofuZ
Pythonで爆速でHello, World!する
anatofuz
0
67
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
270
令和最新版 Perlコーディングガイド
anatofuz
5
6.4k
rakulangで実装する! RubyVM
anatofuz
6
3.1k
沖縄の大学で育った学生がエンジニアになるまで
anatofuz
2
5.8k
OpenAPI Generator Perl Clientでも型チューニングしたい!!
anatofuz
0
360
perlimportsから探るPPIの世界
anatofuz
0
4k
GraphQLスキーマの設計で考えたこと
anatofuz
1
1.6k
インターネットアイドル目指して
anatofuz
1
220
Other Decks in Technology
See All in Technology
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
120
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
320
Prox Industries株式会社 会社紹介資料
proxindustries
0
320
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
Agentic Workflowという選択肢を考える
tkikuchi1002
1
540
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Agile that works and the tools we love
rasmusluckow
329
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
GraphQLとの向き合い方2022年版
quramy
48
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Language of Interfaces
destraynor
158
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
A designer walks into a library…
pauljervisheath
207
24k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
思いつきで推しの 誕生日記念コンテンツを 2日で作る技術 八雲アナグラ(@AnaTofuZ) 2025/04/27 甲斐国もくもく会 x 山梨WordPress Meetup 〜春のLT大会〜
• 八雲アナグラ(@AnaTofuZ) • 株式会社コードタクトでバックエンドエンジニア ◦ Rubyメインで趣味でPerl • 今年の1月から甲府からフルリモート勤務 ◦ 山梨出身ですが10年ぶりに帰ってきました
自己紹介
技術なんでも OKイベント Houtou.pmやります!!きてくれ!!
推し
None
• ほうとうももじる • 山梨ご当地VTuber • 今日からおいしい学校で コラボベント中 宝灯桃汁
None
誕生日 4月12日
2日前に 思い出す
突然の 開発機運
4月10日にgit init
https://anatofuz.net/momojiruslot202504/ ※音がでます!!
• 宝灯桃汁を揃えるスロットマシーン • スタートと同時に動画が再生 • 4つ停止すると結果をツイートできる ◦ 作られた名前がツイッター上で画像と して表示される 宝灯桃汁スロットマシーン
None
• うまい • やすい • はやい 技術選定
• うまい ◦ 見た目がそこそこ良い ◦ ちゃんとコンテンツとして楽しめる • やすい ◦ 金がかからない
• はやい ◦ 今回は2日でリリースまで持っていきたい ▪ 自分がシュッと実装できるものを選択 技術選定
• Next.js(React)を使ってブラウザで動作させる ◦ 素早く作るとしたら非常に手慣れている技術で... • ホスティングはGitHubPagesを使う ◦ HTMLさえあれば無料で配信可能 ◦ GitHubActionsと組み合わせるとデプロイの手間もない
• Next.jsはSSG(予めHTMLを生成するモード)を採用 ◦ サーバーを動かすと金がかかる ◦ Next.jsだといっぱいページを作るみたいなのがはやい 基本戦略
• スロットマシーン本体 ◦ 多分JavaScriptで十分表現できる • リザルトのページと画像 ◦ GitHubPagesでホストするので予め作成する必要がある ◦ 予め画像を生成して、それぞれの結果を予めog:imageに設定した
ページを作れば実現できる ◦ スロットマシーンの結果を予め作成するには...? 今回作るページ
自分で作るスロットマシーンなので有限状態 宝 灯 桃 汁
漢字URLだとバレるので一文字ずつ idを付与 宝 灯 桃 汁 a1B3c u2Vwx o2Pqr d2CeF
ハイフンでつなげるとスロットの URLにできる 宝 灯 桃 汁 a1B3c u2Vwx o2Pqr d2CeF
- - -
• スロットの盤面の全パターン的に今回は1470通り ◦ 手でつくるのはつらい.... • Next.jsだとURL上の動的に変わる部分を予めパターン指定すると自動 的にHTMLを作ってくれる機能がある ◦ 盤面パターンからURLの変換を全部作る関数を元に生成可能 スロットリザルト画面
export async function generateStaticParams() { return combinations.map( (combo) => ({ id: generateURLFromJoinReel(combo) })); }
• vercel/satoriを使うとJSXを元にSVGが生成できる • さらにそのSVGをNode.jsでpngに変換 • 生成する画像のパターンも同様に作れるので... ◦ ビルド時にこれを事前に行うといい感じに生成できる • 結果ツイートするURLのページのog:imageを生成した画像を指定してお
くことでツイート時に画像がでるようになる 画像生成方法
こんな感じのコードが const generateOgpImage = async (title: string) => { const
font = fs.readFileSync("public/font/yuji_syuku.ttf"); const svg = await satori( <div> <div> <p> 山梨ご当地VTuber </p> <p style={{ fontSize: 200, fontWeight: 700 }}>{title}</p> </div> </div>, ); return await sharp(Buffer.from(svg)).png().toBuffer(); };
None
None
• あとは楽をしたいところ(CSSの設定とか)をChatGPTくんと一緒につくって いくと2日でも完成する • 1ページくらいのそこまで込み入ってないページであるなら70点 くらいのコードをまぁまぁ生成してくれる ◦ 今回だとスロットが揃ったときの挙動がおかしいとか • 自分がある程度書ける技術スタックでスタートダッシュを決めてもらうのに
はとてもよかった ここまで決まったら
None
• 思いつきでもAIを使いつつ慣れたWeb技術だとそれっぽい推しのコンテン ツが作れた • 無料でコンテンツするときはSSG系の技術がわりと便利 まとめ