🤖Manus: n8nでブラウザ操作を自動化する方法ゼロからいっぱい学ぶAI

こんにちは、ゼロっぱいです！

今回は、こだまくんの頼れるAIエージェント「manus」くんにブログ記事を書いてもらったよ📄✨

この記事では、n8nという自動化ツールを使ってX（旧Twitter）のログインと投稿を自動化する方法を、3つの手段を比較しながら紹介してるんだ。

「えっ、Xってそんなふうに自動化できるの！？」「JavaScriptもコードも分かんないんだけど…」という人でも安心！ manusくんが丁寧にステップバイステップで教えてくれるから、初心者でも挑戦しやすい内容になってるよ。

しかも、このmanusくん、寝てる間でも作業してくれるんだって！これはゼロっぱいもうかうかしてられないね💤💻

👉 manusを試してみたい人はここからどうぞ：無料クレジット付き招待リンク

このガイドでは、n8nを使用してブラウザの操作（特にXへのログインとポスト）を自動化する方法について説明します。初心者の方でも理解しやすいように、複数の方法を比較し、詳細な手順を提供します。

目次

1. はじめに

2. 方法の比較

3. 方法1: Puppeteerノードを使用する

4. 方法2: Browserlessノードを使用する

5. 方法3: 公式Xノードを使用する

6. トラブルシューティング

7. まとめ

はじめに

n8nは強力なワークフロー自動化ツールで、様々なサービスやアプリケーションを連携させることができます。ブラウザ操作の自動化には、主に以下の方法があります：

1. Puppeteerノード: ブラウザ操作を詳細に制御できるノード

2. Browserlessノード: クラウド環境でも使いやすいブラウザ自動化ノード

3. 公式Xノード: API経由でXに投稿するノード（ログイン操作は不要）

方法の比較

方法の比較

初心者の方には、Browserlessノードまたは公式Xノードをおすすめします。

方法1: Puppeteerノードを使用する

インストール方法

1. n8nの管理画面を開きます

2. 「設定」>「コミュニティノード」に移動します

3. 「インストール」をクリックします

4. n8n-nodes-puppeteer と入力します

5. コミュニティノードの使用に関するリスクに同意します

6. 「インストール」をクリックします

Xへのログインとポストの設定

ワークフロー作成手順

1. 新しいワークフローを作成します

2. トリガーノード（例：「Manual」）を追加します

3. Puppeteerノードを追加し、以下のように設定します：

   • 操作: Execute Custom Function

   • URL: https://twitter.com/login

   • 関数: 以下のコードを使用します

javascript

async function execute( ) { await page.waitForSelector('input[name="text"]'); await page.type('input[name="text"]', 'あなたのXのユーザー名またはメールアドレス'); await page.click('div[role="button"]:has-text("次へ")'); await page.waitForSelector('input[name="password"]'); await page.type('input[name="password"]', 'あなたのパスワード'); await page.click('div[role="button"]:has-text("ログイン")'); await page.waitForNavigation(); await page.waitForSelector('div[role="textbox"]'); await page.click('div[role="textbox"]'); await page.type('div[role="textbox"]', '自動投稿のテストです #n8n #自動化'); await page.waitForSelector('div[role="button"]:has-text("ポスト")'); await page.click('div[role="button"]:has-text("ポスト")'); await page.waitForTimeout(3000); return { success: true, message: 'ログインとポストが完了しました' };}

認証情報の安全な管理

上記のコードでは、ユーザー名とパスワードがハードコードされていますが、これは安全ではありません。代わりに、n8nの認証情報機能を使用しましょう：

1. n8nの「認証情報」セクションに移動します

2. 「新しい認証情報を作成」をクリックします

3. 「汎用API」を選択します

4. 名前を「X認証情報」などとし、ユーザー名とパスワードを入力します

5. 保存します

そして、Puppeteerノードのコードを以下のように変更します：
javascript

async function execute() { const credentials = $credentials.twitter; const username = credentials.username; const password = credentials.password; await page.type('input[name="text"]', username); await page.type('input[name="password"]', password);  }

方法2: Browserlessノードを使用する

インストール方法

1. n8nの管理画面を開きます

2. 「設定」>「コミュニティノード」に移動します

3. 「インストール」をクリックします

4. n8n-nodes-browserless と入力します

5. コミュニティノードの使用に関するリスクに同意します

6. 「インストール」をクリックします

Browserlessサービスのセットアップ

Browserlessノードを使用するには、Browserlessサービスが必要です。自己ホスト型またはクラウドサービスを選択できます：
自己ホスト型（Dockerを使用）
bash

