• #日記
  • #UIデザイン
  • #Vue.js
  • #OGP
  • #Playwright
  • #リファクタリング
  • #e-Tax
daily-log

2026年1月10日の開発日記

今日は朝7時から14時まで集中的に開発。UIデザイン原則のGood/Badコンポーネント実装が中心で、並行してOGP生成方式の刷新、法人税XTX形式の技術調査も進めた。

今日やったこと

1. UIデザイン原則 Good/Badコンポーネント実装

8カテゴリー・49原則のGood/Bad比較コンポーネントを一気に実装した。複数セッションを並行で動かして非同期で進めた。

カテゴリー構成:

カテゴリー内容原則数
Aテキスト変更のみ5
B単一コンポーネント7
Cフォーム系7
Dレイアウト/配置系7
Eナビゲーション系6
Fインタラクション/アニメーション系6
Gモーダル/確認系5
H情報表示系6

実装のポイント:

  • Tailwind CSSを使わずscoped CSSで自己完結型コンポーネントに統一
  • GoodBadWrapper共通コンポーネントでレイアウトを標準化
  • 白背景ベースでダークモード依存を排除
  • Miller Columns UIで一覧性を確保

詳細: UIデザイン原則

2. agent-memoryスキルの作成

Claude Codeで対話の文脈を保存・再開するためのスキルを作成した。「記憶して」「思い出して」で発火する。

作成したファイル:

  • .claude/skills/agent-memory/SKILL.md - スキル定義
  • .claude/skills/agent-memory/memories/ - 記憶保存先

これでコンテキストがコンパクトされても作業を継続できるようになった。

3. OGP生成方式の刷新

Cloudflare Workerでの動的OGP生成から、Playwrightでスクリーンショットを撮影する静的生成方式に移行した。

移行理由:

  • VueコンポーネントのUIをそのままOGPに反映したい
  • Satoriの制約（対応CSSが限られる）を回避
  • ビルド時間に影響しない

実装内容:

  • OGプレビュー用ページ（/og-preview/design-principles/[category]/[no]）を作成
  • Playwrightで1200x630のスクリーンショットを撮影
  • 49枚の静的PNG画像を public/og/pages/design-principles/ に配置
  • OG Workerのdesign-principlesハンドラーを削除

詳細: PlaywrightでVueコンポーネントをOGP画像に変換する

4. OG Workerのモジュール分割

565行のindex.tsを機能別に分割した。

分割後の構造:

apps/workers/og/src/
├── index.ts           # 48行（ルーティングのみ）
├── types.ts           # 共通型定義
├── handlers/
│   ├── blog.ts
│   ├── japanese-quiz.ts
│   ├── coding-standards.ts
│   ├── jleague.ts
│   └── general.ts
└── utils/
    ├── signature.ts
    ├── sanitize.ts
    └── font.ts

詳細: OG Worker リファクタリング計画

5. 法人税 e-Tax/eLTAX技術調査

e-TaxのXTX形式（電子申告データ形式）の技術仕様を調査し、実装可能性を評価した。

主な発見:

  • XTX形式はXMLベース（UTF-8）
  • 国税庁からXMLスキーマが公開されており、TypeScript型への自動変換が可能
  • 法人税だけで7153ファイルのスキーマが存在
  • 電子署名・直接送信はe-Taxソフトに委譲し、XTX生成に集中するのが現実的

詳細:

6. UIデザイン原則ページのURL同期設計

Miller Columns UIを維持しながら、URLをパスベースで同期させる設計を策定した。

/design-principles          → デフォルト（A-11が選択された状態）
/design-principles/f/8      → カテゴリーF・原則8が選択された状態

実装完了した内容:

  • Nuxtのダイナミックルーティング（/design-principles/[[...slug]].vue）
  • 原則クリック・矢印ナビゲーションでのURL更新
  • ローカルストレージによる状態保持
  • シェアボタンの追加

詳細: UIデザイン原則ページのURL同期・シェア機能 実装計画

7. トラブルシューティング

いくつかの問題に遭遇して解決した。

pnpm monorepoでwranglerが見つからない:

Cloudflare Workers Routesと静的ファイルの競合:

スクロールできない問題:

  • design-principlesページでhtml, body { overflow: hidden }が設定されていた
  • :not(:global(html)):not(:global(body))でグローバル要素を除外して解決

8. コンテンツ管理の改善

非公開ドキュメントの運用ルール策定:

  • published: falseではなくinternal/ディレクトリに配置する方式に変更
  • SQLiteデータベースに含まれず、ビルド対象外になる

/update-frontmatterコマンドの作成:

  • 既存記事のfrontmatter更新用スラッシュコマンド
  • todoの進捗状況評価（active→done判定）も含む

今日の学び

  • 複数セッション並行開発が有効: カテゴリーA〜Hを並行で実装することで、1人でも高速に進められた
  • Playwrightは静的OGP生成に最適: VueコンポーネントをそのままスクリーンショットできるのでUIの再実装が不要
  • Workers Routesはワイルドカードを避ける: 静的ファイルまでWorkerを経由してしまうので、必要なパスだけ個別指定すべき
  • scoped CSSで自己完結型コンポーネント: コピー&ペーストで再利用可能になり、依存関係が明確になる

関連記事

UIデザイン原則

OGP・インフラ

法人税・税務

その他