社用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;```してるゾ(見えない)→[理由はコチラ](http://qiita.com/tokifujp/items/f7ef227df364f340bc67#%E8%AC%8E%E3%81%AEdisplaynone%E3%81%AEnameurl%E3%81%AA%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)

```html: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を使ってプッシュ通知を受け取ろう | 株式会社バニーホップ](http://www.bunnyhop.jp/lab-20141020/)


### slackposter.php

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

```php: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に来るといいね

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

![image](https://qiita-image-store.s3.amazonaws.com/0/38292/3f29eb90-bc31-3c6b-b46c-5185bd0de67a.png)


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

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

### 参考にしたサイト

- [Slack APIを使ってプッシュ通知を受け取ろう | 株式会社バニーホップ](http://www.bunnyhop.jp/lab-20141020/)