🔰

【初心者向け】Tampermonkey で JavaScript に触ってみよう

2023/02/09に公開

JavaScript

初心者

Tampermonkey

tech

Tampermonkeyは、Webサイトでいわゆるユーザースクリプト（Greasemonkeyスクリプトとも呼ばれる）を実行するために使用されます。
ユーザースクリプトは、ページのレイアウトを変更したり、新しい機能やコンテンツを追加または削除したり、アクションを自動化したりする小さなコンピュータープログラムです。

Tampermonkey をインストールすることで、表示されているページに自作の JavaScript を追加して動作・表示をカスタマイズできるようになります。

作例：書店サイトから必要な情報を整形して表示する

赤枠の部分が今回のスクリプトで追加された部分。ページから必要なデータを抜き出してまとめています。

書店のページにアクセスすると自動で必要な書誌情報を整形して、ページ上部に表示するというツールも簡単に作ることができます。

具体的な手順

拡張機能をインストールしたらメニューバーにアイコンが表示されるようになります。

クリックして 新規スクリプトを追加 のメニューを選択すると、新規タブでエディタが開きます。

デフォルトで // から始まる数行（コメント）と (function() {})(); という JavaScript が表示されるはずです。
先頭のコメントはスクリプト自体についてのメタ情報で、「●●のサイトにアクセスしたらこのスクリプトを実行する」などの指定をします（詳細はこちらなど）。とはいえこのエリアを直接編集することはあまり多くありません。
上図は Zenn のページ上で開いたため、 @match などがその情報であらかじめ埋めてありますね。

実際に JavaScript を書くのは // Your code here... 場所です。

今回は入門ということで先頭の数行部分も含めていったん全部空にしてから、

下記のスクリプトを貼り付けてみてください。

// ==UserScript==
// @name         kinokuniya
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        www.kinokuniya.co.jp/f/dsg-*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=kinokuniya.co.jp
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  // 必要な箇所の文字を抜き出す
  const title = document.querySelector("#main_contents div.right_box > h3").innerText;
  const human = Array.from(document.querySelectorAll("#main_contents div.right_box > div.infobox > ul > li:nth-child(1) > a"))
    .map((el) => {
      return el.innerText.replace(/\s/g, "").replace(/[【】]/g, "");
    })
    .join("・");
  const publisher = document.querySelector("#main_contents div.right_box > div.infobox > ul > li:nth-child(4) > a").innerText;
  const pubDate = document.querySelector("#main_contents div.right_box > div.infobox > ul > li:nth-child(4)").innerText.split("/")[0].replace(/[^\d]/g, "") + "年";

  const detailInfo = document.querySelector("#main_contents div.right_box > div.infbox.dotted > ul > li:nth-child(1)").innerText;
  const bookSize = detailInfo.split("／")[0].replace(/^.+\s/g, "");
  const nPages = detailInfo.split("／")[1].replace(/^.+\s/g, "").replace(/p$/, "頁");
  const price = document.querySelector("#main_contents div.right_box > div.infobox > ul > li:nth-child(3)").innerText.replace(/^.+本体/g, "").replace(/[^\d]/g, "") + "円";

  // html を文字列として生成
  const markup = `
  <div id="bookinfo" style="background:#333;color:#36d184;padding:.5em;text-align:start;font-family:sans-serif;">
  『${title}』（${human}，${publisher}，${pubDate}，${bookSize}，${nPages}，${price}）
  </div>
  `;
  // ページ上にサシコミ
  document.querySelector("#main_contents").insertAdjacentHTML("beforebegin", markup);
})();

JavaScript の細部についてはここで詳細には説明しません。
ごちゃごちゃ書いてあるように見えますが、やっていることは単純です。

ページの html から必要な箇所の文字を抜き出す
抜き出した文字列を組み合わせて新たに文字列として html を作る
ページの特定箇所に要素として追加する

貼り付けたら Ctrl+S で保存します。
スクリプトは対象ページを訪問した時点で動き出すので、変化しない場合はページを更新してみましょう。

やってみよう！

それぞれ、スクリプトを更新したら対象ページを更新するのもお忘れなく。

初級編：表示内容の変更

『${title}』（${human}，${publisher}，${pubDate}，${bookSize}，${nPages}，${price}） の部分を書き換えてみましょう。著者名を後にしたり、ページ表記を削除したりできます。

上級編：表示内容を増やす

ISBN を取得して表示させてみましょう。セレクタを考えて、さらに取得した文字列を整形する必要があるので相当歯ごたえがあるはずです。

トラブルは学びのチャンス！

対象サイトのデザインが変わって要素が取得されなくなった！

→ CSS セレクタ＆正規表現について調べるチャンス！

CSS セレクタというのは、document.querySelector() のカッコ内に書いているもので、ページ上で要素を特定するための番地のようなものと考えてください。
サイトリニューアルなどでページの構造が変わると、抽出のためのセレクタも書き直す必要があります。
ブラウザの開発者ツールを活用するなどして対応してみましょう。

追加した表示部分がダサい……

→CSSについて学ぶチャンス！

追加部分の見た目は background:#333;color:#36d184;padding:.5em;text-align:start;font-family:sans-serif; と書いている部分で指定しています。
逐語訳すると、「背景色をほぼ黒にして、文字色を緑っぽくして、周囲を文字の半分のサイズだけ開けて……」といった形です。
CSS を工夫すれば相当おしゃれに仕上げることもできます。おしゃれなサイトを見つけて、開発者ツールでどのように表現しているか調べて参考にするのも勉強になります。

デフォルトのエディタが使いにくい……

→テキストエディタについて調べるチャンス！

極論を言えば Windows のメモ帳でスクリプトを書くこともできます。が、そこまでストイックになる必要はありません。
たとえば Visual Studio Code は無料なのが信じられないほど高機能です。最近は AI も開発を手伝ってくれるとか。使わない手はありません。

思った通りに動かない……

プログラムは思った通りには動きません。書かれたとおりに動きます。 （詠み人知らず）

書いたスクリプトがおかしくても、それでパソコンやサイトが壊れることはまずありません。
書き方がNGならエラーとして開発者ツールの コンソール に表示してくれます（元々のサイトの内容に対して出ているエラーとの区別が難しいということはありますが……）。

トライアル＆エラーで学んでいきましょう！

Enjoy!