• Webのbutton要素などで長押しを実装すると、スマホなどの場合に「選択」のコマンドが出てきちゃう
  • 長押しでゲームの操作をしたいのに、テキスト選択のメニューが表示されちゃう
  • ユーザー体験が悪くて、操作の邪魔になる

• 生CSSのuser-select: noneをつけておくと良い
  • ボタンやコントロール要素にuser-select: noneを指定すると、長押ししてもテキスト選択のメニューが表示されなくなる
  • ゲームの操作に集中できるようになる

実装例

Tailwind CSSを使っている場合、select-noneクラスを追加する。

// IconButtonコンポーネントの実装例
export function IconButton({ children, ...props }: IconButtonProps) {
  return (
    <button
      {...props}
      className={`
        bg-black/50 hover:bg-black/70
        text-white font-bold
        transition-all
        select-none  // ← これで長押し時の選択メニューを防ぐ
        ${className}
      `}
    >
      {children}
    </button>
  );
}

生CSSを使用する場合：

.game-button {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

長押し操作の実装例

長押し操作を実装するときは、onPointerDownとonPointerUpを使う。

export function HoldIconButton({ onHoldStart, onHoldEnd, children }: Props) {
  return (
    <IconButton
      onPointerDown={(e) => {
        e.currentTarget.setPointerCapture(e.pointerId);
        onHoldStart();
      }}
      onPointerUp={onHoldEnd}
      onPointerCancel={onHoldEnd}
      className="select-none"  // 長押し時の選択を防ぐ
    >
      {children}
    </IconButton>
  );
}