なぜClaude Codeのセッションログを管理するのか？

Claude Codeでの開発セッションには、通常のチャット以上の価値があります：

• 実装の全プロセス: 設計から実装、テスト、デバッグまでの完全な記録
• コンテキスト付きの会話: ファイル編集、コマンド実行の履歴と結果
• 問題解決の軌跡: エラーとその解決方法の詳細な記録
• アーキテクチャ判断: 技術選定や設計判断の理由
• ベストプラクティス: Claude Codeとの協働で得られた知見

これらを適切に管理することで：

• ✅ プロジェクトの開発履歴として参照できる
• ✅ 同じ問題に遭遇した時の解決策を即座に見つけられる
• ✅ チーム内でClaude Code活用のノウハウを共有できる
• ✅ 技術ブログやドキュメントの素材になる
• ✅ 開発プロセスの振り返りと改善に活用できる

Amazon検索[本 Python]

以前のツールとの違い

以前の記事で紹介したClaude Chat Exporterは、claude.aiのWebチャット用でした。今回の拡張版では、以下の新機能を追加しています：

新機能一覧

Claude CodeのJSONL形式とは？

Claude Codeは各セッションのログを .jsonl（JSON Lines）形式で保存します：

C:\Users\<ユーザー名>\.claude\sessions\<セッションID>\transcript.jsonl

各行が独立したJSONオブジェクトで、以下のような情報が含まれます：

{"type":"user","sessionId":"abc123...","message":{"role":"user","content":"関数を作成して"}}
{"type":"assistant","sessionId":"abc123...","message":{"role":"assistant","content":"承知しました..."}}

この形式は機械的な処理には適していますが、人間が読むには不向きです。

ツールの全機能

1. 複数ファイル一括処理

exporter.py にファイルを複数ドロップ → 一括処理

# コマンドライン
python exporter.py file1.jsonl file2.json file3.jsonl

# ダイアログ
python exporter.py → 複数ファイル選択可能

2. JSON/JSONL両対応

• JSON: claude.aiのWebチャットエクスポート（conversations.json）
• JSONL: Claude Codeのセッションログ（transcript.jsonl）

3. 賢いフィルタリング

自動で不要なメッセージを除外：

• システムメッセージ（isMeta: true）
• ツール実行結果（tool_resultタイプ）
• コンテキスト情報のみのメッセージ

4. セッション識別

Claude Codeのセッションログでは：

• セッションIDの先頭8文字を抽出
• フォルダ名も含めて識別
• ファイル名: <フォルダ名>_chat_<セッションID>.md

例：my-project_chat_abc12345.md

5. 安全なファイル名生成

Windows/Mac/Linuxで使えない文字を自動変換：

• \ / : * ? " < > | → _

使い方

ステップ1: Claude Codeのセッションログを見つける

# Windowsの場合
C:\Users\<ユーザー名>\.claude\sessions\

# macOS/Linuxの場合
~/.claude/sessions/

各セッションフォルダ内に transcript.jsonl があります。

ステップ2: エクスポーターを配置

# フォルダ作成
mkdir C:\my-local\my-python\claude_chat_exporter
cd C:\my-local\my-python\claude_chat_exporter

# スクリプト配置（後述のコードを保存）

Windows ユーザー向け: ドラッグ&ドロップで実行するために、exporter.bat も作成してください：

@echo off
python "%~dp0exporter.py" %*
pause

このバッチファイルを exporter.py と同じフォルダに保存することで、ファイルをドラッグ&ドロップして実行できるようになります。

ステップ3: 実行

方法1: ドラッグ&ドロップ（一番簡単！）

Windows の場合: .py ファイルへのドラッグ&ドロップは関連付けの問題で動作しないことがあります。その場合は exporter.bat（後述）を使用してください。

1. 必要な transcript.jsonl ファイルを複数選択
2. exporter.bat（Windows）または exporter.py（Mac/Linux）にドラッグ&ドロップ
3. 自動処理完了！

方法2: ダイアログ

python exporter.py

ファイル選択ダイアログで複数のJSON/JSONLファイルを選択

方法3: コマンドライン

# 単一ファイル
python exporter.py C:\Users\user\.claude\sessions\abc123\transcript.jsonl

# 複数ファイル
python exporter.py session1\transcript.jsonl session2\transcript.jsonl

# ワイルドカード（PowerShell）
python exporter.py (Get-ChildItem -Path "C:\Users\user\.claude\sessions\*\transcript.jsonl" -Recurse).FullName

ステップ4: 出力確認

# 出力先
output\20260215_100000\
├── session1_chat_abc12345.md
├── session2_chat_def67890.md
└── project-x_chat_ghi11111.md

ソースコード全文

exporter.py

import json
import sys
import tkinter.filedialog as fd
from datetime import datetime
from pathlib import Path
import re


def clean_system_tags(text):
    """Claude Codeのシステムタグを除去"""
    # システムタグのパターン（開始タグと終了タグのペア）
    paired_tags = [
        r'<ide_selection>.*?</ide_selection>',
        r'<ide_opened_file>.*?</ide_opened_file>',
        r'<system-reminder>.*?</system-reminder>',
        r'<command-name>.*?</command-name>',
        r'<command-message>.*?</command-message>',
        r'<command-args>.*?</command-args>',
        r'<local-command-caveat>.*?</local-command-caveat>',
        r'<local-command-stdout>.*?</local-command-stdout>',
    ]

    # 各パターンを除去（DOTALLフラグで改行を含む）
    for pattern in paired_tags:
        text = re.sub(pattern, '', text, flags=re.DOTALL)

    # 連続する空行を1つにまとめる
    text = re.sub(r'\n{3,}', '\n\n', text)

    return text.strip()


def process_jsonl_file(file_path, output_dir):

    """JSONL形式（Claude Codeのログ）の処理"""
    messages = []
    session_id = None

    # 各行を読み込んでパース
    with open(file_path, 'r', encoding='utf-8') as f:
        for line in f:
            line = line.strip()
            if not line:
                continue

            try:
                entry = json.loads(line)

                # セッションID取得（タイトル用）
                if session_id is None and 'sessionId' in entry:
                    session_id = entry['sessionId']

                # ユーザーまたはアシスタントのメッセージのみ抽出
                if entry.get('type') in ['user', 'assistant'] and 'message' in entry:
                    msg = entry['message']

                    # isMeta=trueのメッセージはスキップ（システムメッセージ）
                    if entry.get('isMeta', False):
                        continue

                    role = msg.get('role', '')
                    content = msg.get('content', '')

                    # contentが配列形式の場合
                    if isinstance(content, list):
                        # tool_resultはスキップ（Task実行結果など）
                        if any(item.get('type') == 'tool_result' for item in content):
                            continue

                        # textタイプのコンテンツのみ抽出（user/assistant共通）
                        text_parts = [item.get('text', '') for item in content if item.get('type') == 'text']
                        content = '\n\n'.join(text_parts)

                    # システムタグを除去
                    content = clean_system_tags(content) if isinstance(content, str) else content

                    if content and role:
                        # roleを表示形式に変換
                        sender = 'human' if role == 'user' else 'assistant'
                        messages.append({'sender': sender, 'text': content})
            except json.JSONDecodeError:
                continue

    # メッセージが1つもない場合はスキップ
    if not messages:
        print(f"スキップ: メッセージが含まれていません ({file_path.name})")
        return

    # フォルダ名とタイトル生成
    folder_name = file_path.parent.name
    if session_id:
        title = f"chat_{session_id[:8]}"
    else:
        title = file_path.stem

    # ファイル名に使えない文字を除去（フォルダ名_タイトル.md）
    safe_folder_name = re.sub(r'[\\/:*?"<>|]', '_', folder_name)
    safe_title = re.sub(r'[\\/:*?"<>|]', '_', title)
    filename = f"{safe_folder_name}_{safe_title}.md"

    # Markdownファイルに出力
    with open(output_dir / filename, 'w', encoding='utf-8') as f:
        f.write(f"# {safe_folder_name}_{safe_title}\n\n")

        for m in messages:
            f.write(f"**[{m['sender']}]**:\n\n{m['text']}\n\n")

    print(f"処理完了: {filename}")


def process_json_file(file_path, output_dir):
    """JSON形式（conversations.json）の処理"""
    try:
        d = json.load(open(file_path, 'r', encoding='utf-8'))
    except:
        d = json.load(open(file_path, 'r', encoding='cp932'))

    # チャット毎にファイル出力
    for i, c in enumerate(d):
        # タイトル取得（なければ chat_N）
        title = c.get('name', f'chat_{i}')

        # フォルダ名を取得
        folder_name = file_path.parent.name
        safe_folder_name = re.sub(r'[\\/:*?"<>|]', '_', folder_name)
        safe_title = re.sub(r'[\\/:*?"<>|]', '_', title)
        filename = f"{safe_folder_name}_{safe_title}.md"

        # Markdownファイルに出力
        with open(output_dir / filename, 'w', encoding='utf-8') as f:
            # タイトルを見出しとして出力
            f.write(f"# {safe_folder_name}_{safe_title}\n\n")

            # メッセージを順番に出力
            for m in c.get('chat_messages', []):
                f.write(f"**[{m['sender']}]**:\n\n{m['text']}\n\n")  # human または assistant

        print(f"処理完了: {filename}")


