jpskill.com
✍️ ライティング コミュニティ

article-exporter

ウェブ記事をObsidianで読みやすいMarkdown形式でローカルに保存し、画像もまとめてダウンロード、リンクを修正、必要に応じてAI翻訳も行い、READMEやナビゲーションファイルも作成して整理された状態で記事を保存するSkill。

📜 元の英語説明(参考)

Export any web article to a local Obsidian-ready Markdown directory. Fetches page content via actionbook CLI, downloads images locally, rewrites image references to relative paths, and optionally translates the article using AI. Produces a self-contained folder with README.md, images/, and an index.md navigation file.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ウェブ記事をObsidianで読みやすいMarkdown形式でローカルに保存し、画像もまとめてダウンロード、リンクを修正、必要に応じてAI翻訳も行い、READMEやナビゲーションファイルも作成して整理された状態で記事を保存するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o article-exporter.zip https://jpskill.com/download/15679.zip && unzip -o article-exporter.zip && rm article-exporter.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15679.zip -OutFile "$d\article-exporter.zip"; Expand-Archive "$d\article-exporter.zip" -DestinationPath $d -Force; ri "$d\article-exporter.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して article-exporter.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → article-exporter フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
6

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Article Exporter - 記事をObsidianにエクスポート

バージョン: 0.5.0 | 最終更新日: 2026-03-13

あなたはウェブコンテンツのアーカイブとObsidianのワークフロー自動化のエキスパートです。

エクスポートの失敗から得られた教訓

これらのルールは、実際のエクスポートの失敗から抽出されました。それぞれが特定の種類のエラーを防ぎます。

  1. Twitter/XはAIによる再フォーマットが必要fetchはセマンティックHTMLのないカスタムUIを使用しているため、Twitterはフラットなテキストを返します。AIによる再フォーマットのステップでは、見出し、リスト、コードブロックを再構築します。references/twitter-handling.mdを参照してください。
  2. 最初に出力パスを尋ねる — ユーザーは異なるvaultの場所を持っています。デフォルトを想定すると、間違った場所にファイルが作成され、移動に時間がかかります。
  3. actionbookのバージョンが0.9.1以上であることを確認--wait-hintパラメータは0.9.1で追加されました。これがないと、動的なコンテンツ(SPA、遅延ロードされたページ)は空または部分的な結果を返します。
  4. ナビゲーション後に待機 — Twitter、Medium、その他の動的なサイトには--wait-hint heavyを使用します。これがないと、コンテンツが抽出されるときにページがまだレンダリングを完了していません。
  5. バッチエクスポートのレート制限 — リクエスト間に3〜5秒の遅延を入れることで、ボットとしてフラグが立てられるのを防ぎます(ToS準拠)。

クイックリファレンス

タスク コマンド 成功基準
依存関係の確認 actionbook --version バージョンが0.9.1以上を表示
記事の取得 actionbook browser fetch <url> --wait-hint heavy プレーンテキストを返す(ステップ1bでAIがMarkdownに再フォーマット)
翻訳 AIセッションで直接 README_CN.mdが作成される
Obsidianで開く obsidian-cli open "path/index.md" ファイルがObsidianで開く

完全なエクスポートワークフロー

目標: ウェブ記事を画像とオプションの翻訳とともにObsidianディレクトリにエクスポートする

成功基準:

  • README.mdを含む記事ディレクトリが作成される
  • すべての画像がimages/にダウンロードされる
  • index.mdナビゲーションファイルが作成される
  • オプション: README_CN.md翻訳
  • Obsidianで開く(obsidian-cliが利用可能な場合)

ステップ1: 記事コンテンツの取得

実行: 直接(Bash)

# 記事を可読性テキストとして取得(ログのクリーンアップ付き)
actionbook browser fetch "$URL" --wait-hint heavy 2>/dev/null | \
  sed '/^[[:space:]]*$/d;/^\x1b\[/d;/^INFO/d' > /tmp/article_raw.txt

成功基準:

  • /tmp/article_raw.txtが存在し、サイズが0バイトより大きい
  • コンテンツに記事のメインテキストが含まれている

fetchコマンドは、可読性抽出されたプレーンテキスト(Markdownではない)を返します。 適切なMarkdownを生成するには、ステップ1bでのAIによる再フォーマットが常に必要です。

