More than 1 year has passed since last update.

#Scratch 3.0 のキー入力イベントをブラウザのコンソール（開発者ツール）の JavaScript からランダムに繰り返し発生させてみる

Last updated at 2022-05-03Posted at 2022-05-03

今回の内容は、以下のツイートの動画に出てくるような仕組みなどを実現できるものです。

ブラウザの操作をページ外部から自動で行う仕組みは「Microsoftさんの Playwright」や「Googleさんの Puppeteer」などがあります。
今回は、そういったものを使うまでもない簡単なキー入力の処理を、ページ外のプログラムから実行するという方向の話です。

仕組みの概要

今回の仕組みは、開発者ツールのコンソールから JavaScript のプログラムを実行する構成になっています。冒頭の動画での処理は、Chrome の開発者ツールのコンソールを開き、そこにこの後に掲載している JavaScript のプログラムを貼り付けて実行することで実現しています。

実行するプログラム

Scratch

冒頭の動画上でも出ていますが、Scratch の音を鳴らすメインの処理は以下となります。

JavaScript

開発者ツールのコンソールで実行したプログラムは以下の通りです。即時実行関数で処理しています。また、キーのイベントは上と左右の矢印キーの 3つを用いていて、それを 1秒ごとにランダムに実行しています。

(function loop() {
  const events = [
    new KeyboardEvent("keydown", { key: "ArrowRight" }),
    new KeyboardEvent("keydown", { key: "ArrowLeft" }),
    new KeyboardEvent("keydown", { key: "ArrowUp" }),
  ];
  const keydownArrow = document.dispatchEvent(
    events[Math.floor(Math.random() * events.length)]
  );

  setTimeout(function () {
    keydownArrow;
    loop();
  }, 1000);
})();

これで冒頭に掲載していた動画のように、JavaScript のプログラムから Scratch上でのキーイベントを発生させることができます。処理の停止はブラウザのページのリロードや、ページを閉じたりすることで対応できます。

キー入力 1回分の処理を実行

キー入力に関するシンプルな動作確認のみを行う際には、以下の短いプログラムを使うのが便利です。1回だけキーを押すイベントを発生させるという内容です。

document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp" }));

繰り返し処理の簡単なテスト

こちらも動作確認用です。以下は setTimeout を使った繰り返し処理の動作テストに使ったものです。コンソールに1秒ごとに「test」という文字列が出力される処理になります。

(function loop() {
  setTimeout(function () {
    console.log("test");
    loop();
  }, 1000);
})();

参考情報

以下のリストは、今回の内容に関連する情報が掲載されたページをまとめたものです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up