Memo ～ただの雑記～
2026/09/13
本日のアップデート内容
- ページ全体の背景画像を変更し、視差効果を実装しました。
- Indexページ最上部イラストの視差効果をCSSを使用した実装に変更しました。
- Gallery > Illustのサムネイル部分に下記の変更を実施しました。
- 表示が縦に長くなってきていたため、途中から折りたたむようにしました。
- PC画面で表示した際の傾き方が想定と異なっていたため修正しました。
- Gallery > Rakugakiのリンクが数字だけで分かりにくかったため、サムネイル画像を実装しました。
- つぶやき下部メニューの横幅を他のコンテンツと揃えました。
つぶやき下部メニューの横幅、割と前から気になってはいた
ので、ついでに他に気になっていた部分の修正ややってみたかったことも一緒にやっちゃいました。背景にうっすら見えていた画像も、枠だけだとなんか寂しいな～とは前々から思ってたんですよ～
視差効果については、CSSのanimation-timeline: scroll()を使うとスクロールに連動したアニメーションを実装できると何かで知っておもしろ～ってなったので、トップページの一番上のアレと合わせて実装しちゃいました。好みが分かれるところかな～と思ったので、デバイスで視覚効果を減らすような設定がONになっている場合は視差効果を減らす・なくすようにも設定しておいたんですが…
…自分のPCが視覚効果減らす設定になっていたので動く場合の動作確認が出来なくなっちゃった！まあ確認する時だけ設定を変えればいいんですけど…
あと、らくがきログのリンクも、数字だけだと分かりにくくてどうしようかな～と思っていたんですが、この度サムネイル画像を自動で生成する仕組みを裏に構築して、画像を並べる形式に変更しやした。けっこういい感じにできた(と思っている)ので嬉しい。
ただ、Illustのサムネイルと合わせて画像がいっぱい並ぶことになるので読み込みが遅くなったりしないかなという不安はないでもないですが…lazyloadとかなるべく画像を軽くするとか、一応やれることはやったけれどこちらも毛の生えた素人なもんで…ヘイ…
ついでにこれも
なんとなく書き留めておきたくなったので、サイト制作に使用しているツールとか色々を思い出せる範囲で書きました。ホントに便利なものがいっぱいある…すごい時代やで…
オワリ！
2026/01/01
あた～らし～い～と～しが来たッ
今年も明けました めでたいね
昨年当サイトを見に来てくれた皆様、ありがとうございました！
拍手とかコメントとか頂けるといつも喜んでいます こういうことはこういう時に言っておかないとね
今年もこのサイトはここにあるので よかったらまた見に来てね
Q. ところでこの絵は何
A. 午年だから鉄の馬を描いたよ
制作過程の動画もあるよ
よかったらみてね
動画に入れられなかったけれど バイクのエンジンが描けないくだりで「そういえばバイクのペーパークラフトのデータ公開してくれているメーカーあったな……せや！資料用に作ったろ」などと考えていた時がありました 結局描きたいバイクに近いデータがなかったので3Dモデルで概念を作ることに
それはそれとして普通にペーパークラフトは作りたくなったのでデータを印刷してきました 正月休み中に作ろかな～できるかな～結局作らないだろうな～
ここで雑に2025年を振りかえる
年始 耳にバナナが詰まって おくすり七草粥 最悪～
そのあとは静的サイトジェネレーターの解説書いてみたり
電子ペーパーと透明ディスプレイとRaspberry Pi Pico、それから家に転がっていた穴あき板と近所の工房でご自由にどうぞしてた木の切れ端で卓上カレンダー+ワットメーター作ったり（せっかくだから動画にまとめてみようかなと思ったけどめんどくさくなってやめてしもた）
曲の動画に絵を使いたいと声かけてもらったり
メギドオンライン版が終わって寂し～……と思ったらオフライン版もあるしなんかコンサートとか生放送とか色々イベントがあって思ったほど寂しくなくてびっくりしたり
前々から悪魔の時計(画像左)モチーフのグッズとか出ないかな～と思ってたら本当に出たので手に入れました(右)
左の時計 残りの2人はフォラスﾊﾟｯﾊﾟとハルファスちゃんです いつでも来てくれていいからね
オタマトーンとかEWIとか買ったり（最近ぜんぜん触れてない ぐぬ）
なんかランダムでらくがき出てくるやつ作ったり
絵は少ないけどなかなか良い一年でした 耳にバナナが詰まった以外は
バナナが詰まって以来、以前買ったこのイヤホンが使えていません 折角いいの買ったのに……
2026年の目標(言うだけタダ)
しなない
描きたいものがあれば描く
作りたいものがあれば作る
無ければ……とりあえずその辺でフニャフニャしておきます
あとは、何とは言わないがこんなのをずっと作ってました 2024年から作り始めて進んだり進まなかったりなのでいい加減完成させたいです
これが何かは内緒です 完成しなければこのまま墓場にしまいます
2025/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なんもわからんので表示が崩れたらごめんなさい🙇
さいごに 拍手ありがとうございます！感謝のインターネット・ハグ！
これもらくがきくじ(のはじっこ)に入ってます
2025/08/16
！ ＜●＞＜●＞
絵を描いたよ！(電子ペーパーその他で卓上カレンダー+αを作ってたりその他楽しいことがあったりで4か月ぐらい寝かせてたのは内緒)
ちなみにこのあとなんやかんやあってこうなります＜●＞＜●＞↓
その他らくがきもたまってたのでまとめておいたよ↓
Archives