ルール:

  • Twitter、Medium、動的なコンテンツには--wait-hint heavyを使用する
  • 静的なブログには--wait-hint lightを使用する
  • 2>/dev/nullはstderrログを抑制する
  • sedはANSIコード、INFO行、空行を削除する

Twitter/Xの特別な扱い

Twitterは非セマンティックHTMLを使用しているため、fetchの出力はすべての構造を失います(見出しはフラットなテキストになり、コードブロックは消えます)。URLにx.comまたはtwitter.comが含まれている場合は、ステップ1bでの構造の再構築に特に注意してください。references/twitter-handling.mdを参照してください。


ステップ1b: AIによるMarkdownへの再フォーマット

実行: 直接(AIセッション)

/tmp/article_raw.txtを読み込み、プレーンテキストを構造化されたMarkdownに変換します。結果を/tmp/article.mdに保存します。

再フォーマットのルール:

  • テキスト構造から見出し(######)を再構築する
  • 元の画像URLを![alt](url)参照として保持する
  • コードブロック、リスト、テーブル、引用符をフォーマットする
  • 元の記事タイトルを最初の# H1見出しとして保持する

成功基準:

  • /tmp/article.mdが存在し、# <Title>で始まる
  • 画像URLがMarkdown画像構文として保持されている

ステップ2: メタデータの抽出

実行: 直接(Bash)

# タイトルを抽出(AIで再フォーマットされたmarkdownの最初のH1見出し)
TITLE=$(grep -m 1 "^# " /tmp/article.md | sed 's/^# //')

# 画像URLを抽出(data: URLを除外)
IMAGE_URLS=$(grep -o '!\[[^]]*\]([^)]*)' /tmp/article.md | \
    sed -E 's/!\[[^]]*\]\(([^)]*)\)/\1/' | \
    grep -v '^data:')

成功基準:

  • $TITLEが空でない
  • $IMAGE_URLSの数が予想と一致する(wc -lを使用)

ステップ3: 出力ディレクトリの確認

実行: [人間] 人間のチェックポイント: ファイルを作成する前に出力場所を確認する

ユーザーに尋ねる: "エクスポートされた記事をどこに保存しますか?"

推奨されるパス:

  • ~/Work/Write/Articles (デフォルト)
  • ~/Documents/Obsidian/Articles
  • ~/Notes/Imported
  • (または$output_dir引数からのカスタムパス)

成功基準: ユーザーが出力ディレクトリを確認する

成果物: $OUTPUT_DIR変数が設定される


ステップ4: ディレクトリ構造の作成

実行: 直接(Bash)

# 引数が提供されている場合はそれを使用し、それ以外の場合は確認されたパスを使用する
OUTPUT_DIR="${output_dir:-$USER_CONFIRMED_PATH}"

# ディレクトリ名のためにタイトルをサニタイズする
SAFE_TITLE=$(echo "$TITLE" | sed 's/[/:*?"<>|]//g' | cut -c1-100 | sed 's/^[[:space:]]*//;s/[[:space:]]*$//')

# 出力ディレクトリを作成する
ARTICLE_DIR="$OUTPUT_DIR/$SAFE_TITLE"
mkdir -p "$ARTICLE_DIR/images"

成功基準:

  • ディレクトリ$ARTICLE_DIRが存在する
  • サブディレクトリimages/が存在する
  • ディレクトリが書き込み可能である

ルール:

  • 特殊文字を削除する: / : * ? " < > |
  • タイトルの長さを100文字に制限する
  • 先頭/末尾の空白をトリムする

ステップ5: 画像のダウンロード(可能な場合は並列)

実行: 直接(Bash)

counter=1
for url in $IMAGE_URLS; do
    ext=$(echo "$url" | grep -oE '\.(jpg|jpeg|png|gif|webp|svg)' || echo ".jpg")
    curl -L -s "$url" -o "$ARTICLE_DIR/images/image_${counter}${ext}"

    # ファイルサイズを確認(0バイトの失敗を検出)
    if [ ! -s "$ARTICLE_DIR/images/image_${counter}${ext}" ]; then
        # 代替フォーマットを試す(Twitter)
        curl -L -s "${url}?format=jpg&name=orig" -o "$ARTICLE_DIR/images/image_${counter}.jpg"
    fi

    counter=$((counter + 1))
done

成功基準:

  • すべての画像ファイルが存在し、サイズが0バイトより大きい
  • ファイル数が$IMAGE_URLSの数と一致する

ルール:

  • リダイレクトに従うためにcurl -Lを使用する
  • ダウンロード後にファイルサイズを確認する
  • Twitter imの代替フォーマットを試す

(原文はここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Article Exporter - Export Articles to Obsidian

Version: 0.5.0 | Last Updated: 2026-03-13

You are an expert at web content archiving and Obsidian workflow automation.

Lessons from Failed Exports

These rules were extracted from real export failures. Each one prevents a specific class of error:

  1. Twitter/X needs AI reformattingfetch returns flat text because Twitter uses custom UI without semantic HTML. The AI reformatting step reconstructs headings, lists, and code blocks. See references/twitter-handling.md.
  2. Ask for output path first — users have different vault locations. Assuming a default creates files in the wrong place and wastes time moving them.
  3. Check actionbook version >= 0.9.1 — the --wait-hint parameter was added in 0.9.1. Without it, dynamic content (SPAs, lazy-loaded pages) returns empty or partial results.
  4. Wait after navigation — use --wait-hint heavy for Twitter, Medium, and other dynamic sites. Without it, the page hasn't finished rendering when content is extracted.
  5. Rate limit batch exports — 3-5s delay between requests prevents being flagged as a bot (ToS compliance).

Quick Reference

Task Command Success Criteria
Check deps actionbook --version Shows version >= 0.9.1
Fetch article actionbook browser fetch <url> --wait-hint heavy Returns plain text (AI reformats to Markdown in Step 1b)
Translate AI session directly README_CN.md created
Open in Obsidian obsidian-cli open "path/index.md" File opens in Obsidian

Complete Export Workflow

Goal: Export web article to Obsidian directory with images and optional translation

Success criteria:

  • Article directory created with README.md
  • All images downloaded to images/
  • index.md navigation file created
  • Optional: README_CN.md translation
  • Opened in Obsidian (if obsidian-cli available)

Step 1: Fetch Article Content

Execution: Direct (Bash)

# Fetch article as readability text (with log cleaning)
actionbook browser fetch "$URL" --wait-hint heavy 2>/dev/null | \
  sed '/^[[:space:]]*$/d;/^\x1b\[/d;/^INFO/d' > /tmp/article_raw.txt

Success criteria:

  • /tmp/article_raw.txt exists and size > 0 bytes
  • Content contains the article's main text

The fetch command returns readability-extracted plain text (not Markdown). AI reformatting in Step 1b is always needed to produce proper Markdown.

Rules:

  • Use --wait-hint heavy for Twitter, Medium, dynamic content
  • Use --wait-hint light for static blogs
  • 2>/dev/null suppresses stderr logs
  • sed removes ANSI codes, INFO lines, empty lines

Twitter/X Special Handling

Twitter uses non-semantic HTML, so fetch output loses all structure (headings become flat text, code blocks disappear). If the URL contains x.com or twitter.com, pay extra attention to structure reconstruction in Step 1b. See references/twitter-handling.md.


Step 1b: AI Reformat to Markdown

Execution: Direct (AI session)

Read /tmp/article_raw.txt and convert the plain text into well-structured Markdown. Save the result to /tmp/article.md.

Reformatting rules:

  • Reconstruct headings (#, ##, ###) from the text structure
  • Preserve original image URLs as ![alt](url) references
  • Format code blocks, lists, tables, and blockquotes
  • Keep the original article title as the first # H1 heading

Success criteria:

  • /tmp/article.md exists and starts with # <Title>
  • Image URLs are preserved as Markdown image syntax

Step 2: Extract Metadata

Execution: Direct (Bash)

# Extract title (first H1 heading from AI-reformatted markdown)
TITLE=$(grep -m 1 "^# " /tmp/article.md | sed 's/^# //')

# Extract image URLs (filter out data: URLs)
IMAGE_URLS=$(grep -o '!\[[^]]*\]([^)]*)' /tmp/article.md | \
    sed -E 's/!\[[^]]*\]\(([^)]*)\)/\1/' | \
    grep -v '^data:')

Success criteria:

  • $TITLE is non-empty
  • $IMAGE_URLS count matches expected (use wc -l)

Step 3: Ask Output Directory

Execution: [human] Human checkpoint: Confirm output location before creating files

Ask user: "Where should I save the exported article?"

Suggested paths:

  • ~/Work/Write/Articles (default)
  • ~/Documents/Obsidian/Articles
  • ~/Notes/Imported
  • (or custom path from $output_dir argument)

Success criteria: User confirms output directory

Artifacts: $OUTPUT_DIR variable set


Step 4: Create Directory Structure

Execution: Direct (Bash)

# Use argument if provided, otherwise use confirmed path
OUTPUT_DIR="${output_dir:-$USER_CONFIRMED_PATH}"

# Sanitize title for directory name
SAFE_TITLE=$(echo "$TITLE" | sed 's/[/:*?"<>|]//g' | cut -c1-100 | sed 's/^[[:space:]]*//;s/[[:space:]]*$//')

# Create output directory
ARTICLE_DIR="$OUTPUT_DIR/$SAFE_TITLE"
mkdir -p "$ARTICLE_DIR/images"

Success criteria:

  • Directory $ARTICLE_DIR exists
  • Subdirectory images/ exists
  • Directory is writable

Rules:

  • Remove special characters: / : * ? " < > |
  • Limit title length to 100 characters
  • Trim leading/trailing whitespace

Step 5: Download Images (Parallel if possible)

Execution: Direct (Bash)

counter=1
for url in $IMAGE_URLS; do
    ext=$(echo "$url" | grep -oE '\.(jpg|jpeg|png|gif|webp|svg)' || echo ".jpg")
    curl -L -s "$url" -o "$ARTICLE_DIR/images/image_${counter}${ext}"

    # Check file size (detect 0-byte failures)
    if [ ! -s "$ARTICLE_DIR/images/image_${counter}${ext}" ]; then
        # Try alternative format (Twitter)
        curl -L -s "${url}?format=jpg&name=orig" -o "$ARTICLE_DIR/images/image_${counter}.jpg"
    fi

    counter=$((counter + 1))
done

Success criteria:

  • All image files exist and size > 0 bytes
  • File count matches $IMAGE_URLS count

Rules:

  • Use curl -L to follow redirects
  • Check file size after download
  • Try alternative formats for Twitter images

Step 6: Update Image References

Execution: Direct (Bash)

# Replace remote URLs with local paths
counter=1
for url in $IMAGE_URLS; do
    ext=$(echo "$url" | grep -oE '\.(jpg|jpeg|png|gif|webp|svg)' || echo ".jpg")
    sed -i.bak "s|$url|./images/image_${counter}${ext}|g" /tmp/article.md
    counter=$((counter + 1))
done

# Save updated markdown
cp /tmp/article.md "$ARTICLE_DIR/README.md"
rm /tmp/article.md.bak

Success criteria:

  • README.md contains ./images/image_N.* references
  • No remote URLs remain in image links

Step 7: AI Translation (Optional)

Execution: Direct (AI session)

Human checkpoint: Ask user: "Do you want to translate the article? (y/n)"

If yes:

  1. Read $ARTICLE_DIR/README.md
  2. Translate using AI capabilities (no external API)
  3. Write to $ARTICLE_DIR/README_CN.md (or other language code)

Translation Prompt Template:

Translate the following Markdown article to [LANGUAGE] while preserving:
- All Markdown formatting (headings, lists, code blocks, tables)
- Image references exactly as-is: ![alt](./images/image_N.*)
- Links and URLs unchanged
- Code blocks and technical terms in original language

Only output the translated Markdown content.

---
[Paste README.md content]

Success criteria: Translation file exists and size ≈ original ± 20%

Supported languages: en, zh, es, fr, de, ja, ko


Step 8: Create Navigation Index

Execution: Direct (Bash)

# Auto-detect source from URL
case "$URL" in
    *x.com*|*twitter.com*) SOURCE="X" ;;
    *medium.com*) SOURCE="Medium" ;;
    *dev.to*) SOURCE="Dev.to" ;;
    *openai.com*) SOURCE="OpenAI Blog" ;;
    *substack.com*) SOURCE="Substack" ;;
    *github.com*) SOURCE="GitHub" ;;
    *) SOURCE=$(echo "$URL" | sed 's|https\?://||' | cut -d/ -f1) ;;
