初めて作ったアプリ。 アシアルの受付システムを構築したお話。

1. アシアル、
受付システム始めました。
Ryoma HOSHINO
new !

2. ことの発端
アシアル、オフィス移転。

3. ことの発端②
受付のシステム変えませんか？ 引っ越すし。
受付にタブレット置いてある感じよくないっすか？
よし。作ろう！
お、ちょうどいい人おるじゃん！！
<アシアル社内にて>
新オフィスは2フロアになるし、現行の仕組みだと手間だよな…
で、誰に作ってもらおうか。
(私)

4. 私
・Ryoma Hoshino
- 2016年 埼玉県大手SIer入社
- 1月末からアシアルへ
主にJavaでWebアプリケーション構築
モバイルアプリ開発の修行
↓ちょうどいい人
- すきなもの
名探偵コナン

5. Reception Systemが目指すこと
- エントランスに電話が一台
- 来客の属性を判別できない
○旧オフィスでの受付システム
打ち合わせ、セールス、宅配 etc
- 電話応対者に負担
- 無機質
- 顧客打ち合わせの場合でも、社員同士の共有が難しい

6. Reception Systemが目指すこと②
○新オフィスではこうしたい！！
- 電話応対者の負担を減らしたい！
- 顧客の来社をリアルタイムで把握したい
- 来社された人が、目当ての社員と直接コンタクトできたらいい
- 来社人数を把握したい
「お、やはりアシアルはひと味違うな！」
と、アピールしたい！！

7. そんなこんなで
作りました

8. システム構成
アプリケーション 社内サーバ
社内Twilioサーバ
Web APIサーバ
- Google Calendar API
- Slack API
- Twilio API
- 社員情報取得API
日報サーバ
社員情報を持つ
外部サービス
アシアルHP
(社員の写真を取得)
Twilioサーバとのブリッジ

9. アプリケーション概要
構成
Team Member
- デザイナー兼PM
- バックエンドエンジニア
- フロントエンドエンジニア(星野)

10. 主な機能
・打ち合わせ社員の表示：Google Calendarと連携
・通知：通話が開始されるとSlackで通知
・通話機能：TwilioによるIP電話 Pick Up !

11. 主な機能 ①打ち合わせ社員の表示
現在時刻±30分以内の打ち合わせ一覧を抽出
タイトル頭に「#」のついたもの (社内・外打ち合わせを識別)
Google Calendarから予定を抽出し、画面に表示
<表示条件>
タップ!!
お目当ての社員と直接コンタクトがとれます！

12. 主な機能 ①打ち合わせ社員の表示2
星野宛に受付から電話が届きます！！
来社人数を選択し、「発信」ボタンをタップ！

13. 主な機能 ②通知
SlackにBot形式で投稿されます！
①総合受付からの通話
②打ち合わせ社員選択からの通
話
(※予定のタイトルが表示されます！)
顧客来社の周知、打ち合わせの円滑化が可能になります！

14. 主な機能 ③通話機能
Twilioと連携させて、受付から通話ができます！
☆アシアルで作ったCordova Pluginを使用
①総合受付
アシアルへの直通電話
業者さん、飛び入りの方、友人etc
②打ち合わせ社員
受付システムに表示された社員に発信
(日報システム登録されている電話番号)

15. Monaca × Twilio を始めよう！
・Twilioに登録！
使用する電話番号の取得
Account SID, Oath Tokenの取得
紐付けを行うWeb ServerのURLを登録
・Web Serverの構築
Twilioサーバーとアプリケーションがやり取りするための環境を構築
する
・Monaca AppにTwilio PluginをAddする

16. ここまで準備できたら…
「こっちのもんよ」

17. JavaScriptでこう書く！

18. 主な機能 ②通話機能2
打ち合わせ社員に発信して応答がない場合…
出ない！？
転送機能を実装しました。
Twilioの”statusCallbackEvent”を使い、
通話先の状態を取得。
一定時間経過しても応答がない場合
自動で総合受付に転送します。
受付からの着信に応答ができなくても
Slackで通知が見られるので安心！

19. ＼導入しました／

20. 実際に使用している人たちの声
「受付システムのおかげで、私の負担が減りました！」
「やっぱり、来客した人と言葉を交わせるのがいいよね。」
「会議の最初に受付の話題が出て、アイスブレイクできました！」
「出すべきお茶の数が把握できてよろしい！」
「打ち合わせのメンバー全員に来客が周知できるのはありがたい」
「とにかく嬉しい！」
ってなってたら嬉しいです。
by 星野

21. 思ったこと
○Monaca × Twilio
・相性の良さ
自作アプリに自由に通話機能を追加できる！！
・”アプリ内通話”という大きな魅力
LINE,Skype etc… 通話アプリは数多あれど、アプリに通話
機能を組み込めるのはそうはいない！
・え、こんなに音質いいの！
携帯電話での通話となんら遜色ない会話ができます！
・導入の手軽さ
ドキュメントが明快
お試し期間とか、段違いで充実
= ∞

22. 思ったこと②
○Monaca × Twilio のこれから
・Monacaを使ったTwilioのナレッジが充分ではない
開発にちょっと苦労しました。。
・「待ち受け」が少し弱い
「Push通知を活用した通話の待ち受けができれば、もっと便利にで
きます！」 by Cordova Plugin for Twilioの開発者
・Monaca製通話アプリやりたい！
通話機能を持ったMonacaアプリの需要、たくさんあると思
います！
MUGのみなさま、
Monacaアプリに「通話機能」入れてみませんか？