def main():
    # 出力フォルダ作成（pyファイルと同じ場所/output/yyyymmdd_hh24miss）
    output_dir = Path(__file__).parent / 'output' / datetime.now().strftime('%Y%m%d_%H%M%S')
    output_dir.mkdir(parents=True, exist_ok=True)

    # ファイルパスの取得（コマンドライン引数 or ダイアログ）
    if len(sys.argv) > 1:
        # コマンドライン引数またはドラッグ&ドロップから取得
        file_paths = [Path(arg) for arg in sys.argv[1:] if Path(arg).exists()]
        if not file_paths:
            print("エラー: 有効なファイルパスが指定されていません")
            input("Enterキーを押して終了...")
            return
    else:
        # ダイアログで複数ファイル選択
        paths = fd.askopenfilenames(filetypes=[("JSON/JSONL files", "*.json;*.jsonl")])
        if not paths:
            return
        file_paths = [Path(p) for p in paths]

    # 各ファイルを処理
    for file_path in file_paths:
        print(f"\n処理中: {file_path.name}")

        if file_path.suffix == '.jsonl':
            process_jsonl_file(file_path, output_dir)
        elif file_path.suffix == '.json':
            process_json_file(file_path, output_dir)
        else:
            print(f"スキップ: 未対応のファイル形式 ({file_path.name})")

    print(f"\n全ての処理が完了しました")
    print(f"出力先: {output_dir}")
    input("\nEnterキーを押して終了...")


if __name__ == "__main__":
    main()

exporter.bat（Windows用）

@echo off
python "%~dp0exporter.py" %*
pause

説明:

• %~dp0: バッチファイルのあるフォルダパス（末尾に\付き）
• %*: ドラッグ&ドロップされたすべてのファイルパス
• pause: 実行後にウィンドウを閉じずに結果を確認できる

コードの詳細解説

1. JSONL処理のコア部分

def process_jsonl_file(file_path, output_dir):
    messages = []
    session_id = None

    with open(file_path, 'r', encoding='utf-8') as f:
        for line in f:
            # 各行をJSONとしてパース
            entry = json.loads(line)

ポイント:

• JSONL形式は1行=1JSONオブジェクト
• json.loads()で各行を個別にパース
• セッション全体で必要な情報を蓄積

2. 賢いフィルタリング

# システムメッセージを除外
if entry.get('isMeta', False):
    continue

# ツール実行結果を除外
if isinstance(content, list):
    if any(item.get('type') == 'tool_result' for item in content):
        continue

効果:

• 人間とアシスタントの会話のみを抽出
• ファイル編集やコマンド実行の中間結果をスキップ
• 読みやすい会話ログを生成

3. システムタグの除去

def clean_system_tags(text):
    """Claude Codeのシステムタグを除去"""
    paired_tags = [
        r'<ide_selection>.*?</ide_selection>',
        r'<system-reminder>.*?</system-reminder>',
        # ... その他のタグ
    ]

    for pattern in paired_tags:
        text = re.sub(pattern, '', text, flags=re.DOTALL)

    return text.strip()

必要性:

• Claude Codeのログには <ide_selection> や <system-reminder> などのシステムタグが含まれる
• これらは内部処理用の情報で、会話ログには不要
• 正規表現で自動除去することで、純粋な会話内容だけを抽出

4. 配列形式のコンテンツ処理

if isinstance(content, list):
    # textタイプのコンテンツのみ抽出（user/assistant共通）
    text_parts = [item.get('text', '') for item in content if item.get('type') == 'text']
    content = '\n\n'.join(text_parts)

# システムタグを除去
content = clean_system_tags(content) if isinstance(content, str) else content

Claude Codeの特性:

• user/assistantともに配列形式でメッセージが格納されることがある
• ツール使用の説明と結果が分かれて格納される
• textタイプのみを抽出して結合することで、会話部分を取得
• <ide_selection>や<system-reminder>などのシステムタグを自動除去

4. セッション識別

# セッションID取得
if session_id is None and 'sessionId' in entry:
    session_id = entry['sessionId']

# フォルダ名とセッションIDで識別
folder_name = file_path.parent.name
title = f"chat_{session_id[:8]}"
filename = f"{safe_folder_name}_{safe_title}.md"

実用的な識別:

• セッションIDだけでは識別困難
• フォルダ名（プロジェクト名など）を含めることで識別性向上
• 先頭8文字のみ使用して簡潔に

5. 複数ファイル処理

if len(sys.argv) > 1:
    # コマンドライン引数またはドラッグ&ドロップ
    file_paths = [Path(arg) for arg in sys.argv[1:] if Path(arg).exists()]
else:
    # ダイアログで複数選択
    paths = fd.askopenfilenames(filetypes=[("JSON/JSONL files", "*.json;*.jsonl")])

利便性:

• 複数の入力方法に対応
• ドラッグ&ドロップで直感的に処理
• スクリプト化も可能

出力例

入力: transcript.jsonl（Claude Codeセッション）

{"type":"user","sessionId":"abc123def456","message":{"role":"user","content":"Pythonで素数判定関数を作成して"}}
{"type":"assistant","sessionId":"abc123def456","message":{"role":"assistant","content":[{"type":"text","text":"素数判定関数を作成します..."}]}}

出力: my-project_chat_abc12345.md

# my-project_chat_abc12345

**[human]**:

Pythonで素数判定関数を作成して

**[assistant]**:

素数判定関数を作成します...

実際の使用場面

1. プロジェクト開発の記録

# プロジェクトフォルダのセッションを一括エクスポート
cd C:\Users\user\.claude\sessions
python exporter.py my-web-app\transcript.jsonl api-server\transcript.jsonl

活用方法:

• プロジェクト毎の開発履歴を整理
• 設計判断の理由を後から確認
• 新メンバーへのオンボーディング資料

2. トラブルシューティングの記録

エラー解決のセッションを保存：

python exporter.py bug-fix-session\transcript.jsonl

活用方法:

• 同じエラーが再発した時の解決策を即座に参照
• チーム内でトラブル事例を共有
• ナレッジベースに追加

3. 学習記録

新しい技術を学んだセッションを整理：

# Claude Codeで学習したセッションをまとめてエクスポート
python exporter.py react-learning\transcript.jsonl typescript-basics\transcript.jsonl

活用方法:

• 学習過程を振り返る
• 理解した内容を復習
• ブログ記事の素材

4. 週次レビュー

1週間のセッションを一括処理：

# PowerShellで過去7日間のセッションを抽出
$sessions = Get-ChildItem -Path "C:\Users\user\.claude\sessions\*\transcript.jsonl" -Recurse |
            Where-Object { $_.LastWriteTime -gt (Get-Date).AddDays(-7) }
python exporter.py $sessions.FullName

活用方法:

• 週の振り返りMTG資料
• 進捗報告の補助資料
• 学んだことの整理

5. バックアップと保存

定期的なバックアップスクリプト：

# バッチファイル例（backup_sessions.bat）
@echo off
set OUTPUT_DIR=D:\claude_backups\%date:~0,4%%date:~5,2%%date:~8,2%
mkdir %OUTPUT_DIR%
python exporter.py C:\Users\user\.claude\sessions\*\transcript.jsonl
move output\* %OUTPUT_DIR%

応用アイデア

1. 自動分類スクリプト

# タグ別にフォルダ分け
import shutil

tag_keywords = {
    'Python': ['python', 'django', 'flask'],
    'JavaScript': ['javascript', 'react', 'node'],
    'Database': ['sql', 'postgres', 'mysql'],
}

for md_file in output_dir.glob('*.md'):
    content = md_file.read_text(encoding='utf-8')

    for tag, keywords in tag_keywords.items():
        if any(kw in content.lower() for kw in keywords):
            tag_dir = output_dir / tag
            tag_dir.mkdir(exist_ok=True)
            shutil.move(md_file, tag_dir / md_file.name)
            break

2. 統計情報の抽出

# セッションの統計
def analyze_session(file_path):
    with open(file_path, 'r', encoding='utf-8') as f:
        content = f.read()

    human_msgs = content.count('**[human]**')
    assistant_msgs = content.count('**[assistant]**')
    total_chars = len(content)

    print(f"{file_path.name}:")
    print(f"  人間: {human_msgs}回, Claude: {assistant_msgs}回")
    print(f"  総文字数: {total_chars}")

3. Obsidian/Notion連携

Markdown出力なので、そのままObsidianやNotionにインポート可能：

# Obsidian vaultにコピー
cp output/20260215_100000/*.md ~/ObsidianVault/Claude-Sessions/

4. 全文検索インデックス

# 簡易検索機能
import glob

def search_sessions(keyword, output_dir):
    results = []
    for md_file in Path(output_dir).glob('**/*.md'):
        content = md_file.read_text(encoding='utf-8')
        if keyword.lower() in content.lower():
            results.append(md_file)
    return results

# 使用例
found = search_sessions('素数判定', 'output/20260215_100000')
for f in found:
    print(f"見つかりました: {f.name}")

トラブルシューティング

エラー1: JSONDecodeError

原因: JSONL形式が壊れている（途中で保存が中断された等）

解決方法:

# スクリプトは自動でスキップするため、通常は問題なし
except json.JSONDecodeError:
    continue  # 壊れた行はスキップ

エラー2: セッションIDが見つからない

