［GAS］［slack］営業日カウントダウンbotを作っている途中　その6　slack周りをいじる　Botアイコンの画像設定あれこれ

2022年4月21日 13:40

前回

いま気になっていること

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://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で、アプリそのもののアイコンを設定できる。

2.　icon_url

Slack API>chat.postMessage>Optional arguments>icon_url

3.　icon_emoji

Slack API>>chat.postMessage>Optional arguments>icon_emoji

いったん、ここまで！

#GAS
#slack
#bot
#slackAPI

いただいたサポートで、書籍代や勉強費用にしたり、美味しいもの食べたりします！

［GAS］［slack］営業日カウントダウンbotを作っている途中 その6 slack周りをいじる Botアイコンの画像設定あれこれ

前回