publish-zsxq-article

Zsxq 記事を公開

Markdown コンテンツを Zsxq（知识星球）の記事エディターに Markdown モードで投稿し、公開前にユーザーが確認できるよう下書きとして保存します。

前提条件

• ブラウザー自動化 MCP（次のいずれか）：
  • Chrome DevTools MCP（mcp__chrome-devtools__*）
  • Playwright MCP（mcp__playwright__*）
• ユーザーが Zsxq（知识星球）にログイン済みであること

ブラウザー MCP ツールの対応表

このスキルは Chrome DevTools MCP と Playwright MCP の両方に対応しています。

操作	Chrome DevTools MCP	Playwright MCP
移動	navigate_page	browser_navigate
スナップショットの取得	take_snapshot	browser_snapshot
スクリーンショットの取得	take_screenshot	browser_take_screenshot
要素のクリック	click	browser_click
テキストの入力	fill	browser_type
ファイルのアップロード	upload_file	browser_file_upload
キーの押下	press_key	browser_press_key
JavaScript の評価	evaluate_script	browser_evaluate

優先順位：デフォルトでは Playwright MCP を使用します。Playwright MCP が利用できない場合に限り、Chrome DevTools MCP を使用してください。

検出：実行時には、mcp__playwright__browser_navigate を優先してください。Playwright ツールが利用できない場合に限り、mcp__chrome-devtools__navigate_page にフォールバックしてください。

主要な URL

• ログインページ：https://wx.zsxq.com/login
• 記事エディター：https://wx.zsxq.com/article?groupId={groupId}

グループ ID の解決

記事エディターに移動するには、Zsxq のグループ ID（URL の groupId= パラメーター）が必要です。デフォルト値をハードコードしないでください。

移動する前に、次の順でグループ ID を解決してください。

1. スキル引数 — ユーザーがグループ ID を指定してスキルを実行した場合は、それを使用します。
2. 環境変数 — ZSXQ_GROUP_ID を確認します（同じグループに繰り返し投稿するユーザー向けのオプションです）。
3. どちらも指定されていない場合は、ユーザーに確認します：

   请提供知识星球的 group ID（在星球 URL 里 groupId= 之后那串数字）。

グループ ID が解決されるまでは、ステップ 2（移動）に進まないでください。

エディターのインターフェイス

Zsxq の記事エディターには、2 つのモードがあります。

リッチテキストモード（デフォルト）

• 書式設定ツールバーを備えた標準的な WYSIWYG エディターです
• 「Markdown モードに切り替え（内測）」をクリックすると切り替わります

Markdown モード（推奨）

• Milkdown（ProseMirror ベースの WYSIWYG Markdown エディター）を使用します
• Markdown を書式設定されたコンテンツ（見出し、太字、リンク、リスト）として表示します
• 「リッチテキストモードに切り替え」をクリックすると元に戻ります

重要：コンテンツの挿入方法 Milkdown エディターへのコンテンツの挿入には、直接入力ではなく貼り付けイベントを使用する必要があります。

• fill ツール → コンテンツはプレーンテキストとして扱われ、Markdown はレンダリングされません
• 貼り付けイベント → Milkdown が Markdown を解析し、適切にレンダリングします

Markdown モードの主要な要素

• タイトル入力欄：テキストボックス「请在这里输入标题」
• コンテンツ領域：ProseMirror エディター（.ProseMirror クラス）
• 保存ボタン：「保存」（下書きとして保存）
• プレビューボタン：「预览」
• 公開ボタン：「发布」（使用しないでください。必ず下書きとして保存します）
• タグ：「添加标签」

主なワークフロー

ステップ 1：コンテンツを準備する

Markdown ファイルを読み込み、次の内容を取り出します。

• タイトル：YAML フロントマターの title フィールド、H1 見出し # Title、またはファイル名から取得します
• コンテンツ：次の内容を取り除いた Markdown 本文です。
  • YAML フロントマター（ファイル先頭の --- で囲まれたブロック）
  • H1 タイトル行（記事タイトルとしてすでに使用しているため）
  • HTML コメント（``）
  • 水平線（---） — Milkdown の貼り付け処理は --- を誤って解析し、その後の見出しや書式設定が壊れることがあります（例：## が H2 ではなく、太字の ** テキストとして表示されます）。貼り付ける前に、すべての --- 行を削除してください。

# Read the markdown file
cat /path/to/article.md

ステップ 2：記事エディターに移動する

# Navigate to the article editor with the resolved group ID (see Group ID Resolution above)
navigate_page: https://wx.zsxq.com/article?groupId={groupId}

ログインしていない場合、ページはログイン画面にリダイレクトされます。ユーザーに手動でログインするよう案内してください。

请先登录知识星球，登录完成后告诉我。
Login URL: https://wx.zsxq.com/login

ステップ 3：Markdown モードに切り替える

ページの読み込み後、「リッチテキストモードに切り替え」のテキストを探し、すでに Markdown モードになっているか確認します。

リッチテキストモードの場合（「Markdown モードに切り替え」と表示されている場合）：

1. 「Markdown モードに切り替え（内測）」をクリックします
2. 「确定」をクリックしてダイアログを確定します

