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
120
思いつきで推しの誕生日記念コンテンツを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
k1LoW/deckのすすめ
anatofuz
0
160
Perl1.0 Deep Drive 0.01
anatofuz
0
140
Rubyの国のPerlMonger
anatofuz
3
920
Pythonで爆速でHello, World!する
anatofuz
0
78
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
320
令和最新版 Perlコーディングガイド
anatofuz
5
7k
rakulangで実装する! RubyVM
anatofuz
6
3.7k
沖縄の大学で育った学生がエンジニアになるまで
anatofuz
2
6.1k
OpenAPI Generator Perl Clientでも型チューニングしたい!!
anatofuz
0
390
Other Decks in Technology
See All in Technology
データエンジニアがこの先生きのこるには...?
10xinc
0
450
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
340
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
190
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
940
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
180
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
890
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
130
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
990
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
270
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Being A Developer After 40
akosma
91
590k
Designing for Performance
lara
610
69k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
We Have a Design System, Now What?
morganepeng
53
7.8k
RailsConf 2023
tenderlove
30
1.2k
Code Review Best Practice
trishagee
72
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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系の技術がわりと便利 まとめ