座席予約で選択時にタッチペンが反応しない

Question

実現したいこと

座席予約システムで画面をタッチペンで押しても反応しないことがあるが、
その原因を知りたい。

前提

スマートフォン（Android）での利用とします。

座席を予約するシステムで画面をタップして予約座席を選択するようなUIのものがあります。
特定の条件下で反応しないためその理由を教えて欲しい。

＃仕様ならば、どういった条件がOKで、NGなのか。
ドキュメントを提示していただく形でも構いません。

発生している問題・エラーメッセージ

OKの場合
・指で指定の座席をタップする（失敗する時も、たまにある）
・画面操作を記録するツールで座席予約を成功させたケースを録画し、
実行する場合

NGの場合
・タッチペンで選択する。
・マクロで指定座標を確実にクリックするようなケース。

該当のソースコードイメージ

・座席部分の描画実装
<canvas style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer;"></canvas>

・座席のデータ保持イメージ
座席番号、Y座標、Ｘ座標、予約状態
※クリックすると、予約状態が予約済に変わる

・座標がクリックされたとき
PixiJSで、onメソッドで呼び出す。

試したこと

座標範囲の問題かと思い細かい時間に大量に選択するようなマクロを作って実行しましたが、
反応しませんでした。

Comments

[meg_]

> 座席予約システムで画面をタッチペンで押しても反応しないことがあるが、
その原因を知りたい。
どういう構成で作成されたシステムなのでしょうか？特定のスマホ（OS）やタッチペンの種類によってお客様からクレームが来ているのでしょうか？詳細を質問に追記いただけますでしょうか？

[terater]

本件現時点ではユーザー視点での質問になります。
生成AI（Copilot）や検索エンジンでタップイベントで検索したつもりですが、
この辺りに言及されているものが見当たりませんでした。

ボタンなどのクリックについてはNGケースの場合においても動きますが、
本件のようなケースはなぜ動かないのか不思議に思ったので質問させていただきました。
（ボタンのクリックイベントなどのケースは今まで実装した経験もありますが、
　スマートフォン特有の開発経験はあまりないので基本的なものでしたら失礼いたしました。）

[dodox86]

> ＃仕様ならば、どういった条件がOKで、NGなのか。
> ドキュメントを提示していただく形でも構いません。

その特定の「座席を予約するシステム」での特定のスマホアプリの機能仕様によるものでしょうから、その特定の仕様やドキュメントとやらは第三者には分からないのではないでしょうか。Androidのアプリについては、MotionEventと言うのがあって、指やスタイラスペンでタッチしたことの区別ができます。

https://developer.android.com/reference/android/view/MotionEvent

これに加えて、たとえば予約操作について人間以外のマクロなどでの自動操作を不正対策として拒絶するよう、システム側で頑張って作り上げている可能性も考えられます。

[dodox86]

> Androidのアプリについては、MotionEventと言うのがあって、指やスタイラスペンでタッチしたことの区別ができます。

ああ、ご質問のケースではAndroidネイティブアプリでは無くてAndroidスマホのブラウザ上で動くWebアプリでしょうかね。そうであれば失礼しました。

[terater]

#その特定の仕様やドキュメントとやらは第三者には分からないのではないでしょうか
言葉足らずですみません。
定石のような関数（イベントをキャッチするようなもの）がある場合は、
その「言語仕様」を教えてくださいという意味合いで記載しました。

私のイメージでは座席枠内の一座標でも触れば、
普通クリックされたものとして変わるものなんじゃないの？という認識が現在あります。

>>Androidのアプリについては、MotionEventと言うのがあって、指やスタイラスペンでタッチしたことの区別ができます。
ご教示ありがとうございます。
本件はWEBアプリですが、
どちらかというとこの「指」や「スタイラスペン」の区別は（一般的に）出来るの？
出来る場合は、どうやっているの？という質問がしたいのかなと自己理解いたしました。
（そのような関数が、スマホアプリと同様に用意されているならば、
　その判定条件の仕様の参照先を教えて欲しい。
又は何か定石のようなライブラリ＆コードがあれば、そちらを。どうやって判定するのか等等）

>>システム側で頑張って作り上げている可能性も考えられます。
そういうものならば、それはそれで新たな知見が得られました。
ありがとうございました。

[meg_]

> 本件現時点ではユーザー視点での質問になります。
動作テストでNGが出たという解釈で良いですか？アイフォンではNGは出ないという事ですね？PCのタッチパネルでもNGは出ないという事ですね？単純にご使用のスマホの画面の不具合（劣化）やバッテリー・メモリ不足での動作不良の可能性はありませんか？

[meg_]

もしかして・・・「座席予約システムで画面をタッチペンで押しても反応しないことがあるが、その原因を知りたい。」というのは、どこかの会社が提供している座席予約システムについての話ですか？そうであればURLを質問に追記しましょう。

ところで下記行為は社内外ともに攻撃とみなされませんか？大丈夫でしょうか？
> 座標範囲の問題かと思い細かい時間に大量に選択するようなマクロを作って実行しましたが、
反応しませんでした。

[terater]

>>どこかの会社が提供している座席予約システムについての話ですか？
わかりずらくてすみません。
本件はこちらの意図の方が近いです。認証制サイトなので、URLを貼ることはしておりません。

