開発の振り返り(ハコスコナビのフロントエンド開発)
3DCGでVRな人間の@blkcatmanです。
ハコスコ入社直後はアプリの開発を行っていましたが、その後サーバーサイド(特にAWSサービスとの連携)での開発を経験、フロントエンドの開発も行うようになりました。
今回はそのうち、携わったプロジェクトの中で開発に大きく関わったハコスコナビのフロントエンド開発の振り返りを記事にしました。
ハコスコナビについて
ハコスコナビは、ボイスチャットでユーザーと対話しながらイベント会場やホテル、物件、または景観など、様々なVR映像を遠隔から簡単に紹介できるサービスです。
ハコスコナビ | ハコスコ
当時の開発フェーズ
新規サービスとしてハコスコナビの開発がスタートしました。
今回はモック制作まで、開発〜内覧会まで、サービス提供開始までの3つのフェーズに分けて書きました。
それぞれのフェーズでの開発のできごとを次の項に書いています。
モック制作まで
モック制作は2018年8月からスタートしました。雛形がまったく作られていない状態からスタートしました。この時は、まだハコスコナビとは呼ばれておらず、暫定でVR体験プレゼンツールという名前で呼ばれていました。
当時の以下の要望から実現に必要なライブラリやフレームワークを探すことからスタートしました。
- ナビゲーター(オペレーター)と視聴ユーザーの二者間の非対称なシステムを構築する
- 視聴ユーザーは複数人参加できる
- ボイスチャットを実現する
- （ナビゲーターが所持している）ハコスコストアのコンテンツを視聴できる
- プラットフォームに依存しないよう、Webブラウザで動作するアプリにする
- 対象のプラットフォームはPC(windows、mac)、iOS(iPhone、iPad)、Android、OculusGo
Webブラウザ上で動作するアプリ => JavaScriptでのWebアプリ開発に決まったため、JavaScript上で簡単に動作するライブラリを探してモックを作成しました。 初期の仕様から今後の開発方法を把握するもあったので、モック制作は1ヶ月程度かかりました。
開発〜内覧会まで
モックのレビュー後、サービス化に向けて本格的な開発が2018年9月から始まりました。
モック制作時に使用していたライブラリが、本開発で不具合を招くことが懸念されたため、再度使用するライブラリを見直すことになりました。また、モックは雑に実装されたコードも多くあったため、本開発ではモック時に書いたコードはほとんど残りませんでした。ここは以降の開発での反省点になりました。
再検討の結果、信頼性と安全性の面からSkyWayをボイスチャットのライブラリに使用することになりました。 また、JavaScript上でGUI設計に管理するため、Vueのフレームワークを取り入れました。当時はVueに慣れておらず、コードの書き始めに苦労した覚えがあります。
ハコスコナビの内覧会が開催されることになり、一旦の目処として11月を目標に開発を進めていきました。
中途段階とはいえ、流石にフロントエンドの開発だけで工数がすごいことになったので、サーバーサイドの開発は@ill_hhdさんにお願いしました。
サービス提供開始まで
内覧会の後、2019年1月にサービス提供することになりました。
サービス提供に向けて、デザイナーが作成したGUIレイアウトとUIパーツのデザインに変更し、実運用で必要になる機能追加を行いました。
機能追加のうち、ボイスチャットのミュート処理を実装していましたが、ブラウザ間での動作確認が大変でした。特にSafari(macOS、iOS)が不安定で、Chromeで動作するコードがSafariで動作しないということがたびたび起こりました。
Safari 12(2018/9/17リリース)がリリースされた後のこともあり、オンラインのドキュメントやissuesがほとんど見つからず、トライアル＆エラーで試行錯誤していた時もありました。
色々な方法を試して、なんとか期間中に機能を追加することができました。
サービス提供開始後〜
無事サービス提供を開始することができました。現在もハコスコナビはサービス開始後からいくつもの修正、機能追加が行われています。
また、サービス提供前後でOculusGo本体に大幅なOSアップデートが始まり、たびたび結構なトラブルに遭遇しましたが、それはまた別の機会に・・・
終わりに
自分にとってこの開発はこれまでよりもプロジェクトのスケジュールの計画性や、工数管理の意識付けの大切さを知る機会になりました。 ハコスコは少人数開発で、なおかつ平行に走っているプロジェクトも多いのですが、この数ヶ月で非常に濃い経験をすることができました。
次回はもうちょっと軽めに、何かの技術記事にできればなぁと思います。お読みいただきありがとうございました。
