1. リアルタイムGPSトラッキングシステム

Architecture

開発の背景

オリエンテーリングには、森の中を走るという競技の性質上、競技者の現在地や様子が伝わりにくいという欠点があります。私はこの問題を、オリエンテーリングが日本で普及していない理由の一つであると考えています。そこで、森のなかの競技者の位置をリアルタイムで表示する観戦システムがあれば観戦者も盛り上がることができ、オリエンテーリングの普及につながると考えました。

アーキテクチャ

Architecture

まず森の中を走る競技者に、位置情報を送信できるデバイスを携帯してもらう必要があります。様々なGPSデバイスが存在しますが、今回はスマートフォンを用いることにします。位置情報を送信するだけの簡単なiOSアプリをSwiftで作成しました。GPSデバイスから位置情報をFirebase Realtime Databaseに送信します。そして受信と同時にフロントエンドではReactを用いて表示します。

GPSデバイス

Swiftを用いてiOSアプリを作成しました。位置情報を4G回線で送信するだけのプログラムなのでUIの開発は行いませんでした。

データベース

リアルタイム性が非常に難しいと思っていましたが、Firebase Realtime Databaseを用いることで非常に簡単に実現できました。DBといえばMySQLなどのリレーショナルデータベースしか設計したことがなかったので、NoSQLに慣れるまで苦労しました。競技者リストや大会情報はすべてDBで保持しています。

フロントエンド

開発当初はD3.jsを用いてDOMを直接書き換えるプログラムでした。しかしこのままでは、競技者の切り替えや軌跡表示オプション、スライダーとの連携がかなり厳しくなってしまったので、練習も兼ねてReactを用いてリファクタリングしました。状態管理にはReduxを用い、UIにはMaterial-UI、地図表示にはreact-map-glを用いています。Reactを導入したことによってUIとの連携が取りやすくなり機能拡張もやりやすくなりました。そしてなにより、書いてて楽しいです。

Project link: https://github.com/cola119/tracko-react

Nifty tech tag lists from Wouter Beeftink