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

slackで「投稿ルールが守られない問題」を自作のスラッシュコマンドで解決する(設定編)

More than 1 year has passed since last update.

slackあるある

※※お知らせ※※
今後、備品購入を希望される方は当チャンネルで
================
【購入品名】 :
【購入URL】 :
【購入承諾者】:
【納品希望日】:2019/mm/dd
【備考】   :
================
というフォーマットを使って下さい。
(ピンどめしておきます)

現実は・・・

  • フォーマットを自己流に改変する人
  • そもそもフォーマットを使ってくれない人
  • 別のチャンネルで依頼する人 etc.....

解決策

今後、備品購入依頼は
当チャンネルで /bihin と投稿し、
表示されるダイアログから依頼して下さい。

表示されるダイアログ

簡易バリデーションチェックあり
スクリーンショット 2019-06-14 23.13.24.png

ダイアログ経由で生成される投稿

確実に期待したフォーマットで投稿してもらえる
スクリーンショット 2019-06-14 23.16.59.png

指定のチャンネル以外でコマンドを使用した際のエラー表示

投稿者本人だけにエラーが通知され、無駄な通知が飛ばない。
スクリーンショット 2019-06-14 23.20.44.png

スマホからも投稿しやすい(外回りの営業さんも安心)

Image from iOS.png

実装

  • GoogleAppsScriptを使用します
  • コード&処理内容だけ見たい方はコード解説編を御覧ください。

処理の流れ

slack上でスラッシュコマンドを投稿
→slackAppの「コマンドごとに設定されたURL」にPOST
→GoogleAppsScript(サーバー)が受けてダイアログを返す
→slack上にダイアログが表示され、各項目を入力して投稿をする。
→slackAppの「InteractiveComponentsに設定されたURL」にPOST
→GoogleAppsScript(サーバー)が受けて、入力内容を整形してslackに投稿

設定手順

1.GoogleAppsScript(以下GAS)の準備

1-1.スプレッドシート新規作成

新規でスプレッドシート作成し、ツール>スクリプトエディタを開く。
スクリーンショット 2019-06-15 9.15.35.png

1-2.

コードなどは特に書かずに、公開>ウェブアプリケーションとして導入を開く。
スクリーンショット 2019-06-15 9.36.15.png

1-3.プロジェクト名編集

プロジェクト名を入力。わかりやすい名前であれば何でも良いです。
スクリーンショット 2019-06-15 9.37.13.png

1-4.アクセス権限変更

slackのappがこのスクリプトを実行できるようにするために、「アプリケーションにアクセスできるユーザー」の項目を「全員(匿名ユーザーを含む)」に変更する。
スクリーンショット 2019-06-15 9.38.51.png

1-5.スクリプトのURL取得

現在のウェブアプリケーションのURLが表示されるので、このURLをメモしておきます。
スクリーンショット 2019-06-15 9.39.49.png

2.slackの設定

2-1.SlackApp新規作成

https://api.slack.com/apps にアクセスし、「Create New App」を押す。
スクリーンショット 2019-06-15 9.54.50.png

2-2.SlackApp基本設定

  • App_Nameに任意の名前を入力し(この名前はコマンド呼び出し時にユーザーに表示されます)
  • DevelopmentSlackWorkspaceはプルダウンから自分のWorkspaceを選択

入力したら右下の「Create App」を押す。
スクリーンショット 2019-06-15 9.54.31.png

2-3.Verification Token取得

遷移した先のページ(appのBasic Information)の中段「App Credentials」内にVerification Tokenが表示されているので、この値をメモする。
スクリーンショット 2019-06-15 10.03.11.png

2-4.SlackApp詳細設定

同じページ(appのBasic Information)の上段「Building Apps for Slack」内の「Add features and functionality」を編集する。
編集する項目はInteractiveComponents,SlashCommands,Permissionsの3つ。

2-4-1.InteractiveComponents

InteractivityをOnにして、
RequestURLには1-5.で取得したURLを入力する。
URL入力後にエンターキーを押すと、画面右下の「SaveChanges」ボタンがアクティブになるので押す。
スクリーンショット 2019-06-15 10.08.08.png

2-4-2.SlashCommands

まず、画面左のリンクから SlashCommands を開く。
スクリーンショット 2019-06-15 10.14.08.png

CreateNewCommandを押す。
スクリーンショット 2019-06-15 10.15.32.png

CreateNewCommandの画面に遷移するので、

  • Commandに今回自分が追加したいコマンドを入力
  • RequestURLに1-5.で取得したURLを入力
  • ShortDescriptionに実行されるコマンドの目的を入力
  • UsageHintは特に入力してもしなくても良いです

