ゲームをWebGLで制作したものの、マウスのミドルクリック(ホイールボタンクリック)を押す動作をゲームの操作方法のひとつに利用していたせいで、ミドルクリックするたびにオートスクロールが発動してしまう事態があったので、あまり需要は無いですがその対策方法をご紹介します。
オートスクロールとは？
ChatGPTによると、
「オートスクロール（Auto Scroll）は、主にコンピュータやスマートデバイスのソフトウェアやアプリケーションで見られる機能の一つです。これは、特定のコンテンツ（テキスト、画像、ウェブページなど）が自動的に上下左右にスクロールすることを指します。ユーザーが手動でスクロールする必要がなく、自動的に画面上のコンテンツが移動します。」との事です。
パソコンでマウスを利用する場合、一般的にはブラウザ上でマウスホイールを押し込むことでマウスカーソルのアイコンが変化し、マウスを少しずらすと勝手にページがスクロールされるようになります。
正直使い勝手が悪いので積極的に使う人は少ないとは思いますが、Chromeには執筆時点では設定で無効に出来ない（以前は拡張機能で無効化できた）らしいので、他のブラウザを利用している人やプログラミングの知識がある人でないと無効にするのは大変だそうです。
index.htmlに書き込めば簡単。
そもそミドルクリック使わさなければ良いとか野暮な話は置いといて、自身が行った解決方法はWebGLの本体であるindex.htmlにオートスクロールを無効化するコードを書き込むことでした。
本当であれば、ブログ上でコードを記述して無効化したいのですが、ページ全体無効化で来ているのにWebGL上では無効化出来ていないという状態に陥り、結局は調べてもよく分からなかったので今回はindex.htmlにコードを書き込む方法で無効化するやり方をご紹介します。
そのため、前提としてindex.htmlの中身を変更できる権限がある事が重要です。他者や外部サイトなどから引用して埋め込む場合などには今回の方法では対応できませんのでご了承ください。そもそも対策はしてあるとは思います。
また、index.htmlの中身を変更するため、バックアップを取っておくことを推奨します。
さらに
実際にコードを記述。
まずはWebGLのindex.htmlの中身をエディターなどで開きます。
その中に<script>と書かれた行があるので、その下にこんな感じのコードを記述します。
<script>
document.addEventListener("DOMContentLoaded", function () {
var unityCanvas = document.getElementById("unity-canvas");
// ミドルクリックのイベントをキャンセル
unityCanvas.addEventListener("mousedown", function (event) {
if (event.button === 1) {
event.preventDefault();
}
});
});
Unityを利用してWebGLを作製しているため、コードの一部がUnityに引っ張られていますので、適宜変更して利用してください。
ぶっちゃけChatGPTに作ってもらったコードなので詳しい説明はできませんが、このコードを記述する事でミドルクリックを無効にできます。
動作確認のサンプル
物凄い雑ですが、実際の動作の確認用のWebGLをご用意しました。青い画面内にマウスカーソルを合わせてミドルクリックを行なうと画面内の数字が増えます。しかしオートスクロールのモードにはならないことを確認してください。それ以外の場所ではオートスクロールになります。
終わりに
以上、WebGL上でオートスクロールを無効にする方法でした。
上のサンプルを動かしてもらえれば分かるように、画面外でオートスクロールになった状態だと画面上を横切ってもオートスクロールは継続されます。ですので、完全に無効化するためには結局ブログにもオートスクロールを無効化するコードを記述する必要がありますのでご注意ください。
コメント