こんにちは。トップゲートという会社に勤めております、古都ことです。
このたび弊社の大阪事業所が移転しまして、心機一転、新事業所での勤務が始まりました。そして場所が変わればやるべきことも変わり、新たな課題も出てきます。そんな中で、新たな事業所の改善について少し携われる機会をいただけたので、ここで軽く紹介したいと思います。
(2020/01/29 追記) デザイナさんに再デザインしていただいた受付アプリの動画を記事最下部に掲載しました
「受付タブレット」プロジェクト
社会人の方ならよくご存知だと思いますが、会社さんって受付に内線が置いてあって、訪問時にはそれで担当の方を呼び出してもらう、というフローがたぶん一般的になります。また小さなところであれば、ベルが置いてあってそれを鳴らすというスタイルもありますね。
弊社の移転前の大阪事業所では小さな部屋でしたので、来社時にはドアをノックしていただいていました。しかし新事業所ではそういうわけにもいきません。事業所の大きさは約3倍〜4倍になり、ドアをノックしても聞こえません。
ここで内線を置くという手もありますが、弊社はIT企業。自分たちの技術でなんとかしたい。そう思いません？そして生まれたのが「受付タブレット」プロジェクトです。このプロジェクトは社内のエンジニアが自由に受付アプリを作っても良く、そこに私も（勝手に）参加させていただきました。
普通の仕事の他に、こういった自由気ままに参加できるプロジェクトもあるので仕事の息抜きには最適です。みんなで寄ってたかって実用的な面白いものを作るというのは、実に楽しいです。
実機動画
実際にiPadで動作させている動画が以下になります：
大阪事業所の受付タブレットアプリ、こんな感じです。 pic.twitter.com/BVIjSiIov1
— 古都こと (@kfurumiya) January 9, 2020
（※実際に設置しているのはiPadですが、ここではiPadProを使用して動画撮影しています）
アプリの機能
このアプリの主な機能は以下の2つです：
- Slackへの通知
- obnizと連携しブザーを鳴らす
Slackへの通知がメインの機能となります。来社された方がいたらSlackで担当者にメンションを飛ばし通知します。以下のようなイメージです。
このSlack連携部分に関しては別のエンジニアの方が主導となり作成したもので、私はAPIを叩いているだけです。
もうひとつの機能がobnizを用いたブザー機能です。obnizはクラウド経由で双方向通信できるIoTデバイスで、いろいろなセンサを簡単に動かすことができます。Slackでのメンションのみではなかなか気付きにくいということもあり、obnizを用いて室内でブザーを鳴らすことにしました。単純な音を鳴らしているだけですが、通知の見落としを防ぐことができています。
技術要素
このアプリでは以下の技術を採用しています：
- React
- TypeScript
- <canvas>
- Web Speech API
見ての通り、ウェブ技術で作られています。残念ながらPWAではありませんが、ネイティブに近い体験を提供できているのではないかなと思っています。PWAを不採用とした理由はiPadOSのPWA対応が十分に成熟していないためです。
フレームワークはReactです。Reactのシンプルさと強力さがこの規模のアプリに非常にマッチしており、簡単に作ることができました。
言語はTypeScriptです。現代において生のJavaScriptという選択肢はなかなか厳しいところがあるので、TSを採用しています。
背景はcanvasで生成しています。速度を考えるとWebGLの方が良いかもしれませんが、実装の簡単さを考慮して普通の2DContextを使いました。動き回る点と点が一定距離内に入ると線で繋がるという、よくあるアニメーションです。
音声はWeb Speech APIのSpeechSynthesis（音声合成）を用いています。これによりテキストデータのみで発話することができ、修正が容易になります。
気をつけた点
このアプリを作成するときに一番考えたのは、「迷わせない」ということでした。会社を訪れるお客さんというのは、なにもIT関係の人ばかりではありません。エンジニア基準でUIを作ってしまうと、操作に戸惑ってしまう可能性が出てきます。
そこで多くの人が触れたことがあるはずのATMや券売機といった機器のUIを参考にしました。大きなボタンがいくつか並び、それをタッチして選ぶ、という形式です。
また、当初はいきなり用件の選択肢を表示していたのですが、最初に一度ボタンをタップする画面遷移に変更しました。これにより「この白い四角はボタンである」「触れると反応する」ということを理解してから用件の選択に入れるようになっています。
ボタンにはアイコンも付けました。視覚情報が入ることにより、脳が処理する時間をできるだけ小さくできることを期待しています。アイコンは自作なので少々不格好ですが、なんとなくで雰囲気はわかると思います。
とにかく「初見でも理解できるもの」を目指して作りました。会社の受付というのはそう何度も利用するものではありませんし、1度目からスムーズに利用できるのが理想です。
1週間運用してみて
このアプリを実際に1週間設置してみましたが、ちゃんと機能し、きちんと受付の役割を果たせています！初見の方でも迷いなく使用していただけているようです。会社の受付という、場合によっては非常に重要となる要素を担当させていただいて、ドキドキしつつも一定の役割は果たせたようで安心しています。
ユーザにとっての使い心地というのも大切ですが、「事務所内の人がきちんと来客に気づくことができるか」というのも重要なポイントでした。どんなによくできた受付アプリでも、社内の人間が気付けなければ意味がありません。obnizでブザーを鳴らすという選択肢を取ったのは良かったと思います。
いろんな方に使用していただいて、良かった点や今後の課題などがいくつか見えてきたので、これからどんどん改善していきたいと思います。
さいごに
会社の受付のような、重要であり難しくある部分に自由に携われるというのは、非常に光栄です。息抜きにもなりますし、会社を訪れてくれる極めて大切な方を適切におもてなしする責務があると考えると、緊張感とやりがいがグッと上がってきます。
今回は根本となるAPIは別のエンジニアさんに作ってもらったので、私はただ画面を作っただけになってしまうのですが、貴重な経験ができたと思います。
もし弊社の大阪事業所を訪れることがあれば、「これが例の受付アプリか」と触ってみてください。ご来訪、お待ちしております。
(2020/01/29 追記) 新デザイン
その後、弊社デザイナさんの手を借りて綺麗な新デザインへと生まれ変わりました！大阪事業所と神田事業所で採用されています。
僕の作った弊社の受付タブレットアプリが、デザイナさんの手によって綺麗に生まれ変わりました！現在は、大阪オフィス/神田オフィスで採用されていますので、御来社の機会がありましたらぜひ触れてみてください pic.twitter.com/RQS5GNZlSQ
— 古都こと (@kfurumiya) January 29, 2020