事業部を代表して、20代のSE/PGメンバー3名でTwilioハッカソン2022に参加してきました！
社外イベントに参加するのは初めてでしたので、そこで得られた学び・知見を含めどういったことをやってきたのか紹介したいと思います！

イベント概要

Twilioを使いながら、日常のコミュニケーションを少しリッチに、そして便利にしていくことを目的としたオフラインで実施される2日間のハッカソンになります。

テクニカルサポートとして

  • LINE（LINE Messaging API）
  • kintone
  • obniz

の3社も加わり、Twilioをベースとして様々なマネージドサービスを駆使して「日常のコミュニケーションを少しリッチに」を目標としたアプリケーションの開発を行いました。

当日の流れ（ざっくり）

  • サポート技術インプット（Twilio / LINE / obniz / kintone）
  • アイデア発散＆チームアップ
  • ハッカソンタイム
  • 成果発表

サービス概要

はじめに

先に断っておきますが、2日間という限られた期間で開発するにあたり、作業量的にどうしても足りないのでクラウドの利用はしておりません。
本当はGCにアップしたかったのですが、、悪しからず。。。
また、obnizのGPSデバイスに関してもイベントでのご用意がなかったため利用しておりません。
実装に組み込めなかった部分は構成図でバッテン付けてますmm

ストーリー

お仕事中、車で移動される職種の方も多くいらっしゃるかと思います。
運転に慣れていればナビを使わないというのはよくあることですが
そうなると渋滞を予測するのが難しかったり、予想外の場所で渋滞に巻き込まれたり、、など
仕事に支障が出る可能性も考えられます。
そういったとき、リアルタイムで電話通知があったらナビ使わない人でも便利だよね？ってことで
今回紹介するサービスの検討・開発を行いました。

システム構成

理想

現実

処理フロー

  1. ユーザとのI/FはLINE Messaging APIでチャットボットを活用
  2. 取得したい渋滞データ区間（路線・上り下り・地点）と通知する電話番号をLINEチャットボットへ送信
  3. Messaging APIを介して登録データをSpreadsheetへ一次保存、App ScriptにてkintoneのDBへ登録
  4. obnizのGPSデバイスと対象ユーザの紐付け（空想）
  5. GPSデバイスから毎秒位置情報を取得し、kintoneのDBへ登録（空想）
  6. 定期バッチにてGoogle Maps API経由で道路の混雑状況を取得・登録（空想）
  7. GPSデバイスから受け取った位置情報と登録地点・渋滞情報を照らし合わせ、渋滞エリアに近づいていたらTwilio経由の自動音声にて通知

サービスでできること

LINEのチャットボットを介して、渋滞を知らせて欲しいエリアを登録します。

※サービス化するならここらへんはLINEのリッチメニューなど使ってキレイにしたいですね！

対象のエリアにGPS（空想）のデバイスが近づいてきて、そこが渋滞している場合
Twilioの自動音声メッセージサービスを経由してユーザへ通知を行います。

技術紹介

Twilioの活用

運転中、手を離さずに混雑情報をお知らせするためにTwilioを利用しています！
ユーザのスマートフォンにTwilioから電話をかけ、自動音声で渋滞情報をお知らせします。
具体的には音声案内は以下のようになります。

現在、東名高速道路下り、横浜町田インターチェンジ付近から渋滞が発生しています。渋滞は海老名ジャンクションまで続くと見られます。

ユーザにはobnizのGPSデバイスを車載してもらいます。
デバイスからは定期的に位置情報が送信されます。ユーザの現在地を知ることができるほか、直近の位置情報の推移もわかるのでユーザの進行方向もわかります。この位置情報はkintoneに保存します。
このサービスのキモ？となる、Twilioを使用してユーザへの架電はGCのCloud Functionsで動かすバッチ処理によって実現します。（ただし今回は空想の世界…ローカルで実行します）
kintone上の別テーブルには、どこで渋滞が発生しているかの情報がストックされているので、そのデータと照らし合わせて、

  • ユーザの進行方向の先に渋滞があるかどうか判定
  • 渋滞がある場合、それがどこまで続いているかをkintone内で調べる
  • その情報をTwilioを使ってユーザに電話でお知らせ

という処理を書いてCloud Functionsのバッチに行わせます。
Twilioを利用したユーザへの電話は、公開されているAPIにリクエストするだけでできるのでとても簡単です。 また日本語にも対応しているため日本語の文章を読ませることもできます。
無事電話をかけることができたら、あとはユーザに電話に出てもらうだけです！

LINE Messaging APIの活用

利用者が渋滞情報を取得したいエリアの情報をLINEで収集するために、LINE Messaging APIをGASに実装しました。
LINE Botの流れとしては、

  1. 登録する路線名、方向、始点の地点名、終点の地点名、電話番号を順に聞く
  2. LINEからユーザのレスポンスをGASで受け取りkintone DBのユーザ情報テーブルにinsert

路線名、始点、終点に関しては、それぞれkintone DBの路線マスタ、地点マスタを参照しIDを取得してユーザ情報のテーブルにinsertしました。
実装方法としてはまず、LINE Developersにてプロバイダー、チャンネルを作成しLINE Official Account Managerでプロフィールや挨拶メッセージなどの設定をします。こちらはコンソールのUIで作成できるためとても簡単に作成できます。

そしてGASでスプレッドシートを連携したプロジェクトを立ち上げ、Webhook URLをLINE Messaging APIに連携します。ここでメッセージを送るコードを書くことで好きなようにLINEにメッセージを送れるようになります！
GAS上では状態やデータを保持しながら、メッセージの返信を受け取り次のメッセージを送るという処理ができず、今回はスプレッドシートをキャッシュのように使用しました。
スプレッドシートに状態を保持することによって一連のデータをまとめてkintoneに送ることができました。

メッセージ送信受信からDB連携まで全てブラウザ上で完結するので非常にハッカソン向けの構成でできたと思います！
時間をかければLINEのメッセージを選択式にしたり、削除や編集などに機能を追加する凝りポイントはたくさんありそうでした！

Google Maps APIの活用

GoogleのMaps APIを利用して取得します。（想定）
イベント期間中にここを実装するのはハードルが高い＆GC利用料もかかったりするので今回はパスしました。
が、個人利用で無料枠があったので少しだけデータを取って、kintoneのDBへ登録しました。
APIはGoogleのDistance Matrix APIというのを利用しました。
まずは下記画像の通り、チェックポイントとなる部分の緯度経度をまとめます。

まとめた緯度経度から、各ポイントの間を移動する際にかかる移動時間をAPIが求めてくれます。
（Google Mapのアプリで移動経路求めるときに使うようなやつ）
得られた結果を元に時速換算し、一定の速度を下回ったら渋滞している、という判定にします。
可視化すると以下のような雰囲気です（Google Mapの移動ルートで渋滞しているときにそっくりですね！）

  • 東名高速：上り方面
  • 東名高速：下り方面

kintoneにはこんな感じでデータが入ります。（今回は一定量のデータを取得してCSV化しインポートしました）

おわりに

いかがでしたでしょうか？
メンバー全員、ハッカソンへの参加は初めてだったので緊張しつつも
脳をフル回転させてひたすら開発に打ち込むのは大変でしたが快感でもありました！
各々が力を出し尽くしたおかげでなんとか成果となるものは残せたのではないでしょうか。
各種サービスは本イベントのテクニカルサポートにもなっておりましたので
一通りのサービスに触れて開発を進められたのは、ナレッジを蓄えるのにも良かったと思います。
とはいえ全員知らない技術ばかりで大混乱でした。。。力をつけてまた挑戦したいです！