JavascriptからSlackにスニペットを投稿する

GreasemonkeyやtampermonkeyのスクリプトからSlackにスニペットを投稿しようとしたら色々はまったのでまとめておきます。別に短い内容なら、普通にchat.postMessageのAPIでいいんですが、内容がながいと受け付けてくれないのでfiles.uploadを使う必要があり嵌ってしまいました。

やりたかったこと

• ブラウズしているサイトの任意の要素のテキストをSlackへ投稿
• ファイルは生成せずに、投稿内容はスニペットとする

Slackのfiles.uploadにはfileとcontentという属性があり、contentにスニペット内容を指定すればファイル生成せずに利用できます。

slack api tokenの発行

からTokenを発行しておきます。

Ajaxで投げるスクリプト

Ajaxで投げる際はfetchを使用しましたが、jQueryでもなんでも大丈夫でしょう。結論としてはJSON形式ではなくFormDataとしてちゃんとなげる必要があったということです。

コードは以下になります。TokenとChannelだけ書き換えれば動きます。

const SLACK_TOKEN = 'YOUR_TOKEN';
const CHANNEL_NAME = 'YOUR_CHANNEL';
const SLACK_POST_URL = 'https://slack.com/api/chat.postMessage';

const data = {
    token: SLACK_TOKEN,
    channels: CHANNEL_NAME,
    title: "スニペットタイトル",
    filename: "sample.txt",
    content: "投稿内容",
    initial_comment: '投稿時のコメント',
};

// formDataの組み立て
const formData = new FormData();
for(let key in data){
    formData.append(key, data[key]);
}

fetch(SLACK_UPLOAD_URL + '?token=' + SLACK_TOKEN, {
    method: 'POST',
    body: formData,
}).then((response)=>{
    return response.json();
}).then((data)=>{
    console.log( 'Can I post to Slack? :' + data.ok );
    console.log(data);
    if (data.ok ){
        alert("SLACK への投稿が完了しました");
    }else{
        alert("SLACK への投稿が失敗しました:" + data.error);
    }
}).catch((data)=>{
    console.error(data);
    alert('error:' + data);
});

あとはこれをベースに、const data 内で指定している内容を置き換えるような処理をかけば好きな内容をSlackに投稿できるようになります。