GASとslackでヘルプデスクフォームを作った話(Googleフォーム版 準備編)

お久しぶりです。カインです。

初めて情シスらしい記事を書きます(笑)

 

GAS(Google Apps Script)とslackを使った社内用ヘルプデスクフォームを作ったので、その紹介です。

今回の記事はGoogleフォームを起点としたものです。

色々な記事を参考にしておりますので、類似点等があるかもしれませんがご容赦ください。

後日、slackのスラッシュコマンドを起点にしたものも書く予定です。

 

長いので、準備編とコード編に分けて書きます。

後半→GASとslackでヘルプデスクフォームを作った話(Googleフォーム版 コード編)

作った人のスペック

この程度の人間でも作れるよ!というアピール

  • 情シス歴3年(公務員2年、民間1年)
  • プログラミングの勉強経験はCの基礎的な部分のみ
  • Excel関数、AccessVBA等を独学で勉強して業務改善をした程度
  • GAS(JavaScript)は初心者

動作の流れ

  1. ユーザーがGoogleフォームからヘルプ内容を投稿
  2. フォームの内容を、スプレッドシートに記録
  3. 質問した人のメールアドレスからslackのユーザーを特定し、slackの専用チャンネルへ招待する
  4. フォームの内容を、slackの専用チャンネルにポストして、情シスへメンションを送る

必要なもの

事前準備

GASでコードを書いていく部分以外に必要なものを準備していきます。

GoogleフォームとGAS(コンテナバインド型)の準備

Googleフォームの作成

まずフォームを作成します。

今回は、

  • メールアドレス
  • 氏名
  • 緊急度
  • 詳細

の4項目でフォームを作成します。

メールアドレスの項目は、歯車アイコンをクリックして「メールアドレスを収集する」にチェックを入れて保存します。

今回は手動で入力させる形ですが、フォームの公開組織を限定することで、ログインユーザーから自動収集することもできます。

G Suiteアカウントに入れなくなった事態を想定して手動入力にしています。

f:id:simple-josys:20200429210042p:plain

f:id:simple-josys:20200429210209p:plain

 

項目を足していき、完成したフォームはこんな感じになりました。

f:id:simple-josys:20200429210702p:plain

 

GAS(コンテナバインド型)の作成

次に、このフォームに紐づいたコンテナバインド型のGASを作成します。

編集画面右上の「・・・」メニューから、「スクリプト エディタ」を開きます。

f:id:simple-josys:20200429210857p:plain

 

プロジェクト名を適当に決めて、いったん保存します。

f:id:simple-josys:20200429211301p:plain

f:id:simple-josys:20200429211421p:plain

 

トリガーの作成

フォーム送信時にこのGASが動作するように、トリガーを作成します。

先にfunction名を決める必要があるので、後で書く予定の「onFormSubmit」にしておきます。

f:id:simple-josys:20200429212038p:plain

 

編集」→「現在のプロジェクトのトリガー」をクリックします。

f:id:simple-josys:20200429212134p:plain

 

ページ右下の「トリガーを追加」をクリックします。

f:id:simple-josys:20200429212522p:plain


イベントの種類を選択→フォーム送信時 に変更して保存します。

f:id:simple-josys:20200429212706p:plain

 

これで、フォームが送信されたときに「function onFromSubmit」が実行されるようになりました。

スプレッドシートの準備

記録用のスプレッドシートを作成しておきます。

 

スプレッドシートのIDを控えておきます。

スプレッドシートのIDは、URLのxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxの部分です。

https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/edit#gid=0

 

1行目はフィールド名を適当に入れておきましょう。

f:id:simple-josys:20200429231358p:plain

 

slackアプリの準備

まずはアプリを作成します。

slackメニュー→「設定と管理」→「アプリを管理する

f:id:simple-josys:20200429184228p:plain

 

ページ上部の「ビルド

f:id:simple-josys:20200429184415p:plain

 

ページ上部の「Your Apps

f:id:simple-josys:20200429184733p:plain

 

Create New App

f:id:simple-josys:20200429184906p:plain

 

アプリの名前とインストール先のワークスペースを決定して、「Create App

f:id:simple-josys:20200429185055p:plain

 

これでアプリは作成できたので、色々設定をいじっていきます。

Incoming Webhooks

botがチャンネルにデータを送信できるようにする設定です。

 

左メニューの「Incoming Webhooks」をクリックし、右上のツマミを「On」にします。

f:id:simple-josys:20200429223450p:plain

 

OAuth & Permissions

ここでは、アプリに持たせる権限を設定します。

今回のGoogleフォーム版では、

  • botがチャンネルに書き込む権限
  • botがユーザーをチャンネルに拉致招待する権限
  • botがユーザーデータを取得する権限

を付与したいです。

 

左メニューの「OAuth & Permissions」をクリックします。

f:id:simple-josys:20200429190732p:plain

 

Bot Token Scopesの「Add an OAuth Scope」をクリックして、

  • chat:write
  • users:read
  • users:read.email
  • channels:manage

下記も追加(2020/10/16追記)

  • groups:write
  • im:write
  • mpim:write

を追加します。

f:id:simple-josys:20200429232731p:plain

 

ちなみに、どの権限を追加するかは、使用するAPIのメソッドによります。

今回はこの3つのメソッドを使います。

それぞれのメソッドのページに、「Works with」の部分に必要な権限(Required scope(s))が書いてあります。

https://api.slack.com/methods/chat.postMessage

https://api.slack.com/methods/users.list

https://api.slack.com/methods/channels.invite

 

Incoming WebhooksOAuth & Permissionsの設定が済んだら、「Install App to Workspace」をクリックします。

f:id:simple-josys:20200429202523p:plain

 

Incoming Webhooksの投稿先を聞かれるので、作成したチャンネル(#helpdesk)を指定し、「許可する」をクリックします。

f:id:simple-josys:20200429223756p:plain

 

許可後にトークンが作成されるので、「Bot User OAuth Access Token」を控えておきます。

f:id:simple-josys:20200429203458p:plain

 

slackチャンネルの準備

専用のチャンネルを適当に作成して、チャンネルにアプリを追加します。

ここでは、チャンネル名は#helpdeskとしています。

f:id:simple-josys:20200429204223p:plain

 

先ほど作ったアプリを追加します。

f:id:simple-josys:20200429204428p:plain

 

このチャンネルのチャンネルIDを控えておきます。

チャンネルIDは、URLのYYYYYYYYYYYの部分です。

https://app.slack.com/client/XXXXXXXXX/YYYYYYYYYYY

 

コード編

後半→GASとslackでヘルプデスクフォームを作った話(Googleフォーム版 コード編)