>>ところで下記行為は社内外ともに攻撃とみなされませんか？大丈夫でしょうか？
今さら何とも言えませんが数秒数回試しにやった程度で、
ましてや何も反応していないので…。
（ふざけて連打しているのと、大して変わらない程度です。裏で動いてて何か言われたらその時です。）

そこのサイトでタッチペンでどうしても予約をしたいという意図はなく、
技術的にどういった理由で出来ないんだ？出来る方法はあるのか？
という疑問からここに質問をさせていただいている次第です。
（一般的な事由等を知るだけで、十分今後の為になると思っています。）

不具合が疑われるなら、運営もとに言うのもありかもしれませんが。。

[meg_]

> 認証制サイトなので、URLを貼ることはしておりません。
？「認証制」とはどういう意味でしょうか？インターネットに公開されていないということですか？
ログインが必要という意味なら回答者の中にも登録者がいてもおかしくないですし、質問文に書いても特段問題ないと思われます。質問者さんのいう状況が再現するのか確認したいと思っただけなのですが。
「不具合が疑われるなら」とのことですが、そもそも利用者側の不具合かもしれないですし。

[terater]

事前登録制（申請（IDとPW）が必要。）の会員サイトという意味になります。
一旦サイトの利用条件などを確認させてください。

また端末側の不具合と言われると、なるほど思いました。
検証が不十分なので2，3端末があるので、
試しに色々な機種で確認してみようと思います。

>>「指」や「スタイラスペン」の区別
上記について、AIで確認したところ下記の方法提示されました。
この辺りをうまく使う事で、
結構厳密に判断してくれるものなんでしょうか。（touch以外は、無視するみたいな）
テストプログラムで試してみようかなと思いました。

--touch種別の判別------
element.addEventListener("pointerdown", function(event) {
if (event.pointerType === "touch") {
console.log("指による入力です");
} else if (event.pointerType === "pen") {
console.log("スタイラスペンによる入力です");
} else if (event.pointerType === "mouse") {
console.log("マウス操作です");
}
});

--筆圧や傾きの情報---
element.addEventListener("pointermove", function(event) {
if (event.pointerType === "pen") {
console.log(`筆圧: ${event.pressure}, 傾き: X=${event.tiltX}, Y=${event.tiltY}`);
}
});

詳細の内容を現在読めてませんが、この辺りのドキュメントを参考にすると良さそう？
https://www.w3.org/TR/pointerevents2/#dom-pointerevent-pointertype

[meg_]

> 事前登録制（申請（IDとPW）が必要。）の会員サイトという意味になります。
そうなんですね。「座席予約」ということで映画館の予約サイトぐらいを想像していましたがどうやら違うようなので公開なさらないで結構です。

Answer 1

実際のシステムがどのような仕組みかは分かりませんが、
スマホアプリ同様にタップ等の制御可能という事は分かりました。
＃Sペンでは、2つめの四角以外反応しない。

もう少し深堀をしたいところですが、
（touch,pen,mouseに該当する条件って、具体的に何？とか）
端末だけでなくブラウザやOSによっても色々異なるとの記述もあり根が深そうです。

動作確認をしたコード

<canvas id="seatCanvas" width="600" height="200"></canvas>
<div id="message">座席を選択してください</div>

body { text-align: center; font-family: sans-serif; }
canvas { border: 1px solid #333; margin: 20px auto; display: block; }
#message { font-size: 18px; color: green; }

const canvas = document.getElementById('seatCanvas');
const ctx = canvas.getContext('2d');
const messageDiv = document.getElementById('message');

const seats = [
  { x: 50, y: 50, w: 100, h: 100, color: 'lightgray', reserved: false, allowedType: 'touch' },
  { x: 250, y: 50, w: 100, h: 100, color: 'lightgray', reserved: false, allowedType: 'pen' },
  { x: 450, y: 50, w: 100, h: 100, color: 'lightgray', reserved: false, allowedType: 'mouse' }
]; 

function drawSeats() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  seats.forEach((seat, i) => {
    ctx.fillStyle = seat.color;
    ctx.fillRect(seat.x, seat.y, seat.w, seat.h);
    ctx.strokeRect(seat.x, seat.y, seat.w, seat.h);
    ctx.fillStyle = 'black';
    ctx.font = '20px sans-serif';
    ctx.fillText(`座席 ${i+1}`, seat.x+15, seat.y+60);
  });
}

function getSeatIndex(x, y) {
  return seats.findIndex(s => x>=s.x && x<=s.x+s.w && y>=s.y && y<=s.y+s.h);
}

canvas.addEventListener('pointerdown', e => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const idx = getSeatIndex(x, y);
  if (idx === -1) return;
  const seat = seats[idx];
  if (e.pointerType === seat.allowedType) {
    seat.reserved = !seat.reserved;
    seat.color = seat.reserved
      ? (seat.allowedType==='touch'?'lightblue':seat.allowedType==='pen'?'lightgreen':'orange')
      : 'lightgray';
    messageDiv.textContent = seat.reserved
      ? `座席 ${idx+1} が予約されました（${e.pointerType}）`
      : `座席 ${idx+1} の予約がキャンセルされました`;
    drawSeats();
  } else {
    messageDiv.textContent = `座席 ${idx+1} は ${seat.allowedType} でのみ予約可能です（現在: ${e.pointerType}）`;
  }
});

drawSeats();