Nginx環境のWordPressからMisskeyへ！挫折しないWebhook自動投稿の構築ガイド

この記事は約14分で読めます。
この記事が役立ったらブックマーク！ あとで読み返したり、環境構築時のリファレンスに活用できます
B! はてなブックマークに追加
  1. はじめに
    1. 💡 そもそも「Pipedream（パイプドリーム）」ってなに？
  2. 導入手順と初期設定
    1. STEP 1： WordPressでの「WP Webhooks」の導入と初期設定
      1. 1-1. プラグインのインストールと有効化
      2. 1-2. WP Webhooksの送信設定画面を開く
      3. 1-3. 投稿作成時のトリガー（きっかけ）を開く
    2. STEP 2： Pipedreamでのアカウント準備とダッシュボード表示
      1. 2-1. Pipedreamへのサインインとダッシュボードへの移動
    3. STEP 3： Pipedreamでのワークフロー作成とWebhook URLの発行
      1. 3-1. 新しいワークフローの作成を開始する
      2. 3-2. 新規ワークフローの作成完了とエディタ画面
      3. 3-3. トリガー（きっかけ）としてHTTP / Webhookを選択する
      4. 3-4. 専用のWebhook URLをコピーする
    4. ステップ4：WordPress側へのURL登録
    5. ステップ5：Pipedreamでのデータ待ち受け（テスト）の開始
    6. ステップ6：WordPressでテスト記事を公開する
    7. ステップ7：Pipedreamで送信パーツ（Action）を追加する
    8. ステップ8：APIリクエスト（送信パーツ）の選択
    9. ステップ9：Misskeyへの送信URL設定
    10. ステップ10：Misskeyでアクセストークン（i）を発行する
    11. ステップ11：Pipedreamで投稿設定（Key-Value形式）を行う
    12. ステップ12：トークンと投稿文・変数の埋め込み
    13. ステップ13：テスト送信と動作確認
    14. ステップ14：本番化（Deploy）
  3. まとめ：セキュリティと利便性を両立した「賢い連携」を作ろう！

はじめに

「自分のWordPressブログの更新情報を、Misskey（Fediverse）のタイムラインに自動で流したい！」 そう思って、最初はActivityPubプラグインを導入してみたものの……。

  • Nginxのリバースプロキシやファイアウォールの壁に阻まれる
  • 謎のタイムアウトやエラー（cURL error 28など）に悩まされる
  • 結局、管理画面やJSONのアクセス制限と格闘するハメになった

……そんな「ActivityPubの沼」にハマって、あえなく撃沈していませんか？（筆者も盛大にハマりました）

💡 ちなみに：なぜActivityPubで撃沈したのか？
後から振り返って分かったのですが、おそらくセキュリティ対策としてアクセス制限をガチガチに固めた環境だったからです。

  • REST API（/wp-json/）の外部遮断
  • wp-login.php や /?author=（ユーザー名特定）の制限
  • IPアドレス直打ちアクセスの拒否

といった一般的な防御策を講じていたのですが、ActivityPubプラグインはまさにこのREST API通信をフル活用して外部サーバーと相互通信する仕組みになっています。そのため、セキュリティの壁に阻まれて通信がことごとく弾かれてしまっていたのが原因でした。（デフォルト状態のままインストールしたWordPressなら、すんなり通っていた可能性が高いです）

ですが、だからと言って自動投稿のためだけにせっかく固めたREST APIの制限を緩めたり、セキュリティに穴をあけるのは本末転倒ですよね。
もし、やりたいことが「相互フォローやコメントのやり取り」ではなく、単に「ブログを更新したら、Misskeyのアカウントに自動でお知らせを飛ばしたい」という片方向の自動投稿なのであれば、もっとシンプルで、かつ強固なセキュリティを保ったまま運用できる方法があります。
それが、WordPress用プラグイン「WP Webhooks」と、中継ツールの「Pipedream（パイプドリーム）」を組み合わせたWebhook連携です！

複雑なNginxのコンフィグ変更やセキュリティの穴をあける心配もナシ。この記事では、Nginx環境のWordPressからMisskeyへ、挫折せずにスムーズに自動投稿を構築する手順を分かりやすく解説します！

💡 そもそも「Pipedream（パイプドリーム）」ってなに？

具体的な作業に入る前に、今回の仕組みで重要な役割を持つ「Pipedream」について軽く触れておきます。

  • 役割: WordPressから飛んできた「記事が更新されたよ」という信号（データ）を受け取り、Misskeyが読み取れる形に整えてバトンタッチしてくれるクラウド上の自動化中継所（翻訳機のようなもの）です。
  • なぜ使うの？: WordPressから直接Misskeyへデータを送ることも技術的には可能ですが、データの形式を合わせたりエラーを防ぐために、間にPipedreamという「無料の安全な中継ポイント」を挟むことで、コードを書かずに圧倒的カンタンに連携ができるようになります。