症状: ファイル名が <フォルダ名>_transcript.md になる

原因: セッションIDが記録されていない（古い形式等）

対処: ファイル名（transcript）で識別されるため問題なし

エラー3: メッセージが含まれていません

原因: ツール実行結果のみでユーザー/アシスタントの会話がない

対処: これは正常な動作（処理がスキップされる）

エラー4: UnicodeDecodeError

原因: 特殊な文字が含まれている

解決方法:

# open時にerrors='ignore'を追加
with open(file_path, 'r', encoding='utf-8', errors='ignore') as f:

まとめ

この拡張版Claude Chat Exporterを使えば：

• ✅ Claude Codeの全セッションを一括でMarkdown化
• ✅ 読みやすい形式で長期保存・検索可能に
• ✅ プロジェクトの開発履歴として資産化
• ✅ チーム内でのナレッジ共有が簡単に
• ✅ 従来のWebチャットにも引き続き対応

Claude Codeを使えば使うほど、貴重な知的財産が蓄積されます。このツールで効率的に管理・活用して、開発の生産性を更に高めましょう。

Amazon検索[本 Python]

関連記事

以前のバージョン（Webチャット専用）の解説記事：

Claudeチャットを資産化！エクスポートデータを整形するPythonツール

Claudeとの会話履歴は貴重な知的財産です。しかし、エクスポートしたJSONファイルは読みにくく、そのままでは活用しづらいのが現状です。この記事では、ClaudeのエクスポートデータをMarkdown形式に整形し、チャット毎に分割して保存...

caymezon.com

2026.01.31

GitHubでの管理

このツールをGitHubで管理する方法：

cd C:\my-local\my-python\claude_chat_exporter

# .gitignoreを作成
cat > .gitignore << 'EOF'
# 出力ファイル
output/
*.json
*.jsonl

# Python
__pycache__/
*.pyc

# エディタ
.vscode/
.idea/
EOF

# Git初期化
git init
git add exporter.py .gitignore
git commit -m "feat: Claude Code session exporter"

# GitHubにプッシュ（GitHub CLI使用）
gh repo create claude-chat-exporter --private --source=. --push

GitHub連携の詳細は以下の記事を参照：

GitHub CLI完全ガイド：コマンドラインでGitHub操作を効率化

GitHub CLI（ghコマンド）は、GitHubの操作をコマンドラインで完結できる公式ツールです。ブラウザを開かずに、リポジトリ作成からIssue管理、Pull Request作成まで、すべてターミナルで行えます。この記事では、実際の導...

caymezon.com

2026.01.31

ご意見・改善提案があれば、ぜひコメントでお知らせください！

The post Claude Codeセッションログを一括MD化！拡張版エクスポーターで開発記録を資産化 first appeared on CayTech Lab.

なぜClaudeチャットを管理するのか？

Claudeとの会話には、以下のような価値があります：

• 問題解決の過程: エラー解決やトラブルシューティングの記録
• 学習内容: 新しい技術や概念の理解プロセス
• アイデアの発展: プロジェクトの企画や設計の議論
• コードレビュー: 実装の改善提案や最適化の議論

これらを適切に管理することで：

• 後から見返して復習できる
• 同じ問題に再度直面したときに参照できる
• チーム内で知識を共有できる
• ブログ記事や技術文書の素材になる

Claudeチャットのエクスポート方法

ステップ1: Claudeチャット画面を開く

https://claude.ai にアクセスし、エクスポートしたい会話を開きます。

ステップ2: エクスポートメニューを表示

画面右上の「︙」（3点リーダー）をクリックし、「Export chat」を選択します。

ステップ3: JSON形式でダウンロード

「Download as JSON」を選択すると、JSONファイルがダウンロードされます。

ファイル名例: claude_conversations_2026-01-31.json

エクスポートデータの構造

エクスポートしたJSONファイルは以下のような構造になっています：

[
  {
    "uuid": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "name": "チャットのタイトル",
    "created_at": "2026-01-31T10:00:00.000Z",
    "updated_at": "2026-01-31T12:00:00.000Z",
    "chat_messages": [
      {
        "uuid": "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy",
        "text": "メッセージ内容",
        "sender": "human",
        "created_at": "2026-01-31T10:00:00.000Z"
      },
      {
        "uuid": "zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz",
        "text": "Claudeの返答",
        "sender": "assistant",
        "created_at": "2026-01-31T10:01:00.000Z"
      }
    ]
  }
]

このままでは読みにくいため、整形ツールが必要です。

Pythonツールの概要

機能

1. ファイル選択ダイアログ: GUIでJSONファイルを選択
2. エンコーディング自動判定: UTF-8/Shift-JIS両対応
3. タイムスタンプ付きフォルダ作成: output/yyyymmdd_hhmmss/形式
4. チャット毎に分割: 各チャットを個別のMarkdownファイルに出力
5. ファイル名の安全化: 使えない文字を自動置換

プロジェクト構成

C:\my-local\my-python\
├── claude_chat_exporter/
│   ├── exporter.py           # メインスクリプト
│   ├── README.md             # 使い方説明
│   └── output/               # 出力先（自動生成）
│       └── 20260131_120000/  # タイムスタンプフォルダ
│           ├── チャット1.md
│           ├── チャット2.md
│           └── ...
├── .gitignore
├── README.md
└── requirements.txt

ソースコード

exporter.py

import json
import tkinter.filedialog as fd
from datetime import datetime
from pathlib import Path
import re

p = fd.askopenfilename(filetypes=[("JSON files", "*.json")])
if not p: exit()

# JSONファイル読み込み
try:
    d = json.load(open(p, 'r', encoding='utf-8'))
except:
    d = json.load(open(p, 'r', encoding='cp932'))

# 出力フォルダ作成（pyファイルと同じ場所/output/yyyymmdd_hh24miss）
output_dir = Path(__file__).parent / 'output' / datetime.now().strftime('%Y%m%d_%H%M%S')
output_dir.mkdir(parents=True, exist_ok=True)

# チャット毎にファイル出力
for i, c in enumerate(d):
    # タイトル取得（なければ chat_N）
    title = c.get('name', f'chat_{i}')
    
    # ファイル名に使えない文字を除去
    filename = re.sub(r'[\\/:*?"<>|]', '_', title) + '.md'
    
    # Markdownファイルに出力
    with open(output_dir / filename, 'w', encoding='utf-8') as f:
        # タイトルを見出しとして出力
        f.write(f"# {title}\n\n")
        
        # メッセージを順番に出力
        for m in c.get('chat_messages', []):
            f.write(f"**[{m['sender']}]**:\n\n{m['text']}\n\n")  # human または assistant

print(f"出力完了: {output_dir}")

.gitignore

# Python
__pycache__/
*.py[cod]
*$py.class
*.so
.Python
venv/
.venv/

# 出力ファイル
*/output/
*.json

# IDE
.vscode/
.idea/

# OS
.DS_Store
Thumbs.db

README.md

# Claude Chat Exporter

ClaudeのエクスポートJSONを整形してMarkdownファイルに出力

## 使い方

```bash
python exporter.py

1. ファイル選択ダイアログでJSONファイルを選択
2. output/yyyymmdd_hhmmss/にチャット毎のmdファイルが出力される

出力例

output/
└── 20260131_120000/
    ├── GitHubリポジトリ作成手順.md
    ├── Python開発環境構築.md
    └── VSCodeデバッグ使い方.md

## 使い方

### 1. プロジェクトフォルダ作成

```bash
# フォルダ作成
mkdir C:\my-local\my-python\claude_chat_exporter
cd C:\my-local\my-python\claude_chat_exporter

# Pythonスクリプト作成
# 上記のexporter.pyの内容をコピー

VSCodeで exporter.py を作成し、上記のコードを貼り付けます。

2. Pythonスクリプトを実行

VSCodeから実行

1. exporter.py を開く
2. 右上の「▶」ボタンをクリック（または F5 でデバッグ実行）
3. ファイル選択ダイアログが表示される

コマンドラインから実行

cd C:\my-local\my-python\claude_chat_exporter
python exporter.py

3. JSONファイルを選択

ファイル選択ダイアログで、ClaudeからエクスポートしたJSONファイルを選択します。

4. 出力確認

# 出力フォルダを確認
dir output\20260131_120000

各チャットが個別のMarkdownファイルとして出力されます。

出力例

出力ファイル: GitHubリポジトリ作成手順.md

# GitHubリポジトリ作成手順

**[human]**: 

GitHubにリポジトリを作成する方法を教えて

**[assistant]**: 

GitHubにリポジトリを作成する方法は2つあります...

**[human]**: 

GitHub CLIを使った方法を詳しく教えて

**[assistant]**: 

GitHub CLIを使うと、コマンドラインで簡単にリポジトリを作成できます...

コードの解説

ファイル選択ダイアログ

p = fd.askopenfilename(filetypes=[("JSON files", "*.json")])
if not p:
    exit()

• tkinter.filedialogを使用してGUIでファイル選択
• .jsonファイルのみフィルタ
• キャンセル時は終了

エンコーディング自動判定

try:
    d = json.load(open(p, 'r', encoding='utf-8'))
except:
    d = json.load(open(p, 'r', encoding='cp932'))

• まずUTF-8で読み込みを試行
• 失敗したらShift-JIS（cp932）で再試行
• 日本語環境での互換性確保

