Webの技術で会社の受付システムをさくっと作ってみた【Google Chat連携】

もきち もきち 2020.01.08

こんにちは。もきちです。

突然ですが、受付って大事だなってよく思います。

笑顔で丁寧な接客をしてくれる方が受付にいてくれれば、中身がどんなに真っ黒でもめちゃめちゃ良い会社に見えますよね!

 

でも、小さい会社ではそんなこと真似できません。

受付に回すだけの人的リソースなんてないんです!

 

というわけで、Webの技術で会社の受付システムをさくっと作ったのでご紹介します。

 

 

なんで受付システムを作ったのか

会社が今の事務所に移転してから早1年。

最初は入り口から執務スペースが丸見えでした。

 

多少距離があるとはいえ、流石にドアを開けたら仕事をしているPC画面が見えるのは良くない!

ということで、今ではパーティションとして大きめの棚を並べています。

 

しかし、困ったことが起きました。

 

たまにお客さんが入ってきても気づかないことがあります…。

 

そんなときは、「すみませーん」って声をかけてくれているんですが、お客様に大きな声で呼んでもらうのも申し訳ない…。

 

 

お客様にそんなことはさせられない!

 

お、丁度良いところに使われてないタブレット端末がある!

 

 

というわけで、会社の受付システムを作ることにしました。

 

実際に作ってみた

内容としては、HTMLとCSSとJavaScriptで作った、ただのWebページです。

その他、下記JSライブラリを使用しました。

cube.js
ページ上に四角いキューブがぷかぷかと浮かびます。
http://nejimaki-act.com/lab/cube/
jQuery Ripples
波紋模様の表示が簡単に実現できます。
https://github.com/sirxemic/jquery.ripples/

cube.jsを使って、待機画面でキューブをぷかぷかと浮かぶようにしました。おしゃれ!

 

jQuery Ripplesは、画面をタッチしたときにッ!波紋が広がるように使わせてもらったッ!

 

 

実際に作ったものがこちら!

 

うん、シンプル!

 

やったことは、

1.画面がタッチされたら画面を切り替えて

2.選ばれたボタンによってGoogle Chatで通知を送るだけ!

 

 

こんな感じでiPhoneに通知が届きました!

 

 

あとは、入口にタブレットを置いて…

 

 

完成!!

 

 

後はお客さんが来るのを待つだけ!楽しみー!

 

1人目「こんにちはー」

 

2人目「失礼しまーす」

 

3人目「郵便でーす。」

 

4人目「宅配でーす。」

 

 

……

 

 

結論:声で呼んだ方が早い

 

スポンサーリンク

POPULAR

もきち

書いた人

もきち

Director / Creator