タップ、スワイプ、URLを同じページ状態につなぐ

カードをめくる方法が増えても、管理する現在位置はひとつにする。プロフィール、活動、Memoを配列で持ち、右タップと左スワイプは次へ、左タップと右スワイプは前へ進める。キーボードの左右キーも同じ規則へそろえる。

タップと指ぶれを分ける

指が8px未満しか動いていなければタップ、横へ36pxを超えて動き、縦移動より大きければスワイプ、といった閾値を設ける。カードの中央より左か右かは、画面幅ではなくカード自身のgetBoundingClientRect()を基準にする。

リンク上の操作は最初に除外する。これを忘れると、SNSを開くのと同時にカードまでめくれてしまう。

URLも現在位置として扱う

活動ページは?card=activity、Memoページは?card=memoとしてURLへ反映する。これにより、見せたい面を直接共有できる。操作方法ごとに別の状態を作らず、画面、履歴、アクセシビリティ属性をひとつのturnCard()から同期させると、循環する3ページでも破綻しにくい。