タイムスタンプ付きフォルダ作成

output_dir = Path(__file__).parent / 'output' / datetime.now().strftime('%Y%m%d_%H%M%S')
output_dir.mkdir(parents=True, exist_ok=True)

• Path(__file__).parent: スクリプトと同じ場所
• datetime.now().strftime('%Y%m%d_%H%M%S'): 20260131_120000形式
• parents=True: 親フォルダも自動作成
• exist_ok=True: 既存フォルダでもエラーにしない

ファイル名の安全化

filename = re.sub(r'[\\/:*?"<>|]', '_', title) + '.md'

• Windowsで使えない文字（\ / : * ? " < > |）を_に置換
• .md拡張子を追加

Markdown形式で出力

f.write(f"# {title}\n\n")
for m in c.get('chat_messages', []):
    f.write(f"**[{m['sender']}]**:\n\n{m['text']}\n\n")

• タイトルは # タイトル 形式（見出し1）
• 送信者は **[sender]**: 形式（太字）
• メッセージ間は空行で区切る

VSCodeでのデバッグ実行

初回実行時の設定

1. F5 キーを押す
2. 「Python Debugger」を選択
3. 「Pythonファイル 現在アクティブなPythonファイルをデバッグする」を選択

デバッグの活用

ブレークポイントを設定して動作を確認：

# ①ファイルが読めたか確認
d = json.load(...)  # ←ここに●

# ②チャット数とタイトル確認
for i, c in enumerate(d):  # ←ここに●
    title = c.get('name', f'chat_{i}')
    
    # ③ファイル名が正しいか確認
    filename = re.sub(...)  # ←ここに●

ブレークポイント設定方法：

• 行番号の左側をクリック → 赤丸が表示
• F10: 次の行へ（ステップオーバー）
• F11: 関数の中に入る（ステップイン）
• F5: 続行

GitHub連携

このツールをGitHubで管理する方法は、以下の記事で詳しく解説しています：

• GitHubリポジトリ作成の2つの方法：GUI vs CLI徹底比較

GitHubリポジトリ作成の2つの方法：GUI vs CLI徹底比較

GitHubでリポジトリを作成する方法は大きく分けて2つあります。ブラウザを使ったGUI操作と、GitHub CLIを使ったコマンドライン操作です。この記事では、実際のPythonプロジェクトを例に、両方の方法を詳しく解説します。前提条件G...

caymezon.com

2026.01.31

• GitHub CLI完全ガイド：コマンドラインでGitHub操作を効率化

GitHub CLI完全ガイド：コマンドラインでGitHub操作を効率化

GitHub CLI（ghコマンド）は、GitHubの操作をコマンドラインで完結できる公式ツールです。ブラウザを開かずに、リポジトリ作成からIssue管理、Pull Request作成まで、すべてターミナルで行えます。この記事では、実際の導...

caymezon.com

2026.01.31

クイックスタート

cd C:\my-local\my-python

# Git初期化
git init
git add .
git commit -m "Initial commit: Add claude_chat_exporter"

# GitHubにプッシュ（GitHub CLI使用）
gh repo create my-python --private --source=. --push

応用例

1. バッチ処理

複数のJSONファイルを一度に処理：

import glob

# すべてのJSONファイルを取得
json_files = glob.glob("exports/*.json")

for json_file in json_files:
    # 処理ロジック
    ...

2. カテゴリ分類

チャットタイトルに基づいて自動分類：

# タイトルにキーワードが含まれていたらフォルダ分け
if "Python" in title:
    category_dir = output_dir / "Python"
elif "GitHub" in title:
    category_dir = output_dir / "GitHub"
else:
    category_dir = output_dir / "Others"

category_dir.mkdir(exist_ok=True)

3. 日付フィルタリング

特定期間のチャットのみ抽出：

from datetime import datetime, timedelta

# 過去7日間のチャットのみ
cutoff_date = datetime.now() - timedelta(days=7)

for c in d:
    created = datetime.fromisoformat(c['created_at'].replace('Z', '+00:00'))
    if created > cutoff_date:
        # 処理
        ...

トラブルシューティング

エラー1: ModuleNotFoundError: No module named 'tkinter'

原因: Pythonインストール時にtkinterが含まれていない

解決方法:

• Windows: Python再インストール時に「tcl/tk and IDLE」にチェック
• macOS: brew install python-tk
• Linux: sudo apt install python3-tk

エラー2: UnicodeDecodeError

原因: JSONファイルのエンコーディングが想定外

解決方法: コードが自動判定するため通常は発生しません。発生した場合は以下を試してください：

# エンコーディングを明示的に指定
d = json.load(open(p, 'r', encoding='utf-8-sig'))  # BOM付きUTF-8

エラー3: 出力フォルダが作成されない

原因: 権限不足

解決方法:

• 管理者権限でVSCodeを実行
• または、書き込み可能なフォルダに移動

まとめ

このツールを使うことで：

• ✅ Claudeチャットを読みやすいMarkdown形式で保存
• ✅ チャット毎に分割して管理しやすく
• ✅ タイムスタンプ付きで履歴管理
• ✅ GitHubで バージョン管理

Claudeとの会話は貴重な知的財産です。このツールを使って、効率的に管理・活用してください。

関連記事

• GitHubリポジトリ作成の2つの方法：GUI vs CLI徹底比較

GitHubリポジトリ作成の2つの方法：GUI vs CLI徹底比較

GitHubでリポジトリを作成する方法は大きく分けて2つあります。ブラウザを使ったGUI操作と、GitHub CLIを使ったコマンドライン操作です。この記事では、実際のPythonプロジェクトを例に、両方の方法を詳しく解説します。前提条件G...

caymezon.com

2026.01.31

• GitHub CLI完全ガイド：コマンドラインでGitHub操作を効率化

GitHub CLI完全ガイド：コマンドラインでGitHub操作を効率化

GitHub CLI（ghコマンド）は、GitHubの操作をコマンドラインで完結できる公式ツールです。ブラウザを開かずに、リポジトリ作成からIssue管理、Pull Request作成まで、すべてターミナルで行えます。この記事では、実際の導...

caymezon.com

2026.01.31

The post Claudeチャットを資産化！エクスポートデータを整形するPythonツール first appeared on CayTech Lab.

はじめに

VSCodeでMarkdownを書いて、git push するだけでWordPressに自動投稿される――

そんな夢のようなシステムを作ろうと、GitHub Actions連携に挑戦しました。

しかし、待っていたのは 403 Forbiddenエラーとの長い戦い でした。

この記事では、その試行錯誤の過程と、最終的に発見した意外な原因について記録します。

目指したシステム

理想の執筆フロー

VSCodeでMarkdown執筆
  ↓
git push origin main
  ↓
GitHub Actions自動実行
  ↓
WordPressに投稿
  ↓
完了！

所要時間：数秒

メリット：

• 慣れ親しんだエディタで執筆
• Gitでバージョン管理
• 完全自動化

これを実現するため、GitHub Actions連携に取り組みました。

準備：必要な設定

ローカル環境では成功していた

すでにローカル環境では、スクリプトが完璧に動作していました。

npm run publish

これで、VSCodeで書いた記事がローカルWordPressに投稿される。

次は本番環境へ。

GitHub Actionsの設定

.github/workflows/publish.yml:

name: Publish to WordPress

on:
  push:
    branches: [main]
    paths: ['posts/**']

jobs:
  publish:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - name: Publish to WordPress
        env:
          WP_URL: ${{ secrets.WP_URL }}
          WP_USER: ${{ secrets.WP_USER }}
          WP_APP_PASSWORD: ${{ secrets.WP_APP_PASSWORD }}
        run: npm run publish

シンプルな設定。

GitHub Secretsの設定

GitHub → Settings → Secrets and variables → Actions

WP_URL=https://caymezon.com
WP_USER=caymezon
WP_APP_PASSWORD=xxxx xxxx xxxx xxxx
CATEGORY_*=（各カテゴリーID）

準備完了。いざ実行！

最初の実行：403エラー

git push

git checkout main
git merge develop
git push origin main

GitHub Actions起動！

ログを確認

Run npm run publish

📝 処理開始: test-article
──────────────────────────────────────────────────
⚠️  既存記事検索エラー: Invalid URL
❌ タグ処理失敗: Test Invalid URL
❌ 投稿エラー: Invalid URL
❌ test-article の処理に失敗しました

「Invalid URL」？？

問題1：環境変数が読み込まれていない

原因：

const WP_URL = process.env.WP_URL;  // undefined

GitHub Secretsの設定ミス。

対処：

GitHub Secrets を再確認
→ すべて正しく設定
→ Re-run jobs

再実行：403 Forbidden

📝 処理開始: test-article
⚠️  既存記事検索エラー: Request failed with status code 403
❌ タグ処理失敗: Test ...403 Forbidden...
❌ 投稿エラー: ...403 Forbidden...

今度は403エラー。アクセスが拒否されている。

原因究明の旅

仮説1：WAF（Web Application Firewall）

最初に疑ったのはWAF。

XSERVERのWAFがREST APIをブロックしている可能性。

確認：

XSERVERサーバーパネル
→ セキュリティ → WAF設定
→ caymezon.com

結果：

WAF: すべてOFF

WAFは原因ではなかった。

仮説2：REST APIが無効化されている

