画面のどこをさわったか

さわった場所とふれている数、圧力、そして指かペンかマウスかを出します。 スマホでもパソコンでも動きます。

「さわる」の受け取り方は2つあって、片方はパソコンで動きません

ここがこのページのいちばん大事なところです。ブラウザには「さわられた」を知る決まりが2つあります。

ひとつはTouch events。W3Cの説明のとおり「タッチに反応する面との、1つ以上の接点」を表すものです。 名前のとおりタッチ専用なので、マウスを動かしても、これは起きません。 「タッチした場所を出す」道具をこれで作ると、同じページをパソコンで開いた人には、何も起きません。

もうひとつがPointer eventsです。こちらはポインタという、もっと大きなくくりを決めています。W3Cは「ポインタとは、マウスの矢印・ペン・指（複数の指もふくむ）など、画面のある1点をねらえる入力が作る接点である」と書いています。 つまり指・ペン・マウスを1つの形にまとめるための決まりで、 このページはこちらを使っています。

まとめられているのに、どれで触っているかは分かります。pointerTypeという値にtouch・pen・mouseのどれかが入るからです。 上の欄に出ているのがそれで、いま何で触っているかを、ブラウザの側が知っていることが目で見えます。

つなぎ役の決まりは片方向にしかありません。Touch events の決まりには「指でさわったとき、ブラウザは続けてマウスのイベントも出してよい」という節があり、 古いページが指でも動くのはそのおかげです。逆はありません。Touch events はそもそも「タッチに反応する面との接点」を表す決まりなので、ふれるところの無いマウスの矢印からは作られようがないのです。 この行き違いが、「スマホでは動くのにパソコンでは無反応」の正体です。

圧力の「0.500」は、たいてい「測れません」という意味です

pressureは0から1までの数で、 0がその機器で測れるいちばん弱い力、1がいちばん強い力です。 ここまでは素直な話なのですが、続きがあります。

W3Cの決まりは、こう書いています ──「圧力に対応していない機器では、押している間は0.5、そうでなければ0でなければならない」。 つまり0.5は測った強さではなく、「押しています」という印として 使われている値です。 ふつうのマウスや、力を送ってこないタッチ画面では、どんなに強く押しても0.500のまま動きません。

なぜ「押している間は0」ではなく0.5なのか。決まりの文章に、その理由は書かれていません。0にしてしまうと「触れていないとき」と同じ値になって区別がつかない、と読むことはできますが、そう書いてある文は見つからなかったので、ここでは理由を断定しません。

気をつけたいのは、逆の決めつけもできないことです。 圧力を本当に測れる機器が、たまたまちょうど0.5を返すこともありえます。0.500という数ひとつからは、測れているかどうかを見分けられません。だから上の欄も、どちらとも言い切らずに両方の可能性を書いています。

「当たっている面」の1×1も、同じ「測っていません」の印です

widthとheightは、ふれている面の広さを画面のドット（CSSピクセル）で表した数です。 指は点ではなく面で当たるので、太い指ほど大きな数になります。

ここにも決まりの値があります。「接触の形を持たない機器や、実際の形を検出しないときは、1を返さなければならない」。 だから1×1は「1ドットだけ当たった」ではなく「測っていない」の印です。

上の四角では、実際に測れているときだけ、当たっている面の大きさを点線の楕円で重ねて描いています。 1×1のときに描かないのは、描いてしまうと「1ドットぶん測れた」という結果に見えてしまうからです。 指で押してみて楕円が出たら、それがあなたの指の当たり幅です。

指で動かすとページが動く。止めるのは「その図の中だけ」

さわった場所を追いかける図には、必ずぶつかる問題があります。指を動かすと、図ではなくページのほうがスクロールしてしまうのです。

これはイベントを止めても直りません。W3Cが「画面の送りや拡大は pointer event の既定の動作ではないので、イベントを取り消しても抑えられない。かわりに touch-action で宣言しなければならない」と定めているからです。 送りが始まると、ブラウザはpointercancelを出してその指の追跡そのものを打ち切ります。

だからtouch-action: noneと書くのですが、ページ全体に掛けてはいけません。ページの送りも拡大も止まるので、指でページをスクロールできない画面ができあがります。 このページは上の四角にだけ指定しています。 四角の外は、いつもどおり指で送れるはずです。

値は全部止める（none）のほかに、たてだけ許す・よこだけ許す（pan-y・pan-x）や、2本指の拡大だけ許す（manipulation）もあります。 ひとつ面白い決まりがあって、動かし始めたあとに値を変えても、その指には効きません。 始まった時点で「これはページの送りか、そうでないか」が決まってしまうためです。

さわれない人にも、同じことができるようにしました

この道具はさわる機器のための道具です。 けれど「さわれないなら使えません」で終わらせると、キーボードしか使わない人には1つも点が置けません。 WCAGの達成基準2.1.1（キーボード）が求めているのは、まさにそこです。

面白いことに、Pointer eventsの決まり自身が同じ注意を書いています ──「この仕様が定める形は、キーボードやキーボードのような入力（タッチ画面だけの機器で動く読み上げソフトなど）を含まない。作り手は、すべての入力に同じことができるようにすることが望まれる」。 決まりを作った側が「これだけでは足りない」と書いている、ということです。

そこでこのページは、数を入れて点を置ける欄を付けました。 キーボードだけで、上の四角のどこにでも印を置けます。 ただしさわっていないので、圧力と当たっている面の値は来ません。 そこは0ではなく「—」と出しています。「値が無い」と「0だった」は別のことで、 0と書いてしまうと「いちばん弱い力で測れた」と読めてしまいます。

指の見分けにも同じ考え方を使っています。色だけで見分けさせません（WCAGの達成基準1.4.1）。 丸の中には番号が書いてあり、 キーボードで置いた点は形そのものが四角です。 色が見えなくても、数字と形で全部読み取れます。

さわった場所は、どこにも送っていません

指をどこに置いたか、何本置いたか、どれだけ強く押したか ── これらは全部このページの中だけで計算しています。通信もしませんし、保存もしません。ページを閉じれば、その時点で消えます。

ついでにもうひとつ。 Pointer eventsの決まりには安全とプライバシーの章があって、「傾き・角度・接触の形・圧力の値は、利用者の機器のセンサーに直接つながっているので、この仕様はサイトにそれらのセンサーへの入口を与えることになる」と書かれています。 さわり方の細かい数は、機械を見分ける手がかりにもなりうる、ということです。 だからこのページは、出すだけにして持ち出しません。

決まりの出どころは、ポインタの定義・pointerType・pressure・widthとheight・touch-action・キーボードへの注意・ 安全とプライバシーの章がW3C の Pointer Events（新しいタブで開きます）、タッチ専用の決まりのほうがW3C の Touch Events（新しいタブで開きます）、キーボードと色の話がWCAG 2.2（新しいタブで開きます）（達成基準 2.1.1 と 1.4.1）です。 引用した文はすべて原文にあたって確かめ、書かれていないことは書かないようにしました── 圧力の既定値が0.5である理由を断定していないのは、そのためです。