Twitterと連携し、コンテンツ投稿時にTwitterへ自動投稿する

KurocoではTwitterと連携することで、コンテンツ投稿後にTwitterへ自動投稿したり、APIを実行しTwitterに投稿する等、Twitter自動投稿機能が実装できます。

本チュートリアルでは、KurocoとTwitterの連携方法と、コンテンツ投稿時にTwitterへ自動投稿する方法を記載します。

Twitter側の仕様の変更により、Twitter API KEYの取得方法は本チュートリアルと異なる場合がございます。詳細はTwitter Developer Platformで最新情報をご確認ください。

Twitterの設定

Twitterアカウントを作成する

KurocoとTwitterを連携する場合、Twitterアカウントを取得していることが前提となります。まだアカウントを持っていない場合はTwitter sign upよりアカウント作成をお願いします。

Twitterへの登録方法は、Twitterヘルプセンターをご確認ください。

Twitterデベロッパーサイトよりアプリ作成する

次に、TwitterデベロッパーサイトよりTwitter APIキーを取得します。Twitterデベロッパーサイトにアクセスし、[Sign up]をクリックします。

Image from Gyazo

名前や国等、エッセンシャルアクセスのためのいくつかの情報を記載し、[Next]をクリックします。 今回の場合「What's your use case?」には「Exploring API」を選択して下さい。

Image from Gyazo

利用規約を確認し、チェックを入れ[Submit]をクリックします。

Image from Gyazo

Twitterアカウントに登録しているメールアドレス宛に、メールが送信されます。

Image from Gyazo

メールを確認し、[Confirm your email]をクリックします。

Image from Gyazo

「App name」に任意の名前を記入し、[Get keys]をクリックします。

Image from Gyazo

API keyが表示されます。

Image from Gyazo

Keyは後ほどコピーするのでここではコピーしなくて大丈夫です。[Skip to dashboard]をクリックします。

Image from Gyazo

ポップアップで「Did you save your Keys and Tokens?」と表示されるので、確認し[Yes, I saved them]をクリックします。

Image from Gyazo

ダッシュボード画面へと遷移します。

Image from Gyazo

サイドバーより[Projects & Apps]をクリックすると、先ほど作成したアプリが追加されています。

Image from Gyazo

以上でアプリ作成完了です。

アプリの権限設定をする

初期設定では、アプリの権限が「Read Only」なので、権限を「Read and Write」に修正します。
User authentication settingsの[Set up]をクリックします。

Image from Gyazo

「OAuth 1.0a」をオンにします。

Image from Gyazo

「App permissions」より「Read and write」を選択します。

Image from Gyazo

「GENERAL AUTHENTICATION SETTINGS」に下記を記載し、[Save]をクリックします。

項目記載例説明
Callback URI / Redirect URLhttps://example.com/twitter-to-kuroco連携後のコールバックURLを記入して下さい。
Website URLhttps://example.comサイトURLを記入して下さい。

Image from Gyazo

Callback URLについては、Twitter Developer -> Callback URLsをご確認ください。

API Key and Secretを再発行する

次にTwitter APIキーを再発行します。

[Keys and tokens]タブをクリックします。

Image from Gyazo

「API Key and Secret」の[Regenerate]をクリックします。

Image from Gyazo

ポップアップで確認画面が表示されるので、[Yes, regenerate]をクリックします。

Image from Gyazo

API Key とAPI Key Secretが発行されます。内容をコピーし、[Yes, I saved them]をクリックします。

Image from Gyazo

Access Token and Secretを発行する

次に、Access Token and Secretを発行します。[Keys and tokens]タブをクリックします。

Image from Gyazo

「Access Token and Secret」の[Generate]をクリックします。

Image from Gyazo

Access Token とAccess Token Secretが発行されます。内容をコピーし、[Yes, I saved them]をクリックします。

Image from Gyazo

以上です。

Kurocoの設定

次に、先ほど取得したTwitterのKeyをKurocoに設定します。

Twitter Keyの設定

Kuroco管理画面より、[外部システム連携] -> [Twitter]をクリックします。

Image from Gyazo

先ほどコピーした情報を記入し、[更新する]をクリックします。

項目記載例
有効にするチェックを入れます。
API KeyコピーしたAPI Keyを記入します。
API Key SecretコピーしたAPI Key Secretを記入します。
Access TokenコピーしたAccess Tokenを記入します。
Access Token SecretコピーしたAccess Token Secretを記入します。

Image from Gyazo

Twitter Keyが登録されました。

Image from Gyazo

コンテンツ定義の設定

次に、Twitterと連携するコンテンツ定義を設定します。 今回は既存の「お知らせ」というコンテンツ定義とTwitterと連携します。連携にはコンテンツ定義のIDが必要になるので、管理画面よりIDを確認します。

Kuroco管理画面より、[コンテンツ定義]をクリックします。

Image from Gyazo

コンテンツ定義一覧画面より、「お知らせ」のIDを確認します。

Image from Gyazo

お知らせのIDは1と確認できました。IDは後ほど利用するので、コピーしておいて下さい。

オリジナル処理の作成

次に、オリジナル処理を作成します。
Kuroco管理画面より、[オペレーション] -> [オリジナル処理]をクリックします。

Image from Gyazo

オリジナル処理一覧画面より[追加]をクリックします。

Image from Gyazo

オリジナル処理を下記設定にて作成します。

項目記載例
タイトルTwitter自動投稿
Slugkuroco_to_twitter
これを使ったコンポーネントトリガー:コンテンツの追加後
テキストフィールド:1
実行内容下記ソースコードの内容を記載してください。
実行内容
{assign var=url value="`$smarty.const.ROOT_URL`/article/`$topicsData.slug`"}
{twitter_post_message var=res text="記事の更新をしました!`$url`"}

Image from Gyazo

入力後、[追加する]をクリックしオリジナル処理を保存します。

動作確認

最後に動作を確認します。 コンテンツ定義「お知らせ」のコンテンツを投稿すると、Twitterにオリジナル処理で設定した内容が投稿されます。

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。