Claude CodeとAgent Browserを組み合わせると、mdファイルをnote.comに自動転記・下書き保存できます。
- 要点1: ログイン済みChromeプロファイルを利用するため、毎回の認証操作が不要
- 要点2: タイトル・本文の自動入力から下書き保存まで、Claude Codeへの指示1つで完結
- 要点3: ProseMirrorエディタの特性上、画像挿入は手動が必要。テキスト記事なら完全自動化が可能
対象: note.comへの投稿を効率化したい個人クリエイター・コンテンツ担当者
今日やること: agent-browser専用のChromeプロファイルを作成し、noteにログインして保存する
この記事の目次
Claude CodeとAgent Browserを組み合わせると、Markdownファイルで書いた記事をnote.comに自動で転記し、下書き保存まで完了できます。
「記事を書いたあと、コピペして別のプラットフォームに投稿する作業が面倒」——こういった声は、複数メディアで発信するクリエイターや企業のコンテンツ担当者からよく聞かれます。
この記事では、実際に運用中の自動化スキル「note-draft-creator」の設計思想と具体的な操作フロー、そして実際にハマったポイントと対処法を公開します。
Claude Codeでnoteを自動操作できる理由
Claude Codeには、ブラウザを操作する機能が標準では搭載されていません。しかし、agent-browserというスキル（カスタム機能）を使うことで、Chrome上のWebサービスを自動操作できるようになります。
agent-browserとは？ブラウザ操作自動化の仕組み
agent-browserとは、Claude CodeがChromeブラウザを操作するための仕組みです。クリック・テキスト入力・スクリーンショット確認などの操作を、Claude Codeからの指示に従って実行します。
技術的には、Playwright（MicrosoftがオープンソースとしてリリースしたWebテストライブラリ）をベースに、Claude Codeと連携できるように設計されています。PythonやJavaScriptの知識は不要で、「この要素をクリックして」「このテキストを入力して」という自然言語の指示で操作できます。
ログイン済みChromeプロファイルの活用
agent-browserの大きな特徴は、ログイン済みのChromeプロファイルをそのまま使える点です。
Chromeはプロファイルごとに、Cookie・セッション情報・認証トークンなどを保持します。agent-browser専用のプロファイルを作成してnoteにログインしておけば、Claude Codeがブラウザを起動するたびにログイン状態が自動で復元されます。
毎回のログイン操作をコード化する必要がなく、設定の手間も大幅に削減できます。
ポイントログイン済みプロファイルの活用は、noteだけでなく、Gmail・Google Sheets・社内管理システムなど、認証が必要なあらゆるWebサービスの自動化に応用できます。
事前準備 — 3つのセットアップ
実際に動かすまでに必要な準備は3つです。
①Claude Code（またはOpenClaw）の導入
Claude Codeは、AnthropicがリリースしたAIコーディングツールです。ターミナル上で対話しながら、コードの生成・ファイル操作・コマンド実行などを行えます。
AIを「指示を出すだけの道具」として使うのではなく、実際にPCを操作するエージェントとして機能させるのがClaude Codeの特徴です。
インストールはnpm経由で行います：
npm install -g claude-code常時稼働させたい場合は、OpenClaw（OpenClaw Gateway）と組み合わせることで、Slackからの指示にも対応できます。
②専用Chromeプロファイルの作成とnoteへのログイン保存
agent-browser専用のChromeプロファイルを作成します。通常利用のプロファイルと分けることで、セキュリティリスクを下げられます。
# 専用プロファイルディレクトリを作成mkdir -p ~/.chrome-agent-browser# 専用プロファイルでChromeを起動open -a "Google Chrome" --args --user-data-dir=$HOME/.chrome-agent-browser起動したChromeで、手動でnote.comを開いてログインします。「ログイン状態を保持する」オプションを有効にしたうえでブラウザを閉じれば、次回以降はログイン状態が引き継がれます。
③agent-browserスキルの有効化
CLAUDE.mdファイル（Claude Codeのグローバル設定）に、agent-browserスキルへの参照を追加します。スキルファイルは ~/.claude/skills/agent-browser/SKILL.md に配置します。
スキルが有効になると、「noteに記事を投稿して」という自然言語の指示だけで、ブラウザ操作が開始されます。
＼ Claude Codeの導入、何から始めればいいかわかります ／
法人向けClaude Code個別指導の無料相談はこちら実際の操作フロー — mdファイルから下書き保存まで
準備が整ったら、実際の操作フローを見ていきます。ここでは、あるメディアサイトで実際に使っているnote-draft-creatorスキルの手順を公開します。
このスキルを導入したことで、月40本以上の記事を複数プラットフォームへ転載する作業のうち、テキスト入力部分の工数を約8割削減できました（編集・確認作業は人間が行います）。
①mdファイルを準備する（タイトル・本文の構成）
noteに投稿するMarkdownファイルは、以下の形式で用意します：
# 記事タイトル（ここが投稿のタイトルになる）本文の導入部分...## 見出し1本文...## 見出し2本文...重要な注意点：– 1行目の # タイトル がnoteのタイトル欄に入力される- テーブル（Markdown表）はnoteで正しく表示されないため、テキストか箇条書きに変換しておく- コードブロック（バッククォート3つ）は表示が崩れる場合があるため、コードを含む記事は手動確認が必要
②Claude Codeへの指示の出し方
mdファイルの準備ができたら、Claude Codeに以下のように指示します：
/note-draft-creator /path/to/記事.mdまたは、自然言語で：
note-draft-creatorを使って、/Users/riku/記事/article.md の内容をnoteに下書き投稿してClaude Codeがスキルを読み込み、自動でブラウザを起動して操作を開始します。
③noteエディタの操作シーケンス（タイトル→本文→保存）
内部では以下の順序でnoteエディタが操作されます：
| ステップ | 操作内容 |
|---|---|
| 1 | note.comにアクセス（ログイン済み状態） |
| 2 | 右上の「投稿」ボタンをクリック |
| 3 | 「テキスト記事」を選択 |
| 4 | タイトル欄にクリックし、1行目のテキストを入力 |
| 5 | 本文欄にクリックし、本文を入力（長文は3,000文字ずつ分割） |
| 6 | 「下書き保存」ボタンをクリック |
| 7 | 保存完了を確認してClaude Codeに報告 |
スクリーンショットで各ステップの状態を確認しながら進むため、エラーが起きた場合も自動でリカバリを試みます。
Claude Codeの導入や活用方法について、個別にご相談いただけます。「どの業務から自動化すればいいか」「自分のワークフローへの適用方法を知りたい」といった段階から対応しています。
ハマりやすいポイントと対処法
実際に運用してみて遭遇した問題と、その解決策を共有します。
ProseMirrorエディタは「貼り付け」が難しい
noteのエディタはProseMirrorというライブラリで構築されており、外部からのテキスト入力に独特の制約があります。
ProseMirrorとは、カスタマイズ可能なリッチテキストエディタを構築するためのJavaScriptライブラリです。Notion・GitLab・noteなど多くのサービスで採用されていますが、外部からのプログラム的な操作（自動化）を前提に設計されていません。
そのため、クリップボードから一括貼り付けをしようとすると、書式が崩れたり、一部のテキストが入力されなかったりする問題が発生します。
解決策： テキストを3,000文字程度に分割し、typeアクションで直接キー入力する方法に切り替えます。貼り付けではなく1文字ずつ入力する形式のため処理時間は増えますが、安定性が大幅に向上します。
画像は自動挿入できない（手動アップロードが必要）
noteの画像アップロード機能は、OSのファイル選択ダイアログを使用します。ブラウザ操作の自動化では、ネイティブのダイアログ操作に制限があるため、画像の完全自動化は現時点では困難です。
現実的な解決策： テキスト記事を自動投稿した後、手動で画像をアップロードするハイブリッド方式を採用します。テキスト入力の工数削減だけでも大きな効果があります。
なお、osascriptを使ってmacOSのダイアログを操作する方法も存在しますが、noteのダイアログとの連携は不安定なため、安定稼働を優先して手動操作に留めています。
テーブル記法はnoteでは機能しない
Markdownのテーブル記法（| 列1 | 列2 |の形式）はnoteで正しく表示されません。
解決策： 自動投稿前にMarkdownファイルのテーブルを箇条書きや平文に変換しておきます。変換は別のClaude Codeセッションで「このテーブルを箇条書きに変換して」と指示するだけで完了します。
長文記事は分割して入力する
5,000文字を超える長文記事では、一度に入力しようとするとタイムアウトや誤操作が発生する場合があります。
解決策： スキルの内部で、本文を3,000文字ずつのチャンクに分割して入力する仕組みを実装しています。分割タイミングは見出し（h2/h3）の区切りを優先するため、自然な段落単位で処理されます。
＼ 業務自動化のお悩み、プロが30分で整理します ／
法人向けClaude Code個別指導の無料相談はこちら活用シーン — どんな場面で使えるか
SEO記事をnoteにも転載したい場合
WordPressなどで公開したSEO記事をnoteにも転載することで、note経由の流入を獲得できます。MAU約6,300万（2024年時点）の大規模プラットフォームへのリーチは、SEOだけに頼らないコンテンツ配信戦略として有効です。
手順としては、WP-CLIでWordPressから記事をエクスポートし、それをClaude CodeがMarkdown形式に変換、そのままnote-draft-creatorスキルに渡すというパイプラインを構築できます。
複数プラットフォームへのクロスポスト自動化
「1本の記事を書いたら、WordPress・note・自社メディアに同時展開する」というワークフローが実現できます。
Claude Codeのスキルチェーン機能を使えば、記事執筆（writing）→WordPress公開（wp-publish）→note転載（note-draft-creator）という連続した自動化フローを1つの指示で実行できます。
よくある質問
Q. Claude Codeがないと使えませんか？
基本的にはClaude Codeが必要です。ただし、agent-browserスキルはPlaywrightベースのブラウザ自動化ですので、Playwrightを直接使ってnoteを操作するスクリプトを書くことも技術的には可能です。Claude Codeを使う場合、コードを書く必要がなく自然言語の指示だけで操作できる点が大きなメリットです。
Q. ログイン状態が切れた場合はどうなりますか？
ログインセッションが切れると、noteのエディタに遷移できずにスキルがエラーで停止します。その場合、手動でChromeプロファイルを開いてnoteにログインし直すだけで復旧します。一般的に、「ログイン状態を保持する」を選択していれば、数週間〜数ヶ月は再ログインが不要です。
Q. 画像はどうすれば自動化できますか？
完全な自動化は現時点では難しいですが、一部自動化は可能です。osascriptを使ってmacOSのファイル選択ダイアログを操作する方法があり、安定性に課題はあるものの、チャレンジする価値はあります。より確実な方法として、noteの非公式APIを経由する方法もありますが、利用規約の観点から自己責任での活用になります。
Q. note proへの加入は必要ですか？
note proへの加入は不要です。無料のnoteアカウントがあれば、スキルを利用できます。ただし、note proでは予約投稿やメンバーシップ限定記事など追加機能があるため、高度な活用を検討する場合は加入を検討してください。
＼ AI活用の「次の一手」を一緒に考えませんか ／
法人向けClaude Code個別指導の無料相談はこちらまとめ
Claude CodeとAgent Browserを組み合わせることで、mdファイルをnote.comに自動で転記し、下書き保存まで完了できます。
本記事のポイントをまとめます：
- ログイン済みChromeプロファイルを活用することで、毎回の認証操作が不要になる
- note-draft-creatorスキルを使い、タイトル・本文の自動入力から下書き保存まで自然言語の指示で実行できる
- ProseMirrorエディタの制約を理解した上で、テキスト分割入力・画像の手動補完というハイブリッド方式を採用することで安定稼働できる
まずは専用のChromeプロファイルを作成し、noteにログインした状態を保存するところから始めてみてください。設定さえ整えば、記事投稿の工数を大幅に削減できます。
Claude Codeの導入・活用をサポートします
株式会社Nexaでは、Claude Codeを活用した業務自動化の個別指導・企業研修を提供しています。「note投稿の自動化に限らず、自社のワークフローに合った使い方を教えてほしい」「非エンジニアでも3ヶ月で業務自動化を実現したい」という方を対象に、実務に即したプログラムを提供しています。
