Googleの「スーパーマリオブラザーズ」検索結果ではじめるJavaScript

若干今更な話ですが、Googleで「スーパーマリオブラザーズ」と検索するとハテナブロックが表示されるようです。

スーパーマリオ - Google 検索

クリックすると、コインが出ます。音も出ます。

楽しいですね。オフィスで教えてもらってクリックしてたら、「100回叩くと1UPするらしい」と聴きました。でも100回クリックするのは面倒です。

そこで、JavaScriptを使って簡単に連打するScriptを書いてみます。

要素の特定

まずクリックする要素を特定します。 これはハテナブロックのHTML要素をクリックした際にコインを出すようになっているようなので、ハテナブロックのHTML要素を特定します。

Google Chromeで開発者ツールを利用するのがおすすめです。開発者ツールはMacでは Command + Option + i で表示してくれます。

開発者ツールでハテナブロックの箇所を確認します。
開発者ツール左上の虫眼鏡ボタンをクリックすると、画面上をホバーすることで要素確認が可能になります。

虫眼鏡ボタンを押したら、画面上でハテナブロックの要素をクリックしてみましょう。

id="kno-mcbeeq" 要素がどうやらハテナブロックのようです。点滅してるため、開発者ツール上でもやたら内容が書き換わっていますね。

これで特定は完了です。

要素の取得

id="kno-mcbeeq" を、JavaScript上から取得してみます。 開発者ツールのConsoleに、

var button = window.document.getElementById('kno-mcbeeq');

と入力してみましょう。(Consoleは開発者ツール上で Esc キーを押すと出てきます。) その後、

button

と入力すると、

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAYAAADNkKWqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAEzsAABM7AGDAxoUAAAAB3RJTUUH3wgaFgUn4L5mjAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAEMklEQVR42u3dsU3DQBSAYR/KDqF1JrFExwbpLXkI196AxpL7bECH5EmSlkxhGmokk7N4+L5vgFO4S349qpfepqXK6fXjOe+BAN/eXz5TzvOeXClQKgEEBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQYGvpej5m3eFRd61bBbYJVjOYAAEEEEAAAQQQQAABBBBAAAEEEEAAAQEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQID/4BD9A+beAbDMvVcHvzcTIOBfYAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQTYUvidIKXt8LiNk29lIHXXFvX3lvZ7MwEC/gUGEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAgI0cXMFjou/wOF3uRb3H9XwM/b6l7RgxAQIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCAggACFshOEVZa5D/35ou9oSc1Q1HuYAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBAQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAgAwOruAxdddmPS81Q1H3dxsnXyJMgAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCAgggAACCCCAAAIIIMDe2AkSzDL3oT9f9B0ep8vdlwgTIIAAAggggAACCCAggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCPDX7ASBH0Tf0YIJEEAAAQQQQAABBBBAAAEEEBBAVwAIIIAAAggggAACCCCAAAIIIIAAAggggAACCCBASHaCsErdtVnPS83gUjEBAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAgggIIAAAggggAACCCCAAHtjJwir3MYp63nX8zHrebl3lmACBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBPgFO0HYldQMWc9b5t6lmgABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAAB1gq/E8SOh1jqrg39vvi9mQABBBBAAAEEEEAAAQF0BYAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAgQQfieIHR775n29hwkQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABAQQQQAABBBBAAAEE2KFUVdXiGgATIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIEA2X/PYTfkmqM1HAAAAAElFTkSuQmCC" id="kno-mcbeeq" alt="Mario coin block" style="height: 100%; transform: translate3d(0px, 0px, 0px);">

と出力されると思います。ハテナブロックのHTML要素と一緒ですね！

これでJavaScriptからは button 変数でハテナブロックを操作可能になりました！

要素のクリック

試しにJavaScript上から一度クリックしてみましょう。

引き続き、開発者ツールのConsoleに、

button.click();

と入力してEnterを押してみましょう。すると、クリックした時と同じようにコインが出てきますね！ これは先ほど取得したハテナブロック要素をclickしてね！とJavaScript上で命令する処理になります。 何度も button.click(); を書けば、その分だけクリックしてくれます。

繰り返しクリック

とはいえ、100回クリックする分だけ書くのは面倒です。 そこで、

var intervalID = setInterval(
  function(){
    button.click();
  }, 200
);

をコンソールに貼り付けてEnterを押しましょう。 こんな感じで自動でクリックしてくれるはずです！最高ですね！！

止めるには、

clearInterval(intervalID);

を実行します。

解説

var intervalID = setInterval(
  function(){
    button.click();
  }, 200
);

setInterval(function, delay) は、一定期間(delay, 単位はミリセカンド)ごとにfunction内の処理を実行してくれる関数です。上の例では、「200ms(0.2秒)ごとに button.click(); を実行してね」という処理になります。

window.setInterval - Web API インターフェイス | MDN

このsetIntervalという関数は、処理を行う際にIDが割り当てられます。止める際にはID指定で「このIDの処理を止めてね」という命令を出して処理を止める必要があります。それが clearInterval(intervalID);になります。

また、200 の数値をさらに小さくするともっと早くできます。小さすぎるとPCが重くなるので注意！

コイン出過ぎ！確かに1UP音も時々出てるようです！

まとめ

JavaScriptを知っていると、簡単な記述でちょっとしたHackができます。

Cookie Clicker も自動で楽に出来たりするので知ってるとおすすめです！

JavaScript 第6版