ブラウザで確認：

https://caymezon.com/wp-json/wp/v2/posts

結果：

[
  {
    "id": 1,
    "title": {"rendered": "記事タイトル"},
    ...
  }
]

REST APIは正常に動作している！

仮説3：Application Passwordの問題

WordPress管理画面で新しいApplication Passwordを生成：

ユーザー → プロフィール
→ アプリケーションパスワード
→ 「GitHub Actions」で新規作成
→ コピー

curlコマンドでテスト：

curl -X POST "https://caymezon.com/wp-json/wp/v2/posts" \
  -u "caymezon:新しいApplication Password" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Curl Test Post",
    "content": "Test",
    "status": "draft"
  }'

結果：

{
  "id": 456,
  "title": {"rendered": "Curl Test Post"},
  ...
}

成功！Application Passwordも問題ない！

困惑：ローカルからは成功、GitHub Actionsからは失敗

状況の整理：

なぜGitHub Actionsだけ失敗するのか？

ブレイクスルー：ログをもっと詳しく見る

スクリプトを修正

エラーメッセージをもっと詳しく出力するように修正：

} catch (error) {
  if (error.response?.status === 403) {
    console.error('❌ 投稿エラー: 403 Forbidden');
    console.error('💡 XSERVERのセキュリティ設定を確認してください');
  }
  // ...
}

Re-run jobs で再実行。

ログに気づき

❌ 投稿エラー: 403 Forbidden
   💡 XSERVERのセキュリティ設定を確認してください

「セキュリティ設定」？

WAFはOFFだったけど、他に何かあるのか？

真の原因を発見

XSERVERのWordPressセキュリティ設定

もう一度、サーバーパネルを確認：

セキュリティ
→ WordPressセキュリティ設定
→ caymezon.com

見つけた：

国外IPアクセス制限設定
  REST API アクセス制限: ON

これだ！！

原因の理解

GitHub Actions（アメリカのサーバー）
  ↓ 国外IPからアクセス
XSERVERの国外IPアクセス制限
  ↓ ブロック
403 Forbidden

GitHub ActionsはクラウドのUbuntu環境（主にアメリカ）で実行される。

そのため、日本国外からのアクセスとして認識され、ブロックされていた！

なぜローカルからは成功したのか

ローカル環境（日本のIP）
  ↓ 日本国内からアクセス
XSERVER
  ↓ 許可
成功 ✅

GitHub Actions（アメリカのIP）
  ↓ 国外からアクセス
XSERVER
  ↓ ブロック
403 Forbidden ❌

これで全てが説明できる！

解決：設定変更

REST APIアクセス制限をOFF

XSERVERサーバーパネル
→ セキュリティ
→ WordPressセキュリティ設定
→ caymezon.com
→ 国外IPアクセス制限設定
→ REST API アクセス制限: OFF
→ 設定する

数分待つ（設定反映のため）

再実行

# 何か変更してpush
git push origin main

GitHub Actions実行...

成功！

📝 処理開始: test-article
──────────────────────────────────────────────────
📄 タイトル: テスト記事
🎯 モード: HTML変換
🏷️  カテゴリー: Development
🔖 タグ: Test

✨ 新規記事を作成します
   📌 Status: draft (新規)

🔧 最初のH1見出しを削除（タイトル重複回避）
✨ Markdown → HTML 変換完了

📤 WordPress投稿中...
✅ 投稿成功！
🔗 URL: https://caymezon.com/test-article/
📊 ステータス: draft

✅ すべての処理が完了しました

完璧！🎉

WordPress管理画面で確認

投稿 → 投稿一覧
→ 「テスト記事」が下書きで追加されている

→ 公開ボタンをクリック

→ 本番サイトで確認

404 NOT FOUND | CayTech Lab
caymezon.com
→ 表示されている！

ついに成功！！🎊

セキュリティについて

Q: 国外IPアクセスをOFFにして大丈夫？

A: はい、大丈夫です✅

理由：

REST APIは二段階で保護されている

レベル1：読み取り（GET）

誰でもアクセス可能
例：記事一覧の取得
→ 公開情報なので問題なし

レベル2：書き込み（POST/PUT/DELETE）

Application Password必須
例：記事の作成・更新・削除
→ パスワードなしでは絶対にアクセスできない

つまり：

• 記事を閲覧するだけなら誰でもOK（公開情報だから）
• 記事を投稿・編集するにはApplication Passwordが必須
• パスワードが漏れない限り、安全

学んだこと

1. エラーメッセージをよく読む

最初のエラー：

Invalid URL

これは環境変数の問題だった。

次のエラー：

403 Forbidden

これはアクセス制限の問題だった。

エラーメッセージには原因のヒントが隠れている。

2. 同じテストでも環境が違えば結果も違う

ローカルからは成功、GitHub Actionsからは失敗。

理由：

• ローカル：日本国内のIP
• GitHub Actions：アメリカのIP

環境の違いを意識する重要性。

3. 段階的にテストする

今回の検証プロセス：

1. REST APIは動作している？
   → ブラウザでGET → ✅

2. Application Passwordは正しい？
   → curlでPOST → ✅

3. なぜGitHub Actionsだけ失敗？
   → IPアドレスの違い → 原因発見

一つずつ切り分けていくことで、原因を特定できた。

4. ドキュメント化の重要性

今回の経験を記録したことで：

• 次に同じ問題が起きても対処できる
• 他の人も同じ問題を避けられる
• 知識が蓄積される

試行錯誤の過程を記録することは、大きな価値がある。

トラブルシューティングガイド

403 Forbiddenエラーが出たら

チェックリスト：

1. XSERVERの国外IPアクセス制限

サーバーパネル
→ セキュリティ
→ WordPressセキュリティ設定
→ REST API アクセス制限: OFF

2. WAF設定

セキュリティ → WAF設定
→ すべてOFF、または /wp-json/ を除外

3. Application Password

WordPress管理画面
→ ユーザー → プロフィール
→ アプリケーションパスワード
→ 新規作成してGitHub Secretsを更新

4. REST API動作確認

ブラウザで確認:
https://あなたのサイト.com/wp-json/wp/v2/posts

curlでテスト:
curl -X POST "https://あなたのサイト.com/wp-json/wp/v2/posts" \
  -u "ユーザー名:Application Password" \
  -H "Content-Type: application/json" \
  -d '{"title":"Test","content":"Test","status":"draft"}'

まとめ

問題解決までの道のり

GitHub Actions実行
  ↓
403 Forbiddenエラー
  ↓
WAFを疑う → 原因ではなかった
  ↓
REST APIを確認 → 正常に動作
  ↓
Application Passwordを確認 → 問題なし
  ↓
curlテスト → 成功
  ↓
なぜGitHub Actionsだけ失敗？
  ↓
XSERVERの設定を再確認
  ↓
「国外IPアクセス制限」を発見
  ↓
設定をOFF
  ↓
成功！🎉

所要時間：数時間

でも、学びは大きかった。

完成したシステム

VSCodeでMarkdown執筆
  ↓ status: draft
developブランチで自由に編集
  ↓ status: publish
mainブランチにマージ
  ↓ git push
GitHub Actions自動実行
  ↓ REST API（国外IPも許可）
本番WordPress投稿
  ↓ 成功
本番サイトに表示

完全自動化達成！

この経験から

技術的な問題の多くは、見落としている設定が原因。

• エラーメッセージをよく読む
• 段階的にテストする
• 環境の違いを意識する
• 諦めずに調べ続ける

そして何より、試行錯誤の過程を楽しむこと。

問題を解決したときの達成感は、何物にも代えがたい。

参考情報

XSERVERの設定

• XSERVERマニュアル - WordPressセキュリティ設定

WordPress REST API

• WordPress REST API Handbook
• Application Passwords

GitHub Actions

• GitHub Actions Documentation
• Encrypted secrets

おわりに

403エラーとの戦いは、予想以上に手強かった。

でも、原因を突き止めて解決できたときの喜びは、忘れられない。

もし同じ問題に遭遇している方がいたら、この記事が少しでも役に立てば幸いです。

そして、諦めずに調べ続ければ、必ず解決策は見つかる――

そんな希望を持ち続けてほしい。

Happy Coding! 🚀

最終更新： 2026-01-12

The post 【試行錯誤の記録】GitHub ActionsでWordPress自動投稿！403エラーとの戦い first appeared on CayTech Lab.

はじめに：執筆環境の重要性

ブログを続けるために最も重要なことは何でしょうか？

• 文章力？
• ネタ探し？
• SEO対策？

もちろん、これらも重要です。しかし、私が最も重要だと考えるのは、執筆環境の快適さです。

書きやすい環境があれば、自然と記事を書きたくなります。逆に、環境が悪いと、書くこと自体がストレスになります。

この記事では、私がWordPressブログの執筆環境を劇的に改善した方法をご紹介します。

Before：WordPress標準の執筆フロー

従来の方法

私が以前使っていた方法：

1. WordPress管理画面を開く
   → ログイン
   
2. Gutenbergエディタで執筆
   → ブラウザ上で直接編集
   
3. 画像をドラッグ&ドロップ
   → Media Libraryにアップロード
   
4. プレビュー確認
   → 別タブで開く
   
5. 公開
   → 「公開」ボタンをクリック

問題点

1. ブラウザに依存

