Memo ～2025年～
25/09/20
新井式回転抽選器を実装しました
よしむらお気に入りのらくがきがランダムで出てくるくじを作りました！ピックアップなしの闇鍋ガチャです
よかったら遊んでくれよな！
動機
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なんもわからんので表示が崩れたらごめんなさい🙇
さいごに 拍手ありがとうございます！感謝のインターネット・ハグ！
これもらくがきくじ(のはじっこ)に入ってます
25/08/16
！ ＜●＞＜●＞
絵を描いたよ！(電子ペーパーその他で卓上カレンダー+αを作ってたりその他楽しいことがあったりで4か月ぐらい寝かせてたのは内緒)
ちなみにこのあとなんやかんやあってこうなります＜●＞＜●＞↓
その他らくがきもたまってたのでまとめておいたよ↓
25/03/15
他の会員をさがしています…
前から作りたい作りたいと言っていた(そこまで言ってない)静的サイトジェネレーター(SSG)11tyの解説コーナー、つくりました！
「同人系・創作系の個人サイトを作っている人でSSGに興味がある人」に説明するつもりで書いたので誰に刺さるんだよって感じですが、何かの役に立ったら嬉しいなぁ……役に立たなくても私のやりたいことリストがひとつ消化できたのでヨシ！
ところでSSG(11tyでなくても)で同人・創作系の個人サイト作ってる人他にもおるやろ……アンテナ低すぎて発見できてないだけで……と思うんですけど実際どのくらい人口いるんですかね？
かんそうわかめ
どんなテンション(文体)で書いたらいいのかとか分かりやすく伝えるにはとか色々分からないことだらけで、伝わる・分かりやすい解説になっている自信がないですができるだけ努力はしました ムズカシイヨー
実は他にもてがろぐ等cgiとの併用とか、更新履歴を日付ごとにまとめて表示させるためのひと手間とか、サムネイル用小さい画像の自動生成とか、その他使用しているスクリプト・ライブラリのこととか……サイト制作に関してまとめておきたいな～と思っていることがいくつかあるので、気が向いたらこの辺の解説も生えてるかもです でも文書を書くのはたいへん大変なので一生生えないかもしれません
あと、以前からこのサイトの文章読みにくいな～と思って一度いじったのですがそれでもまだ読みにくくて……今回長～い文書を作成してみてやっと原因が分かりました
＿人人人人人人人人人＿
＞ 横幅が広すぎる ＜
￣ＹＹＹＹＹＹＹＹＹ￣
なので縮めておきました キュ PC全画面で見た時スカスカに見えないようにしたくてちょっと日和ったのでまだ読みにくいかも……
あと文書作成のついでに今までスタイル設定してなかったもの(表とか小さい見出しとか)に新しくスタイル設定したりなども
なので表示が崩れているところがあったらキャッシュ削除→再読み込みで、それでも崩れていたらそっと教えて頂けるとありがたくて小躍りします
さらについでに貯まっていたらくがきをまとめておいたので良かったらこっちも見てくれよな！
動き少な目サイトなのに見に来て＆拍手してくれる人がいて嬉しいゾ
ホントにありがとう～～～
25/01/01
あけお～め(2025)
昨年見に来てくださった皆さん、ありがとうございました!
拍手やコメント等、とても嬉しかったです
今年もマイペースに何か作ったり作らなかったりしていくと思うのでよろしくお願い致します
へび年なのでパイソンです なんてちょうどいいんだ(???)
帽子が鏡餅になっているのがポイント と服屋さんも言っております
実は描いているところを録画していて、ちょっと解説とか付けた動画なんか作ってみようかなと思っていたのですが……編集が大変だったのでとりあえずタイムラプスを15秒に圧縮した動画をつくっておきました 割とすぐわかるところに置いてます
Archives
