Help us understand the problem. What is going on with this article?

[*Slack*] Google App Scriptを使って経費申請を行うSlackアプリを作る方法

はじめに

こんな感じのSlackアプリを作る方法です。
経費申請をActionから行う必要は全く無いので、記事用のいい例が思いつかなかっただけです。(経費申請ならInteractive messagesを使ったほうが自然そう)
1xbnr-el9fk.gif
今回はGoogle App Scriptで処理自体は書いていきます。

作成方法

処理を書くファイルの作成

今回はGoogle App Scriptを使用するので、Google DriveからGoogle App Scriptを選択してスクリプトファイルを作成する。
01_gas.png

一旦このまま何もせずにウェブアプリケーションとして導入...をクリックする。
02_gas.png

アプリケーションにアクセスできるユーザー全員(匿名ユーザーを含む)にして導入をクリックする。
03_gas.png

現在のウェブアプリケーションのURLはどこかにコピーしておく。
04_gas.png

Slack App側の設定

アプリの作成

slack apiにアクセスし、
右上のYour Appsをクリックし、Create New Appをクリックする。
作成するアプリの情報を入力してCreate Appをクリックする。

  • App Name・・・アプリの名前
  • Development Slack Workspace・・・アプリを使用するワークスペース 05_create_app.png

Incoming Webhooksの設定

メッセージをSlackに投稿するための設定。

左側のメニューからIncoming Webhooksをクリックし、Activate Incoming WebhooksOnに変更する。

下の方のWebhook URLs for Your WorkspaceAdd New Webhook to Workspaceをクリックする。
06_create_webhook.png

メッセージの投稿先のチャンネルを選択し、許可するをクリックする。
07_permission.png

こんな感じにWebhook URLが追加される。
08_webhook_url.png

投稿先のチャンネルを選択し、許可するをクリックする。

Interactive Componentsの設定

今回はメッセージのメニューから申請画面を立ち上げるのでその設定を行う。

左側のメニューからInteractive Componentsをクリックし、InteractivityOnに変更する。
Request URLにはGoogle App Scriptをウェブアプリケーションとして公開したときのURLを入力する。
09_interactivity.png

ActionsのところからCreate New Actionをクリックし、以下を入力して登録する。

  • Action Name・・・メニューに出てくるアクション名
  • Short Description・・・短いアクションの説明
  • Callback ID・・・このアクションが行われた際のペイロードに含まれるコールバックID 10_add_action.png

以下のようにアクションの登録が完了する。
11_done_action.png

Bot Userの設定

今回のアプリで使用するボットを作成する。

左側のメニューからBot Usersをクリックし、以下を入力して登録する。

  • Display Name・・・表示名
  • Default username・・・ユーザー名 13_add_bot.png

OAuth & Permissionsの設定

どのAPIの使用を許可するかなどの設定。

以下のように設定する。
14_scope.png

アプリの再インストール

以下のようなメッセージが上に出ていると思うので、click hereをクリックしてワークスペースにアプリを再インストールする。
スクリーンショット 2019-05-25 9.52.02.png
15_reinstall.png

処理の作成

Google App Scriptを編集して、具体的な処理を作成する。

/**
* Slackからのリクエストを受ける処理
*/
function doPost(e) {
  var params = e.parameter;
  var data = params.payload;
  var json = JSON.parse(decodeURIComponent(data));
  var type = json.type;
  var trigger_id = json.trigger_id;
  var response = {};

  if (type === 'message_action') {
    // メッセージアクションがあった場合の処理
    var url = 'https://slack.com/api/dialog.open';

    // トークン
    var token = 'xoxp-xxxxxxxxxxxx-xxxxxxxxxxxx-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxx';

    var payload = {
      "token": token,
      "trigger_id": trigger_id,
      "dialog": JSON.stringify({
        "callback_id": "dialog",
        "title": "経費申請",
        "submit_label": "申請",
        "notify_on_cancel": true,
        "state": "Limo",
        "elements": [
          {
            "type": "text",
            "label": "申請者名",
            "name": "name",
          },
          {
            "type": "text",
            "label": "金額",
            "name": "amount",
            "subtype": "number"
          }
        ]
      })
    };

    var headers = {
      "Authorization": "Bearer " + token
    };

    var options = {
      "method" : "post",
      "headers": headers,
      "payload" : payload
    };

    UrlFetchApp.fetch(url, options);
    return ContentService.createTextOutput();

  } else if (type === 'dialog_submission') {
    // ダイアログでサブミットボタンを押したときの処理
    var url = '[Incoming Webhooksで作成したWebhook URL]';

    var payload = {
      "attachments": [{
            "color": "#36a64f",
            "pretext": "以下で経費の申請がありました。",
            "fields": [
              {
                "title": "申請者名",
                "value": json.submission.name,
                "short": false
              },
              {
                "title": "金額",
                "value": json.submission.amount,
                "short": false
              }
            ]
        }
      ]
    };  

    var options = {
      "method" : "post",
      "contentType" : "application/json",
      "payload" : JSON.stringify(payload)
    };

    response = UrlFetchApp.fetch(url, options);
    return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
  }
}

スクリプトに出てくるトークンはOAuth & PermissionsOAuth Access Tokenに記載されているものを指定。
16_token.png

再度、新しいバージョンのウェブアプリケーションとして公開し直さないといけないため、プロジェクトのバージョンNewにして登録する。
17_gas.png

承認が必要と出るので承認を行う。
18_gas.png

アプリの画像などを設定する

アプリのアイコン画像などを設定する。

slack apiの左側のメニューからBasic Informationをクリックし、Display Informationでアプリ名やアプリ画像を設定する。
19_info.png

動作確認

メッセージの「・・・」をクリックする。
20_message.png

経費申請をクリックする。
21_action.png

するとダイアログが表示されるので、情報を入力して、申請をクリックする。
23_dialog.png

投稿先として設定したチャンネルに入力した情報が投稿される。
24_message.png

おわりに

ダイアログがなかなか表示できなくてAuthorizationヘッダーつけないといけないことに気づくまで時間がかかった。

今回は単に申請内容をSlack上に投稿する形にしましたが、実際はGASからスプレッドシートに書き込んだり、その他のサービスを経由してどっかに登録したり・・・をすれば良いと思います。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした