左利きユーザーにだけ影響したWordPressのバグ

 (shkspr.mobi)
1 ポイント 投稿者 GN⁺ 4 시간 전 | 1件のコメント | WhatsAppで共有
  • モバイルでスクロール中にコメント返信ボックスが突然開いてしまう問題があり、右手の親指でスクロールしていたサイト運営者は再現できなかった
  • 原因はページ左側のreplyリンクとWordPressのtouchstart処理にあり、左手の親指でのスクロールが意図しないリンクタッチにつながることがあった
  • このバグは7年前にWordPress Tracですでに報告されており、関連コードは2017年にWordPress開発リポジトリへ追加されていた
  • 過去にはタッチとダブルタップズームを区別するための300ms遅延回避が必要だったが、2013年のChromeの記事や2015年のFastClick資料の時点で、すでに古い問題だった
  • 修正はWordPressのコードから数行を削除する形で、モバイルスクロール中の望まないコメント返信動作を減らすことに焦点がある

ブログ最適化とコメントJavaScript

  • WordPressの基本インストールの上に複数のカスタム修正を適用し、ブログを可能な限り最適化している
  • JavaScript使用量を最小限まで減らし、JavaScriptなしでも機能が動作するよう構成している
  • ただし一部機能ではJavaScriptが役立っており、最も目立つ例がコメント機能である

左手スクロールでのみ表面化した問題

  • 読者からサイトのバグ報告があり、ページをスクロールしている途中でコメントボックスが突然現れ、閲覧を妨げていた
  • サイト運営者は頻繁にスクロールしていたが右手の親指を使っていたため、同じ問題に気づかなかった
  • バグを報告したユーザーは左手でスクロールしており、問題のreplyリンクはページ左側にあった
  • 右手の親指スクロールでは表れにくかったタッチイベントが、左手の親指スクロールでは意図せず発生することがあった

WordPressのtouchstart処理

  • この問題はWordPress Tracで7年前に報告されていた
  • 2017年にWordPress開発者がリンククリックにtouchstartリスナーを追加した
  • 当時のブラウザは、タッチイベントがクリックの開始なのかダブルタップズームの開始なのかを確実に区別できなかった
  • リンクでタッチが発生した際にイベントを先に発火させる方式は、当時300ms遅延を避けるための処理と見なせた

すでに消えた300ms遅延問題

  • 300msのタップ遅延はかなり前から同じ形の問題ではなくなっていた
  • 2013年のChrome開発者ブログ記事では、その遅延問題が解消されたことを扱っている
  • 2015年のFastClick資料の時点でも、この問題はもはや解決すべき主要課題ではなかった
  • したがって、2017年に左手スクロールのユーザーを悩ませる形のコードがなぜ追加されたのかは明確ではない

修正方法と期待される効果

  • バグ報告から7年後、WordPress修正PRがコミットされた
  • 修正は複雑な変更ではなく、WordPressのコードから数行を削除する方式である
  • この変更により、モバイルスクロール中にreplyリンクが意図せず動作してコメント返信ボックスが開く問題を減らせる可能性がある
  • <meta handed="right">のような利き手別のアクセス制限機能は存在せず、今回の変更は望まないタッチイベントを防ぐことに焦点がある

関連記事

