クッキークリッカーのクリック自動化 (Chrome Developer Tools の初心者向け解説)

ボット・クローラー Advent Calendar 2016 4日目の記事です。

昔懐かしのクッキークリッカーのクリックを自動化してみます。

クッキークリッカー日本語版

一応知らない人のために概要だけ書いておくと、クッキーをクリックするとクッキーが増えるだけのシンプルなゲームです。

クリック自動化処理

Chrome の Developer Tools Console を開き、以下を実行します。

// 20msに1回 (1秒間に50回) クッキーをクリックする
// ※実際には PC やゲーム処理のパフォーマンスがあるのでもっと少ない回数になるはず
window.$ = $;
setInterval(function(){
  $('#bigCookie').click();
}, 20);

以上、これだけなのですが今回は Web 解析初心者向けの解説も入れます。

クッキークリック部分要素の特定

ゲーム画面のクッキー部分を右クリックして「検証」をクリックすると、
f:id:kobake:20161202132853p:plain

こんな感じにクッキー部分が HTML 内のどの要素に該当するか確認できます。
f:id:kobake:20161202132952p:plain

これにより、クッキー部分の ID が "bigCookie" であることが分かったため、これを用いて処理を行います。

任意 JavaScript の実行

要素の「検証」により登場した Chrome 下部のパネルがいわゆる Developer Tools と呼ばれるものなのですが、この中の「Console」タブを開くと、ここで任意の JavaScript を実行できます。

f:id:kobake:20161202133824p:plain

特定要素のクリックのエミュレート

これは jQuery の知識が少し必要になるのですが（というか厳密にはこのサイトでは jQuery ではない別ライブラリが使われているのですが慣習は一緒なので説明は端折ります）

$('#bigCookie').click();

という処理を実行するとクッキー部分のクリックをエミュレートできます。

Console 内でこれを実行するとクッキーの個数が1つ増えることが確認できるかと思います。

処理の定期実行

こちらは jQuery ではなく JavaScript で使える機能なのですが、

setInterval(function(){
  // 処理
}, 20);

のようにすると、20ミリ秒毎に「処理」の部分が定期的に呼ばれます。
数値部分を変えれば処理の間隔も変わります。

まとめ

というわけでクッキークリッカーのサイト上で Chrome Developer Tools の Console を開き以下スクリプトを実行するとクッキークリック処理が自動で連続実行されることになるわけです。

window.$ = $; // ※このサイトでは $ が setInterval 上で参照できないのでここでグローバル化する
setInterval(function(){
  $('#bigCookie').click();
}, 20);

f:id:kobake:20161202140928g:plain:w400

どんどん改造しましょう

Web のちょっとした改造や自動化は Web をゼロから構築するよりもお手軽で良い勉強になります。いろいろ試してみましょう。（Web サービスに害を与えない範囲で）

clock-up-blog

junk-junction