noteへの自動投稿を実装してみた 指定記事だけをクラウド経由で連携する仕組み

アップシェアブログから、指定した記事だけをnoteへ自動で下書き投稿する仕組みを構築しました。Playwrightとクラウド実行環境を使い、PCを起動していなくても動く構成にした実装記録です。

こんにちわ、稲井田です。ブログ記事を見て頂きありがとうございます。

今回は「自社ブログの記事を、指定したものだけnoteへ自動投稿する仕組み」を実際に作った話です。

最初は「ブログの記事をnoteにも流せたら便利だよね」という、かなり軽い発想でした。ところが実際にやってみると、認証、ブラウザ操作、クラウド実行、永続化と、思った以上に論点が多い。こういう時、簡単そうに見えるものほど奥が深いですね。途中で何度か「自動化するために人間が一番働いてないか?」と思いました。

全部の記事を流さない設計にした

最初に決めたのは、ブログに公開した記事を全部noteへ送るのではなく、管理画面で「noteにも投稿する」を選んだ記事だけを対象にすることでした。

これは運用上かなり大事です。オウンドメディアの記事とnoteの記事では役割が少し違います。SEOを意識した専門記事もあれば、会社の考え方や経営者個人の視点を読んでもらいたい記事もある。全部を機械的に複製するより、「これはnoteでも読んでほしい」という記事だけを選べる方が自然です。

そこで記事データにnote連携用のフラグを持たせ、初期値は必ずOFF。ONになった記事だけが投稿処理へ進むようにしました。

ブラウザ操作はPlaywrightで自動化

今回のnote投稿では、Playwrightを使って実際の編集画面を操作しています。処理としては、新規記事画面を開き、タイトルを入力し、本文を入力し、最後に「下書き保存」を押すというものです。

まずWindows PC上でPlaywrightを動かし、noteへのログイン状態を保存しました。ここではパスワードをプログラムへ直接書かず、ログイン後のセッション情報を専用ファイルとして保存しています。

ローカルテストでは、タイトル欄と本文欄を特定し、自動入力から下書き保存まで問題なく成功しました。ここまでは比較的順調でした。

PCを切っても動くようにクラウドへ移した

ただし、PC上だけで動く自動化では、PCを起動していない時間は投稿できません。そこで投稿実行部分をRailwayへ移し、常時稼働する構成にしました。

ブログ側からは、記事タイトル、本文、元記事URLなどをWebhookで送信します。クラウド側ではそれを受け取り、保存してあるnoteの認証状態を使ってPlaywrightを起動し、noteへ下書きを作成します。

認証情報については永続Volumeへ保存しています。コンテナが再起動してもログイン状態を保持できるようにするためです。またWebhookにはトークン認証を入れ、誰でも投稿処理を呼び出せる状態にはしていません。

一番ハマったのはheadlessブラウザだった

今回いちばん時間がかかったのは、ローカルでは正常に表示されるnoteの編集画面が、クラウド上のheadlessブラウザでは最後まで描画されなかったことです。

URL自体は編集画面まで到達しているのに、タイトル入力用のtextareaが出てこない。最初はセレクタの指定ミスを疑いましたが、何度調べてもローカルとはDOMの状態が違う。そこでheadless実行をやめ、Xvfbという仮想ディスプレイを使って「画面があるブラウザ」として起動する構成へ変更しました。

ここでも最初はxvfb-runが止まったり、xauthが足りなかったりと、小さな壁が続きました。最終的にはXvfbを直接起動してからNode.jsを立ち上げる形にしたことで安定しました。

自動化では「コードが正しいか」だけでなく、「実行環境が人間のブラウザと同じ前提になっているか」も重要だと改めて感じました。

最終的な流れ

現在は次の流れで動いています。

  1. ブログの記事を作成・公開する
  2. noteにも出したい記事だけ連携対象にする
  3. ブログ側からクラウド投稿サーバーへ記事データを送る
  4. クラウド上のPlaywrightがnote編集画面を開く
  5. タイトル・本文を自動入力する
  6. noteへ下書き保存する
  7. 作成されたnoteのURLをブログ側に記録する

実際に既存記事を1本選び、noteの下書きとして作成できるところまで確認しました。

まずは「下書き」まで自動化するのが安全

完全自動公開も仕組みとしては延長線上にあります。ただ、外部サービスの画面操作は仕様変更の影響を受けます。まずは下書きまで自動化し、人間が最後に内容を確認して公開する形の方が安全です。

自動化は「全部人間を外すこと」が目的ではありません。人が確認した方がいいところは残し、繰り返し作業だけを機械へ渡す。その境界をどう設計するかが、実務では一番大切だと思っています。

今回も、記事を書く、投稿先を選ぶ、最終確認をするという判断は人間側に残し、ログイン、画面遷移、コピー&ペースト、下書き保存といった作業を自動化しました。

小さな仕組みですが、こういう積み重ねが業務全体の速度を上げていきます。自分たちで一度作って、実際に使って、問題が出たら直す。この繰り返しから得られる知識は、やはり机上の検討だけでは得られないものですね。

WRITER

稲井田アップシェアの現場で得た知識やノウハウをお届けします。