Googleカレンダーの予定を教えてくるSlackスラッシュコマンドを作ってみた！

こんにちは。RYOです！！

2022年4月から新卒入社したのですが、あっという間に3ヶ月経ってもう夏になっちゃいましたね。。

最近は暑くて溶けそうです笑笑

以前にインターン時代にもこちらのブログを投稿させていただきましたが、今回のブログは「Googleカレンダーの予定を教えてくれるSlackスラッシュコマンドを作成して見た」です！
社内ではSlackを頻繁に使うので、Slack内で自分の予定が見れたら便利でいいなと思い、今回作ってみることにしました。

使用したツール

GAS(Google Apps Script)
SlackApp
Slack

学べること

SlackApp作成方法&設定方法
GASの書き方&デプロイ方法
Slackスラッシュコマンド

1.SlackApp作成

初めにSlackAppの作成からしていきます。

https://api.slack.com/apps

上記のリンクに遷移します。

SlackApp作成画面

Create New Appをクリックします。

From scratchをクリックします。

続いて、AppNameに好きなアプリの名前を入力します。

そしてSlackAppを追加したいワークスペースを追加して、Create Appをクリックです。

Basic Information画面に遷移してれば、一旦完了です！！

2.Google Apps Script 作成

https://script.google.com/home

上記のリンクからGASのホームに遷移します。

「新しいプロジェクト」をクリックします。

コード.gsに下記のコードを追記します。

function doPost(e) { //①
    var email = "hogehoge@hugahuga.co.jp";
    var scheduleList = "";
    scheduleList = scheduleListup(email); // GoogleカレンダーID（メールアドレス）
    if (scheduleList != "") {
        var response = {
            text: "お仕事お疲れ様です!!:man-bowing:\n本日のご予定をお知らせします！:chatwork_roger:\n\n▼本日の予定\n\n" + scheduleList 
        };
        console.log(response.text)
        return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
    }
}

function scheduleListup(googleId) { //②
    var list = "";
    var calendar = CalendarApp.getCalendarById(googleId);
    var today = new Date();
    today.setDate(today.getDate()); 
    var events = calendar.getEventsForDay(today);
    var prefix = "・"; 
    for (var i = 0; i < events.length; i++) {
        var task = "";
        var startTime = formatTime(events[i].getStartTime());
        var endTime = formatTime(events[i].getEndTime());
        task = prefix + events[i].getTitle();
        list += startTime + "~" + endTime + "" + task + "\n";
    }
    return list;
}

function formatTime(date) { 
    return Utilities.formatDate(date, 'JST', 'HH:mm');
}

function doPost(e) { //①

var email = "hogehoge@hugahuga.co.jp";

var scheduleList = "";

scheduleList = scheduleListup(email); // GoogleカレンダーID（メールアドレス）

if (scheduleList != "") {

var response = {

text: "お仕事お疲れ様です!!:man-bowing:\n本日のご予定をお知らせします！:chatwork_roger:\n\n▼本日の予定\n\n" + scheduleList

};

console.log(response.text)

return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);

}

function scheduleListup(googleId) { //②

var list = "";

var calendar = CalendarApp.getCalendarById(googleId);

var today = new Date();

today.setDate(today.getDate());

var events = calendar.getEventsForDay(today);

var prefix = "・";

for (var i = 0; i < events.length; i++) {

var task = "";

var startTime = formatTime(events[i].getStartTime());

var endTime = formatTime(events[i].getEndTime());

task = prefix + events[i].getTitle();

list += startTime + "~" + endTime + "" + task + "\n";

}

return list;

}

function formatTime(date) {

return Utilities.formatDate(date, 'JST', 'HH:mm');

}

コード①

doPost(e)

スラッシュコマンドを実行した時に呼ばれるメソッドになります。
引数のeの中にはパラメータが入っているので、スラッシュコマンドに引数を設定するなどに使えます。

ContentService.createTextOutput

GASが用意してくれているメソッドで、テキストを返してくれます。
今回は、「お仕事お疲れ様です」の部分のテキストになります。

コード②

CalendarApp.getCalendarById

GoogleカレンダーのアカウントIDを指定すると、そのアカウントのカレンダー情報を取得することができます。

getEventsForDay(date)

特定の日に発生するすべてのイベントを取得します。

3.Google App Scriptコードをデプロイ

先ほど書いたコードをデプロイしていきます。

右上のデプロイから「新しいデプロイ」を選択します。

「新しいデプロイ」画面に遷移したら、種類の選択から「ウェブアプリ」を選択します。

新しい説明文・次のユーザーとして実行・アクセスできるユーザーを順に設定。

⚠️注意　必ず、アクセスできるユーザーを全員にしてください。

全て入力できたら、「デプロイ」をクリックします。

Googleカレンダーのアクセスを許可する必要があるので、「アクセスを承認」をクリックしてアクセスを許可してください。

アクセス承認後は、デプロイが完了するのでウェブアプリのURLをコピーしておきましょう！

これでデプロイは無事に完了しました！

4.SlackAppスラッシュコマンド設定

1.SlackApp作成のBasic Information画面に戻ります。

Slash Commandsメニューを選択し、Create New Commandをクリックします。

Command	実際にSlackでコマンド入力するときの設定を入力
Request URL	Google Apps Scriptでデプロイした際のウェブアプリURLを入力
Short Description	説明を入力

入力できたら、Saveをクリックして完了です！

5.Botの設定

Botの設定をしておかないと、ワークスペースと紐付けできないので必須の作業になります。

App Manifestメニューから「Bot」を選択します。

アプリ名を実際につけていきます。

アプリ名をつけたら、Saveを押しましょう！

こちらのチェックも忘れずに！

以上でBotの設定が終わりました。

最後にワークスペースにSlackAppをインストールする作業です！

Botの設定は終わりましたが、一応確認事項で、

App Manifest メニューから下記のコードになっているか確認お願いします！！

display_information:
  name: スケジュールくん
features:
  bot_user:
    display_name: Schedulekun
    always_online: true
  slash_commands:
    - command: /schedulekun
      url: https://script.google.com/macros/s/hogehoge // デプロイのURL
      description: Googleカレンダーの予定を教えてくれます。
      should_escape: false
oauth_config:
  scopes:
    bot:
      - commands
settings:
  org_deploy_enabled: false
  socket_mode_enabled: false
  token_rotation_enabled: false