12⁄16 に東京の CARTA オフィスで開催された技育 CMAP キャラバンアドバンス に出場し、DeNA 賞をいただきました。
技育 CMAP とは
技育 CAMP は、人気 IT 企業などが参加する就活支援サービス「サポーターズ」のイベントで、1 週間で集中して成果物を開発し、エンジニアとしてレベルアップを目指すイベントです。のイベントの一環であるアドバンスでは、これまでのマンスリーハッカソンやキャラバンハッカソンで賞を貰ったチームだけが参加できる招待制のイベントです。それぞれのチームが技育 CAMP にて発表したプロダクトをアップデートして持ち寄ります。
開発した作品
チーム「寝坊マスターズ」
アプリ：「簡単行列整理くん」
今年の秋に大学祭で模擬店を運営した時に感じた、人の行列を DX 化したいという思いから生まれたプロダクトです。
事業者は手間なく導入、運用ができ、利用者の体験も損なわないという考えのもとに、自分達以外のサービスを運用する人にも使ってもらえるプラットフォームとして開発しました。
発表資料
サービスの概要
このサービスを利用する事業者がサービスにログインするとその事業者専用の QR コード が発行されます。その QR コードをお店に掲示します。
お客さんは並ぶと同時に QR コードを読み取ります。読み取った順番に待ち順に登録され、事業者が呼び出しボタンを押すと、順番に次のお客さんの番号がアプリに表示されます。
サービスの概要図
この QR コードを読み取り並び順に登録、事業者が呼び出しするのがプラットフォームの機能です。
より詳しいサービスの説明と特徴的なシステムについては以前の名古屋キャラバンの記録、技育 CMAP キャラバン名古屋で最優秀賞をいただきました - kanakanhoをご覧ください。
アップデートところ
今回はアップデートとして iPhone の PWA 化とそれに伴ったバックエンドの再構築、お客さんの来客状況の可視化を行いました。
前回のキャラバンでは Android のみ web プッシュ通知が対応していました。より一般的に使ってもらえるサービスとするため、web プッシュ通知を iPhone に対応させました。
iPhone で web プッシュ通知を受け取るためには PWA が必須となっています。また FCM を使って任意のユーザーに対して、プッシュ通知を送るためにはデバイストークンの発行が必要です。デバイストークンは PWA 化したのちに取得しなければならないのですが、iPhone で PWA 化するとそれまで使っていたブラウザのローカルストレージとは別に新規でローカルストレージが生成されるため、QR コードから取得したお店の ID が継承されません。しかしあるお店に並んでいる特定のお客さんに対して通知を送るためには、デバイストークンとお店の ID が必要になります。そしてお店の ID を PWA 化した後も継承するため、manifest.jsonを動的に生成して PWA を動的に生成しています。
開発したところ 1
動的に PWA を生成する部分はチームのメンバーが担当していたので、PWA 化した後にデバイストークンを取得し、お店の情報と合わせてサーバーに送信、並び順に登録する部分の実装を行なっていました。
苦労したところ
iPhone で特定条件の特定ユーザーに対してプッシュ通知を送る方法の模索
前回キャラバンの開発が始まってすぐの段階から web プッシュ通知の仕組みと仕様を理解するためにテストアプリを作り、動作の検証を行なっていました。特定ユーザーの対しての通知は FCM が対応していたため、簡単に実装できました。また Android ではそもそもブラウザで web プッシュ通知を受信できるため苦労なく特定条件下の特定ユーザーの識別ができたのですが、iPhone ではそれが全くうまくいっていませんでした。
検証を進めていく中でブラウザにあるローカルストレージが PWA に継承されていないと分かりました。また PWA の中でカメラを起動できないので QR コードを読み取れません。その中で PWA を動的に生成する方法を見つけたので実装の目処を立てられました。
iPhone のプッシュ通知の実装
FCM では公式が firebase のデバイストークンの取得とパーミッションの許可を非同期で行う処理を実装していたので、その通りに実装していたのですが、パーミッションの許可が発火せず、不定のタイミングでたまに起こるみたいな状態でした。iPhone では通知の許可をボタンを押すなどのアクションの後に発火するのを想定しているように感じたので、ページを開いたときに自動で処理を実行するとうまく行かないのかもしれません。そこで別で関数を用意してパーミッションの許可を出したあとにリダイレクトして通知の許可の要求が安定して出せるようになりました。
工夫した点
UX を意識した開発
web プッシュ通知を実装するよりもネイティブのアプリを用意した方が、開発する側としては楽なのですが、その選択はしませんでした。既存のサービスのようにどこかのお店に並ぶたびにアプリをインストールするのはユーザー体験がよくないので、使わない判断をしていました。本来であれば、iPhone でも PWA という手間も省きたかったのですが、（Android では PWA に関係なく動作ができる）OS の機能的に無理だったので諦めざるを得ませんでした。
バックエンドの再開発
これまでのアプリのシステムについては以前の記事にありますが、ユーザー情報をフロントが持っていてローカルストレージで管理している状態でした。並び順の確認のたびにユーザー情報をサーバー側に送るという仕組みだったので、フロントがロジックを持ってしまいコードが散らばっていました。この状況を改善すると同時に、iPhone で PWA した後の並び順の登録のために再開発を行いました。
結果としてユーザーはデバイストークンで一意に認識され、バックエンドでユーザーの状態や並び順が管理される状態に改善しました。
開発したところ 2
お客さんの来客状況の可視化を行いました。
これまでのサービスではいつの時間にどのくらいの人が訪れたのか、といったデータを事業者側が確認する方法がなかったので追加しました。ライブラリはRechartsを利用しています。 一週間や曜日毎などの過去の比較を含めた表示を行うべきか考えましたが、あくまで集めたデータを分析してもらうのが目的ではなく、フィードバックする環境を用意するのが目的だったので、当日分のお客さんのデータのみを表示するようにしました。今後の展望してお客さんの営業データを csv としてエクスポートできるようにして、個人で活用できる環境を用意するような仕組みを用意したり、より深いデータ分析を行なったフィードバックを考えているので、その前段階として用意しました。
終わりに
プロダクトについて企業さんからフィードバックをもらうなかで、すぐに事業に結びつくシステムを評価していただきました。しかしハッカソンとしてはやはり事業化のビジョンが明確化されたプロダクトであったのだと感じました。発表についてもプロダクト自体の説明よりも使用した技術が明確にされていてそうした技術よりの発表にシフトした方が良かったのかなと感じました。
開発についてはアドバンスに向けた開発を主導できて、チームメンバーと協力しながら実装しきれたので満足しています。もともと iPhone の通知は実装できる見通しが全く立っていなかったのでこうして実現できたのが嬉しいです。
これからはハッカソンよりももっと長いスパンで腰を据えて取り組むような、社会的に実現したら嬉しいような大きなスケールのプロダクトを開発したいと考えています。XR 系の技術も本格的に学んでいかないといけないです。
Contact&Links
Email : seikenshibata@gmail.com
github : kanakanho
twitter : @Shiba_ao
