Slack未経験者必見！もの凄く簡単にSlackにお問い合わせ内容を送信する方法

7577 ワード
JavaScript 初心者 Slack JavaScript テキストリンク

こんにちは、アッキーです。

今回はJavascriptとSlackを連携させてみたいと思います。

お問い合わせなどのお知らせ通知を作ります。

はじめに

Slackでの会員登録を行ってください。

また、Webhook用のURLは各自で取得してください。

取得方法が分からない方は下記の記事が参考になると思います。

・SlackのWebhook URL取得手順

それでは説明していきます！

入力フォームの値を取得

今回は入力フォームから値を取得し、その値をSlackで確認します。

まずは、入力フォームの値を取得。

const name = document.querySelector('#name').value
const email = document.querySelector('#email').value
const description = document.querySelector('#description').value

Payloadの作成

次は、Slackに送信する際にどのようなお問い合わせが来たかが一目でわかるようにpayloadの作成を行います。

const name = document.querySelector('#name').value
const email = document.querySelector('#email').value
const description = document.querySelector('#description').value

const payload = {
  text: 'お問い合わせが来ました\n'
    + 'お名前: ' + name + '\n'
    + 'メールアドレス: ' + email + '\n'
    + '問い合わせ内容\n' + description
}

Slackへ送信

最後にfetchメソッドでSlackへ送信します。

const name = document.querySelector('#name').value
const email = document.querySelector('#email').value
const description = document.querySelector('#description').value

const payload = {
  text: 'お問い合わせが来ました\n'
    + 'お名前: ' + name + '\n'
    + 'メールアドレス: ' + email + '\n'
    + '問い合わせ内容\n' + description
}
const url = 'WebhookのURL'
  fetch(url, {
      method: 'POST',
      body: JSON.stringify(payload)
  }).then(() => {
      // 成功
  }).catch(() => {
      // 失敗
})

実際にSlackへの送信が成功した場合、通知がきてお問い合わせの内容が見れます。

このようにしてSlackへ送信することができます！

ちなみにSlackはブラウザ版だとほとんどの場合、通知が来ないのでデスクトップ版をダウンロードすることをおススメします。

いかがだったでしょうか？

意外と簡単！

以上、「Slack未経験者必見！Slackにお問い合わせ内容を送信する方法」でした！

Thank you for reading

2014 ACM/ICPC Asia Regional Anshan Online
TextView文字と背景クリック効果