// Check current mode
const switchBtn = document.querySelector('[class*="switch"]');
if (switchBtn && switchBtn.innerText.includes('切换到 Markdown')) {
  // Need to switch to Markdown mode
}

ステップ 4：タイトルを入力する

1. プレースホルダーが「请在这里输入标题」のタイトル入力欄を探します
2. クリックしてフォーカスします
3. タイトルを入力します

click: title textbox
fill: title textbox with article title

ステップ 5：Markdown コンテンツを挿入する（貼り付けイベントを使用）

重要：fill ツールは使用しないでください。Markdown としてレンダリングされず、プレーンテキストが挿入されます。

代わりに、evaluate_script を使用して貼り付けイベントをシミュレートします。

// Simulate paste event to trigger Milkdown's Markdown parsing
() => {
  const markdownContent = `YOUR_MARKDOWN_CONTENT_HERE`;

  const editorEl = document.querySelector('.ProseMirror');
  if (!editorEl) return { error: 'Editor not found' };

  // Focus the editor
  editorEl.focus();

  // Create and dispatch paste event
  const clipboardData = new DataTransfer();
  clipboardData.setData('text/plain', markdownContent);

  const pasteEvent = new ClipboardEvent('paste', {
    bubbles: true,
    cancelable: true,
    clipboardData: clipboardData
  });

  editorEl.dispatchEvent(pasteEvent);

  return { success: true, charCount: markdownContent.length };
}

この方法では、次の処理を行います。

1. Markdown コンテンツを含む ClipboardEvent を作成します
2. ProseMirror エディターにイベントをディスパッチします
3. Milkdown の貼り付けハンドラーが Markdown を解析してレンダリングします

ステップ 6：タグを追加する（任意）

1. 「添加标签」をクリックします
2. タグのテキストを入力します
3. 確定します

ステップ 7：下書きとして保存する

重要：必ず下書きとして保存し、「发布」（公開）は絶対にクリックしないでください

1. 「保存」ボタンをクリックして下書きとして保存します
2. 保存に成功したことを確認します

click: "保存" button

ステップ 8：確認して報告する

保存後：

1. 成功メッセージまたは下書きのステータスを確認します
2. ユーザーに次の内容を報告します。

草稿已保存。请在知识星球中预览并手动发布。
Draft saved. Please review in Zsxq and publish manually.

一連の操作例

ユーザー：「/path/to/my-article.md を知识星球に公開して」

1. Read /path/to/my-article.md
   - Extract title from frontmatter or H1
   - Strip frontmatter, H1 title, HTML comments, and horizontal rules (`---`)
   - Get cleaned content

2. Navigate to https://wx.zsxq.com/article?groupId={resolved groupId}

3. Check if logged in
   - If not, prompt user to login

4. Switch to Markdown mode if needed
   - Click "切换到 Markdown 模式 (内测)"
   - Confirm dialog

5. Fill title
   - Click title input
   - Use `fill` tool to set title text

6. Insert content via paste event
   - Use `evaluate_script` to simulate paste event
   - This triggers Milkdown to parse and render Markdown

7. Save as draft
   - Click "保存"

8. Report success
   - "草稿已保存，请手动预览并发布"

重要なルール

1. 「发布」は絶対にクリックしないでください。「保存」を使用して下書きとして保存します
2. 必ず Markdown モードを使用してください。リッチテキストモードの場合は切り替えます
3. ログイン状態を確認してください。必要に応じてユーザーにログインを促します
4. 元のファイルを保持してください。ソースの Markdown ファイルは変更しないでください
5. 完了を報告してください。下書きが保存され、手動での確認が必要であることをユーザーに伝えます
6. 最初にグループ ID を解決してください。グループ ID をハードコードしないでください。ナビゲーションを開始する前に、スキルの引数、ZSXQ_GROUP_ID 環境変数、またはユーザーへの確認によって解決します（「グループ ID の解決」を参照）
7. Playwright MCP を優先してください。通常は Playwright MCP を使用し、利用できない場合に限り Chrome DevTools MCP を使用します

トラブルシューティング

Markdown がレンダリングされない（構文がそのまま表示される）

書式設定された表示ではなく、**bold** や [link](url) のような Markdown 構文がそのまま表示される場合：

• 原因：貼り付けイベントではなく、fill ツールを使用してコンテンツを挿入しています
• 解決策：evaluate_script メソッドを使用して貼り付けイベントをシミュレートします（ステップ 5 を参照）

Milkdown エディターが Markdown を解析するのは、コンテンツを直接設定したときではなく、貼り付けたときのみです。

水平線（---）によって書式が崩れる

見出しが ** マーカー付きの太字テキストとして表示される場合、または --- 行の後で書式が乱れる場合：

• 原因：Milkdown の貼り付けハンドラーが ---（水平線）を誤って解析し、その後の Markdown 要素を破損させています
• 解決策：貼り付ける前に、コンテンツからすべての --- 行を削除します。セクションの区切りには見出しを使用できます

ログインが必要な場合

ページがリダイレクトされる、またはログインを求めるメッセージが表示される場合：

