PHPでSlackに「クリームたいやき食べたよ」とメッセージ送るアプリつくった
2017/01/31
こんにちは、okutani(@okutani_t)です。先日、前の会社の同期4人で飲んでました。そう、僕ら大好き鳥貴族!
ワイワイガヤガヤやってる中、こんな会話に。






というわけで、同期がこれ以上クリームたいやきを食べ過ぎないように、クリームたいやきを食べたらSlackに報告する『クリームたいやきチェッカー』アプリを作りました。
酔った勢いで帰ってそのまますぐ作ったので、けっこうてきとうです。というかシンプルすぎて、これで記事書いていいのかってレベルです。
まったくやり方がわからない状態で調べてみると、Slack Web APIってのを使えばめっちゃかんたんにPHPからSlackにメッセージが送れるとのこと。
なんだかんだ作り始めて1時間で公開できました。めっちゃかんたんです。
というわけで、僭越ながら作り方を載せておきます。では本題に入りましょうー。
スポンサーリンク
Slack API KEYを取得する
まずはSlack API KEYを取得します。ここはけっこう取得方法がわかりにくかったのでスクショ多め。
すこし下にスクロールして「Generate test tokens」をクリック。
「Create token」を選択。
Slackで使っているアカウントのパスワードを入力。
「Confirm」をクリックするとtokenが表示されます。メモしておきましょう。
tokenで接続確認をおこなう
このtokenを使って接続確認をしておきます。別にやらなくてもいいですが、まあ一応。
次のコマンドをターミナルで実行。
$ curl -XPOST "https://slack.com/api/auth.test?token=&pretty=1"
このように、okのパラメーターがtrueなら通信成功です。
『クリームたいやきチェッカーアプリ』を作る
index.phpに次を記述。
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$slackApiKey = 'ここにslackのAPI KEY';
$text = 'すまん...... 食っちまった...... by◯◯';
$text = urlencode($text);
$channel = '%23cream-taiyaki';
$url = "https://slack.com/api/chat.postMessage?token=${slackApiKey}&channel=${channel}&text=${text}&as_user=false";
file_get_contents($url);
echo <<<EOM
<script type="text/javascript">
alert("slackに送信したよー");
</script>
EOM;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="クリームたいやきを食べたか監視してslackに送信するアプリ。" />
<title>CREAM TAIYAKI</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<style>
h1,
p {
text-align: center;
}
p {
font-size: 1.4em;
}
.mb30 {
margin-bottom: 30px;
}
#cream_taiyaki {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: ease .3s;
}
#cream_taiyaki:hover {
opacity: .8;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="my_form" method="post" action="">
<div class="container">
<h1>クリームたいやきチェッカー!</h1>
<p>click me!</p>
<p class="mb30">↓</p>
<img id="cream_taiyaki" class="wow bounce mb30 img-responsive center-block img-circle infinite" data-wow-duration="2.0s" src="cream-taiyaki.jpg" alt="クリームたいやき">
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
$(function(){
// wow.js
new WOW({
mobile: false
}).init();
// cream taiyaki click
$("#cream_taiyaki").on("click", function(){
if (confirm("本当に食べた?slackに送信するよ?")) {
$("#my_form").submit();
}
});
});
</script>
</body>
</html>
『クリームたいやきを食べたよ』ボタンをクリックするとSlackにメッセージ投げるだけのアプリです。
$slackApiKeyにAPI KEY入れてください。あとのスタイルはてきとうです。なんかanimate.cssとwow.jsで無駄に動き出してますけど、気にしないでください。
こんな感じになりました。
SlackにPHPを使ってメッセージ投げる方法は「PHPでSlackに通知を送る – Qiita」あたりを参考にしました。
とりあえず適当に作っただけなので、エラーチェックとかなんもしてません。ちゃんとやりたかったらtryとか使えばいいかと思います。
僕のGitHub(php-code/cream-taiyaki at master · okutani-t/php-code)にも上げておいたので参考にどうぞ。
これで同期の健康が良くなればokutaniは嬉しいです……!
問題なのは、誰でも偽造して送れちゃうところですね。Formにinputタグ入れてプルダウンとかラジオボタンとか入れれば、誰が送ったとか処理できるかと、いやもう飽きたからやらないけど。
おまけ: ちゃんとしたAPI KEYが送られてきた?
なんかこんなメールがきました。新しいAPI KEYにしろってことですかね……
これをやらなくても最初に取得したtest tokenで使えてるので、代えないといけないのかは謎です。分かったらまた追記します。
SlackとPHPの連携の際の参考にしてください。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。
「Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
PC用AdSense
PC用AdSense
こちらもどうぞ
- PREV
- ブログはじめて1年経ちました
- NEXT
- CentOS7に最新のGitを導入する方法