【要約】isMobileApp() と isMobilePage() はどう使う？ ── kintone のアクセス環境を判定して「モバイルアプリとブラウザの挙動差」を出し分けよう！ [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
kintoneのカスタマイズ開発者が、端末とUIの定義の差により、適切な挙動制御ができない問題に直面している。kintoneのカスタマイズ設定は、端末ではなくUIに基づいてファイルを分割する仕組みであるため、以下の課題が生じる。
- ・PC端末からモバイル向けUIを開いた場合、PC用のJavaScriptが動作する。
- ・スマートフォンからPC向けUIを開いた場合、スマートフォン用のJavaScriptが動作する。
- ・ファイル分割だけでは、端末の種類やアプリ利用の有無を判別できない。
// Approach
開発者は、新設された2つの非同期APIを用いることで、アクセス環境を詳細に判定する手法を採用する。
- ・
isMobileApp()を用い、公式モバイルアプリからのアクセスかを判定する。 - ・
isMobilePage()を用い、表示中の画面がモバイル向けUIかを判定する。 - ・これらを組み合わせ、モバイルブラウザ利用時の制限や、UIに応じたダイアログの出し分けを行う。
// Result
開発者は、1つのJavaScriptファイルでPCとモバイル両方のUIに対し、最適なUXを提供できる。具体的な成果は以下の通りである。
- ・モバイルブラウザ利用者に通知を出し、公式アプリへの移行を促せる。
- ・UIに合わせて
showConfirmDialogとshowConfirmBottomSheetを使い分けられる。 - ・モバイルアプリ利用状況をログとして記録し、運用管理に活用できる。
Senior Engineer Insight
> UIと端末の分離は、マルチデバイス環境における設計として極めて合理的である。ただし、非同期APIであるため、
await の欠落は致命的なバグを招く。また、検索画面やアプリストア等の利用不可画面が存在するため、共通ライブラリ化の際は検証コストを考慮すべきだ。UXの向上だけでなく、モバイルアプリ利用を強制する等の運用統制への適用も実用的である。