esac

# Create index.md
cat > "$ARTICLE_DIR/index.md" <<EOF
# $TITLE

> **Export Date**: $(date +%Y-%m-%d)
> **Original URL**: $URL
> **Source**: $SOURCE

## 📚 Language Versions

- 🇬🇧 **English**: [[README]]
- 🇨🇳 **Chinese**: [[README_CN]]  <!-- if translated -->

## 📊 Metadata

| Property | Value |
|----------|-------|
| **Source** | $SOURCE |
| **Images** | $(ls images/ 2>/dev/null | wc -l) images |
| **Export Tool** | actionbook CLI |
| **Export Date** | $(date +%Y-%m-%d) |

---

**Exported using**: actionbook browser automation + AI assistant
EOF

Success criteria: index.md exists with metadata table


Step 9: Open in Obsidian

Execution: Direct (Bash)

if command -v obsidian-cli &> /dev/null; then
    VAULT_ROOT="$OUTPUT_DIR"
    REL_PATH=$(echo "$ARTICLE_DIR" | sed "s|$VAULT_ROOT/||")
    obsidian-cli open "$REL_PATH/index.md"
    echo "✓ Opened in Obsidian: $REL_PATH/index.md"
else
    # Fallback: Open in file manager
    case "$(uname)" in
        Darwin)  open "$ARTICLE_DIR" ;;
        Linux)   xdg-open "$ARTICLE_DIR" ;;
        CYGWIN*|MINGW*|MSYS*) start "$ARTICLE_DIR" ;;
    esac
    echo "⚠️  Install obsidian-cli for automatic opening: npm install -g obsidian-cli"
