突然ですが、皆さんは受付に置かれた電話は好きでしょうか。
僕は嫌いです。
就活中に受付に電話が置かれてあるのを見るとそこでごっそりやる気が削がれたものです。
「11時に面接予定の○○です。担当の××様は...」なんてやりたく無いです。
もっとスムーズに受付できたら会社にも訪問者にもメリットがありますよね。
そんな中いくつかの会社ではiPadで受付を済ますことができ、便利だなと感心しました。
IT企業ぽいし。
話は少し変わって今いる会社では受付は1階、僕がいる部署は2階、そして受付を管理する部署が3階にあります。
2階で何かを注文すると、宅配便の業者は1階で受付の内線電話をかけ3階に荷物を運びます。
その後届いた荷物を3階から2階へ自分たちで下ろします。
かったるい！！
自分たちで荷物を運ぶのもそうですが、2階で荷物を直接受け取ることができれば配送業社の方の苦労を減らすことができます。
これらの問題を解決する1歩を踏み出すべく、ボタンを押すとSlackに通知が行く受付アプリ風のものをサクッと作りました。
コード
メイン画面
See the Pen reception by yotubarail (@yotubarail) on CodePen.
CodePenで見やすいようにフォントサイズを変えてあります。
最初にメイン画面を作っていきましょう。
とりあえずHTMLのファイル名を『reception.html』とし、対応するCSSを『reception.css』とします。
ボタンが押されるとJavaScriptが動くようにbuttonタグに「onclick="slack()"」を設定します。
JavaScript
では、ボタンが押された時の動作を司るJavaScriptのコードを見ていきましょう。
let xmlhttp = new XMLHttpRequest(); let webhook_url = 'https://hooks.slack.com/services/******/******'; let message = '{"username": "受付" ,"text":"受付でボタンが押されました", "icon_emoji": ":office:"}'; xmlhttp.open('POST', webhook_url, false); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(message);
ここの部分がSlackにメッセージを送るための処理です。
WEBhook URLの取得
let webhook_url = 'https://hooks.slack.com/services/******/******';
の部分に自分のWebhook URLを取得して挿入します。
WEBhook URLの取得は以下のページから行います。
https://slack.com/services/new/incoming-webhook
通知を受け取りたいチャンネルを選択し、追加のボタンを押すだけで取得できます。
受け取るメッセージの設定
let message = '{"username": "受付" ,"text":"受付でボタンが押されました", "icon_emoji": ":office:"}';
の部分でSlack上で表示したいユーザーネームやメッセージなどを決めます。
アイコンの絵文字（icon_emoji）はこちらを参考に好きなものを選んでみてください。
Qiita/Github/Slack/Discord 絵文字一覧 - Qiita
ページの遷移
location.href='reception2.html';
ボタンが押されたら来訪者に向けたメッセージを表示したページに遷移させます。
受付完了後の画面
See the Pen RwNgXbM by yotubarail (@yotubarail) on CodePen.
特になんの工夫もないHTMLです。
CodePenでもページが遷移してしまうためコメントアウトしてありますが、
<meta http-equiv="refresh" content="5; url=reception.html">
の部分で5秒後に元のページに戻るようにしてあります。
iPhoneやiPadでページを開く
出来上がったページをサーバーにあげて、iPhoneやiPadで開いてみましょう。
headタグ内に
<meta name="apple-mobile-web-app-capable" content="yes">
を入れた時、ページを『ホーム画面に追加』してから開くとツールバーが表示されなくなります。
また今回はピンチインやピンチアウトをさせたくないので
<meta name="viewport" content="user-scalable=no">
を加えました。
終わりに
今後は来訪者記録ができるようにしたり、担当者を呼び出せるようにするなどアップデートをしていきたいところですね。
本当はSwiftを使ってアプリとして出したかった...
サンプルをGitHubにあげたので、置いておきます
以下のページを参考にしました
