事例とチャレンジ

POINT

開発の背景・課題

空気清浄機とスマホをつなぎ、いつでもどこからでもお部屋の空気の状態を把握でき、空気清浄機の操作も可能な「ミルエア」アプリ。快適・便利な生活をユーザーに提供するアプリですが、一つの課題がありました。それはアプリの起動時間。初期ロードに7秒という時間を有していました。ユーザー体験を向上するためには、時間の壁を乗り越える必要がありました。

ソリューション

この問題を解決するため、遅延ロード（Angular）という機能の使用を検討しましたが、「Angular の遅延ロードとOnsen UIの併用ができない」というのは、広く知られている事実。世界中の知見を探っても、実現している例は見当たりませんでした。そして「ミルエア」アプリも、Onsen UIを使用し開発されていました。

(*2)遅延ロード：Webサイトに表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込む技術。「SEOに不向き」という声もあったが、近年はGooglebotの技術向上によってその不安は解消されつつある。

それでも、試してみる価値があると私は考えました。困難は承知。あらゆる可能性を探ることで既存の常識を覆すような技術と出会えるなら挑戦したいという気持ちで試行錯誤を重ねました。

大きな問題は２つ。

• ① Onsen UIを用いた画面遷移 …遷移画面を管理できるが、起動時に読み込んだ画面にしか遷移できない
• ② Angularの遅延ロードを用いた画面遷移 …遷移する先を遅延ロードにできる。前の画面が消えてしまう

というお互いの機能が干渉し、読み込むファイルが重複。表示エラーを起こしていました。

どうすれば読み込みの重複を解消できるか。機能の組み合わせだけで検討するのではなく、起動時に一括で読み込むOnsen UIのプログラムの中身自体を解析。公式で推奨されている開発手順をアレンジ、【Onsen UIの一括読み込みを必要なファイルを個別で読み込む方法】に変更することで、一度にすべてのページを読み込もうとするOnsen UIと、ユーザーの必要なページだけを読み込もうとするAngular の遅延ロードとの間にある重複エラーを解消することができました。

• 
• 

成果・今後の展望

『Angular の遅延ロードとOnsen UI』を可能としたことで、7秒かかっていた「ミルエア」アプリの起動時間は3秒に短縮。ユーザー体験を大幅に向上させることに成功しました。今後もさらなるユーザー体験向上のため、おすすめ設定のコンシェルジュ機能など、多様な進化・改善が加えていきたいと考えています。また、『Angular の遅延ロードとOnsen UI』というハイブリッドアプリの弱点を克服した本案件は、アプリ開発の選択肢も大きく拡げたと言えるかもしれません。