2021.05.15
竹村 彩乃
クラウド・ソリューション技術本部 第二技術部 第一設計課 第二係
2013年入社。以来、様々なプロダクトのUI/UXデザインやアプリケーション開発を担ってきた。2018年より、空気清浄機アプリ「ミルエア」の開発に従事している。
空気清浄機とスマホをつなぎ、いつでもどこからでもお部屋の空気の状態を把握でき、空気清浄機の操作も可能な「ミルエア」アプリ。快適・便利な生活をユーザーに提供するアプリですが、一つの課題がありました。それはアプリの起動時間。初期ロードに7秒という時間を有していました。ユーザー体験を向上するためには、時間の壁を乗り越える必要がありました。
| ネイティブアプリ | ハイブリッドアプリ | Webアプリ | |
|---|---|---|---|
| メリット | ・カメラやGPSなどデバイス機能を最大限活用 ・高い操作性 ・オフラインで使用できる | ・カメラやGPSなどデバイス機能を最大限活用 ・一部オフラインで使用できる ・開発コストの抑制（1ソースで マルチデバイス対応） ・メンテナンス性が高い | ・メンテナンス性が高い ・ブラウザで表示するためアプリ開発の必要がない |
| デメリット | ・開発コストが高い（デバイス毎に開発するため） ・メンテナンスが大変 | ・ネイティブアプリに比べ操作性が劣る ・通信をともなうためネイティブアプリに比べ動作が重い ・開発の自由度がネイティブアプリに比べ狭い | ・オフライン環境で使用できない ・操作性や表現がネイティブアプリと比べ劣る |
起動時間が長くなってしまう原因は、明確でした。AndroidとiOSのいずれにも対応するためハイブリッドアプリとして開発された「ミルエア」アプリは、シングルページアプリケーション(*1)で構築しているため、起動時にすべてのソースコードを読み込む必要がありました。これがローディング時間を伸ばしてしまう要因でした。
(*1)シングルページアプリケーション：1つのWebページでアプリケーションを構築する手法。ページ遷移の必要がなく、動作性やWeb表現の自由度が高まり、スマートフォンに適した手法と考えられている。一方、起動時の初期ローディングに時間がかかることがデメリット。
この問題を解決するため、遅延ロード（Angular）という機能の使用を検討しましたが、「Angular の遅延ロードとOnsen UIの併用ができない」というのは、広く知られている事実。世界中の知見を探っても、実現している例は見当たりませんでした。そして「ミルエア」アプリも、Onsen UIを使用し開発されていました。
(*2)遅延ロード：Webサイトに表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込む技術。「SEOに不向き」という声もあったが、近年はGooglebotの技術向上によってその不安は解消されつつある。
それでも、試してみる価値があると私は考えました。困難は承知。あらゆる可能性を探ることで既存の常識を覆すような技術と出会えるなら挑戦したいという気持ちで試行錯誤を重ねました。
大きな問題は２つ。
というお互いの機能が干渉し、読み込むファイルが重複。表示エラーを起こしていました。
どうすれば読み込みの重複を解消できるか。機能の組み合わせだけで検討するのではなく、起動時に一括で読み込むOnsen UIのプログラムの中身自体を解析。公式で推奨されている開発手順をアレンジ、【Onsen UIの一括読み込みを必要なファイルを個別で読み込む方法】に変更することで、一度にすべてのページを読み込もうとするOnsen UIと、ユーザーの必要なページだけを読み込もうとするAngular の遅延ロードとの間にある重複エラーを解消することができました。
『Angular の遅延ロードとOnsen UI』を可能としたことで、7秒かかっていた「ミルエア」アプリの起動時間は3秒に短縮。ユーザー体験を大幅に向上させることに成功しました。今後もさらなるユーザー体験向上のため、おすすめ設定のコンシェルジュ機能など、多様な進化・改善が加えていきたいと考えています。また、『Angular の遅延ロードとOnsen UI』というハイブリッドアプリの弱点を克服した本案件は、アプリ開発の選択肢も大きく拡げたと言えるかもしれません。
アプリをスマホにインストールして、空気の変化や、空気清浄機のお手入れタイミングを「見える化」。空間の空気状態、汚れの割合やキレイにした空気量の推移の確認にくわえ、ユーザーのライフスタイルに合わせて細かな運転設定が可能です。
