---
title: お問い合わせの受信通知をSlackで送信する
description: KurocoはSlackとのAPI連携機能を持っています。API連携をするとSlackのメッセージの読込及び、Slackチャンネルへの投稿が容易に行えるようになります。 
---

## 概要
KurocoはSlackとのAPI連携機能を持っています。  
API連携をするとSlackのメッセージの読込及び、Slackチャンネルへの投稿が容易に行えるようになります。  

ここではSlackと連携して、お問い合わせの受信通知をSlackへ投稿する方法について説明します。

### 学べること
以下の手順でお問い合わせの受信通知をSlackへ投稿します。
- [Slackアプリの作成](#slackアプリの作成)
- [Kurocoの設定](#kurocoの設定)
- [動作確認](#動作確認)

## Slackアプリの作成

それではAppのインストール方法を記載します。

### Appを作成する

[Slack API](https://api.slack.com/apps)にアクセスし、[Create an App]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/e668c5bc17cc4680068a05bfb3b8434f.png)
ポップアップでApp作成画面が表示されるので、[From an app manifest]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/b516cfed5eb19c0c429264b42ea0617b.png)
Workspace選択画面が表示されます。  
「Pick a workspace to develop your app in:」フィールドより、Appを利用するworkspaceを選択し[Next]をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/bfd8157d34e6d10919c78a5aa8df0c70.png)
Enter app manifest below画面が表示されるので、「YAML」のテキストエリアに下記を貼り付けます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/05af84f691c3ce19be77ed9c46ac2058.png)

```yaml
_metadata:
  major_version: 1
  minor_version: 1
display_information:
  name: KurocoNotification
features:
  bot_user:
    display_name: KurocoNotification
    always_online: true
oauth_config:
  scopes:
    bot:
      - chat:write
      - im:write
```

:::tip
上記設定ではボットからSlackへのメッセージ追加を許可します。  
チャンネルの情報や投稿済みの内容の読み込み等を行いたい場合はSlackのリファレンスを参考にしてください。  
-[Create and configure apps with manifests](https://api.slack.com/reference/manifests)  
-[OAuth Permission scopes](https://api.slack.com/legacy/oauth-scopes)
:::

貼り付け後、[NEXT]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ebb427257f9947a57a16800aa3ac766a.png)

[Create]をクリックし、APIの作成が完了です。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fa8e63a798475bc9f0c1c9f59774a0d8.png)

### AppをWorkspaceにインストール

次に、先ほど作成したAPIをWorkspaceにインストールします。

[Install to Workspace]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5baa88cfef6d57d2a5a5b59db86e9746.png)

アクセス権限のリクエスト画面が表示されるので、[許可する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0721418961354224dd376b0ab8c80bdc.png)

次に、トークンを確認します。左サイドバーより、[OAuth & Permissions]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c00f3825f3fee66a8f1653f1eda3faad.png)

「Bot User OAuth Token」が表示されるので、コピーします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a47ea50f37f54e8859570e74f96b9d0d.png)

### Appの情報編集
デフォルトだとAppのアイコンが表示されないので、画像設定をします。
左サイドバーより[Basic Information]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/74a29f2b989ec7ee14402d817409bf52.png)

「Display Information」より、[Add App Icon]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/072296a329667f736281048e2b5c901b.png)

今回はKurocoのアイコンをアップロードしました。(画像は[こちら](https://kuroco.app/files/user/img/documentation/kuroco_logo_512.png)から表示／保存できます。)
画像アップロードされたら完了です。  
アイコンが設定されました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7bd0bf41aa5528a09d6235c73762ad98.png)

### アプリの確認
Workspaceを確認すると、Appに「KurocoNotification」が追加されていることが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b2625af80f869fc2a8d5568e485b7dfd.png)

### Slackチャンネルへアプリの追加
KurocoNotificationからの通知を受けるSlackチャンネルへAppを追加します。  

通知を受けるチャンネルで、チャンネル名をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4020f4f472054a42968be13015f3e600.png)

[インテグレーション]->[App]の[アプリを追加する]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/f5b33b0fe4615be2801c5221d611f647.png)

KurocoNotificationのアプリを追加します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/24bca7292c0ec11ab2a3ebc44a19fd71.png)


## Kurocoの設定
### KurocoとSlackの連携
Kuroco管理画面より[外部システム連携] -> [Slack]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/31dc2f829d4290e7f9819136d1de35da.png)

Slack連携設定画面が表示されるので、「有効にする」にチェックを入れます。「Bot User OAuth Token」には先ほどコピーしたBot User OAuth Tokenを入力し、[更新する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/524e32fc0461971f25916cd8cfe4312b.png)

以上で通知をSlackで送る準備が整いました。

### メッセージひな形の調整
[オペレーション]->[メッセージひな形]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/337cb4628fc2f37ee59dc4658cd307f2.png)

[問い合わせ着信通知メール(管理者宛)]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/74024a7550367129d8790615f1acdd10.png)

本文の冒頭に以下の記述を追加します。  

```smarty
{*Slack通知*}
{capture name=slack_text_body}
<!here>
「{$inquiryHeader.inquiry_name}」へのお問い合わせが届きました。
内容を確認してください
{$smarty.const.ROOT_MNG_URL}/management/inquiry/inquiry_reply_edit/?inquiry_bn_id={$inquiry_bn_id}
{/capture}
{slack_post_message channel='お問い合わせ通知' text=$smarty.capture.slack_text_body}

{*メール通知*}
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2a928b0f6e1bdbde721d3660f4c2f2a9.png)

設定ができたら[更新する]をクリックして変更を反映します。  

#### TIPS
- メール通知を止めてSlack通知のみにしたい場合は、[独自設定]から[メールの送信停止]に1をセットします。  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/b43255e192879ef128775e90a6fc855c.png)
- Slackでメンションを`@channel`にする場合は`<!channel>`と書きます。  
- Slackでメンションを個人宛にする場合は`<@SlackのメンバーID>`と書きます。

### フォーム基本設定
[キャンペーン]->[フォーム]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/90c0104f0063041211a36c7bef46c553.png)

フォームのタイトルをクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/00f449ac3c9e94e4b7f46bc9481ad3b1.png)

基本設定タブの配信先メールアドレスで、[通知する]にチェックを入れてメールアドレスとタイトルを入力します。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/49aed60abf6e495cb8a19f4ea9b2c97a.png)

## 動作確認
最後に動作確認をします。  
管理者宛の通知を有効にしたフォームへ回答の送信をすると、メールの通知に加えて、Slackチャンネルへの通知が行われます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/65afa4dd8c3c67fe40237c8e0081cb4d.png)

以上でお問い合わせの受信通知をSlackで送信できました。  

同様の方法で承認ワークフロー等の他の通知もSlack通知にできますのでお試しください。  

## 関連ドキュメント
- [KurocoとNuxt.jsで、フォーム画面を構築する](/ja/docs/tutorials/setting-up-inquiry-forms/)
- [お礼メールをカスタマイズできますか？](/ja/docs/faq/can-i-customize-my-thank-you-e-mail/)
- [メッセージひな形に利用できる変数一覧](/ja/docs/reference/mail-variables/)