请先登录知识星球: https://wx.zsxq.com/login
登录完成后告诉我。

コンテンツが長すぎる場合

Zsxq の文字数上限は 100,000 文字です。コンテンツが上限を超える場合：

文章内容超过100000字符限制，请考虑拆分文章。

モード切り替えダイアログ

Markdown モードに切り替えると、確認ダイアログが表示されます。

• メッセージ：「确定要切换编辑器？当前内容将不会同步至新编辑器」
• 「确定」をクリックして確定します

エディターが読み込まれない場合

エディターの要素が表示されない場合：

1. ページが完全に読み込まれるまで待ちます
2. 新しいスナップショットを取得します
3. それでも読み込まれない場合は、ページを再読み込みします

要素の参照

要素	セレクター／識別子	説明
タイトル入力欄	textbox "请在这里输入标题"	記事のタイトル（最大 60 文字）
コンテンツ領域	.ProseMirror (Milkdown エディター)	Markdown コンテンツ（最大 100000 文字）
保存ボタン	"保存"	下書きとして保存
プレビューボタン	"预览"	記事をプレビュー
公開ボタン	"发布"	使用しないでください
モード切り替え	"切换到 Markdown 模式" / "切换到富文本模式"	エディターモードを切り替え
タグ	"添加标签"	記事のタグを追加
文字数	"正文字数：X /100000"	文字数カウンター

画像のアップロード

画像のアップロードには、リッチテキストモードと Markdown モードのどちらでも upload_file ツールを使用できます。

前提条件

• まず画像ファイルのサイズを確認します。500KB を超える場合は、WebP に圧縮するか、画質を下げます
• ls -la /path/to/image.png を使用してファイルサイズを確認します

画像のアップロード手順

どちらのエディターモードでも、画像ボタンを使用して画像をアップロードできます。

1. 画像ボタンの ref／uid を見つけるためにスナップショットを取得します

   • リッチテキストモード：button "image"
   • Markdown モード：generic description="Add image"

2. 画像をアップロードします

   Chrome DevTools MCP：

   upload_file:
     uid: <image button uid>
     filePath: /path/to/image.png
   

   Playwright MCP：

   browser_file_upload:
     ref: <image button ref>
     paths: ["/path/to/image.png"]
   

3. アップロードを確認します。スクリーンショットを取得し、エディターに画像が表示されていることを確認します

画像アップロードの主な要素

モード	画像ボタン	スナップショット内のセレクター
リッチテキスト	button "image"	button "image"
Markdown	画像を追加	generic description="Add image"

画像アップロードの例（Markdown モード）

# 1. Take verbose snapshot to find image button
take_snapshot(verbose=true)

# 2. Find "Add image" button (e.g., uid=26_59)
# Look for: generic description="Add image"

# 3. Upload image directly to the button
upload_file:
  uid: 26_59  # (example uid for "Add image" button)
  filePath: /Users/user/Downloads/image.png

# 4. Verify with screenshot
take_screenshot

画像アップロードの例（リッチテキストモード）

# 1. Take snapshot to find image button
take_snapshot

# 2. Find image button (e.g., uid=12_7)
# Look for: button "image"

# 3. Upload image to the button
upload_file:
  uid: 12_7  # (example uid for image button)
  filePath: /Users/user/Downloads/image.png

# 4. Verify with screenshot
take_screenshot

画像サイズの制限

• 推奨される最大サイズ：画像 1 枚あたり 500KB
• これより大きい画像は、ImageMagick や sips などのツールを使って先に圧縮してください：

  # Check size
  ls -la /path/to/image.png
  
  # Compress if needed (macOS)
  sips -s format jpeg -s formatOptions 80 /path/to/image.png --out /path/to/image_compressed.jpg
  

画像アップロードのトラブルシューティング

アップロード後に画像が表示されない場合：

• 新しい詳細スナップショットを取得して、画像ボタンの正しい uid を確認してください
• 画像ファイルが存在し、アクセス可能であることを確認してください
• 単語数インジケーターを確認してください。アップロードが成功すると数が増えます

正しいボタンの uid を見つける方法：

• take_snapshot(verbose=true) を使って要素の説明を確認してください
• Markdown モードでは、generic description="Add image" を探してください
• リッチテキストモードでは、button "image" を探してください

技術的な詳細

Zsxq の記事エディターでは、2 種類のエディターが使われています。

リッチテキストモード（Quill）

• Quill：最新の WYSIWYG エディターです
• 画像アップロード：upload_file ツールを button "image" に使用すると機能します
• ツールバー：画像を含む標準的な書式設定ボタンがあります

Markdown モード（Milkdown）

• Milkdown：プラグイン駆動型の WYSIWYG Markdown エディターです
• ProseMirror：基盤となるリッチテキスト編集フレームワークです
• 貼り付け処理：Milkdown が貼り付けイベントをインターセプトし、Markdown コンテンツを解析します
• 画像アップロード：upload_file ツールを generic description="Add image" に使用すると機能します

このため、md.bytenote.net 経由のユーザーのワークフローが機能します。どのソースから貼り付けても Milkdown の Markdown パーサーが実行され、コンテンツが適切にレンダリングされます。