LoginSignup
0
1

More than 1 year has passed since last update.

@hirokobe26(Hiroshige Okuno)

Slackに投稿したニュースの記事をそのままTwitterに投稿するプログラム作ってみた

Last updated at Posted at 2021-09-21

やりたいこと

日々、職場でSlackを使っていて社内のチャンネルでニュースの共有と、そのニュースに関してコメントを投稿したりしているのですが、この内容をそのままTwitterに投稿できると時短にもなるし、何より手間なくTwitterも運用できるのでは？と思ったので連携できるプログラムを作ってみました。

いい感じでできたのはいいのですが、Twitter認証と、SlackのEventAPIのところでめっちゃくちゃ躓きました！　もう沼にはまってしまって、くじけそうになったのですが何とか実装できましたので記事に残してみたいと思います。

色々な人の記事も参考にしながら実装しました。先人に感謝感謝です。記事の紹介もしていきたいと思います。

手順1: TwitterAPIの利用申請を行う

Twitter APIで遊んでみた ~1. 各種キーの申請と取得~を参考に、まずはTwitterAPIの申請を行いました。英語で入力していくことになりますが、まあGoogle翻訳などを利用しちゃってもいいと思います。

記事通りに進めればここは問題ないかなと思います。API KeyとAPI Key Secretの2つがAPIをたたくときに必要になりますので、適当にメモ帳に保存しておいてください。あとで使います。

手順2: GoogleAppsScriptを用意し、SlackのEventAPIの準備をする

まずはスクリプトを書くためのファイルを用意します。ファイルの用意は特段説明する必要もないかと思いますが、Googleのページの右上の点々をクリックすると、いろいろなGoogleアプリが出てきますので、そこからGoogleAppsScriptを選んでください。

image.png

続きまして、以下の記事を参考にスラックのEventAPIの設定を進めていきます。

まずは下記のコードをコード.gsに貼り付けちゃってください。

function doPost(e){
  var params = JSON.parse(e.postData.getDataAsString());
  return ContentService.createTextOutput(params.challenge);
}

ここまで来たら一度WEBアプリケーションとしてデプロイする必要があります。　
公開＞WEBアプリケーションとして導入、をクリックしデプロイしてください。

image.png

Who has access to the appと聞かれますので、Anyoneにしてデプロイしちゃってください。
image.png

手順3: EventAPIのテストをする

以下のサイトにアクセスしてください。

アクセスをするとこんな画面に来るかと思います。記事に従って、右上の『Create New App』からアプリを作成してください。

image.png

アプリを作成することができましたら、再度以下の記事を参考にしながら、Event APIのテストを行っていきます。

SlackAPIのEvent Subscriptionという画面に来ていただいて、以下の画像のようにOffになっているものをOnにしてあげてください。

image.png

すると、Request URLというのを聞かれますので、ここには先ほどデプロイしたGASのアプリのURLを入れてあげます。GASのスクリプトを書くところに戻っていただいて、current web app URLに記載されてあるURLがRequest URLとなります。すると、『Verified』という文字が出るはずです。　Verifiedが表示されたら無事EvetAPIにて受け取るリクエストをGASのサーバー側で受け取ることができるようになったことを意味します。

image.png

続きまして、同じくEvent Subscriptionのページにて『Subscribe to events on behalf of users』の個所をクリックし、利用したいAPIの種類を選んでください。　ここでは、『message.channels』と『message.groups』の2つを選んであげれば大丈夫です。

image.png

そして、最後にいよいよちゃんとdoPostされているかをチェックするわけですが、今回は自分のメールアドレスにSlackからpostされた内容を送ることで確認していきます。なんか、もっといいプログラムあったやろｗと思うのですが、まあいいのです。

function doPost(e) {

  var json  = JSON.parse(e.postData.getDataAsString());

  var type = json.event.type;
  var channel = json.event.channel;
  var user = json.event.user;
  var postedData = json.event.text;
　var url = postedData.slice(postedData.indexOf("<"));
  var text = postedData.substring(0, postedData.indexOf("<"));
  var newText = text.slice(text.indexOf("】") + 1).trim();
  var channel_type = json.event.channel_type;
  var newUrl = url.replace("<","");
  newUrl = newUrl.replace(">","");

  if(user == "UR8SW0FPZ"　&& postedData.indexOf("【共有】") != -1){
    GmailApp.sendEmail("あなたのEmail", "test", "type: " + type + ", channel: " + channel + ", user: " + user + ", text: " + newText + ", channel_type: " + channel_type + ", url: " + newUrl);
    postUpdateStatus(newText, newUrl);
  }

}

