$30 off During Our Annual Pro Sale. View Details »

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

szkayeah
December 02, 2017

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

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

szkayeah

December 02, 2017
Tweet

More Decks by szkayeah

Other Decks in Programming

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