LCL Engineers' Blog

バス比較なび・格安移動・バスとりっぷを運営する LCLの開発者ブログ

バス比較なび for iOSでリリースノートに載らなかったカイゼン集 vol.1

早くも1月が終わろうとしていますが、明けましておめでとうございます。
モバイルアプリエンジニアの山下です。

新年一発目の今回は、モバイルアプリエンジニアらしく弊社のiOSアプリで行った施策のことについて紹介していこうと思います。
去年は業務委託の方にもジョインしていただき、沢山の施策を進めることができました。その中でも今回はリリースノートに載らなかった小さな改善に触れていきます。

機能面だけではなく開発面についても、下部に少しだけまとめています。

ではさっそく..

ページ読み込み時にインジケーターを表示

f:id:yamshta:20200128101219p:plain

高速バスの便一覧を表示する画面は一般的な差分取得で、スクロール中にイイ感じに次の情報を表示するように調整しています。とは言え、回線速度が遅いユーザや高速にスクロールした場合に表示が追いつかなくなることが多かったのでインジケーターを下部に設置しました。これにより、スクロールが止まってもまだ便が存在することをユーザに伝えることができたので離脱率が下がりました。

便名を余り表示ではなく全文表示するように変更

Before After
f:id:yamshta:20200128101348p:plain f:id:yamshta:20200128101406p:plain

スクロールパフォーマンス等の懸念から高さを固定して余り表示にしていた便名を全文表示するようにしました。このアプリは可変の表示コンテンツがとても多く、スクロールパフォーマンスはリリース当初からの課題でしたが、優秀な開発メンバーに地道にチューニングしていただいた結果、差分更新ライブラリやUIフレームワークを使わずに主要デバイスで60FPSをキープできるようになりました。感激!

「友人に教える」機能を追加

f:id:yamshta:20200128101623p:plain

以前在籍していたインターンメンバーに着手してもらい、スケジュールの都合で途中で中断してしまった機能ですが、その後数ヶ月越しに追加しました。高速バスは複数人で利用するユーザも多いので日々地味に使われています。実装後に他メンバーからアプリアイコン長押しで共有メニューがあることを教えてもらいました..汗

ホーム画面で選択中の条件数を表示

Before After
f:id:yamshta:20200128102157p:plain f:id:yamshta:20200128102207p:plain

検索では多くの条件によって絞り込みができますが、これまではホーム画面において現在条件を設定しているのかが判断しづらいUIになっていました。また、そもそも条件を絞り込めることを認知されていないユーザが一定するいることも課題にあり、気持ちボタンを大きくして選択中の条件数を表示するようにしました。めちゃくちゃ地味な変更ですが、ボタンの利用率が10%ほど上がったので侮れません。派手な変更だけでなく、地道に改善していくのは大切です。

iOS13のpageSheet(モーダルタイプ表示)に対応

通常 変更有
f:id:yamshta:20200128102232p:plain f:id:yamshta:20200128102242p:plain

最初はなにも特別なことはしなくてよいと思いましたが、蓋を開けてみると「条件変更や予約画面(Webview)では、閉じる際にアラートを出すべきではないか」、「TableViewからWebviewする際にモーダルなのは違和感があるのでは」など、地味に制御が必要でした。アップルの純正アプリを参考にして挙動を調整し、現在は違和感がなく誤操作の心配もない振る舞いをしています。

Webview 読み込みが長い場合にインジケーターを表示

f:id:yamshta:20200128102458p:plain

バス比較なびは、比較サイト(アプリ)なのでユーザが予約する画面はWebviewで各予約サイトを表示しています。その際、予約サイト側の読み込みが遅かったりするとどうしても離脱率が高くなってしまします。これを解決すべく、Webviewのローディングバーとは別に目立った形でインジケーターを表示するようにしました。発生パターンがイレギュラーなので正確に計測はできていませんが、以前よりも読み込みできないといった問い合わせなどが減ったので効果はあったように感じます。

今後はWebviewまわりの拡張をして予約サイトのエラーを強調したり、入力のサポート機能を追加していきたいと思っています。

おまけ

ライブラリを大量に削除

バス比較なびはリリースされてから3年以上経っていますが、その過程で一部分のみ使ったり、導入しようとして浸透しなかったライブラリがいくつか存在しました。

UIライブラリをはじめ、EasyPeasy、PinLayout、Nuke、RxSwift..

これらは以下の問題の原因となり、日々の工数を少しずつ蝕んでいたので一掃しました。

  • アプリサイズの肥大化
  • 開発、CIの速度低下
  • 使い回しのしづらいコードの発生
  • ライブラリ仕様の認知コスト

これによりアプリサイズは10~20MBほど軽減し、高速なCIと一貫した業務ロジックを取り戻しました。
ライブラリは便利ですが、用量用法を守って他者に任せすぎずに頑張ることも大切ですね。

SwiftGenでリソース管理をタイプセーフにする

以前までEnumで自前定義していましたが、段々と管理が面倒になったことと人間が文字列を管理する以上、ヒューマンエラーの根本的な解決にはならないのでSwiftGenを採用することにしました。
前の項目とは反対にSwiftGenは一部分ではなく、全体での自動化&ルールになるので導入により効率が増しました。特にEmbedded framworkで分割を進めていたので相性がよかったです。

シェイクジェスチャーでネットワークログを表示

いつでも気軽にネットワークログを確認したかったので開発環境のみにこのライブラリを追加しました。ただひと言、非常に便利です。

pmusolino/Wormholy: iOS network debugging, like a wizard 🧙‍♂️ https://github.com/pmusolino/Wormholy

f:id:yamshta:20200128102627p:plain

以上、ざっくりとした紹介でしたがいかがだったでしょうか?

リリースノートに載らないような地味な変更でも、ユーザ体験や数字が大きく変わるのがサービス開発の面白いところですね。
今後も地道にアプリのクオリティを上げていきたいと思います。

apps.apple.com

採用情報

LCLではユーザ目線でサービスを作っていけるメンバーを募集しています!
このブログを読んでLCLに興味を持っていただけた方は、是非一度お話を聞きにいらしてください。

www.lclco.com