• ブラウザがクラッシュしたら、書いた内容が消える
• 自動保存はあるが、常に不安

2. バージョン管理ができない

• いつ何を変更したか分からない
• 過去のバージョンに戻せない

3. 画像管理が煩雑

• 同じ画像を何度もアップロード
• Media Libraryが肥大化
• どれが最新の画像か分からない

4. オフライン作業ができない

• ネット環境が必須
• 移動中に書けない

5. 執筆に集中できない

• Gutenbergの操作に気を取られる
• Markdown記法が使えない

After：理想の執筆環境

新しい方法

現在の方法：

1. VSCodeで記事作成
   → Markdown記法で執筆
   → Ctrl+Shift+V でプレビュー
   
2. 画像を配置
   → ローカルフォルダに保存
   
3. スクリプト実行
   → npm run publish
   
4. WordPress管理画面で確認
   → 公開

改善されたこと

1. 慣れ親しんだエディタ

• VSCodeで執筆
• ショートカットキーが使える
• 拡張機能が使える

2. バージョン管理

git commit -m "記事追加：○○について"
git push

• いつ何を変更したか記録
• 過去のバージョンに戻せる
• チーム開発も可能

3. 画像管理の自動化

• 画像を上書き保存すればOK
• 自動で変更を検知
• Media Libraryがクリーン

4. オフライン作業

• ネット環境不要
• 移動中でも書ける
• 書き溜めておいて、まとめて投稿

5. 執筆に集中

• Markdownでシンプルに書ける
• プレビューも高速
• 余計な操作が不要

実際の運用フロー

日常的な記事投稿

Step 1：記事作成

VSCodeで記事を書く：

code posts/new-article/post.md

Front Matter（記事のメタ情報）：

---
title: "記事タイトル"
slug: new-article
category: Development
tags: [WordPress, Markdown, 自動化]
featured_image: featured.jpg
mode: html
status: draft
date: 2026-01-11
---

本文（Markdown記法）：

## はじめに

この記事では、○○について解説します。

### 対象読者

- ○○に興味がある方
- ○○を始めたい方

## 本文

詳しい説明...

npm install example

![スクリーンショット](images/01-screenshot.png)

## まとめ

この記事では、以下について解説しました...

プレビュー確認：

Ctrl+Shift+V

VSCode内でリアルタイムプレビュー！

Step 2：画像配置

フォルダ構成：

posts/new-article/
├── post.md
├── featured.jpg  ← アイキャッチ画像
└── images/
    ├── 01-screenshot.png
    └── 02-diagram.png

Markdown内の参照：

![スクリーンショット](images/01-screenshot.png)
![図解](images/02-diagram.png)

シンプル！

Step 3：スクリプト実行

npm run publish-single new-article

出力：

📝 処理開始: new-article
📄 タイトル: 記事タイトル
🎯 モード: HTML変換
🏷️  カテゴリー: Development
🔖 タグ: WordPress, Markdown, 自動化

📸 画像アップロード中...
  ✅ 01-screenshot.png → new-article-01-screenshot-a3f2b1.png
  ✅ 02-diagram.png → new-article-02-diagram-7c4d8e.png

🖼️  アイキャッチ画像アップロード中...
  ✅ featured.jpg → new-article-featured-9e8f7d.jpg

🔧 最初のH1見出しを削除（タイトル重複回避）
✨ Markdown → HTML 変換完了

✨ 新規記事を作成します
   📌 Status: draft (新規)

📤 WordPress投稿中...
✅ 投稿成功！
🔗 URL: http://example.com/new-article/
📊 ステータス: draft

数秒で完了！

Step 4：WordPress管理画面で確認

1. WordPress管理画面を開く
2. 投稿 → 投稿一覧 → 下書き
3. 記事を開く
4. 最終確認
5. 「公開」ボタンをクリック

完璧に投稿されている！

既存記事の更新

さらに便利なのが、既存記事の更新です。

Step 1：VSCodeで編集

code posts/existing-article/post.md

内容を編集：

## 追加セクション

新しい情報を追加...

Step 2：画像も更新（オプション）

スクリーンショットを撮り直して、同じファイル名で上書き保存：

posts/existing-article/images/01-screenshot.png

ファイル名は変えない！

Step 3：スクリプト実行

npm run test-local

出力：

📝 処理開始: existing-article

📸 画像アップロード中...
  🗑️  古い画像を削除: existing-article-01-screenshot-a3f2b1.png
  ✅ 01-screenshot.png → existing-article-01-screenshot-3f8d2a.png
  ♻️  02-diagram.png (変更なし)

📝 既存記事を更新します（ID: 123）
   📌 Status: publish (既存維持)

✅ 更新成功！

自動的に：

• 既存記事を検索
• 画像の変更を検知
• 古い画像を削除
• 新しい画像をアップロード
• 変更がない画像は再利用
• 記事を更新

完璧！

複数記事の一括投稿

過去記事の移行など：

npm run publish

すべての記事を自動投稿！

🚀 3 件の記事を処理します

📝 処理開始: article-1
✅ 投稿成功！

📝 処理開始: article-2
✅ 投稿成功！

📝 処理開始: article-3
✅ 投稿成功！

✅ すべての処理が完了しました

GitHub Actions連携

さらなる自動化

次のステップ：git push で自動投稿

設定ファイル

.github/workflows/publish.yml

name: Publish to WordPress

on:
  push:
    branches: [main]
    paths: ['posts/**']

jobs:
  publish:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: npm install
      
      - name: Publish to WordPress
        env:
          WP_URL: ${{ secrets.WP_URL }}
          WP_USER: ${{ secrets.WP_USER }}
          WP_APP_PASSWORD: ${{ secrets.WP_APP_PASSWORD }}
        run: npm run publish

GitHub Secrets設定

GitHub → Settings → Secrets and variables → Actions
→ New repository secret

WP_URL: https://example.com
WP_USER: username
WP_APP_PASSWORD: xxxx xxxx xxxx xxxx

運用フロー

1. VSCodeで記事作成
   posts/new-article/post.md
   
2. Git commit
   git add .
   git commit -m "記事追加：新しい記事"
   
3. Git push
   git push origin main
   
4. GitHub Actions自動実行
   → WordPressに自動投稿
   
5. メール通知
   → 投稿完了のお知らせ

完全自動化！🎉

効果測定

定量的な改善

執筆時間の短縮：

従来の方法:
  記事作成: 2時間
  画像管理: 30分
  投稿作業: 10分
  ──────────
  合計: 2時間40分

新しい方法:
  記事作成: 2時間
  画像管理: 0分（自動）
  投稿作業: 30秒
  ──────────
  合計: 2時間30秒

短縮: 約40分

更新作業の効率化：

従来の方法:
  WordPress管理画面を開く
  → 記事を探す
  → 編集
  → 画像を差し替え
  → 保存
  合計: 約10分

新しい方法:
  VSCodeで編集
  → npm run publish
  合計: 約30秒

短縮: 約9分30秒

年間の効果：

週1回の記事投稿 × 52週 = 52記事/年

短縮時間:
  投稿: 40分 × 52回 = 2,080分 (約35時間)
  更新: 9.5分 × 52回 = 494分 (約8時間)
  ──────────────────
  合計: 約43時間/年

浮いた時間で約21記事追加可能！

定性的な改善

1. ストレスの軽減

• ブラウザクラッシュの不安がない
• 画像管理の煩わしさがない
• 執筆に集中できる

2. モチベーションの向上

• 書きやすいから、書きたくなる
• ワンコマンドで投稿できる満足感
• Git管理による安心感

3. 記事の品質向上

• プレビューで確認しやすい
• 過去のバージョンと比較できる
• 落ち着いて推敲できる

4. 継続しやすい

• オフラインでも書ける
• スキマ時間を活用
• 無理なく続けられる

Tips & Best Practices

1. フォルダ構成の工夫

推奨構成：

posts/
├── 2025/
│   ├── 01-january/
│   │   ├── article-1/
│   │   └── article-2/
│   └── 02-february/
│       └── article-3/
└── 2026/
    └── 01-january/
        └── article-4/

メリット：

• 記事が探しやすい
• 管理しやすい
• アーカイブしやすい

2. テンプレートの活用

記事テンプレート：

cp templates/post-template.md posts/new-article/post.md

テンプレート内容：

---
title: "【カテゴリ名】記事タイトル"
slug: article-name
category: Development
tags: [タグ1, タグ2]
featured_image: featured.jpg
mode: html
status: draft
date: 2026-01-11
---

## はじめに

この記事では...

### 対象読者

- ○○な方
- ○○を始めたい方

## 本文

詳しい説明...

## まとめ

この記事では...

効率アップ！

3. 画像の命名規則

推奨：

01-descriptive-name.png
02-another-image.png
03-final-screenshot.png

メリット：

• 順番が分かる
• 内容が分かる
• 管理しやすい

4. プレビューの活用

VSCodeの拡張機能：

• Markdown All in One

  • 便利なショートカット
  • Table of Contents自動生成

• Markdown Preview Enhanced

  • リッチなプレビュー
  • PDF出力

Ctrl+Shift+V で即座にプレビュー！

5. スニペットの活用

VSCodeスニペット：

{
  "Code Block": {
    "prefix": "code",
    "body": [
      "```${1:bash}",
      "$0",
      "```"
    ]
  },
  "Image": {
    "prefix": "img",
    "body": [
      "![${1:説明}](images/${2:filename}.png)"
    ]
  }
}

