3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Slack App作成中に戸惑ったこと3選

Posted at

Slack App作成中に戸惑ったこと3選

毎日定時にタスクリストをSlackの指定したチャンネルへ通知してくれるSlack Appを作成しようとしたところ、いくつか壁にぶつかったので事象と解決方法を備忘録として残します。

1.Slack Appがチャンネルに追加できないと表示される
2.Appのアイコンを変更したい
3.chat.postMessageでメッセージが送信できない

Slack Appがチャンネルに追加できないと表示される

キャプチャ1.PNG

Appを作成、その後スコープでAppにメッセージを送信するための権限の付与まで完了してます。ワークスペースにAppをインストールをしようとしたところ、上記エラーが表示されました。

原因

Botに名前がついていないから。

Appの種類によっては発生しない事象とのことですが、今回は追加したAppがBot(ユーザー)としてメッセージを送信する仕様のため、Botの名前=ユーザーの名前が指定されていないことが原因のようでした。

解決策

Botに名前を付けてあげます。

App Homeを開き、App Display Nameから編集します。
キャプチャ2.PNG
キャプチャ3.PNG

Display Name…表示されるBotの名前です。日本語でも入力可能です。
Default username…メンションなどを付ける際にSlackが参照するための名前になります。こちらは日本語不可となります。

名前を設定した上で、再びOAuth&PermissionsからAppをワークスペースにインストールします。

キャプチャ4.PNG

無事にAppが追加出来ました!

Appのアイコンを変更したい

アイコンを未設定でも問題なくAppは動きますが、折角なので通知が来た時に私のテンションが上がるようなアイコンへとカスタマイズしていきます。
キャプチャ5.PNG

Basic Informationを開き、下部までスクロールします。
Display Informationからアイコンの変更が可能です。
キャプチャ6.PNG

アイコンは512px × 512pxから2,000px × 2,000pxまでの大きさの正方形の画像のみ設定可能です。それ以外の大きさ、もしくは長方形の場合、エラーメッセージが出て設定が出来ません。
また、Short descriptionの入力も必須となっています。簡単なAppの説明を入力します。こちらは日本語入力でOKです。
キャプチャ7.PNG

無事にアイコンを変更できました!

背景色については明るい色へ変更すると「見にくいですよ」とエラーメッセージが表示されるため、変更しない方が無難かと思います。

chat.postMessageでメッセージが送信できない

スプレッドシートからタスクを取得し、markdown形式でメッセージを送信したかったのでデータを成形します。(その他コードなどの詳細は今回省略します)

送信したいメッセージ内容例
タスク番号:1
<ステータス対応中>
カワウソに餌をあげる(タスク内容)
締切:2023/09/14

失敗したコード

// 送信内容の設定
  let payload = {
    "token" : "Slack Appで生成されたOAuth Token",
    "channel" : "メッセージの投稿先チャンネル",
    'text' : JSON.stringify(メッセージ内容が格納された変数)
  };

実際に送信されたメッセージ
[{"type":"section","text":{"type":"mrkdwn","text":"タスク番号:1\n<ステータス対応中>\nカワウソに餌をあげる(タスク内容)\n納期予定:2023/09/14]"}},

配列に格納されたメッセージがそのまま出力されてしまいました。

原因

text形式で送信設定をしていたこと。
JSONの文字列がそのまま送信されてしまうようでした。

解決策

成功したコード

// 送信内容の設定
  let payload = {
    "token" : "Slack Appで生成されたOAuth Token",
    "channel" : "メッセージの投稿先チャンネル",
    ”block”: JSON.stringify(メッセージ内容が格納された変数)
  };

送信されたメッセージ内容例
タスク番号:1
<ステータス対応中>
カワウソに餌をあげる(タスク内容)
締切:2023/09/14

送信設定をtextからblockに変更をしてあげると、想定していた通りのmarkdown形式で無事に送信されることが確認できました!
textで設定するとJSONがそのままの形式で出力されるようでした。

Slack Appではいろんなことが出来るようになっているので、これからもいろんなアプリの制作に着手していきたいと思います。
その上で壁にぶつかった事象があればまた書き溜めて公開していきたい所存です。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?