- Slackに通知を飛ばしたいスケジュールを登録するGoogleカレンダーを作成する
- そのGoogleカレンダーの内容を、◯日前にSlackに通知する
上記の内容のメモ。
GoogleカレンダーのIDをコピーする
通知用カレンダーの上にカーソルを持っていくと出てくる三点の部分をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-10.png?resize=466%2C80&ssl=1)
表示されるメニューの [設定と共有] をクリック
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-7-700x220.png?resize=700%2C220&ssl=1)
「カレンダーの統合」部分の「カレンダーID」をコピーして控えておく。ここで控えたカレンダーIDは後で使います。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-8-700x169.png?resize=700%2C169&ssl=1)
Slackアプリの作成
slack api の Your Apps から、「Create New App」をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-11-700x82.png?resize=700%2C82&ssl=1)
「From scratch」をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-12-700x431.png?resize=700%2C431&ssl=1)
「App Name」にわかりやすい任意の名前を入れて、「Pick a workspace to develop your app in:」で使いたいワークスペースを選び、最後に「Create App」ボタンを押す。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-13-700x671.png?resize=700%2C671&ssl=1)
アプリが作成されるので、設定していきます。
[Settings] > [Basic Information] の中にある、「Add features and functionality」をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-14-700x232.png?resize=700%2C232&ssl=1)
「Incoming Webhooks」をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-16-700x582.png?resize=700%2C582&ssl=1)
「Activate Incoming Webhooks」の右にあるボタンをクリックして「On」にする。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-15-700x232.png?resize=700%2C232&ssl=1)
すると下部に表示が増えるので「Add New Webhook to Workspace」をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-17-700x427.png?resize=700%2C427&ssl=1)
Slackに接続するための権限リクエストの画面が出るので、投稿先チャンネルを選び、「許可する」ボタンを押す。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-19-700x547.png?resize=700%2C547&ssl=1)
「Webhook URL」の部分に今作った Webhook URL があるので、「Copy」ボタンを押して控えておく。この Webhook URL は後で使います。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-20-700x434.png?resize=700%2C434&ssl=1)
アイコンなどを設定したい場合
[Settings] > [Basic Information] のページ下部にある「Display Information」の「App icon & Preview」を設定するとアイコンを設定することができる。説明が必要であれば「Short description」や「Long description」を設定。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-22-700x585.png?resize=700%2C585&ssl=1)
Googleスプレッドシートを作成設定
Googleスプレッドシートを作成して、名前をわかりやすいものにしておく。「Slack_remind通知用」など。
[拡張機能] >[AppScript] をクリック。
コード.gs に以下のように設定する。変更箇所は以下の3つ。
- 先程控えておいたWebhookURLを記入
- 先程控えておいたカレンダーのIDを記入
- 何日前にリマインドするかを設定
// ポストするSlackチャンネル
// ※SlackAppで設定したWebhookURL
var postUrl = '先程控えておいたWebhookURL';
// 何日前にリマインドするか?
// var day = 1; // 1日前
var days = [1, 7]; // 1日前と7日前
// チェックするカレンダーのID
var calendarId = '先程控えておいたカレンダーのID';
function myFunction() {
var pushMessage = "リマインド予定をお知らせするよ\n";
var remindNum = 0;
for (var i = 0; i < days.length; i++) {
var day = (days[i]);
var events = getEvents(day);
if (events != "") {
var message = makeMessage(events, day);
pushMessage += message;
remindNum ++;
}
}
// Logger.log("1\n" + pushMessage);
Logger.log("remind数:" + remindNum);
if (remindNum > 0) {
sendHttpPost(pushMessage);
}
}
// イベント取得
function getEvents(day) {
var searchStr = '';
var events = [];
var targetDate = new Date();
targetDate.setDate(targetDate.getDate()+day);
var options = {
search: searchStr
}
var calendar = CalendarApp.getCalendarById(calendarId);
var events = calendar.getEventsForDay(targetDate, options);
var no_reservation_msg = '';
return events;
}
// function postToSlack(events) {
function makeMessage(events, day) {
var message = '';
message += '▼予定の' + day + '日前\n';
for (var i in events) {
var title = events[i].getTitle();
var start = events[i].getStartTime();
var location = events[i].getLocation();
var description = events[i].getDescription();
var start_month = start.getMonth()+1;
var WeekChars = [ "日", "月", "火", "水", "木", "金", "土" ];
var start_day = WeekChars[start.getDay()]; // 曜日
var start_time = start.getHours() + ':' + pad(start.getMinutes());
var start_date = start.getDate(); //日
message += start_month.toString() + '月' + start_date.toString() + '日(' + start_day + '):';
message += title + '\n';
}
return message;
}
function sendHttpPost(message)
{
var jsonData =
{
"text" : message,
"link_names": 1
};
var payload = JSON.stringify(jsonData);
var options =
{
"method" : "post",
"contentType" : "application/json",
"payload" : payload
};
UrlFetchApp.fetch(postUrl, options);
}
function pad(n){return n<10 ? '0'+n : n}
テスト実行する。メニューの「実行」をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-21-700x189.png?resize=700%2C189&ssl=1)
問題なく動けば、先程指定したSlackのチャンネルに以下のように投稿される。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-27-700x236.png?resize=700%2C236&ssl=1)
実行トリガーの設定
Apps Script の左側にあるメニューの [トリガー] をクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-23.png?resize=495%2C499&ssl=1)
ページ右下にある「トリガーを追加」ボタンをクリック。
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-25.png?resize=463%2C175&ssl=1)
- 「実行する関数を選択」:「myFunction」を選択
- 「イベントのソースを選択」:「時間主導型」を選択
- 「時間ベースのトリガーのタイプを選択」:「日付ベースのタイマー」を選択
- 「時刻を選択」:任意の時間を設定する。設定した時間にSlackに通知がいく
![](https://i0.wp.com/wp.graphact.com/wp-content/uploads/2024/01/image-26-700x695.png?resize=700%2C695&ssl=1)
上記を設定したら、忘れず右下の「保存」ボタンを押す。
これで毎日指定の時間に通知がSlackに飛ぶようになりました。
※該当するGoogleカレンダーのスケジュールがない場合は通知は飛びません。
おわり!