• #日記
  • #開発環境
  • #Chrome拡張機能
  • #Vue.js
  • #リアルタイム要約
daily-log

2026年3月22日の開発日記

朝一番で make-diary を叩いたら日付がずれていた。そこからタイムゾーン修正に始まり、VOICEVOX音声サーバーの修正、worktree整理、リアルタイム会議要約、掛け算スライドショーの移植、Chrome拡張のSheets連携と、手を動かし続けた1日だった。

今日やったこと

1. 開発環境改善（タイムゾーン・VOICEVOX・worktree）

Windows Git Bashで TZ=Asia/Tokyo がGMTにフォールバックする問題を発見し、make-diaryコマンドを修正した。WindowsのシステムクロックはすでにJSTなので、TZ指定を外すだけで解決。VOICEVOX音声リレーサーバーはスタートアップの pythonw がPATH解決に失敗していたため python に書き換えた。残留worktree2つもmasterにマージして削除。

主な成果:

  • make-diaryのタイムゾーン修正（TZ=Asia/Tokyo → 素のdate）
  • 音声サーバーの自動起動修正（pythonw → python）
  • 2026-03-21記事の月別ディレクトリ統合、スクリーンショット削除
  • devcontainerでのgh auth設定、PR #1レビュー

詳細: Windows Git Bashのタイムゾーン罠とVOICEVOX自動起動修正

2. リアルタイム会議要約システム構築

Claude Codeの /loop + /summarize-meeting で、3分間隔の会議自動要約を実現した。devcontainerとWindows環境のパス差異、worktree内ファイルの更新がNuxtアプリに反映されない問題を順に片付け、約45分のロールプレイをリアルタイムで要約できた。

主な成果:

  • CronCreateで3分間隔の自動要約パイプライン構築
  • devcontainer環境判定ロジックの追加
  • 差分モード実装（処理済み行数を記録し新規分のみ処理）
  • minutes.jsonのリアルタイム更新でNuxtアプリ連携

詳細: Claude Codeでリアルタイム会議要約システムを構築した記録

3. 掛け算スライドショーのVue.js移植

React TSX製の面積図スライドショーをNuxt 3のVueページに変換した。CSSトランジションが効かない問題は、:keyにスライド番号を含めてDOM要素が毎回再生成されていたのが原因。安定した :key="meta.id" に変更して解決。

主な成果:

  • React → Vue.jsへの完全移植（scoped CSS使用）
  • P3ピースの回転アニメーション実装
  • CLAUDE.mdにworktree環境でのpnpm install注意を追記

詳細: React TSXの掛け算スライドショーをVue.jsに移植した記録

4. Chrome拡張機能のGoogle Sheets API連携

会計ソフトの明細取得Chrome拡張にSheets書き込み機能を追加した。OAuth2のクライアントIDタイプ（デスクトップ→Chrome アプリ）、API URL（www.googleapis.com → sheets.googleapis.com）で2回つまずいたが、Codexレビューでhost_permissions漏れを事前に潰せた。差分追記方式で既存データを壊さない設計にした。

主な成果:

  • Google Sheets API書き込み機能の実装
  • OAuth2認証（chrome.identity.getAuthToken）の設定
  • 差分追記ロジック（全列JSON.stringify一致で重複判定）
  • ページ遷移待機の改善（固定1.5秒 → 条件ベースポーリング）

詳細: Chrome拡張機能にGoogle Sheets API書き込みを追加する

今日の試行錯誤

#テーマ試したこと結果気づき
1タイムゾーンTZ=Asia/Tokyo date で日付取得失敗（GMTにフォールバック）MSYS2はzoneinfo未参照。Windowsクロックが既にJST
2音声サーバースタートアップで pythonw 起動失敗（PATH未解決でサイレント失敗）python ならPATHが通る
3会議要約worktree内のminutes.json更新Nuxtアプリに反映されず元リポジトリに直接書く必要あり
4会議要約devcontainer内でWindowsのログ参照/workspace/logs/ で見えたマウント済みだった
5Vueアニメーション:key="currentSlide-meta.id"CSSトランジション効かずDOM再生成が原因。:key="meta.id" で安定化
6OAuth2デスクトップ用クライアントIDbad client id エラーChrome拡張は「Chrome アプリ」タイプが必要
7Sheets APIwww.googleapis.com でfetch404正しくは sheets.googleapis.com
8明細取得固定1.5秒待機でページ遷移最後のアカウントで全明細取得フィルタ適用完了まで条件ベースで待機

今日の学び

  • Windows Git Bashの TZ 環境変数はMSYS2のzoneinfo非参照で機能しない。エラーが出ないぶん気づきにくい
  • Chrome拡張のOAuth2クライアントIDは「Chrome アプリ」タイプ専用。デスクトップ用を流用するとサイレントに失敗する
  • Vueのトランジションは「DOM要素を再利用する」が前提。:key でDOM再生成するとCSSトランジションが効かない
  • worktree内で更新したファイルは元リポジトリには反映されない。Nuxtアプリ連携時は元リポジトリのパスに直接書く

関連記事