<p>GASからSlackでメンションつきメッセージを送りたい場合に<code>SlackのユーザーID</code>と<code>Incoming Webhooks</code>を使って送るやり方をよくみかけますが、筆者はこのやり方を使うことは最近はほとんどないです。</p>
<p>じゃあどうやるのかというかいうとSlackのワークフロービルダー（Webhook）を使います。</p>
<p>「メールアドレスを収集してGoogleフォームの回答者にSlackでメッセージを送りたい！」なんてのがよくあるケースなのでこれを実装していきます。</p>
<h1 id="%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" aria-hidden="true"></a> アーキテクチャ</h1>
<p>アーキテクチャはこんな感じです。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/fc3358e5a0056f255eb42e56.jpg" alt loading="lazy" class="md-img"></p>
<h1 id="%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC%E3%81%A7webhook%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC%E3%81%A7webhook%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> ワークフロービルダーでWebhookを作成</h1>
<h2 id="webhook%E3%82%92%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#webhook%E3%82%92%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> Webhookを選択</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/c1c34c15019222c5dc532140.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E5%A4%89%E6%95%B0%E3%82%92%E8%BF%BD%E5%8A%A0">
<a class="header-anchor-link" href="#%E5%A4%89%E6%95%B0%E3%82%92%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> 変数を追加</h2>
<p>ここでは回答日時の<code>timestamp</code>と質問内容の<code>query</code>をそれぞれ<code>テキスト</code>で追加します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/da9a88c59f79fe9449a2b8c3.png" alt loading="lazy" class="md-img"></p>
<p>そして一番重要なのが<code>email</code>でデータタイプを<code>Slackユーザーのメールアドレス</code>にすることです。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/dacc8bdceab6169a50ea65e8.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E9%80%81%E4%BF%A1%E7%94%A8%E3%81%AE%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%82%92%E8%BF%BD%E5%8A%A0">
<a class="header-anchor-link" href="#%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E9%80%81%E4%BF%A1%E7%94%A8%E3%81%AE%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%82%92%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> メッセージ送信用のステップを追加</h2>
<p><img src="https://storage.googleapis.com/zenn-user-upload/c7f278d652d54b9b1d734d8d.png" alt loading="lazy" class="md-img"></p>
<h3 id="%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E4%BF%A1%E3%82%92%E9%81%B8%E6%8A%9E">
<a class="header-anchor-link" href="#%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E4%BF%A1%E3%82%92%E9%81%B8%E6%8A%9E" aria-hidden="true"></a> メッセージを送信を選択</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b176f40080077c8672c35d63.png" alt loading="lazy" class="md-img"></p>
<h3 id="%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> メッセージを作成</h3>
<p>メッセージの送信先とメッセージのテキストを変数を使って作成します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a6ab53aae61cf21677275959.png" alt loading="lazy" class="md-img"></p>
<p>最終的なワークフローはこんな感じです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/dee57efe1f20c00b5fa1d40f.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E5%85%AC%E9%96%8B" aria-hidden="true"></a> ワークフローを公開</h2>
<p>このときWebhookのURLができるのでメモしておきます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1caf0f6e971c0d0526feb2f5.png" alt loading="lazy" class="md-img"></p>
<h1 id="gas%E3%82%92%E6%9B%B8%E3%81%8F">
<a class="header-anchor-link" href="#gas%E3%82%92%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> GASを書く</h1>
<p>urlを先程作ったWebhookのURLにします。<br>
※ WebhookのURLそのまま書いてますが、再生成済みなのでご安心を</p>
<div class="code-block-container"><pre><code>function onFormSubmit(e) {
  const params = {
    timestamp: e.namedValues['タイムスタンプ'][0],
    email: e.namedValues['メールアドレス'][0],
    query: e.namedValues['質問内容'][0],
  };

  emitSlackWorkflow(params);
}

function emitSlackWorkflow(params) {
  const url = 'https://hooks.slack.com/workflows/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';
  const options = {
    method: 'POST',
    headers: { 'Content-type': 'application/json' },
    payload: JSON.stringify(params),
  };
  UrlFetchApp.fetch(url, options);
}
</code></pre></div><p>スプレッドシートのフォーム送信時をトリガーに設定します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c99528cddca18a76e9b31329.png" alt loading="lazy" class="md-img"></p>
<h1 id="%E5%AE%9F%E8%A1%8C%EF%BC%81">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A1%8C%EF%BC%81" aria-hidden="true"></a> 実行！</h1>
<p>では実行してみましょう。</p>
<p>フォームを入力して…送信！<br>
※ Google Workspaceのフォームならメールアドレスの入力は省略できます（@gmail.comを使っているので手動で入力している）<br>
<img src="https://storage.googleapis.com/zenn-user-upload/28cae8a460055a344203a600.png" alt loading="lazy" class="md-img"></p>
<p>どん！<br>
<img src="https://storage.googleapis.com/zenn-user-upload/65b867dd409a8904fd24e957.png" alt loading="lazy" class="md-img"></p>
<p>Slackbot からメッセージが届きました！</p>
<p>もちろんSlackbotからではなく特定のチャンネルへの投稿などもSlack Workflowのメッセージの送信先を変えるだけでOKです。</p>
<p>この方式の最大のメリットはメッセージのフォーマットをコードから切り離しているところです。あくまで受け取るのはデータだけです。<br>
そのためコードを直さずともメッセージの通知先や内容はワークフロービルダーに寄せているので変更が容易になります。</p>
<p>デメリットはフォームの内容が増えた場合になおす箇所が増えるというところでしょうか。</p>
<p>SlackIDつかってごにょごにょしていた人はぜひ試してみてください。</p>


GASからSlackIDではなくメールアドレスを使ってメンションを送る方法

メッセージ送信用のステップを追加

ワークフロービルダーでWebhookを作成

Discussion