環境構築はいらないよ GASでサクッとbotをつくろう / 20171202 Creating Bot with GAS

2017/12/02 Cybozu Tech Conferenceの大阪LT資料です。
Google Apps Script(GAS)を使って、SlackやGoogle Spread Sheetと連携するbotをお手軽に体験するという内容です。

Transcript

1. 環境構築はいらないよ
   GASでサクッとbotをつくろう
   サイボウズ株式会社 チーム
   鈴木 亜耶 (@szkayeah)
   

   View Slide

2. はなすひと
   ▌鈴木 亜耶 (@szkayeah)
    サイボウズのエンジニア
    今年1月に中途入社
    好き：CI・自動化・自動テスト
    チーム所属
   

   View Slide

3. おしながき
   ▌GASとは
   ▌やってみよう
    用意するもの
    動く・呼べる・渡せる・返ってくる
   ▌おわりに
   

   View Slide

4. GASとは
   

   View Slide

5. GASとは
   ▌Google Apps Scriptの通称(がす・ぎゃす)
   ▌環境構築なしですぐ書ける・動かせる
   ▌Googleの各サービスと容易に連携
   ▌APIとして実行できる
   ▌定期実行できる
   

   View Slide

6. GASとは
   ▌ブラウザ上でコーディング
   

   View Slide

7. やってみよう
   準備するもの
   

   View Slide

8. 用意するもの
   ▌今回はGASでGoogle Spread SheetとSlackを連携
   ▌いるもの
    Googleアカウント
    Slackアカウント
   

   View Slide

9. やってみよう
   [動く]・呼べる・渡せる・返ってくる
   ↑
   

   View Slide

10. やること
    ▌GASを動かす
    Google Spread Sheet
    Google Apps Script
    データ登録
    出典：https://slack.com/
    

    View Slide

11. Googleドライブでスプレッドシートを作成し開く
    

    View Slide

12. スプレッドシートIDを確認しスクリプトエディタを開く
    

    View Slide

13. エディタのmyFunction関数の中身を書いて保存
    

    View Slide