入力が完了したら画面右下の「Save」を押す。
スクリーンショット 2019-06-15 10.16.46.png

2-4-3.Permissions

まず、先ほどと同様に画面左のリンクからOAuth&Permissionsを開く。

【※↓2019/06/27手順追記】
画面中段にあるScopes欄内の Select Permission Scopes のプルダウン内の「Send messages as {{slackApp名}}」を選択し、
SaveChangesを押す。
スクリーンショット 2019-06-27 10.30.21.png
【※↑2019/06/27手順追記ここまで】

画面上部の「Install App to Workspace」を押す。
スクリーンショット 2019-06-15 10.24.41.png

インストール画面が表示されるので、右下の「Install」を押す。
スクリーンショット 2019-06-27 10.30.46.png

OAuth&Permissionsのページにリダイレクトされ、
OAuth Access Tokenの値が表示されるのでこの値をメモする。
スクリーンショット 2019-06-15 10.30.28.png

3.GoogleAppsScriptの本設定

3-1.tokenの登録

1-1.同様にスプレッドシートからスクリプトエディタを開き、
左上のファイル>プロジェクトのプロパティを開く。
スクリーンショット 2019-06-15 13.08.19.png

スクリプトのプロパティに

  • verified_token というプロパティ名で、2-3.で取得したtokenの値
  • OAuth_token というプロパティ名で、2-4-3.で取得したtokenの値

を入力し、左下の保存を押す。
スクリーンショット 2019-06-15 13.19.30.png

3-2.SlackAppライブラリの追加

スクリプトエディタ上部のリソース>ライブラリを開く。
スクリーンショット 2019-06-15 13.31.44.png

  • 「ライブラリを追加」の欄に M3W5Ut3Q39AaIwLquryEPMwV62A3znfOO と入力し、「追加」を押す (※こちらは@soundTrickerさん作のライブラリです。詳細は作者様の紹介記事をご確認下さい) スクリーンショット 2019-06-15 13.32.55.png
  • ダイアログ上部にバージョン選択のプルダウンが表示されるので22を選択 スクリーンショット 2019-06-15 13.33.56.png
  • 左下の「保存」を押す スクリーンショット 2019-06-15 13.36.21.png

3-3.コード追加

  • slashコマンドgasコード例※githubリンクをコピーして、 スクリプトエディタのコード.gsに貼り付ける
  • 1行目のchannelNameの値を実際にコマンドを使用したいチャンネル名に書き換える
  • フロッピーのアイコンを押して保存する。 スクリーンショット 2019-06-15 13.41.01.png

3-4.公開スクリプトのバージョンアップ

  • スクリプトエディタ左上の「ファイル」>「版を管理」を押す。
  • コミットコメントを入力し、「新しいバージョンを保存」を押す。 スクリーンショット 2019-06-15 13.46.51.png
  • 左下のOKを押してダイアログが閉じられる。
  • スクリプトエディタ上部の「公開」>「ウェブアプリケーションとして導入」を押す。
  • プロジェクトバージョンを最新(下記画像では2)にする スクリーンショット 2019-06-15 13.52.45.png
  • ダイアログ最下部の「更新」を押す。
  • 承認が求められるので、「許可を確認」を押す。
  • 「このアプリは確認されていません」の警告が出ますが、「詳細」>「自作スラッシュコマンド(安全ではないページ)に移動」を押す。 スクリーンショット 2019-06-15 13.55.52.png
  • 各種許可が求められるので、右下の「許可」を押す。 スクリーンショット 2019-06-15 13.57.52.png
  • 「このプロジェクトをウェブアプリケーションとして導入しました。」と出るのでOKを押して完了。

4.おまけ(slackで設定する際の注意点)

  • slack側でコマンドを設定する際に「すでにそのコマンド自体が登録されているか否か」という判定はされません。
  • つまりAというappで /hoge を登録し、Bというappでも /hoge を登録する、という事ができてしまいます。
  • このように複数登録されたコマンドを呼び出した場合、下記のような Authorization is required to perform that action. というエラーになりますので、ご注意ください。(私はこのエラーをpermissionの設定ミスと勘違いしハマりました) スクリーンショット 2019-06-15 15.06.50.png

設定編は以上となります。
ここまでの手順を完了すると、
「slack上で /bihin を実行→ダイアログ表示→投稿が可能」となっているはずです。
コード解説編に続きます。

marogoma
エンジニアn年目。元薬剤師。 業務はvue,Reactなど。AtCoder緑 趣味でgoogle apps script
mediaxis
株式会社アクシスは、2008年に創業し、医療と教育に軸をもった運営をしている会社です。
https://mediaxis.jp/
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