使い方：

code → Tab → コードブロック完成
img → Tab → 画像リンク完成

トラブルシューティング

よくある問題と解決策

問題1：画像が表示されない

原因：

• 画像パスが間違っている

確認：

post.md: ![説明](images/screenshot.png)
実際のファイル: posts/article/images/screenshot.png

解決：

• パスを修正
• ファイル名を確認

問題2：既存記事が見つからない

原因：

• スラッグが違っている

確認：

post.md: slug: article-name
WordPress: 既存記事のスラッグ？

解決：

• スラッグを一致させる
• WordPress管理画面で確認

問題3：認証エラー

原因：

• Application Passwordが間違っている

解決：

1. WordPress管理画面
   → ユーザー → プロフィール
   → アプリケーションパスワード
   
2. 新しいパスワードを生成

3. .env.local を更新
   WP_APP_PASSWORD=xxxx xxxx xxxx xxxx

まとめ

改善のポイント

1. 執筆環境を整える

• 慣れ親しんだエディタ
• Markdown記法
• リアルタイムプレビュー

2. 自動化する

• 画像アップロード
• パス置換
• 既存記事の更新

3. バージョン管理

• Git管理
• 履歴が残る
• 安心感

4. 継続的な改善

• GitHub Actions連携
• さらなる自動化
• 効率化

Before → After

Before（従来の方法）：

WordPress Gutenbergで執筆
  ↓ ブラウザに依存
  ↓ バージョン管理なし
  ↓ 画像管理が煩雑
  ↓ ストレス

After（新しい方法）：

VSCodeで執筆
  ↓ Markdown記法
  ↓ Git管理
  ↓ 画像自動管理
  ↓ npm run publish
  ↓ 快適！

得られたもの

時間：

• 年間約43時間の短縮
• 浮いた時間で約21記事追加可能

快適さ：

• ストレスフリーな執筆環境
• 執筆に集中できる
• 書くことが楽しくなる

継続性：

• モチベーション維持
• 無理なく続けられる
• ブログが続く

品質：

• 落ち着いて推敲できる
• バージョン管理で安心
• 記事の品質が向上

おわりに

ブログを続けるために最も重要なのは、書きやすい環境です。

環境が整えば、自然と記事を書きたくなります。

私の場合、執筆環境を改善したことで：

• 記事を書くことが楽しくなった
• 更新頻度が上がった
• 記事の品質が向上した

そして何より、執筆そのものに集中できるようになりました。

もしあなたがWordPressでブログを書いているなら、ぜひこの方法を試してみてください。

きっと、ブログを書くことがもっと楽しくなるはずです。

Happy Blogging! 🚀

参考リンク

• VSCode
• Markdown Guide
• GitHub Actions
• WordPress REST API

関連記事

• VSCodeからWordPressへ！Markdown記事を自動投稿するシステムを作った話

  • システムの全体像と開発の経緯

• 【試行錯誤の記録】WordPress画像管理を最適化！ハッシュベースの賢い仕組み

  • 画像管理の技術的な詳細

最終更新： 2026-01-11

The post WordPressブログの執筆環境を劇的改善した話【VSCode × Markdown × 自動化】 first appeared on CayTech Lab.

はじめに：なぜこのシステムを作ったのか

ブログを書くとき、皆さんはどんなエディタを使っていますか？

WordPress標準のGutenbergエディタも便利ですが、長文を書いているとこんな不満が出てきませんか？

• ブラウザがクラッシュしたら書いた内容が消える不安
• 画像管理が煩雑で、同じ画像が重複してアップロードされる
• Markdown記法で書けないもどかしさ
• バージョン管理ができない

私もまさにこの悩みを抱えていました。そこで、VSCodeでMarkdownを書いて、ワンコマンドでWordPressに投稿できるシステムを作ることにしました。

この記事では、その開発の経緯と、遭遇した問題、そして最終的に完成したシステムについてご紹介します。

理想の執筆環境とは

まず、私が目指した理想の執筆環境はこんな感じです：

求めていた機能

1. VSCodeでMarkdownを書きたい

• 慣れ親しんだエディタで執筆
• リアルタイムプレビュー（Ctrl+Shift+V）
• Gitでバージョン管理

2. 画像管理を自動化したい

• ローカルの画像を自動アップロード
• 画像パスを自動で置換
• 同じ画像の重複を避ける

3. ワンコマンドで投稿したい

npm run publish

これだけで完了！

4. 既存記事の更新も自動化したい

• スラッグで既存記事を検索
• 見つかったら自動更新
• 見つからなければ新規投稿

開発の流れ：試行錯誤の連続

Phase 1：まずは基本機能

最初は、シンプルに「MarkdownをWordPressに投稿する」ことを目指しました。

使用した技術：

• Node.js
• WordPress REST API
• marked（Markdown → HTML変換）
• gray-matter（Front Matter解析）

基本的な処理フロー：

1. post.md を読み込み
2. Front Matter解析（タイトル、スラッグなど）
3. Markdown → HTML変換
4. WordPress REST APIで投稿

最初のコード（簡略版）：

const marked = require('marked');
const matter = require('gray-matter');
const axios = require('axios');

// Markdownファイル読み込み
const fileContent = fs.readFileSync('post.md', 'utf-8');
const { data: frontMatter, content: markdown } = matter(fileContent);

// HTML変換
const htmlContent = marked(markdown);

// WordPress投稿
await axios.post(
  `${WP_URL}/wp-json/wp/v2/posts`,
  {
    title: frontMatter.title,
    content: htmlContent,
    slug: frontMatter.slug,
    status: 'draft'
  },
  { auth: { username: WP_USER, password: WP_APP_PASSWORD } }
);

この時点では、「動く！」という感動がありました。VSCodeで書いた記事が本当にWordPressに投稿されたのです。

Phase 2：画像アップロードの実装

次に、画像の自動アップロードに取り組みました。

課題：

• Markdown内の相対パス（images/screenshot.png）を、WordPressのURLに置換する必要がある

解決策：

1. images/ フォルダ内の画像を全てアップロード
2. アップロード後のURLを取得
3. Markdown内のパスを置換

実装：

// 画像アップロード
const imageMap = {};

for (const imageFile of imageFiles) {
  const imagePath = path.join(imagesDir, imageFile);
  
  const form = new FormData();
  form.append('file', fs.createReadStream(imagePath));
  
  const response = await axios.post(
    `${WP_URL}/wp-json/wp/v2/media`,
    form,
    { auth: { username: WP_USER, password: WP_APP_PASSWORD } }
  );
  
  // ローカルパス → WordPressのURL
  imageMap[`images/${imageFile}`] = response.data.source_url;
}

// Markdown内のパスを置換
let updatedMarkdown = markdown;
for (const [localPath, wpUrl] of Object.entries(imageMap)) {
  updatedMarkdown = updatedMarkdown.replace(
    new RegExp(`\\(${localPath}\\)`, 'g'),
    `(${wpUrl})`
  );
}

これで、画像が自動でアップロードされ、記事内のリンクも正しく置換されるようになりました！

Phase 3：WP Githuber MDプラグインとの出会い

ここで、WP Githuber MDという素晴らしいプラグインを発見しました。

このプラグインを使うと、WordPress側でもMarkdown記法で編集できます。つまり：

VSCodeでMarkdown編集
  ↓
WordPressに投稿（Markdownのまま）
  ↓
WordPress側でもMarkdown編集可能！

試してみた結果：

最初は「Markdown → HTML変換」していましたが、WP Githuber MDを使えばMarkdownをそのまま投稿できるはず...

しかし、ここで大きな問題が発生しました。

遭遇した問題たち

問題1：Markdownがそのまま表示される

症状：

## 見出し

本文...

このMarkdownをそのまま送信すると、WordPress側で：

# タイトル
## 見出し
本文...

Markdownの記号がそのまま表示されてしまいました。

原因：

• WordPress REST APIは、デフォルトでMarkdownを認識しない
• WP Githuber MDのメタフィールドを設定する必要がある

解決策：

// メタフィールドを追加
const postData = {
  title: frontMatter.title,
  content: markdown,  // HTMLではなくMarkdown
  meta: {
    _is_githuber_markdown: '1',
    _is_githuber_markdown_enabled: 'yes'
  }
};

これで、Markdownがそのまま送信され、WordPress側で正しく表示されるようになりました！

問題2：既存記事がHTMLの場合

次の問題：

既存記事（すでにHTMLで保存されている）を、Markdownで更新しようとすると...

症状：

既存記事（HTML形式）
  ↓
Markdownを送信
  ↓
WordPress: 「これはテキストだ」
  ↓
## 見出し
 で保存される

つまり、一度HTMLとして保存された記事は、Markdownとして認識されない！

試行錯誤：

1. WordPress管理画面で手動変換 → 面倒
2. 記事を削除して再投稿 → 一時的に記事が消える
3. モード切替可能にする → これだ！

問題3：画像が増え続ける

最大の問題：

記事を更新するたびに、画像が新規アップロードされる：

1回目: featured.jpg
2回目: featured-2.jpg  ← 新規
3回目: featured-3.jpg  ← どんどん増える

WordPress Media Libraryが肥大化！

