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
100
思いつきで推しの誕生日記念コンテンツを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
Rubyの国のPerlMonger
anatofuz
0
300
Pythonで爆速でHello, World!する
anatofuz
0
72
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
290
令和最新版 Perlコーディングガイド
anatofuz
5
6.7k
rakulangで実装する! RubyVM
anatofuz
6
3.3k
沖縄の大学で育った学生がエンジニアになるまで
anatofuz
2
5.9k
OpenAPI Generator Perl Clientでも型チューニングしたい!!
anatofuz
0
370
perlimportsから探るPPIの世界
anatofuz
0
4.1k
GraphQLスキーマの設計で考えたこと
anatofuz
1
1.6k
Other Decks in Technology
See All in Technology
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
310
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
230
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
230
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
190
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
280
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
110
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
0
210
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
2
170
Datasets for Critical Operations by Dataform
kimujun
0
130
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
240
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
210
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Optimizing for Happiness
mojombo
379
70k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
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系の技術がわりと便利 まとめ