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
Pythonで爆速でHello, World!する
anatofuz
0
71
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
280
令和最新版 Perlコーディングガイド
anatofuz
5
6.6k
rakulangで実装する! RubyVM
anatofuz
6
3.2k
沖縄の大学で育った学生がエンジニアになるまで
anatofuz
2
5.9k
OpenAPI Generator Perl Clientでも型チューニングしたい!!
anatofuz
0
370
perlimportsから探るPPIの世界
anatofuz
0
4.1k
GraphQLスキーマの設計で考えたこと
anatofuz
1
1.6k
インターネットアイドル目指して
anatofuz
1
220
Other Decks in Technology
See All in Technology
Expertise as a Service via MCP
yodakeisuke
1
150
生成AIによる情報システムへのインパクト
taka_aki
1
150
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
Data Engineering Study#30 LT資料
tetsuroito
1
570
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
130
PHPでResult型やってみよう
higaki_program
0
190
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
11
1.5k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
120
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
220
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
12
5.3k
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
110
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
270
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Writing Fast Ruby
sferik
628
62k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Visualization
eitanlees
146
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
4 Signs Your Business is Dying
shpigford
184
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Balancing Empowerment & Direction
lara
1
490
Facilitating Awesome Meetings
lara
54
6.5k
Practical Orchestrator
shlominoach
189
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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系の技術がわりと便利 まとめ