乗車記録をつけるiOSアプリをリリースしました

作ったアプリ

今回リリースしたのは，東京メトロ東西線の乗車記録をつける iOS アプリです。
下記がアプリアイコンと App Store のリンクになります。
(よかったらインストールしてやってください🙇‍♂️)

なぜ作った？そのこころは・・・

東京メトロが好きで特に東西線が好きです。
コロナ禍となり利用機会が激減してしまったのですが，
通勤していたころは毎日使っていました。

満員電車の中で東京メトロネットワークの紙をずっと見てて，
駅の順番の暗記に始まり，接近/車内放送や発車メロディなども好きになり，
メトロ車両以外には乗らない縛りをつけたりするうちに
下記のスクショのように乗車記録をつけ始めました。

手動で	アプリで

乗車時に逐一テキストベースで記録してきましたが，
私はアプリエンジニアだしアプリで記録付けれるようにして，
ついでに必要な情報も確認できるようにすれば良いのでは？
ということで作り始めました。
まずは自分が欲しいアプリを。大事なことです。

開発始めたのは 2020年の7月でした。
リリースまでだいぶかかりました。
主にリモート勤務になって使う機会が減ってのモチベ低下です。
長い人生何が起きるかわからないものですね。

今年はたくさん利用するぞという強い意志を持って
なんとかリリースまでもっていきました。

開発に関して

こだわり0: 東西線オンリー？

東西線が好きだからという理由で片付くのですが
個人での開発だとあまり大きな範囲はカバーできなかったというのが正しいかもです。

東京メトロの情報は取れますので9路線対応は考えてます。
でも取材が足りてなくて車両画像など全然撮れていないです。
ホームドア設置も逆に辛いですね。設置は急いで欲しいですけどね。

乗り入れ路線まで考慮するとかなりきついです。
都営の路線は API が公開されているので対応はできるかもしれません。
東急や東武の情報は公開されていないので情報取れないです。

といったものの，ようするに他の路線に対する愛が足りないのです😅

こだわり1: 新規画面は SwiftUI で

最初は Storyboard や XIB を使って UIKit ベースで作っていましたが，
SwiftUI も使ってみたいということで新規画面は SwiftUI で作っていこうと決めました。

最初はサポートOS は iOS 13 以上と考えていましたが，
開発が長丁場になったことと SwiftUI 使うにあたって
どうしても iOS 14 以上にした方がスムーズということで変更しました。
このあたりの判断がすぐできるのが個人開発の良いところですね。

色々調査しながらにはなりましたが，ある程度妥協せず画面実装はできました。
アーキテクチャとかはこだわってないです。
UIKit ベースの部分は MVC ，SwiftUI の部分は MVVM です。

こだわり2: ダークモード対応

以前開発したアプリもダークモード対応したので今回も考えました。
タイムライン画面だと下記の画像のように表示されます。

タイムライン(ライトモード)	タイムライン(ダークモード)

色合いなど実際の画面で確認しながら決めていきました。
共通色，各画面で別途必要な場合はその色をリスト化する形にしました。
例えばカレンダー部分とかだと下記のような感じです。

今の開発環境だと
色さえ決めてしまえば苦はなく実装できますね。

こだわり3: 運行状況表示

運行状況は公共交通オープンデータセンター API から取得しています。
実際に利用するにはユーザ登録をしてアクセストークンを取得する必要があります。

https://developer.odpt.org/ja/info

取得できると分かった時点で絶対やろうと思ったのが
駅のホームにある電光掲示板の右から左に流れる案内表示でした。

こちらは UIKit で作っていて AutoLatout の制約とアニメーションを組み合わせて実現しました。

東西線に特化する予定でしたが一緒に 9路線分取れちゃうので
一覧表示をモーダルで出せるようにしました。
この画面はとてもシンプルなので SwiftUI で作ってます。(ScrollView と LazyVStack)

こだわり4: 時刻表の運行会社区別表示

東西線の各駅の時刻表も公共交通オープンデータセンター API で取得しています。
時刻表周りはすべて SwiftUI で作っています。
発車時刻，列車種別，行き先，始発駅，最終電車の情報を確認できます。

駅一覧	時刻表

先ほども記述した通り，東京メトロの車両にしか乗らないユーザもいます。
運行番号も API で取得できるのを知って追加実装した機能が，
どの会社の車両が来るのかを表示するというものです。

東西線の場合，A1321SR みたいな運行番号があります。
前半は，A線(西船橋方面)，13時台，数字は単純に番号で，
後半の SR は TR，KR，Rがつかないものもあります。
S: 東京メトロ，T: 東葉高速鉄道，K: JR車両 を指し，
R は不敗神話の，ではなく快速運転(Rapid Service)かどうかです。

つまり東京メトロ車両しか乗らないユーザは
S がついた運行番号の車両が来る時刻を確認すれば良いのです。
それぞれ色を分けた ● で表現し，時刻の左側に配置しました。
タップすることでアラートダイアログを表示します。

実はこの情報は業務用の時刻表にしか記載がなく，駅のホームのどこかで確認できます。
一般のユーザには不要な機能ではありますかね。
なお，ダイヤ乱れが発生すると法則性が崩れます。戻るまで1日かかることもあります。
ホームで実際に確認になっちゃうので困ってしまいます😇

こだわり5: 駅マップ

駅マップは以前 9路線分実装したことがあってこのアプリにも入れようと思っていました。
下記のようなデザインで作っていたのですが開放感ほしくて
地図上に駅のカードを表示するシンプルなデザインに変更しました。
カードとスクロールできる部分が SwiftUI で MAP 部分は Storyboard に載っけただけです。

以前作った時の画面	このアプリのマップ画面

カードのタップで駅のピンの位置に移動させます。

地図の縮小をすると駅の並びが分かりやすく，
実際に走る電車の中で見ると移動してる感じがなんか嬉しくなります。

今後

Widget とか実装してみたい機能はあります。
Apple Watch で記録取れたら面白いんじゃないかとも思ってます。
あと 9路線展開はできるところからやる予定です。
WWDC22 で面白い機能出たら積極的に導入したいですね。

フィードバック

Settings タブにフィードバックの項目があるので，
バグを見つけたり機能提案などあれば是非送ってください。

アプリ審査

英語のアプリに比べて，日本語アプリは遅めなのかなと思いました。
新規の申請だったのでメタデータのリジェクトを予想していましたが一発で通過しました🎉
実機で動くアプリをビデオ撮って送れとかは今回なかった。

ご覧いただきありがとうございました。
個人開発がんばりましょう。