2026年 01月 07日

CSS 2026

せっかくバックエンドシステムも変わったことだしと思ってCSSをアてなおした。何年ぶりかわからん (調べたら約10年一緒だった)

以下のように gemini-3-flash-preview に指示して、何度かやりなおしたら割といい感じだったので、さらに指示を加えたり手動で数字いじってなんとかした。

この日記を以下の条件で CSS を書きなおして新しいデザイン(見た目)を適用するとしたらどうしますか。やってみて
- 落ち着いたトーン 
- 「読みやすさ」最重視  
-「コード」は情報密度を高く
- 「写真」はできる限り大きく 
- ブロックの大きさに px 基本的に指定しないこと 
- フルにレスポンシブ (モバイルも同一ページです) 

中央揃えだとなんかモダンに感じる。

コードブロックと写真の幅を画面いっぱいにしたりするのは後からの指示。

HTML の変更はしないつもりだったけど、結局微調整した。

ヘッダのアイコン

ヘッダにアイコンも追加してみた。Nano Banana Pro で何度かイメージを伝えつつ気に入るのをいろいろ出させてブラッシュアップしたあと、Inkscape でトレースして、「パスの簡略化」で点の数を削減した。

なお gemini-3-pro-preview に同様にことをやらせたら、完全なるゴミができたため捨てました。遅いし

JS と WebComponents

CSS とは直接関係ないけどJSまわりも若干モダンにした。ものすごく古い書き方をしていたり、loading="lazy" がない時代の画像のプレースホルダーコードが残ったりしていた。なんか大抵のことはブラウザがやってくれる時代になっていた……

見出しの改行位置を調整するのを独自でやっていたけど、完全にやめて budou-xのWebComponents を導入した。

アーカイブあさり

  • 2014年1月 はこれはこれでよかったな
  • 2015年2月 は今も使ってるタイトルに近い。けどウェブフォントだったようだ
  • 2016年10月 は前のCSSに近い。ここからはほぼマイナーアプデしかしてないはず

バックエンドかえてからメタデータ(ogpとかもろもろ)がちゃんと入っておらず、はてブのタイトルとかがおかしくなっていた。なおしたつもり。

結構いろいろなおしまくっている

  • sitemap.xml / feed.xml は encoding/xml で出すように
    • html/template だと XML の PI が出せなかったり、そもそもXML用じゃないので問題がある。text/template は論外
  • 関連エントリを 2-gram かつより効率良い実装に書き換え。
    • エントリ数が1万弱なので、そんなに困ってはいないのだけどやりたくて

DB の DATE 型にしてあるカラムを TEXT 型にする

go-sqlite3 だと DATE を time.Time にしてくれちゃうが、それだと困るという。DBをそのままで持ってくる前提で、元々 CAST(date AS TEXT) as date とかで頑張っていたけど、これが sqlc と非常に相性が悪い。CAST するとそのクエリ専用の型が作られてしまう。そして共通の型に詰め替えるという手間 (コピー) が発生する。

sqlc の overrides とかでなんとかならないかと思ったが、go-sqlite3 の時点で time.Time になっちゃうのと、特にドライバオプションで切り替えることもできなそうなので、諦めて TEXT にすることにした。

ただ SQLite はカラムの型変更が ALTER TABLE でできない。知らなかった。

ということでめんどいことに……

BEGIN TRANSACTION;

-- 1. Create new table with TEXT type for date
CREATE TABLE entries_new (
    id INTEGER PRIMARY KEY,
    ...
);

-- 2. Copy data from old table
INSERT INTO entries_new (id, title, body, formatted_body, path, format, date, created_at, modified_at, publish_at, status)
SELECT id, title, body, formatted_body, path, format, CAST(date AS TEXT), created_at, modified_at, publish_at, status
FROM entries;

-- 3. Drop old table and rename new table
DROP TABLE entries;
ALTER TABLE entries_new RENAME TO entries;

-- 4. Re-create indexes
CREATE INDEX index_date ON entries (date, path);
...

COMMIT;
2026年 01月 06日

content-visibility とか content とかレンダリングまわりの最適化専用のCSSプロパティが増えていて知らなかった。

まぁなんかやっぱりサーバサイド再実装すると Cache-Control 忘れたりとかシンタックスハイライトの CSS が一部ロードされてないとか、微妙に気付きにくのがいろいろある……

