Edited at

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


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 を実行→ダイアログ表示→投稿が可能」となっているはずです。

コード解説編に続きます。