社用WebのフォームをSlackに放り込むアレ

背景

Before

1. WordPressとForm用プラグインで運用
2. 問い合わせ用Googleグループ(メーリングリスト)で受ける
3. Google Apps ScriptでSlackのChannelに通知&回覧

After

1. (あんまり更新しないし)CMS運用辞めて静的HTML化
2. フォームからの入力を直接SlackのChannelに通知&回覧

作り物リスト

• htmlとかcssとかjsとか画像とか一通り
  • Formも取りあえずモック的に作っておく
• postしたときにSlackに送るphp

viewのformんとこ

ポイント

1. postしたらslackposter.phpを呼ぶゾ
2. name="url"っていうフィールドをダミーで作ってdisplay:none;してるゾ(見えない)→理由はコチラ

index.html

:
<form action="slackposter.php" method="post" class="form">
	<p class="form__caption">お気軽にお問い合わせください。<br/>* 必須項目</p>
	<div class="form__input row">
		<div class="col-md-4">
			<input type="text" name="name" placeholder="お名前 *" class="input">
		</div>
		<div class="col-md-4">
			<input type="text" name="email" placeholder="Email *" class="input">
		</div>
		<div class="col-md-4">
			<input type="text" name="title" placeholder="タイトル *" class="input">
		</div>
	</div>
	<div class="form__textarea">
		<textarea name="body" placeholder="本文 *" class="textarea"></textarea>
	</div>
	<div class="form__btn">
		<p style="display:none;"><input type="text" name="url" /></p>
		<input type="submit" value="送信" class="btn btn--action">
	</div>
</form>
:

SlackのIncoming Webhook登録してね

方法はググってね(はぁと)。ウソ、下記にも詳しく書いてあるよ。

• Slack APIを使ってプッシュ通知を受け取ろう | 株式会社バニーホップ

slackposter.php

index.htmlと同じ階層に設置してね。

slackposter.php

<?php

$incomingUrl = 'https://hooks.slack.com/services/********************************'; // 発行されたURL
$body = 'Name: '.mb_convert_encoding($_POST['name'], 'UTF-8', 'auto').PHP_EOL.'Email: '.mb_convert_encoding($_POST['email'], 'UTF-8', 'auto').PHP_EOL.'Title: '.mb_convert_encoding($_POST['title'], 'UTF-8', 'auto').PHP_EOL.'Message: '.mb_convert_encoding($_POST['body'], 'UTF-8', 'auto');
$payload = array(
	'text' => $body, // メッセージ（必須）
	'username' => '**********', // 投稿者（サービス）名
	'channel' => '#*****', // Channel
);
$result = slackIncomingWebhook($incomingUrl, $payload);
function slackIncomingWebhook($url, $payload)
{
	$headers = array();
	$params = array('payload' => json_encode($payload));
	$result = postRequest($url, $params, $headers);
	return $result;
}
function postRequest($url, $params, $headers = array())
{
	// validations
	if(isset($_POST['url']) && $_POST['url'] == '' && $_POST['name'] != '' && $_POST['email'] != '' && $_POST['title'] != '' && $_POST['body'] != '' && preg_match('/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/iD', $_POST['email'])){
	    $ch = curl_init($url);
	    curl_setopt($ch, CURLOPT_POST, true);
	    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
	    curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
	//    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 環境によってSSLで問題が起きる場合はコメントを解除してください。
	    $result = curl_exec($ch);
	    $error = curl_error($ch);
	    curl_close($ch);
	    if ($error) {
	        throw new \Exception($error);
	    }
	//    return $result;
		header('Location: {成功した時のリダイレクトURL}', true, 301);
		exit();
	}else{
		if(!preg_match('/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/iD', $_POST['email'])){
			header('Location: {メールアドレスが不正だった場合の時のリダイレクトURL}', true, 301);
			exit();
		}
		header('Location: {なんらかの理由で失敗した時のリダイレクトURL}', true, 301);
		exit();
	}
}

?>

テストするとこんな感じにSlackに来るといいね

来なかったらググってね。

謎のdisplay:none;のname="url"なフィールドについて

Spammerなスクリプトさんがお見えになった際にname="url"ってフィールドがあると自動的にurlを入力してくるのでこのフィールドがblankじゃなかったら実行しないようにしてみた。今のところSpammerさんは来ていない。

参考にしたサイト

• Slack APIを使ってプッシュ通知を受け取ろう | 株式会社バニーホップ