新井式回転抽選器を実装しました
よしむらお気に入りのらくがきがランダムで出てくるくじを作りました！ピックアップなしの闇鍋ガチャです
よかったら遊んでくれよな！
動機
Galleryのらくがきコーナー、各ページに飛ぶための数字が並んでいるだけでどこに何があるかなんもわからん……検索機能か絵の方からこっちに来てくれる(?)何かが欲しい……
ので後者の施策としてランダムくじを作りました 「施策」て言い方は大仰すぎるが
実は検索機能もpagefindというライブラリがあるのを知ったのでこれを使って実装してみようと思ったのですが、試しに動かしてみて「検索できる！すごい！」となった後に実際にどうやってサイトに組み込もうかな……というところで面倒臭くなって放置してます 気が向いたら実装したいようなそうでもないような
実装の話
※半分自分用の記録みたいなもんだから読まなくてもいいよ！読みにくいし！
らくがきくじは
①まとめページの画像タグ(img)にカスタムデータ属性でひとことなどを記載→②まとめページを走査してひとことなどを設定した画像の情報をJSONファイルに抽出→③そのJSONファイルをランダム表示させるためのスクリプトで読み込んで使用
みたいな流れになってます まとめページの作成とくじの追加が同時にできる！なので今後も出てくるらくがきは追加されていく予定です
実際のimgタグの例
<img src="/src/rakugaki/20250421.png" data-rand-comment="旬のお野菜 無料でゲット" data-rand-icon="leo">で、↑みたいなコードから②の情報抽出をするのにjavascriptで作成した11tyのテンプレートを使ってます 11tyにおけるテンプレートは、基本は「サイト内のページ(htmlファイル)の素」みたいなものなんですが、拡張子の設定を変えればhtml以外も出力できるし、パスの設定を変えれば公開用のフォルダではないところに出力もできる……ということでこれを利用してJSONファイルを作っているというわけですな
ちなみに、イラストコーナーのサムネイルやOGP用画像の作成にも上記のような仕組みを使っています 各ページの設定にサムネイルの素にしたい画像を記述しておいて、11tyのテンプレートで使用する画像の情報を収集、収集した情報をサムネイルを作成するスクリプトに読み込ませて画像を出力……みたいな感じです
実際に画面に表示する時の工夫として、必要なデータの読み込みが完了するまで次に進めないようにしたり、画像読み込み中を表すUIを表示するようにしたりなどしています ただ、動作確認は手元のローカルで試せることしか試していないのでインターネッツ上で期待した通りに動くかは未知数です すね毛が生えただけの素人なのでなんもわからん……
あと、地味に難しかったのが各パーツの配置です 表示される画像の大きさによって他のパーツ(特にくじ引くボタン)が上下に動くのはあんまり良くないかなと思ってなるべく動かないようにしたり、画像の右下に拡大ボタンが来るようにしたり……cssなんもわからんので表示が崩れたらごめんなさい🙇
さいごに 拍手ありがとうございます！感謝のインターネット・ハグ！
