背景
Before
- WordPressとForm用プラグインで運用
- 問い合わせ用Googleグループ(メーリングリスト)で受ける
- Google Apps ScriptでSlackのChannelに通知&回覧
After
- (あんまり更新しないし)CMS運用辞めて静的HTML化
- フォームからの入力を直接SlackのChannelに通知&回覧
作り物リスト
- htmlとかcssとかjsとか画像とか一通り
- Formも取りあえずモック的に作っておく
- postしたときにSlackに送るphp
viewのformんとこ
ポイント
- postしたら
slackposter.phpを呼ぶゾ -
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登録してね
方法はググってね(はぁと)。ウソ、下記にも詳しく書いてあるよ。
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さんは来ていない。