docker run  --rm  -p 3000:3000  -e "CONCURRENT=10"  -e "TOKEN=あなたの安全なトークン"   ghcr.io/browserless/chromium

クラウドサービス
Browserless.ioでアカウントを作成し、APIキーを取得します。

Browserless認証情報の設定

1. n8nの「認証情報」セクションに移動します

2. 「新しい認証情報を作成」をクリックします

3. 「Browserless API」を選択します

4. 以下の情報を入力します：

   • 名前: Browserless認証情報

   • URL: http://localhost:3000（自己ホスト型の場合 ）または提供されたBrowserlessのURL

   • トークン: 設定したトークンまたはAPIキー

5. 保存します

Xへのログインとポストの設定

1. 新しいワークフローを作成します

2. トリガーノード（例：「Manual」）を追加します

3. Browserlessノードを追加し、以下のように設定します：

   • 操作: Execute Custom Function

   • 認証情報: 先ほど作成したBrowserless認証情報

   • URL: https://twitter.com/login

   • 関数: Puppeteerノードと同様のコードを使用します（上記参照 ）

方法3: 公式Xノードを使用する

公式Xノードは、ブラウザ操作ではなくAPI経由で投稿するため、ログイン操作は必要ありません。ただし、APIキーの取得が必要です。

APIキーの取得方法

1. Twitter Developer Portalにアクセスします

2. アカウントを作成し、開発者アカウントにアップグレードします

3. 新しいプロジェクトとアプリを作成します

4. 以下の情報を取得します：

   • API Key

   • API Secret

   • Access Token

   • Access Token Secret

X認証情報の設定

1. n8nの「認証情報」セクションに移動します

2. 「新しい認証情報を作成」をクリックします

3. 「Twitter API」を選択します

4. 取得したAPIキー情報を入力します

5. 保存します

ポストの設定

1. 新しいワークフローを作成します

2. トリガーノード（例：「Manual」）を追加します

3. Twitterノードを追加し、以下のように設定します：

   • 操作: Create Tweet

   • 認証情報: 先ほど作成したTwitter認証情報

   • テキスト: 投稿したい内容

画像付きポストの設定

画像付きでポストするには、以下の手順を追加します：

1. HTTPリクエストノードを追加して画像をダウンロードするか、ローカルファイルノードを使用します

2. Twitterノードの設定で「Media Binary Property」フィールドに、画像データを含むプロパティ名を指定します

Chromeプロファイルを使用した認証管理

Puppeteerノードでは、Chromeプロファイルを使用して認証情報を管理することもできます：
javascript

 async function execute() { await page.waitForSelector('div[role="textbox"]'); await page.click('div[role="textbox"]');    }

トラブルシューティング

Puppeteerノードのインストールに関する問題

問題: Puppeteerノードのインストール時にエラーが発生する
解決策:

1. n8nをDockerで実行している場合は、提供されているDockerファイルを使用します

2. 必要なライブラリをインストールします：

Xのセレクタが変更された場合

問題: Xのウェブサイトが更新され、セレクタが変更された
解決策:

1. ブラウザの開発者ツールを使用して、新しいセレクタを特定します

2. スクリプト内のセレクタを更新します

ログインに失敗する場合

問題: 2段階認証やCAPTCHAなどによりログインに失敗する
解決策:

1. Chromeプロファイルを使用して、手動でログインした状態を保存します

2. スクリプトでは投稿操作のみを行います

まとめ

n8nでブラウザ操作を自動化するには、主に3つの方法があります：

1. Puppeteerノード: 最も柔軟性が高いが、設定が複雑

2. Browserlessノード: クラウド環境でも使いやすく、設定が比較的簡単

3. 公式Xノード: API経由で最も簡単に投稿できるが、ブラウザ操作はできない

初心者の方には、まず公式Xノードから始めることをおすすめします。ブラウザ操作が必要な場合は、Browserlessノードが比較的取り組みやすいでしょう。
より高度な自動化が必要な場合は、Puppeteerノードを使用し、JavaScriptでカスタムスクリプトを作成することで、ほぼすべてのブラウザ操作を自動化できます。

🧁 まとめ：AIエージェントに任せて、自分は創造的なことに集中しよ！

この記事を通して、**AIエージェントが「Web操作」までできる時代が来てる！**ってことがよく分かったよね。

手作業でやっていたログインや投稿が、manus × n8nでどんどん自動化できちゃうって、ほんとにすごい。時間もミスも減るし、もっと自由に創造に集中できる時代がもうすぐそこに来てるのかも。

ゼロっぱいも、manusくんに負けないようにがんばらないと〜！ それじゃ、また次の記事で会おうね〜🍰✨