メインコンテンツへスキップ
ともやすブログ〜Codeを諦めた自分が、AIでブログサイトを立ち上げられた訳〜

ともやすブログ運用 × AI初心者向け実践ガイド

運用レポート ・ 2/28/2026, 8:12:55 AM

週次運用レポート 2026-02-19 - 2026-02-25（テーマ切替・エディタ強化・RSS/Sitemap 一気通貫）

週次運用レポート 2026-02-19 - 2026-02-25（テーマ切替・エディタ強化・RSS/Sitemap 一気通貫）
目次（14件）
<!-- KPI_REPORT period_start: 2026-02-19 period_end: 2026-02-25 pv: 0 revenue_total_yen: 0 revenue_template_yen: 0 revenue_consulting_yen: 0 ai_minutes: 300 no_ai_estimated_minutes: 1200 -->

今週の結論

  • 一言サマリ: フロントエンド（テーマ切替・目次・エディタ）とインフラ（RSS・Sitemap・セキュリティ）を一気に整備し、ブログとしての基本品質が揃った。
  • 先週比: 先週はまとめ記事の段取り圧縮が中心だったが、今週はプロダクト自体の機能追加に集中。コミット数100超、AI時間300分で非AI想定1200分相当の作業を完了。削減率75%。

実践ログ（読者が真似できる形）

テーマ切替機能（Light / Warm / Night）

  • 試したこと:
    1. Supabase に site_settings テーブルを作成し、テーマ設定を保存
    2. CSS 変数でカラートークンを定義し、全コンポーネントからハードコード色を排除
    3. FOUC（テーマ適用前のちらつき）防止のため、inline script + ThemeSync コンポーネントを導入
    4. 管理画面にテーマ選択 UI を追加し、即時反映を実現
  • 使ったAgent入力:
    • 「Light / Warm / Night の3テーマを CSS 変数で切り替えられるようにして。FOUC 防止も入れて」
  • うまくいった点:
    • CSS 変数の一括置換で、30ファイル以上のハードコード色を1日で移行できた
    • 管理画面からワンクリックでテーマを切り替えられるようになった
  • 詰まった点:
    • 全ページのハードコード色を漏れなく変数化するのに、確認作業が膨大だった

エディタ強化（画像アップロード・フローティングツールバー・行番号）

  • 試したこと:
    1. Ctrl+V / ドラッグ&ドロップ / ボタンの3経路で画像アップロード → Markdown 自動挿入
    2. テキスト選択時にフローティングツールバーを表示
    3. 行番号ガターと行レベルアクション（削除・複製）を追加
    4. アイキャッチ画像のアップロード UI を新規投稿・編集画面の両方に追加
  • うまくいった点:
    • uploadImage() を共通関数にしたことで、本文画像もアイキャッチも同じ仕組みで統一できた
    • レビューで3つのバグ（プレースホルダ競合・alt固定値・drop順序）を事前に潰せた
  • 詰まった点:
    • Codex レビュースキルの改造に時間を多く費やした

RSS / Sitemap / セキュリティ

  • 試したこと:
    1. RSS フィード生成（GET/HEAD 対応、URL エスケープ処理）
    2. Sitemap の動的生成（全公開記事の URL を自動追加）
    3. セキュリティ修正3件（オープンリダイレクト防止・RLS admin UUID限定・Sitemap XMLエスケープ）
  • うまくいった点:
    • RSS と Sitemap がブログの基本インフラとして整った
    • セキュリティ修正を Codex レビューで発見し、公開前に対処できた

スクリプト・ツール整備

  • 試したこと:
    1. generate-infographic-svg.js（ステップ図・比較表・KPI の3タイプ対応）
    2. close-diary.js（git log から当日コミットを収集して日記に自動追記）
    3. Codex レビュースキルのサブエージェント対応リファクタリング
  • うまくいった点:
    • インフォグラフィック生成が Gemini 無料枠で動き、記事の視覚品質を上げられるようになった
    • 日記のクロージング作業が自動化された

困った具体例（3ケース）

ケース1

  • 状況: テーマ切替で全ページの色をCSS変数に移行するとき。
  • 困りごと: ハードコード色がどのファイルに残っているか把握しきれない。
  • 当時の影響: 一部ページでテーマが反映されず、目視で1ページずつ確認が必要だった。
  • my-blogでの解消: Agent に「残りのハードコード色を検索して」と指示し、一括検出。
  • 再発防止ルール: 新しいコンポーネントは最初からCSS変数を使い、ハードコード色を書かない。

ケース2

  • 状況: エディタで複数画像を連続アップロードしたとき。
  • 困りごと: プレースホルダが同じ文字列で、replace が誤った位置を差し替えた。
  • 当時の影響: 2枚目の画像が1枚目の位置に挿入され、本文が崩れた。
  • my-blogでの解消: Date.now() でプレースホルダを一意にする修正をレビューで発見。
  • 再発防止ルール: 動的に生成する文字列置換では必ず一意識別子を含める。

ケース3

  • 状況: Codex レビュースキルをサブエージェント対応にリファクタリングするとき。
  • 困りごと: スキルの構造変更に時間がかかり、本来の記事執筆に影響が出た。
  • 当時の影響: AI作業時間300分のうち、かなりの割合をスキル改造に費やした。
  • my-blogでの解消: リファクタリングは完了し、今後のレビュー効率は向上する見込み。
  • 再発防止ルール: ツール改善は計画的にタイムボックスし、記事執筆と混在させない。

数値の見方

  • PV: 0（アナリティクス未導入のため計測なし。次週以降に検討）
  • 収入（テンプレ/相談/合計）: 0 / 0 / 0（売上はまだ発生していない）
  • AI作業時間: 300分（テーマ切替・エディタ強化・RSS/Sitemap・スクリプト整備・Codexレビュー改造）
  • 非AI想定時間: 1200分（同等の機能を手作業で実装した場合の見積もり）
  • 削減時間: 900分（15時間）
  • 削減率: 75%（900 / 1200）

失敗と改善

  • 失敗: Codex レビュースキルの改造に予想以上の時間を費やし、記事執筆のペースが落ちた。
  • 原因: リファクタリングの範囲を事前に区切らず、作業中にスコープが広がった。
  • 次回の対策: ツール改善はタイムボックス（最大2時間）を設け、超過したら翌日に回す。

次の1歩

  1. アナリティクス導入を検討し、次週からPVを実測で記録する。
  2. 公開済み記事のテーマ反映を最終確認し、ハードコード色の残りをゼロにする。
  3. 記事公開ペースを週2本以上に安定させる。

CTA

  • 実践したい人: /reports と Agent実践 カテゴリを見る
  • テンプレが必要な人: /templates を見る
  • 個別相談したい人: /contact から申し込む