Scratchのブロックカテゴリを自動スクロールするTips

はじめに

プログラミング環境であるScratchは今や、小中学生を中心に利用されています。このScratchでは下の図のように、左側に各ブロックの種類を選択できるボタンが配置されています。このボタンを押すと、そのブロックがある付近まで自動的にスクロールするよう、設計されています。

この記事では、独自のJavaScript（ユーザースクリプト）によって、自動的にこのカテゴリを移動させる方法を紹介します。

やり方

カテゴリを表すボタン群は、document.getElementsByClassName("scratchCategoryMenuRow")で取得することが出来ます。例えば「イベント」カテゴリの部分まで自動スクロールしようとする際に、真っ先に思いつくのがクリックさせる方法です。

イベントボタンでclickさせる

document.getElementsByClassName("scratchCategoryMenuRow")[3].click();

ただ、この方法は上手く動作しません。開発者ツールで確認すると分かりますが、ここにクリックイベントを検出するイベントリスナーは設定されていません。1つ内側のdivにはmouseupなどが設定されていますが、そこでmouseupイベントをdispatchEventしても上手く動作しません。

上手く動作させるには、blocklyToolboxDivというclass名が付与されたdivでmousedownイベントを発生させた後、目的のカテゴリボタンの内部にあるdivで、mouseupイベントを発生させてやると正常に動作します。

イベントカテゴリまでスクロールするコード

const mousedownEvent=new MouseEvent('mousedown');
const mouseupEvent=new MouseEvent('mouseup');

const hoge=document.getElementsByClassName("blocklyToolboxDiv")[0];
hoge.dispatchEvent(mousedownEvent);
const fuga=hoge.getElementsByClassName("scratchCategoryMenuItem")[3];
fuga.dispatchEvent(mouseupEvent);

なお、言うまでもありませんが、6行目の[3]を他の数字（0～8）にすると別のカテゴリへ自動スクロールさせることも出来ます。

おわりに

この情報、誰が使うんでしょうか？
なお、こうした情報を用いて何かを行う場合は以下のページを事前に参照しておくことをオススメします。

以上。