全体の仕組みとしては、 【WordPress】（記事公開） ➔ 【Pipedream】（データ中継） ➔ 【Misskey】（自動投稿） というシンプルな片方向の流れになります。

導入手順と初期設定

STEP 1： WordPressでの「WP Webhooks」の導入と初期設定

まずはWordPress側で信号を外へ送り出すための準備をします。

1-1. プラグインのインストールと有効化

  1. ご自身のWordPress管理画面にログインします。
  2. 左側メニューから [プラグイン] ➔ [新規追加] をクリックします。
  3. 画面右上の検索窓に WP Webhooks と入力して検索します。
  4. 検索結果に表示された「WP Webhooks」（公式プラグイン）の [今すぐインストール] を押し、完了後に [有効化] をクリックします。

💡 ここでの解説
なぜこのプラグインが必要なの？: WordPressは標準のままだと、新しい記事が書かれたときに外のサービス（Pipedreamなど）へ自動で「記事が書かれたよ！」と通知する機能がありません。このプラグインがその「メッセンジャー」になってくれます。

1-2. WP Webhooksの送信設定画面を開く

  1. WordPress管理画面の左メニューから [設定] ➔ [WP Webhooks] をクリックします。
  2. 画面上部にあるタブの中から [Send Data]（データを送る機能の設定）をクリックします。

💡 ここでの解説
「Send Data」ってなに？: WP Webhooksには「外部からデータを受け取る（Receive）」機能と「外部へデータを送る（Send）」機能があります。今回は「WordPressからPipedreamへ送る」ため、必ず [Send Data] を開きます。

1-3. 投稿作成時のトリガー（きっかけ）を開く

  1. Send Data タブを開くと、イベント一覧が表示されます。
  2. その中から [Post created]（投稿が作成・公開されたとき）を探し、クリックして展開します。
  3. 後ほどPipedreamから発行されるURLを貼り付けるための設定欄が開きます。（画面を開いたまま次へ進みます）

STEP 2： Pipedreamでのアカウント準備とダッシュボード表示

まずはPipedreamをまだ利用していない状態、あるいはログインした直後の画面から、作業用のメイン画面（ダッシュボード）に移動する手順です。

2-1. Pipedreamへのサインインとダッシュボードへの移動

  1. Pipedreamの公式サイト（ https://pipedream.com/ ）にアクセスし、ログインします。
  2. ログイン直後にアンケート画面や、AIチャット画面（String alphaなど）が表示された場合は、そのまま進めず、画面左上にある「pipedream」のロゴをクリックしてください。
  3. 通常のプロジェクト一覧が表示される「ダッシュボード（Projects画面）」に切り替わります。

💡 ここでの解説
なぜロゴをクリックするの？: Pipedreamに初めてログインすると、AIを使った別の機能画面に案内されがちです。今回は「自分でワークフローを組み立てる画面」を使いたいので、左上のロゴをクリックすることで、作業しやすい通常のダッシュボード画面へ強制的に戻る必要があります。

STEP 3： Pipedreamでのワークフロー作成とWebhook URLの発行

Pipedreamのダッシュボード（Projects画面）から、新しい自動化の部屋（ワークフロー）を作り、WordPress宛ての専用URLを発行します。

3-1. 新しいワークフローの作成を開始する

  1. Pipedreamのダッシュボード画面の右上にある [+ New workflow] ボタンをクリックします。
  2. 「Create new workflow」というポップアップ（小窓）が表示されます。

💡 ここでの解説
「ワークフロー」ってなに？: Pipedreamの中で動く「プログラムの小部屋」のようなものです。「データを受け取る ➔ 処理する ➔ 送り出す」という一連の流れをここに作っていきます。

3-2. 新規ワークフローの作成完了とエディタ画面

  1. Pipedreamのダッシュボードでワークフロー名を入力して作成ボタンを押すと、自動的に空のワークフロー編集画面（先ほどの画像の状態）に切り替わります。
  2. 画面の中央に [Add Trigger] という青いボタンが表示されていることを確認します。

💡 ここでの解説
いまどんな状態？: Pipedreamの仕様変更により、名前をつけたあとにポップアップが出るのではなく、すぐに専用の編集ルーム（キャンバス）が開く仕組みになっています。ここから「何が起きたらこの自動化を動かすか」という「トリガー」を配置していきます。

3-3. トリガー（きっかけ）としてHTTP / Webhookを選択する

  1. 画面中央にある青い [Add Trigger] ボタンをクリックします。
  2. トリガーの選択メニューが開くので、その中から [HTTP / Webhook] を選択します。