上記のコードを張り付けましたら、もう一度デプロイをしてあげてください。注意点としては必ずバージョンはNewでデプロイしてあげてください。コードを変更するたびにnewでデプロイしてあげる必要があります。ほかのバージョンでデプロイを最初していたのですが、なぜかEvent APIをうまく受け取れなくなってしまいました。newならなぜかうまくいきます。理由は知りませんｗ

image.png

さあ、ようやくここまで来ました。　まだ半分も行ってないかと思いますが、最後に適当に自分で作成したスラックチャンネルにこのような感じでスラックを投稿してみてください。

image.png

こんな感じで自分にメールが送られてきておりましたら無事にスラックからのリクエストをdoPostが受け取って、何らかの処理をすることができるようになっている証拠です。

image.png

手順4:TwitterAPIの認証をするための準備をする

doPostによってSlackからリクエストを受け取ることはできるようになったはずです。ここからは、受け取ったリクエストを利用してTwitterへ投稿するようにしたいと思います。まずはTwitterのAPIを利用するための準備を進めます。

TwitterAPIの認証には、
・OAuth1
・TwitterWebService
という二つの種類のライブラリを使うことになります。
参考にした記事は以下でございますので、早速2種類のライブラリを導入してみてください。

無事にライブラリが導入できましたでしょうか。最新のバージョンでも動くかとは思いますが、それぞれバージョン12とバージョン2にしております。

image.png

無事にライブラリの導入ができましたら、次はいよいよ認証用のコードを用意することになります。コードは以下の記事を参考にして、用意してみました。

実際のコードは以下になります。

var twitter = TwitterWebService.getInstance(
  'あなたのAPIKey',       // 作成したアプリケーションのConsumer Key
  'あなたのAPI Secret'  // 作成したアプリケーションのConsumer Secret
);

// 認証
function authorize() {
  twitter.authorize();
}

// 認証解除
function reset() {
  twitter.reset();
}

// 認証後のコールバック
function authCallback(request) {
  return twitter.authCallback(request);
}

// ツイートを投稿
function postUpdateStatus(newText, newUrl) {
  var service  = twitter.getService();
  var response = service.fetch('https://api.twitter.com/1.1/statuses/update.json', {
    method: 'post',
    payload: { status: newText + " " + newUrl }
  });
}

手順5:　コールバックURLを設定し、TwitterAPIの認証をする

あともう少しです！　ここまで来ましたら後は実際にTwitterAPIの認証をしていきます。念のためもう一度最新版のコードをデプロイし、TwitterのDeveloper Portalの以下の画面に行ってください。　『App permissions』はデフォルトですと、Readだけになっているかと思いますので、Read + Postに変更をしてください。

image.png

続きまして、上記画像の『Authentication settings』のEditを押していただき以下3点を対応してください。

・Enable 3-legged Oauthにチェックを入れる
・Callback URLsのところに以下のURLを入れる。

https://script.google.com/macros/d/あなたのスクリプトID/usercallback
//スクリプトIDはGASのプロパティというところから確認できます。

・Website URLを入力する

image.png

その後、後は、以下の記事と同じような手順となります。authorize関数を実行→ログを確認→ログに残っているURLをコピーしてブラウザに張り付ける→許可しますか？みたいに聞かれるので許可する

いざ！実践！

長かった。。。　あとは実際に動くかをテストするだけです。
スラックにて、適当に何かをツイートしてみて、その後にTwitterにも投稿がされていたら成功です。

こちらをスラックに投稿して、、、

image.png

その後、Twitterにも同様の内容がTweetされています！

image.png

成功です！　長かった！

躓きながらなんとかできるようになりました。
それにしてもSlackのEventAPIは超絶便利ですね。これを応用すれば様々な自動処理を作ることもできると思います。

この記事を読む人にとって少しでも参考になれば幸いです。
そして、ネットに転がっている先人達の記事に感謝です。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1