年末年始2週間ぐらいずっとギターサボった。モチベあがらんな~ フェードアウトせず一応練習再開したのはえらい……

おうちでフラフラ持ち歩く用に使っている M1 MacBook Air も、買ったのが2023年11月と丸2年経過してしまった。ヘビーなことしないので、これで別に困ってはいなくて必要十分なんだけど、昨今の事情もあるしちょっと心配だなあ。

メインPCは2022年11月に更新したけど DDR4。DDR5 で組む機会を逃してしまった。今のところ別に困ってはいないので壊れたりしなければしばらくは……

メインスマフォの Pixel 7 は2023年8月に買っていて (たぶんセールだったんだと思う。62000円ぐらいだった)、バッテリーの持ちが悪くなってきた以外には不満がないので、買い替えるほどでもないんだよなあ。というか Pixel 10 も Pixel 9 もそもそも高いよ (256GB で14万)、Pixel 9a はカメラがちょっと心配だしなあ。Pixel 7 は下取りに出しても1万ぐらいにしかならないので、買い替えるとしても予備機として持ってたほうがよさそう。

Pixel 7 のサポート期限は 米国の Google ストアでのデバイス販売開始日から 5 年間らしい。Pixel 7 は2022年10 月発売なので、2027年10月までは大丈夫。もうすぐやんけという感じはする

2026年 01月 05日

システムあたらしくしたのでどんどん使っていくぞ〜

ポケモンZAはスタッフロールみるところまでやりました。

Chemr に mcp を実装してみて、はじめて自動的に役に立った。具体的には Gemini CLI が golang の MarshalXML でクソみたいな推測でモノを言うから検索しろと言ったらちゃんと最速で必要なドキュメントに辿りついた。「CDATA にはするには独自実装するしかない」と言い張っていた (そんなことはなく構造体タグにオプション書くだけ)。

というか別に Google Search がちゃんとしてればこんなMCPいらないはずなんだよな。誰だか知らねークソエントリをトップに出して公式サイトの順位を下げる(あるいは一切表示しない)というクソサーチエンジンが悪い。

LLM に我々(誰)が必要な図を描かせる場合、今のところは「matplotlib で描け」と指示するのが良さそう。特に↑のように2つのグラフの関係が正確であってほしいときは強力。

こういうのとかも: https://github.com/cho45/Hanrangon/blob/main/docs/frontend_arch_diagram.png

ただデフォルトのままよりは、ちゃんと Noto Sans JP を入れて使ってもらったほうが数段上に見える。

Mermaid で描かせてたけど、それほど表現力が高くないので最初からコードで書かせたほうがいい。まず人間が伝えるためのプロンプトとして Mermaid はいいかもだけど、自然言語でも伝わるしなあ

1月1日にインターネットが数度不通になってやきもきした。

Gemini CLI が急に無応答になったと思いきや、ネット全般に繋がらない。今までよくあった DS-Lite の NAT 枯渇のような症状ではなく、IPv6 も全滅。一応 VDSL モデムとかルーターの再起動をしてみたけど、関係なし。まぁずっと安定してるしLEDも正常だった。

ということで、これはまたかつての固定回線異常を彷彿とさせるなと新年早々に気分が重く。

問合せ方法とかを調べていたら自動的に復旧したので良かった、と思いきやまた数分切断とかとなって嫌な感じだった。結局 NTT 側の障害だった (結構この障害情報も遅れて表示されるので、当日の夜にようやく原因がわかった)

とりあえず2日〜4日は大丈夫だった。

Makefile で複数のプロセスを起動させたい(けど同時に終了してほしい)とき以下のようなイディオムがあるのを知った。foreman とかないと面倒だと思ってたわ

run-with-fe-dev:
        trap 'kill 0' EXIT; \
        (cd admin-frontend && npm run dev) & \
        HANRANGON_FE_DEV=true go run -tags "$(GO_TAGS)" .

Makefile というかシェルの機能だけど、EXIT をトラップして kill 0 (プロセスグループにシグナルを送る = 起動したシェル以下のプロセス全部が死ぬ)

node あるなら concurrently が一番楽なのかな? 名前が長いよな…… あとは高級なやつだと mprocsがある? ほかにもあるんだろうか