理系大学生の英語学習日記

データや数値を使って定量的で分かり易い勉強法の紹介をしています.それ以外にも旅行や英会話サークルの活動など雑多な記事を書いています

【GAS】Outgoing webhookでslackからテキストを送信する方法

どうも、manonです。

前回の記事でバイト先で在庫管理ツールを作っていてgoogleスプレッドシートで在庫数が変化した項目をslackに通知して、slack側でその理由をチャットするとテキストをGASに送信してスプレッドシートのコメントとして挿入するようなシステムを作ったと話したのですが今回は

「Outgoing webhookを使ってslackからgasにテキストデータを送る」手順を紹介していこうと思います。

 

スプレッドシート側でデータを受け取るためのGASの準備をする

まずはデータを受け取る側の準備をしていきます。

何故受け取る側が先なのかと言うと受け取る側のGASのコードを記述した後、そのコードをアプリケーションとして公開してURLを公開する必要があるからです。

何故そんなことをするのかと言えば、前回のIncoming Webhook同様データを送る宛先のURLが分からないとslack側からデータを送れなので、

「GAS側でコードを書いてURLを取得⇒それを持ってOutgoing Webhookの宛先のURL欄に貼り付ける」というIncoming Webhookと全く逆の手順が必要になります。

こうすることで初めてslack側からデータを投げることが出来るという訳です。

 

まずはファイルの右側に表示されている「+」マークを押してスクリプトを選択し、新しいスクリプトファイルを作っていきます。

ちなみにIncoming webhookはgasが実行されたタイミングで動作し、Outgoingはslackからデータが投げられたタイミングで動作するため、前回のコードと同じところに記述するとoutgoingからデータがないよと言われてエラーが出るので今回は別々のスクリプトで記述を行っていきます。

f:id:EnglishScience:20210203114903j:plain

 

スクリプト名はoutgoingとか適当につけて、前回同様以下のコードをコピペしてください。

 


function doPost(e) {
  var ash = SpreadsheetApp.getActiveSpreadsheet()
var sheet = ash.getSheetByName("シート1")//書き込みたいシート名
  var string =  e.postData.getDataAsString()
  var key_array = string.split("&")//json形式でデータが全部繋がって送られてくるので
"&"で区切って配列key_arrayに格納
  var json = {}
  var key="";
  var value="";
  //key_array内の各要素を"="で区切る
  for(var idx=0;idx < key_array.length;idx++){
    key = key_array[idx].split("=")[0];
    value = key_array[idx].split("=")[1];
    json[key] = value;
  }

  var cell = sheet.getRange("A1");//コメントを記述するセルを選択
  json.text = json.text.substring(4)//呼び出しワードの文字数にあわせて先頭の文字を削る
  cell.setNote(json.text);//コメントを記述
  sheet.getRange(11).setValue(json.text)//セルに記述
}
コピペ出来たら保存してデプロイしていきます。
このデプロイとは何のことかと言うと「使える状態にする」作業です。
今このコードを書いて保存しただけだとどこにも公開していないので他の人(この場合はslackアプリ)がアクセスすることは出来ません。なのでwebアプリとしてネット上に公開して他の人が使うことが出来るようにする必要があります。
右上の青くデプロイと表示されているところをクリックし、「新しいデプロイ」を選択
 

f:id:EnglishScience:20210203115430j:plain

 

種類の選択の右側にある歯車のマークを選択して「ウェブアプリ」を選択

 

f:id:EnglishScience:20210203120007j:plain

 

新しい説明文:ここは適当でよいです

次のユーザーとして実行:自分

アクセスできるユーザー:全員

ここでアクセスできるユーザーを自分のみにしてしまうとslackのアプリがアクセスできなくなって詰むので必ず全員にしましょう。デプロイを選択。

f:id:EnglishScience:20210203121632j:plain



デプロイが完了するとURLを生成します。

このURLに外部のアプリ(outgoing webhook)がデータを投げることで先程のソースコードが実行されます。なのでこのURLをコピーしておきましょう。

 

このデプロイという作業、ソースコードを書き換えたら毎回しないといけません。

アプリを改善したら毎回アップロードして版を最新版を公開する必要があるのです。

スマホアプリと一緒ですね^^

なのでソースコード書き換えたのに動作が全く反映されないとかで悩んでいる方を時々見かけますが毎回デプロイするようにしましょう。

f:id:EnglishScience:20210203121841j:plain

 

slack側でテキストを送信する準備をする

gas側の準備が出来たら今度はslack側の準備をしてきます。

例のごとくslackの左側のメニューバーで「その他」⇒「App」を選択

f:id:EnglishScience:20210203003745j:plain

 

検索欄に「outgoing」と入力して一番上に出てきた「Outgoing Webhook」を追加していきます。

f:id:EnglishScience:20210203122611j:plain

 

「Slackに追加」を選択

f:id:EnglishScience:20210203122719j:plain

 

「Outgoing Webhookインテグレーションの追加」を選択

f:id:EnglishScience:20210203122748j:plain

 

ここで

チャンネル:任意のチャンネルを選択

引き金となる言葉:任意(ここではtestにした)

URL:先程gasをデプロイして生成したURLを貼り付け

その後、「設定の保存を」をクリック

f:id:EnglishScience:20210203122842j:plain

 

これで準備は完了です。

実際にslackからテキストを送信してみる

slack上で「引き金となるワード+送りたい文字列」をつぶやきます。

今回はトリガーは「test」にしたので送りたい文字は「SlacktoGAS」になります。

f:id:EnglishScience:20210203123550j:plain

スプレッドシートの方を見てみるとセルA1にSlacktoGASとテキストが入っており、かつメモにも同じ文字が入っているのが分かります。

 

f:id:EnglishScience:20210203123740j:plain

 

トリガーワードもjsonで一緒にGASに送られてくるのでトリガーワードの文字の長さに応じて先頭の文字をカットしてあげる必要があります。

json.text = json.text.substring(4)//呼び出しワードの文字数にあわせて先頭の文字を削る

上のソースコードのこの部分で先頭の文字をカットしているのでこの数字を変更することでトリガーワードの長さを変更することが出来ます。

 

また、jsonで日本語を送る場合エンコードをする必要があるのでそれについてはまた別の記事で書こうと思います。

 

ここまでで「GASからslack」と「slackからGAS」の両方の流れが出来るようになったかと思います。

今後これらを組み合わせて在庫管理botの詳細な作り方を紹介していこうと思います。

最後まで読んで頂きありがとうございます。