1件のコメント

 
GN⁺ 4 시간 전
Lobste.rs のコメント

  • 世の中のあまりにも多くのものが右利き基準になっている。ペンの広告文句も、右手で持たないと読めない向きになっていることが多い。
    それでも左利きとして生きていると、生まれつきの広告ブロック機能が少しはあるようなもの。

    • なんてことだ。ペンや鉛筆の文字が持っているときに読めるように配置されているって、今になって気づいた。左利きの持ち方だといつも逆さに見えるというのも初めて知った。
    • その説明に合うペンを思い浮かべようとしたけど無理だった。ペンの写真まで探してみたが、やはりよく分からず、ひとつだけ近そうで条件に合うかもしれない高級ペンが思い浮かんだだけだった。

  • “sinister disposition” とは笑える。sinister と dexterous（dexter）が文字どおり、それぞれ「左」と「右」を意味するのだと知った日のことを覚えている。
    規範から外れること → 悪、という、私たちがいまだに抱えて生きている文化現象は今でも興味深い。

    • 左手優位がかなり強いけれど、両手でできるいくつかの作業については、たいてい “ambi-dexterous” という表現を拒んで、自分のことを omni-sinisterous と呼んでいる。
    • 複数のインド・ヨーロッパ語族の言語では、「右」を意味する単語には共通の語源があるが、「左」はそうではない [1]
      おそらく、左を意味していた元の単語がタブーになって新しい単語に置き換えられ、その新しい単語も後にまたタブーになる、ということが繰り返された可能性が高い。
      [1]: https://reddit.com/r/asklinguistics/…

  • 人は普通、主に使う手だけでスマホを持つものなのか？ 左利きだが、スマホは両手をほぼランダムに同じくらい使っていて、みんなそうだと思っていた。

    • 左利きだけど、スマホはほとんどいつも右手で持つ。理由は単純。
      最初は右手でスマホを持って左手で操作していたが、時間がたつにつれて右手の親指でやることがどんどん増え、結局そこが主な操作ポイントになった。
      マウスも右手で使うが、子どものころコンピューター室のマウスケーブルが短くて、左側に移して使えなかったからだ。
    • サンプル数1だが、タッチスクリーンでのタイピングは利き手でやるほうが確実に速い。両手とも可能ではあるし手書きほど難しくはないが、画面を少し見るとか数回スワイプする程度を超えると、利き手のほうが楽だ。
    • 左利きはある程度両利きっぽい傾向を持つようになるものだ。世の中が私たちに右利きになれと強く求めてくるから。
      自分も左利きだが、手書きのように右手でやることが多い。ピアノでも右手が優位で、ほとんどの曲の書かれ方も間違いなく影響しているはず。スマホも両手を使う。
    • 画面を見る以上のことをするときは、実質ほぼ常に合うほうの手だけを使う。
    • 右利きだが両手を使う。右手を少し好むけれど、簡単にテストしてみたところ、スマホでは右手より左手でのタイピングのほうが良さそうだ。
      ただし2〜3文を超えると、両方の親指で入力する。

  • 興味深いことに、他のほとんどすべてのことは右手でするのに、スマホは左手で持って使うほうに傾いている。
    理由はよく分からないが、スマホを左ポケットに入れ、財布と鍵を右側に入れているからだと思う。鍵を使ったり財布を取り出したりするのは利き手でやるほうが楽だ。自分が変わっているのか気になる。

    • 私もまったく同じで、理由もまさにそれ。スマホは左ポケットに入っているので、取り出すと自然に左手にある。
      結局スクロールや基本操作は左手でやるが、長いメッセージを入力するときは左手で持ったまま右手でスワイプ入力することが多い。

  • そこで touchstart を使ったのがそもそも間違いだった。
    マウス、タッチ、ポインターは押したときではなく離したときに有効化されるが、押し始めた地点は同じ要素でなければならない。キーボードイベントは keyup ではなく keydown で有効化される。ただしボタンで Space が動作する場合は奇妙なことに keyup で、マウスと違って keydown がどの要素で起きたかも気にしない。
    data:text/html,<button onclick=this.textContent=Math.random()>One</button><button onclick=this.textContent=Math.random()>Two</button> のようなもので、いろいろな可能性を試せる。
    touchstart で有効化の準備をすること、たとえば必要ならサーバーからデータの先読みを始める程度なら問題なかったはずだ。だが実際の動作の実行はまだ起きてはいけないのに、element.addEventListener( 'touchstart', clickEvent ); はまさにそれを誤って処理していた。

  • これが左利きとどう関係するのか分からなかった。
    マウスユーザーなので分からない、タッチパッド特有の挙動なのか？

    • 左利きユーザーだけが遭遇したモバイルのタッチイベントのバグだった。右利きは右親指で画面をドラッグするので、指が誤動作するリンクの近くまで行かなかった。
    • 記事には明示されていなかったが、リンク先の PR を見ると、タッチスクリーン使用に関する内容であることは明らか。おそらくスマートフォンでの状況だろう。