とは夏果とは
🔖️browser🔖️design🔖️event🔖️film🔖️JS🔖️museum🔖️Rust🔖️stroll🔖️virtual🔖️Wasm🔖️Wired🔖️Zola
アニメーションを置くサイト
2025.05.22 🔖️JS

タグのJSは全くの嘘だがHTMLだとかCSSだとかそういうタグを別に作るほどのものでもないから彼の静的なサイト制作に使われる技術を総じてJSに押し込んでいる
そもそもJSが好きではなくて敢えて使わないようにしているのだから芳しくない選択であるがWebにするのも違うしなあ

https://slnq.github.io/animation/

アニメーションを置くサイトを作った
デザインは色々と悩んだがgithubのreadmeに画像を貼ったときのデザインが悪くなかったので真似をした
写真のサイトに比べると随分と簡素なデザインで更新手法なども簡単なものであるが同じくらい気に入っている


ここに置くアニメーションは主にMMDを使っていこうと思っている
エイプリルフールのために作った3dモデルがあるため何かしら活用しようと思ったのがきっかけ
色数の少ない画が好きだからGIF画像の性格を上手に使えたら良いなと期待している

既に載っているものについて少し書く
きゅうくらりんはモーションを拝借し一部分をAVI出力し黒系と白系と背景の3色のみを含むパレットでGIFに変換している
ラグトレインもモーションを拝借し一部分をAVI出力し黒系のみを抽出し単色化したものとそれを白系に変換したものをずらして適当に配置し同じく3色GIF変換している
GIFに変換するときのFFMPEGの処理を全く知らないのだがドット絵のグラデーションで使われるような表現がみられ自動で行っても良い感じになるのがありがたい


ついでに当ブログの僅かな更新点も

フッターを付けた
常に下端に居座る邪魔なものではなく下までスクロールして初めてみられるようにしている
写真に加えアニメーションのサイトを作ったことやRSSやら全文やらのページへのリンクをわかりやすくしておきたいがため作ったが普通はこういうものはヘッダーかサイドメニューに置く気がする

それとかなり前からだがaboutのページにアスキーアートを書いている
DeepAAを利用して作り生で貼りcssで整えている
普通に画像を貼るよりも軽いはずだ
それにしてもAAを綺麗にするにはフォントサイズが決まっていて小さく表示するために'transform: scale(0.4);'をすると元のサイズ分の空白が出現するというのは凄い仕様だ

写真およびアニメーションの更新も当ブログの更新に反映されるようにした
その際に写真に関するリポジトリアニメーションに関するリポジトリをサブモジュールで追加している
当初は/static/内にgit submodule addしていたがactions/checkout@v4でsubmodules: trueにしても

The process '/usr/bin/git' failed with exit code 128 build
No url found for submodule path 'name_of_submodule' in .gitmodules build

というエラーがでるためリポジトリのルートディレクトリにgit submodule addしている
誰か助けてください
ただこれもブログ自体をgit pushしたときに更新情報を吸い上げるから写真やらアニメーションやらは更新しただけではどうしようもないのが少し面倒
github actionを加筆すればよいのだろうがapiを発行したりとなると急に面倒になる