14. とりあえず4行！
    function myFunction() {
    var sheet = SpreadsheetApp.openById(‘スプレッドシートID');
    var lastRow = sheet.getLastRow();
    var date = new Date();
    sheet.getRange('A' + String(lastRow + 1)).setValue(date);
    }
    

    View Slide

15. 実行ボタンをぽちっとしてスプレッドシートへ
    

    View Slide

16. なんか入ってる！！！
    

    View Slide

17. Date型なので表示を変えれば時間も
    

    View Slide

18. やってみよう
    動く・[呼べる]・渡せる・返ってくる
    ↑
    

    View Slide

19. やること
    ▌SlackからAPI化したGASを呼ぶ
    Google Spread Sheet
    Google Apps Script
    パラメータ
    なしで実行 データ登録
    出典：https://slack.com/
    

    View Slide

20. Slackにログインして適当なチャンネルを作る
    

    View Slide

21. Appsへ
    

    View Slide

22. Outgoing WebHooksをインストール
    

    View Slide

23. Outgoing WebHooksの設定を保存
    作ったチャンネルを選択
    

    View Slide

24. Outgoing WebHooksの設定を保存
    この単語が含まれる
    Slack投稿でGASが実行される
    

    View Slide

25. Outgoing WebHooksの設定を保存
    トークンをコピーして
    GASの方へ移動
    

    View Slide

26. doPost関数を作る
    function doPost(req) {
    // TokenCheck
    if (req.parameter.token != “Slackのトークン") {
    return;
    }
    myFunction();
    }
    function myFunction() {
    var sheet = SpreadsheetApp.openById(‘スプレッドシートID');
    var lastRow = sheet.getLastRow();
    var date = new Date();
    sheet.getRange('A' + String(lastRow + 1)).setValue(date);
    }
    

    View Slide

27. GASでウェブアプリケーションとして導入を選択
    

    View Slide

28. アクセスできるユーザーは匿名ユーザー含め全員に
    

    View Slide

29. 設定が完了するとURLが発行されるのでSlackへ
    

    View Slide

30. Outgoing WebHooksの設定でURLを入れて保存
    

    View Slide

31. あとはTrigger Wordを含むSlack投稿をすれば…
    

    View Slide

32. 行が増えた！！！
    

    View Slide

33. やってみよう
    動く・呼べる・[渡せる]・返ってくる
    ↑
    

    View Slide

34. やること
    ▌Slackの投稿内容をスプレッドシートに渡す
    Google Spread Sheet
    Google Apps Script
    パラメータ
    ありで実行 データ登録
    出典：https://slack.com/
    

    View Slide

35. doPost関数でパラメータを受け取る
    function doPost(req) {
    // TokenCheck
    if (req.parameter.token != “Slackのトークン") {
    return;
    }
    var textArray = req.parameter.text.split(":");
    // コロンの後ろに文字がある場合のみ実行
    if (textArray.length > 1) {
    myFunction(textArray[1]);
    }
    }
    

    View Slide

36. myFunction関数で引数を受け取る
    function myFunction(text) {
    var sheet = SpreadsheetApp.openById(‘スプレッドシートID');
    var lastRow = sheet.getLastRow();
    sheet.getRange('A' + String(lastRow + 1)).setValue(text);
    }
    

    View Slide

37. はまりポイント！！！
    一度ウェブアプリケーションとして公開してから
    修正を加えた場合、
    プロジェクトバージョンを上げないと反映されない。
    

    View Slide

38. うまくいけばgas:より後ろの文字がスプレッドシートに入る
    

    View Slide

39. やってみよう
    動く・呼べる・渡せる・[返ってくる]
    ↑
    

    View Slide

40. やること
    ▌スプレッドシートに登録されたらSlackで通知を受ける
    Google Spread Sheet
    Google Apps Script
    パラメータ
    ありで実行
    投稿する
    データ登録
    出典：https://slack.com/
    

    View Slide

41. SlackでIncoming WebHooksをインストール
    

    View Slide

42. Incoming WebHooksの設定を保存
    チャンネル選択
    URLをコピーしてGASの方へ移動
    

    View Slide

43. SlackへPOSTする関数を作る
    function postSlack(text) {
    var url = “SlackのIncomingWebHooksのURL";
    var payload = {
    "text" : text
    };
    var options = {
    "method" : "POST",
    "payload" : JSON.stringify(payload)
    };
    UrlFetchApp.fetch(url, options);
    }
    

    View Slide

44. doPost関数でpostSlack関数を呼ぶ
    function doPost(req) {
    // TokenCheck
    if (req.parameter.token != “Slackのトークン") {
    return;
    }
    var textArray = req.parameter.text.split(":");
    // コロンの後ろに文字がある場合のみ実行
    if (textArray.length > 1) {
    myFunction(textArray[1]);
    postSlack(textArray[1]);
    }
    }
    

    View Slide

45. GASのプロジェクトバージョンを上げて保存したら試す
    

    View Slide

46. やまびこキタ――(ﾟ∀ﾟ)――!!
    

    View Slide

47. おわりに
    

    View Slide

48. おわりに
    ▌今回はGASを叩く・GASから叩くの両方やった
    ▌GASお手軽！便利！(伝わった？)
    ▌組み合わせる楽しさ
    ▌本当はAmazonDashButton→GASをやりたかった
    

    View Slide

49. 参考情報
    ▌Google Apps Script
     https://developers.google.com/apps-script/
    ▌Slack API
     https://api.slack.com/
    ▌今回作ったコード
     https://github.com/szkayeah/Bot/blob/master/hel
    loGasBot/helloGasBot.gs
    

    View Slide

50. ありがとうございました！
    

    View Slide