📮

GithubActionsでmicroCMSの新規記事をツイートする

2024/08/24に公開

はじめに

ここではmicroCMSで記事が投稿された際にTwitter(新X)上で記事のツイートを自動で行う方法について解説します。また、読者がmicroCMS、GitHubおよびGitHub Actions、Twitter API、Pythonについて基本的なことを理解していることを前提にしています。

⚠️ これらの技術について何も知らない場合は...

もしこれらについて何も知らないのであれば以下のドキュメントを読むことをおすすめします。
microCMSブログではmicroCMSを用いた様々な利用用途を確認できます。microCMSドキュメントとともに読むことでmicroCMSの使い方を理解することができます。GitHub CI/CD実践ガイドは優れた書籍です。CI/CD初心者に向けてGitHub Actionsの使い方について詳しく解説しています。また簡単な概要であればxkilinによるGitHub Actions入門:初心者向けガイドで確認することもできます。Twitter APIに関する日本語のドキュメントは少ないです。本記事で利用する各種API認証情報の取得情報はneru-devによるTwitter API v2(X API Free)の使い方・移行(2024年)【GAS】を読むことで理解できます。

自動ツイートの仕組みの概観

microCMSで記事の公開の通知をGitHub Actionsで受け取り、Pythonを起動してツイートを行います🕊️📮。
プロジェクトの全体図
自動ツイートの仕組みの概観

使用するソースコード

以下のリポジトリに使用するソースコードが公開されています✨。

事前準備

事前準備としてツイートしたいアカウントのTwitter APIのダッシュボードから以下の認証情報を取得します。APIのApp PermissionsRead and writeにしてください。Twitter APIへの登録や認証情報の取得方法がわからない場合はneru-devによるTwitter API v2(X API Free)の使い方・移行(2024年)【GAS】を読むことで理解できます。

  • Bearer Token
  • API Key (Consumer Key)
  • API Secret (Consumer Secret)
  • Access Token
  • Access Token Secret
    APIのApp Permissionの設定例
    App Permissionは Read and write にする
    GitHub Actionsを行うための新規のリポジトリとブログ用のmicroCMSのAPI(すでにブログの投稿などで使っているもの)を用意すれば事前準備は完了です👍✨。

microCMSの設定

新規記事のツイートを行いたいmicroCMSのAPIにGitHub用のWebhookを設定します。設定の仕方がわからない場合はコンテンツのWebhookを設定が非常にわかりやすく参考になります。トリガーイベント名はGitHub上での設定に使用するため控えておいてください。以降この記事ではトリガーイベント名blog_postedとしたものとして解説します。また、通知タイミングの設定コンテンツの公開のみにチェックを入れてください。これにより記事を公開したタイミングでのみ自動ツイートが行われます。
トリガーイベント名の例
GitHubの設定で用いるため控えておく
通知タイミングの設定の例
コンテンツの公開のみにチェックを入れる

GitHubの設定

GitHub上ではmicroCMSから最新の記事を取得しTwitterにツイートをするPythonスクリプトをmicroCMSからWebhookによってトリガーされたGitHub Actionsにより起動します。

GitHub Actionsの設定

新規に作成したリポジトリ内の.github/workflowsディレクトリ内にGitHub Actionsの設定のためのYAMLファイルを作成します。YAMLのワークフロー構文がわからない方はGitHub Acitonsのワークフロー構文が参考になります。

Secretsの設定

GitHub ActionsのSecrets設定ページにてmicroCMS APIのエンドポイントと認証情報、Twitter APIの認証情報、microCMSを使用しているブログのURLをSecretsに設定します。
GitHub ActionsのSecrets設定の例
認証情報のSecretsの設定を行う

イベントの設定

ワークフローのイベントにrepository_dispatchというイベントを設定します。このとき、イベントのtypeをmicroCMSの設定で指定したトリガーイベント名blog_postedにしてください。
https://github.com/HumanisteJP/PR/blob/main/.github/workflows/deploy.yml#L3-L5

ジョブの設定

Github Actionsのワークフロー内でリポジトリにチェックアウトします。
https://github.com/HumanisteJP/PR/blob/main/.github/workflows/deploy.yml#L10-L12
Pythonを使用するためPython環境のセットアップを行います。
https://github.com/HumanisteJP/PR/blob/main/.github/workflows/deploy.yml#L14-L18
ライブラリの依存関係を解決します。
https://github.com/HumanisteJP/PR/blob/main/.github/workflows/deploy.yml#L20-L23

GitHub ActionsのSecretsを環境変数に設定します。
https://github.com/HumanisteJP/PR/blob/main/.github/workflows/deploy.yml#L25-L34
Pythonスクリプトを起動します。
https://github.com/HumanisteJP/PR/blob/main/.github/workflows/deploy.yml#L35-L36

お疲れさまでした🍵。以上でGitHub Actionsの設定の解説は終わりです。次の節では起動するPythonスクリプトの解説を行います。

ℹ️コードの全文を見る👀

Pythonスクリプトを作成する

PythonスクリプトではmicroCMSから最新記事の情報を取得するためにrequestsを、ツイートを行うためにtweepyを用いています。

microCMSから最新の記事を取得する

APIに対するリクエストに必要な情報を用意します。configには環境変数から得られた情報が入っています。
https://github.com/HumanisteJP/PR/blob/main/.github/scripts/tweet_promotion.py#L53-L60

ツイートを行う

tweepyを用いて、ツイート用のクライアントを作成します。
https://github.com/HumanisteJP/PR/blob/main/.github/scripts/tweet_promotion.py#L63-L68
ツイートする内容を作成します。ブログサイトの仕様等に応じて変更して下さい。私のサイトではブログのURLの末尾にmicroCMSのコンテンツIDを指定する仕様です。
https://github.com/HumanisteJP/PR/blob/main/.github/scripts/tweet_promotion.py#L70-L71
tweepyによってTwitter APIにツイートするリクエストを送信します。
https://github.com/HumanisteJP/PR/blob/main/.github/scripts/tweet_promotion.py#L73-L79
お疲れさまでした🍵。以上で自動ツイートの解説は終わりです。次の節ではよくあるトラブルについて解決策を説明します。

ℹ️コードの全文を見る👀

トラブルシューティング

環境変数がPython側から取得できない

GitHub ActionsのSecretsの設定が適切に行われていない可能性があります。また、ワークフローのYAMLファイルで環境変数の設定が適切に行われていない可能性があります。確認してみましょう。

microCMSからデータを取得できない

X-MICROCMS-API-KEYの値がエンドポイントに対応した適切な値が設定されていない可能性があります。コンテンツの種類ごとにエンドポイントやX-MICROCMS-API-KEYの値は異なるためツイートしたいコンテンツに対応した値を設定できているか確認してみましょう。

ツイートができない

Twitter APIのApp Permissionsは初期設定ではRead and writeになっていないので変更したかどうか確認しましょう。また、同一内容で連続してツイートすることはできないので、直近のツイートと同じ内容のツイートをしようとしていないか確認してみましょう。API Key等の認証情報の適切な値がSecretsに設定されているか確認してみましょう。

おわりに

この記事の内容はこれで終わりです。お疲れさまでした🎉✨。
質問がありましたらDiscussionにお願いします。
以下のリポジトリに使用するソースコードが公開されています✨。

Discussion