space-wechat-layout

WeChat公式アカウント向けレイアウト

提供された記事をWeChat互換のリッチHTMLとして表示し、「复制 HTML」ボタンを含むローカルHTMLプレビュー画面を作成します。記事の意味と内容を保ち、レイアウトの読みやすさを高めるための軽微な構造調整のみ行います。

公式アカウント向け画像レイアウト

位置づけ：これは公式アカウント向けの「記事全体のビジュアル／レイアウト」を担うものです。ユーザーが記事を提供し、公式アカウントのエディターにそのまま貼り付けられる HTMLレイアウト を出力します（「复制 HTML」でワンクリックでコピー）。このコレクションにある画像生成Skillの相棒です。space-chart-image / space-text-logic-diagram は単体の画像を生成し、このSkillは記事全体のレイアウトを作成します。

出力：デフォルトはHTML（このSkillのメイン経路）です。特定のブロック（ヘッダー画像／名言カードなど）を画像として書き出す必要がある場合は、そのブロックのスクリーンショットを撮ってPNGとして書き出すか、Codex/workbuddy内蔵の画像生成モデルに再描画を依頼します。

内容は書き換えません：レイアウト上の軽微な調整のみ行い、すべての事実、順序、引用、結論を保持します。

ワークフロー

1. 記事を受け取る

   • ユーザーが記事をまだ提供していない場合は、貼り付けるよう依頼します。
   • 最初の#見出し、または最初のタイトルらしい強調行からタイトルを特定します。明確でない場合は、タイトルを尋ねます。

2. スタイルを尋ねる

   • ユーザーがすでに指定していない限り、使用するスタイルを尋ねます。
     • Claude：温かみのあるオフホワイト、落ち着いたエディトリアル調、控えめな枠線、ゆとりある余白。
     • OpenAI：明るい白、黒／グレーを基調とした実用的なドキュメント風。
     • Google：明るい白、淡い青／緑／黄／赤のアクセント、モジュール式カード。
   • ユーザーが「お任せ」と言った場合は、内容に応じて選びます。
     • 内省的な内容／物語／意見 → Claude
     • 技術／チュートリアル／製品メモ → OpenAI
     • データ／リスト／比較／教育 → Google
   • 選択したスタイルを実装するとき、またはスタイルを比較するときに限り、references/style-guide.mdを読みます。

3. コンテンツを整える

   • 記事を大幅に書き換えないでください。
   • すべての事実、順序、引用、スコア、名前、結論をそのまま保持します。
   • 許可されるのはレイアウトを目的とした最適化のみです。
     • 見出しレベルを統一する。
     • 非常に長い段落を分割する。
     • 明らかな表／リストを、スタイル付きHTMLの表／カードに変換する。
     • ユーザーの要望がある場合、またはセクションが非常に長い場合は、長い本文セクションをスクロール可能なプレビュー領域で囲む。

4. ローカルプレビューを作成する

   • 可能な場合は、単一の静的なindex.htmlを優先します。
   • 既存のVite／フロントエンドアプリ内で作業する場合は、別の構成を作らず、アプリの既存構造に従います。
   • 以下を含めます。
     • 上部ツールバー
     • 复制 HTMLボタン
     • コピー後に表示されるステータスメッセージ
     • 中央揃えのWeChatコンテンツプレビュー（max-width: 677px）
     • モバイル対応レイアウト
   • コピーする内容は記事本文のHTMLのみとし、アプリのUI全体は含めません。

5. コピー動作

   • text/htmlとtext/plainの両方を使用してClipboard APIでコピーします。
   • フォールバックとして、プレビューのノードを選択し、document.execCommand("copy")を使用します。
   • ボタンの文言は明確にします。复制 HTMLまたは复制到公众号。

6. WeChatのHTML制約

   • コピーする記事HTML内ではインラインスタイルを使用します。
   • 外部CSS、スクリプト、ウェブフォント、CSS変数、重要なコンテンツのみをSVGで表現すること、コピー対象の記事内にインタラクティブなコントロールを含めることは避けます。
   • 選択したスタイルでより小さな角丸が必要な場合を除き、カードのborder-radiusは8px以下にします。
   • section、h1、h2、h3、p、table、blockquoteなどのシンプルなセマンティックブロックを使用します。
   • スクロール可能なエッセイ／本文領域では、記事セクションにmax-heightとoverflow-y:autoをインラインスタイルで指定します。見出し、スコアの概要、結論はスクロール領域の外に配置します。

7. 確認する

   • 利用可能な場合は、プロジェクトのビルドコマンドを実行します。
   • ローカル開発サーバーを起動するか、既存のサーバーを再利用します。
   • ローカルURLが応答することを確認します。
   • Browserが利用可能で安定している場合は、ページを目視確認します。それ以外の場合は、ビルド／サーバーの検証結果を報告します。

出力形式

現在のプロジェクト内にファイルを作成または更新します。通常の静的ページの場合は、次を使用します。

wechat-layout-output/
├── index.html
└── assets/        # only if local images are needed

既存のアプリの場合は、アプリの通常のエントリーファイルを更新し、可能であればサーバーURLを変更しないでください。

デフォルトのプレビューシェル

プレビューページには、プロジェクトに合わせて調整したうえで、次の動作を含めます。

async function copyArticleHtml(articleNode, statusNode) {
  const html = articleNode.innerHTML;
  const text = articleNode.innerText;
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        "text/html": new Blob([html], { type: "text/html" }),
        "text/plain": new Blob([text], { type: "text/plain" }),
      }),
    ]);
    statusNode.textContent = "已复制 HTML，可以粘贴到公众号正文区域。";
  } catch {
    const range = document.createRange();
    range.selectNode(articleNode);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("copy");
    selection.removeAllRanges();
    statusNode.textContent = "已用兼容模式复制当前预览内容。";
  }
}

最終回答

ユーザーに次の内容を伝えます。

• ローカルプレビューURL
• 使用したスタイル
• 作成または変更したファイル
• WeChatにコピーして貼り付ける方法
• 実行できた検証と、実行できなかった検証