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
210
Perl1.0 Deep Drive 0.01
anatofuz
0
150
Rubyの国のPerlMonger
anatofuz
3
970
Pythonで爆速でHello, World!する
anatofuz
0
80
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
340
令和最新版 Perlコーディングガイド
anatofuz
5
7.2k
rakulangで実装する! RubyVM
anatofuz
6
3.8k
沖縄の大学で育った学生がエンジニアになるまで
anatofuz
2
6.1k
OpenAPI Generator Perl Clientでも型チューニングしたい!!
anatofuz
0
390
Other Decks in Technology
See All in Technology
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
130
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
400
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
140
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
380
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
180
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
知覚とデザイン
rinchoku
1
590
OCIjp_Oracle AI World_Recap
shinpy
1
180
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
890
Observability — Extending Into Incident Response
nari_ex
1
470
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Building Applications with DynamoDB
mza
96
6.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Practical Orchestrator
shlominoach
190
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
The Art of Programming - Codeland 2020
erikaheidi
56
14k
A designer walks into a library…
pauljervisheath
209
24k
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系の技術がわりと便利 まとめ