fi

Success criteria:

  • File opens in Obsidian OR directory opens in file manager
  • User sees success message

Step 10: Report Success

Execution: Direct (Output)

echo ""
echo "════════════════════════════════════════════"
echo "✓ Article exported successfully!"
echo ""
echo "📁 Location: $ARTICLE_DIR"
echo "📄 Files:"
echo "     - README.md (original)"
[ -f "$ARTICLE_DIR/README_CN.md" ] && echo "     - README_CN.md (translation)"
echo "     - index.md (navigation)"
echo "🖼️  Images: $(ls images/ 2>/dev/null | wc -l) files"
echo "════════════════════════════════════════════"

Common Issues

Issue Cause Solution
"actionbook: command not found" CLI not installed npm install -g @actionbookdev/cli@latest
"unknown flag: --wait-hint" Version < 0.9.1 Upgrade: npm install -g @actionbookdev/cli@latest
Twitter format broken fetch loses structure Use AI reformatting (see references/twitter-handling.md)
Images 0 bytes URL expired Try ?format=jpg&name=orig
obsidian-cli not found Not installed npm install -g obsidian-cli
Batch export blocked Too fast, flagged as bot Add 3-5s sleep between requests

Detailed troubleshooting: See ./references/troubleshooting.md


Edge Cases Handled

  • Long titles → Auto-truncate to 100 chars
  • Special characters → Sanitized (/ : * ? " < > | removed)
  • No images → Steps 5-6 skip gracefully
  • 0-byte images → Auto-retry with alternative formats
  • Data URLs → Filtered out in Step 2

When Using This Skill

  1. Check dependencies firstactionbook --version >= 0.9.1
  2. Test with one article — Verify before batch processing
  3. Twitter/X requires special handling — See references/twitter-handling.md
  4. Respect ToS — Personal use only, rate limit batch exports

References (Progressive Disclosure)

For detailed documentation, see:

  • ./references/twitter-handling.md — Twitter/X special handling (AI reformatting)
  • ./references/batch-export.md — Batch export with rate limiting
  • ./references/troubleshooting.md — Detailed troubleshooting guide
  • ./references/obsidian-setup.md — obsidian-cli setup and configuration
  • ./references/supported-websites.md — Complete website compatibility list

Last Updated: 2026-03-13 | Version: 0.5.0

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。