あなたのアプリケーションからSlackにカスタマイズされたメッセージを送る方法

Slackは、多くのチームで使用されている人気のあるメッセージングアプリです。それは彼らのアプリケーションとそれを統合するための開発者のための多くのサービスとAPIが付属しています。本日の記事では、Incoming Webhookと呼ばれるサービスの1つを使用して、外部アプリケーションからslackにデータを送信する方法を説明します。.

こうすれば私達はできます 既に持っているアプリケーションから簡単にSlackにメッセージを送る;レポート、アップデート、ニュース、通知などを送信できます。この記事では、この例ではJavaScriptを使用しました。はじめに、チームのSlackアカウントにサインインします。.

1.統合を設定する

あなたは最初に着信webhook統合を設定する必要があります。に行く yourteam.slack.com/apps/build/custom-integration をクリックして 着信ウェブフック, 次に、メッセージを投稿したいチャンネルまたはユーザーを選択します（この選択は後でコードでオーバーライドできます）。.

完了すると、着信Webhook統合の設定ページが表示されます。.

下にスクロールすると、WebhookのURLがその形式で表示されます。 https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. そのURLをどこかに保存してください。後で必要になります。このページ自体で統合のアイコンと名前をさらに変更することができますが、それはコードで行います。.

2.メッセージを作成する

人気のあるサイトでのバレンタインデーの販売と販売中に使用するオファーコードを検索するWebアプリケーションをすでに作成しているとします。何らかの理由で、この結果をSlackチームのメンバーと共有したいとします。.

今しなければならないのは、前のステップで作成したWebhook URLを使用して、JSONデータを使用してアプリケーションからそのURLへのリクエストを投稿することです。.

最初にSlackメッセージに変換されるJSON文字列をまとめましょう。 JSONデータを搬送するパラメータはペイロードと呼ばれるため、JSON文字列は次のようになります。

var myJSONStr = 'payload = "ユーザー名"： "SALE BOT"、 "icon_url"： "example.com/img/icon.jpg"、 "チャンネル"： "#general"' 

icon_url プロフィール写真として表示される画像へのURLです。 icon_emoji 代わりに、絵文字をプロフィール画像として表示します。 "icon_emoji"： "：ギフト：". "チャネル" あなたのメッセージを見ることになるチャンネルまたはユーザー名を指定します。 usernameには構文を使います "@ユーザー名", チャンネル用 "#channelname".

それでは実際のメッセージについて。どちらでも追加できます "テキスト" メッセージをその値として書き、それを使って実行するか、またはというプロパティを使用します。 「愛着」 豊富にフォーマットされたテキストを追加する.

の 「愛着」 の財産 ペイロード このようになります：

"attachments"：["fallback"： "アタッチメントはサポートされていません。"、 "title"： "VALENTINE'S DAY OFFER"、 "color"： "＃9C1A22"、 "口実"： "今日の素晴らしいオファー一覧あなたのために、 "author_name"： "Preethi"、 "author_link"： "https://www.hongkiat.com/blog/author/preethi/"、 "author_icon"： "https://assets.hongkiat.com/ uploads / author / preethi.jpg "、" mrkdwn_in "：[" text "、" fields "]、" text "："サイト名をクリックするだけで購入が開始されます。 "、" thumb_url "：" http://example.com/thumbnail.jpg "]

"後退する" Slackメッセージがメッセージの添付をサポートしていないアプリケーションで表示されるときに表示される代替テキストです（モバイル通知など）。.

"色" メッセージの左境界色です。.

「口実」 メインコンテンツの前に表示されるテキストです。.

"author_link" 作成者の名前にハイパーリンクされたURLです（指定されている場合）。.

"mrkdwn_in" 太字の場合は（*）、斜体の場合は（_）のようなマークダウン構文に基づいて、値がメッセージ内でフォーマット設定されて表示されるプロパティ名の配列です。の3つの可能な値 "mrkdwn_in" "text"、 "pretext"、および "fields"です。

"thumb_url" サムネイル画像のURL.

これまでのところ、メッセージは次のようになります。.

それでは、添付配列にフィールドを追加しましょう。これにより、サイトが表示され、コードが2列に表示されます。.

"フィールド"：["タイトル"： "サイト"、 "値"： "__ \ n__ "、" short "：true、" title "："オファーコード "、" value "：" UI90O22 \ n- "、" short "：true], 

つかいます \ n 改行と構文を追加する ハイパーリンクを追加する.

アンダースコアは、テキストを斜体でフォーマットするために使用されます。.

ショート に設定されています 本当の 値を並べて表示する場合（短い場合など）。まとめると、JSONStringは次のようになります（実際の作業コードでは、ストリングを1行にしてください）。

var myJSONStr = 'payload = "username"： "SALE BOT"、 "icon_url"： "example.com/img/icon.jpg"、 "attachments"：["fallback"： "この添付ファイルはサポートされていません。 "、" title "："バレンタインデー "、" color "："＃9C1A22 "、" pretext "："今日の素晴らしいオファー一覧 "、" author_name "：" Preethi "、" author_link "：" https ：//www.hongkiat.com/blog/author/preethi/ "、" author_icon "：" https://assets.hongkiat.com/uploads/author/preethi.jpg "、" fields "：[" title " ： "サイト"、 "値"： "__ \ n__ "、" short "：true、" title "："オファーコード "、" value "：" UI90O22 \ n- "、" short "：true]、" mrkdwn_in "：[" text "、"フィールド"]、"テキスト "："サイト名をクリックするだけで購入が始まります。 "、" thumb_url "：" http://example.com/thumbnail.jpg "] ';提供されている場合は、オファーコード*を使って*追加の割引を受けます。 

3.リクエストを投稿する

JavaScriptで投稿リクエストをするには、以下の関数を使います。

function postMessageToSlack（）var xmlhttp = new XMLHttpRequest（）、webhook_url =以前に保存したURL、myJSONStr = json文字列から上; xmlhttp.open（ 'POST'、webhook_url、false）; xmlhttp.setRequestHeader（ 'Content-Type'、 'application / x-www-form-urlencoded'）; xmlhttp.send（myJSONStr）;  

ボタンクリックやページロードにこの機能を追加する それが働いているのを見るために.

最終的な出力は次のようになります。