この問題の解決が、今回の開発で最も時間をかけた部分でした。

最大の挑戦：画像管理の最適化

解決策の検討

方法1：画像を再利用

• ファイル名で検索 → 見つかったら再利用
• 問題： 内容が変わっても検出できない

方法2：削除して再アップロード

• 毎回削除 → 再アップロード
• 問題： 遅い、無駄

方法3：ハッシュベース（採用！）

• 画像の内容からハッシュを計算
• ハッシュが一致 → 再利用
• ハッシュが異なる → 削除して再アップロード

ハッシュベースの実装

1. ハッシュ計算：

const crypto = require('crypto');

function calculateFileHash(filePath) {
  const fileBuffer = fs.readFileSync(filePath);
  const hashSum = crypto.createHash('md5');
  hashSum.update(fileBuffer);
  const hex = hashSum.digest('hex');
  return hex.substring(0, 6);  // 最初の6桁
}

2. ファイル名にハッシュを含める：

元のファイル名: featured.jpg
  ↓
ハッシュ計算: a3f2b1
  ↓
新しいファイル名: article-slug-featured-a3f2b1.jpg

3. 既存画像を検索：

async function findExistingImageByPattern(slug, originalFileName) {
  const searchPattern = `${slug}-${originalFileName}`;
  
  const response = await axios.get(
    `${WP_URL}/wp-json/wp/v2/media`,
    {
      auth: { username: WP_USER, password: WP_APP_PASSWORD },
      params: { search: searchPattern }
    }
  );
  
  // パターンに一致する画像を探す
  for (const media of response.data) {
    const fileName = path.basename(media.source_url);
    if (fileName.startsWith(searchPattern)) {
      return media;
    }
  }
  
  return null;
}

4. 統合処理：

async function uploadOrReuseImage(imagePath, fileName, slug) {
  // ハッシュ計算
  const hash = calculateFileHash(imagePath);
  const newFileName = `${slug}-${fileName}-${hash}.jpg`;
  
  // 既存画像を検索
  const existingImage = await findExistingImageByPattern(slug, fileName);
  
  if (existingImage) {
    const existingFileName = path.basename(existingImage.source_url);
    
    if (existingFileName.includes(`-${hash}`)) {
      // ハッシュ一致 → 再利用
      console.log(`♻️  ${fileName} (変更なし)`);
      return { id: existingImage.id, url: existingImage.source_url };
    } else {
      // ハッシュ不一致 → 削除
      console.log(`🗑️  古い画像を削除`);
      await deleteImage(existingImage.id);
    }
  }
  
  // 新規アップロード
  console.log(`✅ ${fileName} → ${newFileName}`);
  return await uploadImage(imagePath, newFileName);
}

結果：

1回目実行:
  ✅ featured.jpg → article-featured-a3f2b1.jpg

2回目実行（画像変更なし）:
  ♻️  featured.jpg (変更なし)  ← 再利用！

3回目実行（画像を更新）:
  🗑️  古い画像を削除: article-featured-a3f2b1.jpg
  ✅ featured.jpg → article-featured-9e8f7d.jpg  ← 新しいハッシュ

完璧に動作しました！🎉

完成したシステム

最終的なアーキテクチャ

VSCode
  ↓ Markdown記法で執筆
posts/
├── article-name/
│   ├── post.md
│   ├── featured.jpg
│   └── images/
│       └── screenshot.png
  ↓ npm run publish
Node.jsスクリプト
  ├─ Front Matter解析
  ├─ H1削除
  ├─ 画像アップロード（ハッシュ管理）
  ├─ パス置換
  ├─ HTML変換（HTMLモード）
  └─ 既存記事検索・更新
  ↓ WordPress REST API
WordPress
  ↓ 表示
ブログ記事

主要機能

1. 2つのモード

# HTMLモード（推奨）
mode: html
→ スクリプト側でHTML変換
→ Gutenbergエディタ

# Markdownモード
mode: markdown
→ Markdownをそのまま送信
→ WP Githuber MDエディタ

2. 既存記事の自動更新

// 既存記事を検索
const existingPost = await findExistingPost(frontMatter.slug);

if (existingPost) {
  // 更新
  await axios.post(`/wp-json/wp/v2/posts/${existingPost.id}`, data);
} else {
  // 新規投稿
  await axios.post(`/wp-json/wp/v2/posts`, data);
}

3. ハッシュベースの画像管理

画像変更なし → 再利用 ♻️
画像変更あり → 削除 🗑️ → 再アップロード ✅

4. タイトル重複の自動回避

// 最初のH1を自動削除
updatedMarkdown = removeFirstH1(updatedMarkdown);

実際の運用フロー

日常的な記事投稿

# 1. 記事作成
code posts/new-article/post.md

# 2. 画像配置
posts/new-article/
├── post.md
├── featured.jpg
└── images/
    └── screenshot.png

# 3. プレビュー確認
Ctrl+Shift+V

# 4. 投稿
npm run publish-single new-article

# 5. WordPress管理画面で確認
→ 公開

所要時間：わずか数秒！

既存記事の更新

# 1. VSCodeで編集
code posts/existing-article/post.md

# 2. 画像も更新（上書き保存）
posts/existing-article/images/screenshot.png

# 3. 投稿
npm run test-local

# 4. 出力確認
📸 画像アップロード中...
  🗑️  古い画像を削除: article-screenshot-a3f2b1.png
  ✅ screenshot.png → article-screenshot-9e8f7d.png
📝 既存記事を更新します（ID: 123）
✅ 更新成功！

画像の更新も自動検出！

得られたメリット

1. 執筆効率の向上

Before：

WordPress Gutenbergで執筆
  ↓ 画像をドラッグ&ドロップ
  ↓ ブラウザがクラッシュしないか不安
  ↓ バージョン管理なし

After：

VSCodeで執筆
  ↓ Ctrl+Shift+V でプレビュー
  ↓ Gitでバージョン管理
  ↓ npm run publish
  ↓ 完了！

2. 画像管理の最適化

Before：

同じ画像が何度もアップロードされる
→ Media Libraryが肥大化
→ 管理が大変

After：

画像の内容が変わっていなければ再利用
→ Media Libraryがクリーン
→ 無駄なアップロードなし

3. 既存記事の更新が楽

Before：

WordPress管理画面を開く
→ 記事を探す
→ 編集
→ 保存

After：

VSCodeで編集
→ npm run publish
→ 完了！

4. バージョン管理

Gitで管理：

git commit -m "記事追加：○○について"
git push

履歴が残る：

• いつ何を変更したか
• 過去のバージョンに戻せる
• チーム開発も可能

今後の展望

GitHub Actions連携

次のステップは、GitHub Actionsでの自動投稿です：

name: Publish to WordPress

on:
  push:
    branches: [main]
    paths: ['posts/**']

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - env:
          WP_URL: ${{ secrets.WP_URL }}
          WP_USER: ${{ secrets.WP_USER }}
          WP_APP_PASSWORD: ${{ secrets.WP_APP_PASSWORD }}
        run: npm run publish

運用フロー：

VSCodeで記事作成
  ↓
git push
  ↓
GitHub Actions自動実行
  ↓
WordPressに自動投稿

完全自動化！

複数サイト対応

複数のWordPressサイトへの投稿も検討中：

npm run publish-site1
npm run publish-site2

バルク投稿

過去記事の一括移行：

npm run publish  # 全記事を投稿

まとめ

開発を通じて学んだこと

1. 試行錯誤の重要性

最初から完璧なシステムは作れません。問題に遭遇するたびに、解決策を考え、実装し、改善する。この繰り返しが重要でした。

2. ユーザー体験の大切さ

技術的に可能でも、運用が面倒では意味がありません。「ファイル名を変える」という一手間を省くために、ハッシュベースの仕組みを実装しました。

3. ドキュメントの価値

試行錯誤の過程を記録しておくことで、後から見返したときに「なぜこうしたのか」が分かります。

このシステムを作って良かったこと

• 執筆が楽しくなった
• バージョン管理ができるようになった
• 画像管理のストレスがなくなった
• 記事の更新が簡単になった

そして何より、このシステム自体がブログ記事になりました！

技術スタック

最後に、使用した技術をまとめておきます：

言語・ランタイム：

• Node.js

ライブラリ：

• axios - HTTP通信
• marked - Markdown → HTML変換
• gray-matter - Front Matter解析
• form-data - ファイルアップロード
• dotenv - 環境変数管理
• crypto - ハッシュ計算

WordPress側：

• WordPress REST API
• WP Githuber MD（オプション）

エディタ：

• VSCode

バージョン管理：

• Git / GitHub

おわりに

VSCodeでブログを書きたい、画像管理を自動化したい、という単純な動機から始まったこのプロジェクト。

試行錯誤を繰り返しながら、最終的には想像以上に完成度の高いシステムになりました。

もし同じような悩みを抱えている方がいたら、この記事が参考になれば嬉しいです。

そして、「自分でツールを作る」という選択肢を持つことで、日々の作業がもっと楽しくなるかもしれません。

Happy Blogging! 🚀

参考リンク

• WordPress REST API ハンドブック
• WP Githuber MD
• Marked.js
• Node.js Crypto

最終更新： 2026-01-11

The post VSCodeからWordPressへ！Markdown記事を自動投稿するシステムを作った話 first appeared on CayTech Lab.