💡 ここでの解説
「HTTP / Webhook」ってなに？: 外部のサービス（今回はWordPress）から「データが送られてきたよ！」という通信を、インターネット経由でリアルタイムに受け取るための「専用の窓口（URL）」を作る機能です。

3-4. 専用のWebhook URLをコピーする

トリガーの種類（HTTP / Webhook）を選んで設定画面を開いたら、画面右下にある [Save and continue] ボタンをクリックします。

画面が切り替わり、「The unique URL to trigger this workflow is:」 という項目と、専用のWebhook URLが表示されます。

そのURLのすぐ右側にある [コピーアイコン（二枚重なった紙のマーク）] をクリックして、URLをコピーします。

💡 ここでの解説
このURLはなに？: これがWordPressからの「記事を公開したよ！」という合図を待ち構えるための、あなた専用の受信窓口（URL）になります。

ステップ4：WordPress側へのURL登録

  1. ご自身のWordPressの管理画面に戻ります。
  2. 左側メニューの [設定] > [WP Webhooks] を開き、[Send Data] タブをクリックします。
  3. 一覧から [Post created]（投稿作成時）などの項目を開き、Webhook URLを入力する欄に、先ほどPipedreamでコピーしたURLを貼り付けて保存します。

ステップ5：Pipedreamでのデータ待ち受け（テスト）の開始

  1. Pipedreamのワークフロー画面を開く
    • 先ほどWebhook URLが表示されていた、Pipedreamの編集画面（wordpress to misskey）に戻ります。
  2. テスト待ち受けをスタートさせる
    • 画面の右側にある [Select event to test]（または [Waiting for events…] の下にあるボタンなど）をクリックして、Pipedreamに「外部からの信号をキャッチしてね」というスタンバイ状態（待ち受け状態）を指示します。
    • ※「Waiting for events…」とクルクル回転している状態（または「Test」ボタンを押してイベント待ちの表示になっている状態）になっていればOKです。

💡 ここでの解説
なんでテストが必要なの？: Pipedreamは「WordPressからどんなデータ（記事のタイトルやURLなど）が送られてくるか」を事前に一度知っておかないと、次のステップ（Misskeyに送る文章を作る設定）で「どのデータを使えばいいか」を選べなくなってしまいます。そのため、実際に1回データを飛ばして覚え込ませる必要があります。

ステップ6：WordPressでテスト記事を公開する

  1. WordPressの投稿画面を開く
    • 別タブ等でWordPressの管理画面を開き、[投稿] > [新規追加] をクリックして適当なテスト用の記事を作成します。
    • タイトルや本文に適当な文字（例：タイトルに「テスト投稿」、本文に「テストです」など）を入力します。
  2. 記事を公開する
    • 画面右上にある [公開] ボタンを押し、実際に記事を一般公開（または投稿）します。

💡 ここでの解説
なぜ記事を公開するの？: WP Webhooksの「Post created」機能は、「記事が新しく公開された瞬間」に、あらかじめ登録しておいたPipedreamのURLに向けて「この記事のタイトルやURLだよ！」というデータを自動で発射する仕組みになっています。

記事を「公開」した瞬間に、Pipedreamの画面（いまクルクル回っている画面）がパッと切り替わって、WordPressから届いたデータ（JSONデータ）が表示されるはずです。
Misskeyには専用のアプリブロックがないため、MisskeyのAPI（投稿を送るための住所）に対して直接通信を送る仕組みを作ります。

このポップアップの右側（Popular内）にある、一番上の項目を選びます。

ステップ7：Pipedreamで送信パーツ（Action）を追加する

WordPressからのテストデータを受信できたら、今度はそのデータをMisskeyへ送り出すためのパーツを追加します。

  1. Pipedreamのワークフロー編集画面で、先ほど設定した trigger（上のブロック）のすぐ下にある ［＋］（プラスマーク）ボタンをクリックします。
  2. 画面右側に 「Add a step」 というポップアップ（パーツ選択画面）が表示されます。

💡 ここでの解説
なぜパーツを追加するの？: Pipedreamは「トリガー（きっかけ）」と「アクション（実行する処理）」を重箱のように重ねて作ります。トリガーで受けて終わりではなく、下に「MisskeyへHTTPリクエストを送る」というアクションパーツを繋げることで、はじめて自動化が完成します。

ステップ8：APIリクエスト（送信パーツ）の選択

  1. Pipedreamの検索窓に HTTP と入力します。
  2. 一覧から HTTP / Webhook を選び、Send any HTTP Request をクリックします。

💡 ここでの解説
「Send any HTTP Request」ってなに？: Misskeyなどの外部サービスに向けて「こういう内容で投稿してね！」というリクエストを自由に送信するためのパーツです。これを使うことで、複雑なコードを書かずに指定のURLへデータを飛ばすことができます。

