[GAS][slack]営業日カウントダウンbotを作っている途中 その6 slack周りをいじる Botアイコンの画像設定あれこれ
前回
いま気になっていること
emoji-codeでもアイコンいけるんじゃないの?
webhoook
SlackAPI ライブラリ ちゃんと理解したい
カレンダ 祝日+土日+指定休日の統合?
スクリプトファイルの並び順 https://developers.google.com/apps-script/releases
会社指定休日をクラスに持たせる?
営業日判定もクラスに持たせる?
スプレッドシートいらなくなる?
SlackのBotアイコンを絵文字コードで設定してみる
icon_emoji
これでできそうな感じだか、よくわからない。
いろいろ試すがうまくいかない。
試してみたコード
/**
* 参考
* https://auto-worker.com/blog/?p=2904#
*
* 参考 プロパティストア
* https://tonari-it.com/gas-property-store/
*
* 参考 GASでSlackAPIが使えるライブラリ
* https://blog.guchimina.com/?p=370
* https://github.com/soundTricker/SlackApp
*
* スプレッドシートで計算した残営業日を取得してslackで通知する。
*/
'use strict'
function postSlackbot() {
//SlackAPIで登録したボットのトークンを設定する
const token = PropertiesService.getScriptProperties().getProperty('SLACK_TOKEN');
//ライブラリから導入したSlackAppを定義し、トークンを設定する
const slackApp = SlackApp.create(token);
//Slackボットがメッセージを投稿するチャンネルを定義する
const channelId = "#general";
//メッセージ内で使用する日付、残営業日数を定義する
const todayFromSheet = dateMasterSheet.getRange('D2').getDisplayValue();
const businessDaysRemainingThisMonth = dateMasterSheet.getRange('D28').getValue();
const businessDaysRemainingInThisYear = dateMasterSheet.getRange('D29').getValue();
const businessDaysRemainingInThisFiscalYear = dateMasterSheet.getRange('D30').getValue();
//Slackボットが投稿するメッセージを定義する
const message = `
今日は ${todayFromSheet} です。
今月の残り営業日数は あと ${businessDaysRemainingThisMonth} 日です。
今年の残り営業日数は あと ${businessDaysRemainingInThisYear} 日です。
今年度の残り営業日数は あと ${businessDaysRemainingInThisFiscalYear} 日です。
`
const iconImage = "http://flat-icon-design.com/f/f_business_23/s256_f_business_23_0bg.png";
// const iconImage = ":+1:";
const options = {
// channelId: slackUserID, //チャンネル名
botUserName: "営業日カウントダウンbotさん", //投稿するbotの名前
// message: statusMessage, //投稿するメッセージ
bot_icon: iconImage, //投稿時に表示されるアイコン
icon_emoji: ":+1:"
// bot_icon:":+1:" //NG
};
// console.log(options.botUserName);
//SlackAppオブジェクトのpostMessageメソッドでボット投稿を行う
slackApp.postMessage(channelId, message, { username: options.botUserName, icon_emoji: options.icon_emoji });
}
あとでわかったが、これ、icon_emoji は chat.postMessage>Optional arguments に入れないとなんだな。
うーん、「slack bot アイコン 絵文字」でぐぐったら自分のnoteも出てきて凹んだ。これ、更新しないとな。
https://ykng0.hatenablog.com/entry/2016/12/25/225424
ライブラリを使った状態で、slackのアイコンに絵文字コードで指定するには?
https://www.webfx.com/tools/emoji-cheat-sheet/
ライブラリのgithubみて、ちょっとミニマムでテストしよう
https://github.com/soundTricker/SlackApp
お、これで出来た
function myFunctionSlackTest() {
//SlackAPIで登録したボットのトークンを設定する
const token = PropertiesService.getScriptProperties().getProperty('SLACK_TOKEN');
//ライブラリから導入したSlackAppを定義し、トークンを設定する
const slackApp = SlackApp.create(token);
//Slackボットがメッセージを投稿するチャンネルを定義する
const channelId = "#general";
//My first Message!
slackApp.chatPostMessage(channelId, "Hi Slack.", {
username: "My First Bot",
icon_emoji: ":+1:"
});
}
じゃあ、こんな感じでこうだ
![](https://assets.st-note.com/img/1650422719317-OeHONKhNUl.png)
/**
* 参考
* https://auto-worker.com/blog/?p=2904#
*
* 参考 プロパティストア
* https://tonari-it.com/gas-property-store/
*
* 参考 GASでSlackAPIが使えるライブラリ
* https://blog.guchimina.com/?p=370
* https://github.com/soundTricker/SlackApp
*
* スプレッドシートで計算した残営業日を取得してslackで通知する。
*/
'use strict'
function postSlackbot() {
//SlackAPIで登録したボットのトークンを設定する
const token = PropertiesService.getScriptProperties().getProperty('SLACK_TOKEN');
//ライブラリから導入したSlackAppを定義し、トークンを設定する
const slackApp = SlackApp.create(token);
//Slackボットがメッセージを投稿するチャンネルを定義する
const channelId = "#general";
//メッセージ内で使用する日付、残営業日数を定義する
const todayFromSheet = dateMasterSheet.getRange('D2').getDisplayValue();
const businessDaysRemainingThisMonth = dateMasterSheet.getRange('D28').getValue();
const businessDaysRemainingInThisYear = dateMasterSheet.getRange('D29').getValue();
const businessDaysRemainingInThisFiscalYear = dateMasterSheet.getRange('D30').getValue();
//Slackボットが投稿するメッセージを定義する
const message = `
今日は ${todayFromSheet} です。
今月の残り営業日数は あと ${businessDaysRemainingThisMonth} 日です。
今年の残り営業日数は あと ${businessDaysRemainingInThisYear} 日です。
今年度の残り営業日数は あと ${businessDaysRemainingInThisFiscalYear} 日です。
`
//SlackAppオブジェクトのpostMessageメソッドでボット投稿を行う
slackApp.chatPostMessage(channelId, message, {
username: "営業日カウントダウンbotさん", //投稿するbotの名前
icon_emoji: ":calendar:"//投稿するbotの画像 絵文字コード https://www.webfx.com/tools/emoji-cheat-sheet/
});
}
https://api.slack.com/methods/chat.postMessage をみるとちゃんといろいろ書いてある。
↓こんなふうにすると
icon_url よりも、icon_emoji が優先されることが分かった。
//botアイコン 画像URLで指定する場合
const iconImage = "http://flat-icon-design.com/f/f_business_23/s256_f_business_23_0bg.png";
//SlackAppオブジェクトのpostMessageメソッドでボット投稿を行う
slackApp.chatPostMessage(channelId, message, {
username: "営業日カウントダウンbotさん", //投稿するbotの名前
icon_url: iconImage, //投稿時に表示されるアイコン
icon_emoji: ":calendar:"//投稿するbotの画像 絵文字コード https://www.webfx.com/tools/emoji-cheat-sheet/
});
}
念のため、順番も入れ替えてみたが、やっぱりicon_emoji が優先される。
//botアイコン 画像URLで指定する場合
const iconImage = "http://flat-icon-design.com/f/f_business_23/s256_f_business_23_0bg.png";
//SlackAppオブジェクトのpostMessageメソッドでボット投稿を行う
slackApp.chatPostMessage(channelId, message, {
username: "営業日カウントダウンbotさん", //投稿するbotの名前
icon_emoji: ":calendar:", //投稿するbotの画像 絵文字コード https://www.webfx.com/tools/emoji-cheat-sheet/
icon_url: iconImage//投稿時に表示されるアイコン
});
}
まとめ的なもの
つまり、こういうことだな。
Slackのワークスペースでアイコンは、表示上は、下記の 3>2>1 の順で優先、上書きされる。
特に無料のワークスペースではAppの数に制限がある(現在は10個)ので、ひとつのAppにいろいろスコープ持たせて、各チャンネルでいろんなことやらせつつ、各チャンネルで振る舞いや見た目、名前を変えたいという時に、各機能ごとにchat.postMessageのOptional argumentsで設定を変えて見た目上は違うものにすることができるってわけだ。って、ヤマタケさんも言ってたな、言ってましたね、何番煎じですみません。
1. App icon & Preview
https://api.slack.com/の各アプリの
Settings>Basic Information>Display Information>App icon & Previewで、アプリそのもののアイコンを設定できる。
![](https://assets.st-note.com/img/1650514953116-OBIw5Ei5MY.png)
2. icon_url
Slack API>chat.postMessage>Optional arguments>icon_url
![](https://assets.st-note.com/img/1650515104159-7NYznBF8WP.png?width=1200)
3. icon_emoji
Slack API>>chat.postMessage>Optional arguments>icon_emoji
![](https://assets.st-note.com/img/1650515125235-5axe7L4seb.png?width=1200)
![](https://assets.st-note.com/img/1650515704118-S86mxUKVyF.png?width=1200)
いったん、ここまで!
いいなと思ったら応援しよう!
![good-sun(a03)](https://assets.st-note.com/production/uploads/images/74915135/profile_e6435615735e2ec66a673a40d90bb4a5.png?width=600&crop=1:1,smart)