飛行機大好きな2歳の娘のために上空のどこに飛行機が飛んでいるのかを示すレーダーアプリ「Aviator—Radar」を作ったエンジニアの話

飛行機が大好きな2歳の娘のために上空の飛行機を探せるレーダーアプリを作成したモバイルエンジニアのジェイコブ・バートレットさんが、どのように開発を進めたのかについてブログに投稿しています。

My Toddler Loves Planes, So I Built Her A Radar
https://jacobbartlett.substack.com/p/my-toddler-loves-planes-so-i-built

バートレットさんは2023年の夏に子どもと海外に行きました。その際の3時間のフライトにおいて、飛行機に夢中な子どもが居ることに気付いた乗務員がサービスでコックピットを見せてくれたとのこと。その時からバートレットさんの娘はより一層飛行機のことが大好きになり、上空の飛行機を見つけてほしいとバートレットさんに愛らしく頼むようになりました。

バートレットさんは娘と一緒に空を目視で探していましたが、より効率的なアプローチを行ってみることにしました。最初にバートレットさんは定番アプリ「FlightRadar24」を試してみましたが、FlightRadar24にはいくつかの問題がありました。

FlightRadar24は常に北が上になる地図を使用しているため、いま頭上のどこに飛行機があるか探すには自分の体の向きを考える必要があり、2歳の子どもが直感的に使うことができません。また、飛行機の見え方は機体のサイズや飛行高度で変わりますが、FlightRadar24のレーダーマップ上では、運用機材の違いしかわかりません。

こうした点を踏まえ、バートレットさんはアプリの要件を下記のように定義しました。

1：飛行機が正しい方向に表示されるように、アプリはデバイスとともに回転して正しい方向を維持する
2：アプリは航空機の高さに応じて航空機を大きくまたは小さく表示する
3：本格的なビジネスアプリではなく、レトロな子どものおもちゃのように感じられる楽しいものにする

そして、要件を元にコンセプトを実証するには下記の要素が必要です。

1：方向の維持
既存のソリューションには欠けているため、製品を差別化するための核となる要件です。iOS Core Location APIでカバーされており、ユーザーがデバイスの向きを変えるたびにデリゲートコールバックが提供されます。

2：Flight Data API
OpenSky Networkはまさにバートレットさんが必要としているもので、非営利目的の場合に無料で使用でき、シンプルなREST APIでエリア内のフライトのライブデータを取得できます。レーダースイープを実現するには、このエンドポイントに数秒ごとにpingを送信する必要があります。

3：位置データ
APIを呼び出す際に位置データが必要です。位置データについてもiOSのCore Location APIでカバーされています。近くを飛んでいる飛行機のデータをある程度取得するために、経緯度0.1度単位で丸めたユーザーの位置から経度1度分をクエリします。また、このデータを取得する必要があるのはセッションごとに1回だけです。

4：適切な位置への表示
飛行機の位置データを取得したら、ユーザーの方向や位置に基づいて適切に画面上に配置する必要があります。

バートレットさんはそれぞれの要素について、コードを書いて正常に動作するかを検証してみました。まず方向データを取得して、特定の方向を維持するようなコードを書いたとのこと。0度と360度が異なる角度として認識されるせいで真北を向いた際にアニメーションの表示がおかしくなるものの、現実世界の向きに合わせてアプリの向きを維持するという動作は成功しました。


続いてFlight Data APIについてはOpenSky Networkのドキュメントを参考に、ユーザーの位置情報を元にAPIへのクエリを組み立てるコードおよびAPIから取得できるJSONをデコードするコードを書いたとのこと。

そしてユーザーの位置と飛行機の位置の経緯度の差をベースにして画面上に飛行機のデータを配置しました。もちろん、経緯度1度がどれくらいの距離になるのかは地球上の位置次第であるものの、実証段階ということでバートレットさんはひとまずその問題点を無視したとのこと。

こうして最初の一晩の作業でバートレットさんは地図上に飛行機を表示することに成功したとのこと。ただし位置の表示はうまくいかず、同時刻のバートレットさんのアプリとFlightRadar24を並べた下図を見ると分かるとおり、全然同じ場所に飛行機が表示されませんでした。

バートレットさんがこの問題に頭を悩ませていたところ、突然「Annotationを使う」というアイデアがひらめきました。2023年9月に配信が開始されたiOS 17.0以降のバージョンであればAnnotationを使用してMap上の正確な位置に飛行機を表示することができます。バートレットさんはさっそくコードを書き、高度が高いほど飛行機を大きく表示するスケーリング機能を追加して娘と一緒に飛行機を探しにいきました。

バートレットさんたちはアプリ上に表示される飛行機を実際に見つけることができ、実証は大成功でした。

実際に使ってみた結果、バートレットさんは「飛行機の高度が低い方を大きく表示した方が実際の見た目と一致する」という問題点と、「子どもは地図には興味がなく、単にノイズになってしまっている」という問題点を発見しました。

その後、高度と大きさをどう対応させるかを調整したり、OpenSky APIがタイムアウトする場合の処理を追加したり、地図を消してレーダー風の表示を追加したりすることでバートレットさんのアプリは下図右側のようになりました。左のFlightRadar24の表示と比べてかなり正確な場所に飛行機が表示されていることが分かります。

3日かけて調整した結果、ついに娘がバートレットさんのアプリに興味を持つようになりました。

バートレットさんは見た目の調整を重ねたり、色や地図の表示の有無を調整できる機能を追加したりした上で、App Storeでアプリを公開しました。アプリのロゴはGencraftで作成したとのこと。

Aviator—Radar on your Phone! on the App Store

元のブログ記事では、バートレットさんがそれぞれのステップで書いたコードの詳細や、見た目やロジックの具体的な調整内容についても解説されているので、気になる人は確認してみてください。