ステップ9：Misskeyへの送信URL設定

追加された custom_request の設定画面（CONFIGURE タブ）で、基本情報を設定します。

  1. HTTP Method: POST に変更します。
  2. URL: https://（あなたのMisskeyドメイン）/api/notes/create を入力します。
    (例: https://misskey.io/api/notes/create)

💡 ここでの解説
なぜPOST？: Misskeyのサーバーに「新しいノート（投稿）を作成してね」と依頼する場合は、HTTPの POST メソッドを使う仕様になっているためです。

ステップ10：Misskeyでアクセストークン（i）を発行する

Misskey側でPipedreamからの投稿を許可するための鍵（アクセストークン）を発行します。

  1. Misskeyの画面を開き、左メニューの [設定]（⚙️） ➔ [サービス連携] を開きます。
  2. [アクセストークンを発行] ボタンをクリックします。
  3. 名前（例: Pipedream自動投稿）を入力し、権限一覧から 「ノートを作成・削除する (notes:write)」 にのみチェックを入れます。
  4. [生成] ボタンを押すと画面に長い英数字の文字列が表示されるので、必ずその場でコピーしておきます。(※画面を閉じると二度と表示されません)

ステップ11：Pipedreamで投稿設定（Key-Value形式）を行う

Pipedreamの設定画面に戻り、Misskeyに送る文章とトークンをセットします。

  1. Headers タブを開きます。
    • Key: Content-Type
    • Value: application/json
  2. Body タブを開きます。
    • Content-Type が application/json になっていることを確認します。
    • 右上の Edit Key-Value Pairs をクリックして入力モードを切り替えます。

ステップ12：トークンと投稿文・変数の埋め込み

Key-Value画面で以下の2行を設定します。

KEYVALUE
i【Misskeyでコピーしたアクセストークン】
text（下記の手順で作成）

text のVALUE欄の作成手順:

  1. VALUEの入力欄に「WordPressに新しい記事が投稿されました！」と入力し、改行（Enter）します。
  2. カーソルを置いたまま、入力欄右下の Select Path（または変数ポップアップ）を開きます。
  3. ツリーを steps ➔ trigger ➔ event ➔ body ➔ post と展開します。
  4. post_title（記事タイトル）をクリックして挿入します。
  5. 再び改行し、同様に guid（記事のURL）をクリックして挿入します。
💡 入力後のVALUE欄の見た目イメージ:
Plaintext
WordPressに新しい記事が投稿されました！

{{steps.trigger.event.body.post.post_title}}
{{steps.trigger.event.body.post.guid}}
Plaintext
A new post has been published on WordPress!

{{steps.trigger.event.body.post.post_title}}
{{steps.trigger.event.body.post.guid}}

⚠️ 注意ポイント（undefined 対策）:
変数選択時に steps.trigger.event.body.test などしか表示されない場合は、まだPipedreamが「本物のWordPressデータ」を受信していません。一度WordPressでテスト記事を「公開」し、trigger 側で受信した最新のイベントを選択してから割り当てを行ってください。

ステップ13：テスト送信と動作確認

  1. 設定画面の一番下にある青い ［Test］ ボタンをクリックします。
  2. 実行結果（RESULTS）に Success と表示され、下部に createdNote のレスポンスが返ってくれば成功です！
  3. ご自身のMisskeyアカウントを確認し、タイトル・URL・アイキャッチ画像（カードプレビュー）が綺麗に投稿されているか確認してみましょう。

ステップ14：本番化（Deploy）

  1. テスト投稿が成功していることを確認したら、画面右上の青い ［Deploy］ ボタンをクリックします。
  2. 画面に 「Congrats!」 と表示され、ワークフローのステータスが Active になればすべての構築が完了です！

まとめ：セキュリティと利便性を両立した「賢い連携」を作ろう！

今回は、Nginx環境でREST APIやアクセス制御を固めたWordPressから、Misskeyへ安全かつ確実に自動投稿を行う方法を解説しました。

ActivityPubによる双方向連携は魅力的ですが、Webサーバーのアクセス制限やWAF、プロキシの仕様に大きく左右されるため、環境によっては構築コストが非常に高くなってしまいます。

しかし、今回ご紹介した 「WP Webhooks × Pipedream」 の組み合わせなら、

  • サーバーのセキュリティ（REST API遮断など）を一切緩めなくていい
  • 複雑なNginxのコンフィグ変更やポート開放が不要
  • Pipedream上で投稿文面や変数を直感的にカスタマイズできる

という大きなメリットがあります。「ブログの更新情報をSNSでお知らせしたいだけなのに、通信エラーで進まない…」とお悩みだった方は、ぜひこの安全でシンプルなWebhook連携を試してみてください！

コメント

タイトルとURLをコピーしました