配信にて
コメント: 「四葉公クリッカーの記録ってオトクリなしなのかな」
某葉公さん: 「止めないよ」
という会話がありました
…これは作るしかないでしょう。
さて今回は、このサイト向けにJavaScriptで簡単にオートクリッカーを実装しようという魂胆の記事になっております
また、今回はChromeで解説しますが、ほかのブラウザでもできると思います
オートクリッカーが認められていないサイトなどでやらないでください
基本となる技術について
まず、ウェブサイトを解析するには以下の言語を知っておくべきです
- html
- css
- javascript
これらは上から、ページの構造、見た目、動きを担当しています
今回はhtmlとjavascriptを使います
html
では、htmlとはどのようにウェブサイトの構造を作っているのでしょうか
まずは実際に例を見てみましょう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>タイトル</h1>
<p>内容</p>
</body>
</html>
何か特徴的な書き方ですね
大体が<名前>と</名前>で囲まれており、これら一つ一つを要素と呼びます
まぁここではあまり深く解説しませんが、要素の名前と意味はこんな感じです
| 名前 | 意味 |
|---|---|
| head | ページの中には表示されないデータなどを示す |
| body | ページ上に実際に表示するもの |
| h1, h2, h3... | タイトルや見出し、数字が小さいほど大きなまとまり |
| p | 段落 |
| button | ボタン |
| script | JavaScriptなどのコードを埋め込む、サイトの中には表示されない |
これくらいわかってれば今回は大丈夫です
JavaScript
はい、ここが今回のメイン
要素をいじったりできるやつです
一から説明するのは無理なので、ちゃんと知りたい人は他のいい記事を見てください
変数
まずは定義の仕方から
let 変数名 = 値;
このようにすると、値をいちいち長ったらしく書かなくても、変数名を書くだけで呼び出せるようになります
そして、
変数名 = 値;
とすると定義された変数の値を後から帰変えることができます
定数
const 定数名 = 値;
はい、似てますね
実際に、後から値を変更できないだけの変数みたいな感じです
関数
まずは定義から
function 関数名() {
//中身
}
//ほかにも
const 関数名 = ()=>{
//中身
}
//などの書き方がある
関数というのは、後から中身に書いたものを実行できるというものです
引数というめっちゃ使える機能は割愛
そして、その関数の呼び出し方は、
関数名();
です。簡単だね。
ひとまず基礎の基礎はこんな感じでしょう
サイトで使用されている技術について
あのサイトは結構構造がわかりやすい上、コードの中にコメントなどが残されています
Ctrl + Shift + Iなどで開発者ツールを開いて、要素またはElementsから以下のような部分を探します
<script src="clicker.js?v=8"></script>
このsrcにあるリンクを開いてみましょう
するとクリッカーのメインのコードが見られます
メインのボタン
それでは一旦クリッカーの要素タブに戻ります
要素の左側にページ内の要素を選択して検査というものがあります
これは、ページ内に表示されている要素が、コードの中のどこに当たるかを確認できるツールです
これをクリックしてメインのボタンを選択してみましょう
すると以下のようなhtml要素が選択されると思います
<button id="clickTarget" class="..." type="button" aria-label="..." data-name-tpl-aria="...">
<img id="clickImage" src="..." alt="">
<span id="clickFallback" class="clickFallback" hidden="">...</span>
</button>
このボタンのid=というところ。これはJavaScriptなどで要素を扱うためのidを割り当てています
クリッカーとして機能するためには、clicker.jsの中に「clickTargetというidのボタンがクリックされたら値を増やす」的な処理が入っていると予想できますね
ボタンのクリック判定
では、そのボタンのクリック判定を探してみましょう
JavaScriptには、特定のidの要素を取得する関数があり、getElementByIdといいます
その中でも、clickTargetというidの要素を取得するわけですから、getElementById('clickTarget')というように指定されているはずです
clicker.jsに移動してCtrl + Fなどで調べてみましょう
すると、こう書かれていました
const elClickTarget = document.getElementById('clickTarget');
clickTargetというidの要素をelClickTargetとして扱うってことですね
今度はelClickTargetで検索してみましょう
すると、以下のような文があると思います
elClickTarget.addEventListener('pointerdown', (e) => {
//省略
});
こちらは、pointerdownというイベントが発生したら関数を実行する、というものです
pointerdownイベントというものは、マウスや指、ペンなどでタッチされ始めた時に起こるイベントです
…どうやらメインの処理はこいつでまちがいないようですね
今回オートクリッカーを作るにあたって、このイベントを一定時間ごとに発火させればいいということになります
実際にオートクリッカーの処理を書こう！
では、実際にオートクリッカーを作ります
クリッカーのページを開き、開発者ツールでコンソールを開いてください
ここはサイト上でJavaScriptを実行できる場所です
Enterを押すと実行されてしまうので、改行時はShiftを押してね
ボタンの要素を定義する
まず要素を定数で定義しましょう
clickTargetというidがあることはもうすでにわかっているので、このようにすればいいですね
const btn = document.getElementById('clickTarget');
pointerdownイベントを発火させる
では、この要素にクリック判定をさせないといけませんね
イベントというのは種類が分かれていまして、今回のpointerdownはPointerEventに分類されます
pinterdownという名前のポインターイベントをつくるためには以下のように書きます
const event = new PointerEvent('pointerdown');
ただ、これだけではイベントを作成しただけで要素に渡していません
要素に渡すためには以下のようにします
btn.dispatchEvent(event);
実際にここまで実行すると一度クリックされた判定になっていることがわかると思います
一定時間ごとに処理をする
ではラストステップ
一定時間ごとに関数を実行させる関数というものがありまして、それがsetIntervalです
第一引数に関数を取り、第二引数に時間を取ります
時間指定はミリ秒単位なので1秒に20回だと1000 / 20 = 50となりますね
まとめて
それでは今までの処理をまとめて実行してみましょう
以下のコードをコンソールに張り付けて実行してみてください
const btn = document.getElementById('clickTarget');
setInterval(()=>{
const event = new PointerEvent('pointerdown');
btn.dispatchEvent(event);
},50);
…圧巻ですね
しかもこれ、マウスは別の操作ができるんですよ
こんな記事書いてよかったんでしょうかってレベル
最後に
ここまで読んでいただいた皆様、ありがとうございます
私がこの記事で何を言いたかったかって言うと…
ウェブサイトって自作も改造も結構簡単にできるんだぜってことです
この記事で、自分もバカなことがしたいなどと思ってくださった方、是非html+css+JavaScriptを学んでみてください
そして、プログラミング関連で困ったことがあれば是非XのDMとかまで聞いてください
私も中級者くらいですが、皆様の力になれれば幸いです
それではまたいつか…