Tweet
Tweet

Slide 1

Slide 1 text

思いつきで推しの 誕生日記念コンテンツを 2日で作る技術 八雲アナグラ(@AnaTofuZ) 2025/04/27　甲斐国もくもく会 x 山梨WordPress Meetup 〜春のLT大会〜

Slide 2

Slide 2 text

● 八雲アナグラ(@AnaTofuZ) ● 株式会社コードタクトでバックエンドエンジニア ○ Rubyメインで趣味でPerl ● 今年の1月から甲府からフルリモート勤務 ○ 山梨出身ですが10年ぶりに帰ってきました 自己紹介

Slide 3

Slide 3 text

技術なんでも OKイベント Houtou.pmやります!!きてくれ!!

Slide 4

Slide 4 text

推し

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

● ほうとうももじる ● 山梨ご当地VTuber ● 今日からおいしい学校で コラボベント中 宝灯桃汁

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

誕生日 4月12日

Slide 9

Slide 9 text

2日前に 思い出す

Slide 10

Slide 10 text

突然の 開発機運

Slide 11

Slide 11 text

4月10日にgit init

Slide 12

Slide 12 text

https://anatofuz.net/momojiruslot202504/ ※音がでます!!

Slide 13

Slide 13 text

● 宝灯桃汁を揃えるスロットマシーン ● スタートと同時に動画が再生 ● 4つ停止すると結果をツイートできる ○ 作られた名前がツイッター上で画像と して表示される 宝灯桃汁スロットマシーン

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

● うまい ● やすい ● はやい 技術選定

Slide 16

Slide 16 text

● うまい ○ 見た目がそこそこ良い ○ ちゃんとコンテンツとして楽しめる ● やすい ○ 金がかからない ● はやい ○ 今回は2日でリリースまで持っていきたい ■ 自分がシュッと実装できるものを選択 技術選定

Slide 17

Slide 17 text

● Next.js(React)を使ってブラウザで動作させる ○ 素早く作るとしたら非常に手慣れている技術で... ● ホスティングはGitHubPagesを使う ○ HTMLさえあれば無料で配信可能 ○ GitHubActionsと組み合わせるとデプロイの手間もない ● Next.jsはSSG(予めHTMLを生成するモード)を採用 ○ サーバーを動かすと金がかかる ○ Next.jsだといっぱいページを作るみたいなのがはやい 基本戦略

Slide 18

Slide 18 text

● スロットマシーン本体 ○ 多分JavaScriptで十分表現できる ● リザルトのページと画像 ○ GitHubPagesでホストするので予め作成する必要がある ○ 予め画像を生成して、それぞれの結果を予めog:imageに設定した ページを作れば実現できる ○ スロットマシーンの結果を予め作成するには...? 今回作るページ

Slide 19

Slide 19 text

自分で作るスロットマシーンなので有限状態 宝 灯 桃 汁

Slide 20

Slide 20 text

漢字URLだとバレるので一文字ずつ idを付与 宝 灯 桃 汁 a1B3c u2Vwx o2Pqr d2CeF

Slide 21

Slide 21 text

ハイフンでつなげるとスロットの URLにできる 宝 灯 桃 汁 a1B3c u2Vwx o2Pqr d2CeF - - -

Slide 22

Slide 22 text

● スロットの盤面の全パターン的に今回は1470通り ○ 手でつくるのはつらい.... ● Next.jsだとURL上の動的に変わる部分を予めパターン指定すると自動 的にHTMLを作ってくれる機能がある ○ 盤面パターンからURLの変換を全部作る関数を元に生成可能 スロットリザルト画面 export async function generateStaticParams() { return combinations.map( (combo) => ({ id: generateURLFromJoinReel(combo) })); }

Slide 23

Slide 23 text

● vercel/satoriを使うとJSXを元にSVGが生成できる ● さらにそのSVGをNode.jsでpngに変換 ● 生成する画像のパターンも同様に作れるので... ○ ビルド時にこれを事前に行うといい感じに生成できる ● 結果ツイートするURLのページのog:imageを生成した画像を指定してお くことでツイート時に画像がでるようになる 画像生成方法

Slide 24

Slide 24 text

こんな感じのコードが const generateOgpImage = async (title: string) => { const font = fs.readFileSync("public/font/yuji_syuku.ttf"); const svg = await satori(

山梨ご当地VTuber

{title}

, ); return await sharp(Buffer.from(svg)).png().toBuffer(); };

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

● あとは楽をしたいところ(CSSの設定とか)をChatGPTくんと一緒につくって いくと2日でも完成する ● 1ページくらいのそこまで込み入ってないページであるなら70点 くらいのコードをまぁまぁ生成してくれる ○ 今回だとスロットが揃ったときの挙動がおかしいとか ● 自分がある程度書ける技術スタックでスタートダッシュを決めてもらうのに はとてもよかった ここまで決まったら

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

● 思いつきでもAIを使いつつ慣れたWeb技術だとそれっぽい推しのコンテン ツが作れた ● 無料でコンテンツするときはSSG系の技術がわりと便利 まとめ