iOS向けのWebアプリの作成時に気づいたこと

概要

Webアプリはブラウザ上で閲覧できるため、PC/スマホ両方で利用することができます。
しかし、PCと異なりスマホは端末の画面が小さくなります。指でタッチすることを考慮する必要があるため、一部のスマホはUIに関する独自のガイドラインが定められています。
たとえば、iOS向けのユーザーインターフェイスのデザインのヒントのように、文字の大きさやタッチコントロールなど細かいところまでガイドラインが定められています。
今回は、上記のデザインのヒントを知らずに開発していたら、バグった話を紹介します。
Andoridの端末でもiOSのようなガイドラインが定められていますので、確認してみてください。

使っているバージョン（2024/04/24 執筆時点）

　iOS: 17.4
端末: iPhone15
　React: v18.2.0
　@mui/material: v5.14.4

隣接したチェックボックスのバグ

バグの詳細：

iOSの端末で、縦方向にチェックボックスグループを上から下の順で早くチェックした時に、なぜかチェック操作が正しく動作しないバグが報告されました。

サンプルコード：

たとえば、下記のような2つのチェックボックスのデモコードがあるとします。
デバッグのため、各チェックボックスがダブルクリックされた時はalert()で警告ダイアログを表示するように実装します。

function App() {
  return (
    <div>
      <div>
        <input type="checkbox" id="scales" name="label1" onDoubleClick={()=>alert("clicked 111")} />
        <label for="label1">label 1</label>
      </div>

      <div>
        <input type="checkbox" id="horns" name="label2" onDoubleClick={()=>alert("222 clicked")} />
        <label for="label2">label 2</label>
      </div>
    </div>
  );
}

export default App;

動作確認：

label 1とlabel 2を比較的ゆっくりクリックすると、正常に動作します。
しかし、label 1とlabel 2を連続でクリックすると、"clicked 111"のlabel 1の警告ダイアログが表示されてしまいます。

解析：

こちらの現象は、iOS独自の処理で、クリックの間隔がとても短い場合、位置が少しずれていても同じ位置のダブルクリックとして見なす処理が入っているからです。
たとえば、iOS向けのユーザーインターフェイスのデザインのヒントでは、iOSのアプリをデザインする時は"指でのタップが正確に行えるよう、コントロール要素（ボタンなど）のサイズを（44x44ポイント以上）に設計しましょう"。となっています。

参照先：https://developer.apple.com/jp/design/tips/

上記のデモコードのチェックボックスの高さは22ポイント（px）となっています。
各行の高さを45pxまで広げると、ダブルクリックのような現象は出なくなります。

function App() {
  return (
    <div>
      <div style={{height: "45px"}}>
        <input type="checkbox" id="scales" name="label1" onDoubleClick={()=>alert("clicked 111")} />
        <label for="label1">label 1</label>
      </div>

      <div style={{height: "45px"}}>
        <input type="checkbox" id="horns" name="label2" onDoubleClick={()=>alert("222 clicked")} />
        <label for="label2">label 2</label>
      </div>
    </div>
  );
}

export default App;

結論

iPhoneやモバイルデバイスでWebアプリを開発する際は、ボタン（チェックボックス）の配置などを気にしましょう。