クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

駆け出しエンジニアの僕が「Slackへのグラフ定期ポストを自動化する」を誰でも簡単にできる仕組みを作った話

GAS Slack

f:id:maru_0813:20210819183624p:plain

初めに

初めまして@maru_0813 と申します。 2021年1月まで約5年間、営業やキャリアアドバイザーを経験し、この度ジョブチェンジした駆け出しエンジニアです。

早速ですが、
Slackへグラフ定期ポストを自動化するGASの実装方法は、調べればいくつか記事が出てくるかと思います。
今回の内容は、組織に多く在籍している非エンジニアの方向けに、さらに全社展開を目的とした内容になります。
@ouraが以前投稿している記事のアップデート版になります。

また、全社展開の方法にフォーカスさせていただきたいため、
本内容では、Slack Appの作成方法やGASのコードは、割愛させていただきます。
@ouraが以前投稿している記事を参照いただければと思います。

なぜやったのか？

  • グラフを定期ポストしたいと思う方が管理職やリーダー
  • そのうち非エンジニアの方が多く記事を見てもトライ＆エラーが頻発する
  • かつ、多忙でトライ＆エラーの時間をかけれない

非エンジニア業務をしていた当時の原体験として
日々KPIをモニタリングしながら、Slackを活用してチームとコミュニケーションを取っている中で
「現状の状態をチーム全員と認識を揃えたい」や「アクションを促すきっかけを作りたい」という思いがありました。
日常業務の中で、GASを一から学習する時間が割けず、上記の思いを実現できずもどかしさを感じていました。
そのような思いをもつ、非エンジニアの方が一定数いるのではないかと考え、今回の仕組みを作りました。

前提

ざっくりとした仕様

  • Slackチャンネル名、スプレッドシートのタイトルをフォームで回答させる
  • Slackbotでアクションごとに区切られた手順書が呼び出される
  • フォームで回答したSlackチャンネル名、スプレッドシートのタイトルが反映されたスクリプトが生成される f:id:maru_0813:20210818193402p:plain

Todo

  1. SlackAppの作成
  2. Tokenのライブラリ化
  3. Slackワークフローの作成

1. Slack Appの作成

GASとSlack APIを利用してポストするのですが、
まずは、Slackにポストするためにトークンを取得する必要があります。 そのためにSlack Appを作成します。

2. Tokenのライブラリ化

不特定多数の方が利用するため、トークンが乱用されるリスクを考慮してライブラリ化することでTokenを隠すことにしました。

やり方

・別のスプレッドシートを用意

※ライブラリ用のスクリプトを実装するために、別のスプレッドシートを用意します。

・GCPでプロジェクトの設定

※GCPは社内別部門が管理している可能性があるため、該当部門にお問い合わせください

・スクリプトプロパティにTokenを格納

コードのToken IDを発行したTokenの値を入れ、実行します。

function setVal(){
//スクリプトプロパティで「OAUTH_TOKEN」キーに値を格納する
PropertiesService.getScriptProperties().setProperty("OAUTH_TOKEN", "Token ID");
}

プロジェクトのプロパティを確認すると、値が入っていることが確認できます。 f:id:maru_0813:20210818191706p:plain

・ライブラリ化する

バージョンを固定し、実行可能なAPIとして公開します。 不具合が起きた時に、本番環境とdev環境で切り分けるためです。

・スクリプトプロパティを呼び出すコードを実装

common.getProperty()で「ライブラリ名+メソッド」でライブラリを呼び出すコードになります。

function slack(chart) {
    var url        = 'https://slack.com/api/files.upload';
    var token      = common.getProperty();  //←ライブラリを呼び出すコード
    var channel    = cleaningResult();
    var payload = {
        'token'      : token,
        'channels'   : channel,
        'file'        : chart,
        'filename'    : 'グラフ'
    };
    var params = {
        'method' : 'post',
        'payload' : payload
    };
    var response = UrlFetchApp.fetch(url, params);
}

3. Slackワークフローの作成

手順作成

@ouraさんが以前投稿しているの記事をベースに手順をSlackワークフローに落とし込みます。 ステップを大きく分けると以下のように分けられます。

専用チャンネルの開設とショートカットの作成

「グラフ定期ポストを自動化する」の窓口として専用チャンネルを開設します。
そしてそのチャンネル内でSlackワークフローのショートカットを作成します。 f:id:maru_0813:20210818191706p:plain

変数の指定

変数が反映されたスクリプトを生成するためにフォーム化します。
Slackワークフローにフォームのステップを追加します。 f:id:maru_0813:20210818191928p:plain

SlackAppの追加

事前に作っておいたSlack Appをユーザーに追加してもらうよう手順化します。 f:id:maru_0813:20210818191956p:plain

変数が反映されたスクリプトを出力

ユーザーがコピペできるよう、完成されたコードを転記します。
下線部の「可変テキスト」は、フォームで投稿された変数になります。
変数を挿入を選択し、フォームで投稿された変数を設定し置き換えてください。 f:id:maru_0813:20210818192021p:plain

GASへ転記と設定

スプレッドシートからスクリプトエディタを開いてもらう手順を書き、GASをコピペするよう促します。 f:id:maru_0813:20210818192046p:plain

事前に作っておいたTokenを取得するライブラリを使用する手順を書きます。 f:id:maru_0813:20210818192106p:plain

そして、トリガーの設定の手順化をして、終了のアナウンスを設定します。 これで完成です。 f:id:maru_0813:20210818192127p:plain

全社へ展開

テキストで告知 f:id:maru_0813:20210818193058p:plain

隔週で全社MTGなどの時間がありましたら、 そちらでも口頭でも告知ができるといいかと思います。

終わりに

やってみての感想としては、
やり方は手探りではありましたが、課題やゴールが明確で、
自分の力で全社のために貢献できるイメージは持てていたので
モチベーション高く取り組むことができました。
もし、現在、他職種でエンジニアにこれからなりたいという方がいましたら、
トライする内容として参考にしていただければ幸いです。

© 2016 CrowdWorks, Inc., All rights reserved.