ロードマップ

モバイル画面は小さく、その小さな空間が驚くほど多くの UI 課題を生み出します。要素がオンスクリーンキーボードに隠れたり、セーフエリアが端末によって異なったり、ユーザーが実際に見ているビューポートがブラウザの報告する値と食い違ったりします。これらはエッジケースではなく、モバイル開発における日常的な現実です。

課題: モバイル画面での不安定な UI

モバイル端末では、ユーザーが画面で見るものと開発者が想定するものが必ずしも一致しません。よくあるシナリオをいくつか紹介します。

• キーボードが入力欄を覆う: ユーザーがテキスト入力欄をタップすると、オンスクリーンキーボードがせり上がり、入力欄や下部に固定された送信ボタンを完全に覆ってしまうことがあります。
• セーフエリアの不整合: ノッチ、丸みを帯びた角、ホームインジケーター（iPhone の下部バーなど）を持つ端末には、コンテンツを配置すべきでない予約領域がありますが、これは端末や OS のバージョンによって異なります。
• ビューポートの混乱: ブラウザのレイアウトビューポートと実際に見える領域（ビジュアルビューポート）は、特にキーボードが開いていたりページがズームされていたりする場合に大きく異なることがあります。固定位置の要素が予期しない場所に配置されてしまうこともあります。

これらの課題は特定の OS や端末に固有のものではありません。iOS Safari であれ、Android Chrome であれ、その他どのモバイルブラウザであれ、根本的な課題は同じです。見える領域は予測不可能であり、標準の CSS だけでは信頼できる形で対処できないのです。

私たちのアプローチ: ビジュアルビューポートに焦点を当てる

react-simplikit のモバイルユーティリティは、これらの問題を解決するために焦点を絞ったアプローチを取ります。もろいハックでブラウザの癖を回避しようとするのではなく、ビジュアルビューポート — ユーザーがある瞬間に実際に見ている画面領域 — を中心に設計しています。

Visual Viewport API をベースに構築することで、以下のようなことができるフックを提供します。

• キーボードの表示を検知して対応することで、下部固定要素が自然にキーボードを避けるようにします。
• セーフエリアインセットを読み取ることで、ノッチやホームインジケーターなど、端末固有の予約領域を正しく考慮します。
• 実際に見える領域を追跡することで、ブラウザのレイアウトエンジンが想定するものではなく、ユーザーが実際に見ているものに基づいてレイアウトを決定できます。

目標はシンプルです。ビジュアルビューポート内で、UI が確実かつ予測可能にレンダリングされることです。

クロスプラットフォーム、クロスデバイス

特定の OS や端末モデルに限定されないことを目指しています。モバイル Web は本質的にクロスプラットフォームであり、react-simplikit はそれを受け入れています。

私たちのフックは、以下の環境で一貫して動作するように設計されています。

• iOS と Android — 2 大モバイルプラットフォーム。
• さまざまなブラウザ — Safari、Chrome、Samsung Internet など。
• さまざまな端末フォームファクター — コンパクトな端末から大画面端末まで、ノッチやホームインジケーターの有無を問いません。

特定の API が利用できない場合（たとえば古いブラウザの window.visualViewport）でも、UI を壊すことなく段階的に劣化する安全なフォールバックを提供します。

今後の展開

react-simplikit で提供するモバイルフックのラインナップを、常に同じ原則に基づいて拡張し続けています。端末や OS を問わず、モバイル UI 開発を予測可能で信頼できるものにするという原則です。よくあるモバイル UI の悩みがあれば、私たちはそのためのクリーンで宣言的な解決策に取り組んでいる可能性が高いです。