はじめに
昨今の生成AIは急速に進化しており、AIを使いこなせるかどうかが生産性に直結すると言っても過言ではない時代に突入しています。
Xでは自分用のアプリを作ってみたり、Slackなどを自動操作したり、それはもう大掛かりな活用方法が乱立しており、日に日に新しいアイデアが生まれています。
しかし、これらの素晴らしいアイデアは見る分には楽しいですが、実際に作ろうとなると、意外と大変だったりします。
この記事ではGreaseMonkeyというブラウザの拡張機能を利用して、1から自作アプリを作るのではなく、普段よく使うWebサイトに、ちょっとした機能を一瞬で追加していきます。
本記事で扱うこと
- Greasemonkeyの使用方法
- Qiitaのホームページにトレンド記事のタグフィルタ機能を追加
扱わないこと
- 生成AIの使い方、環境構築
- 大規模アプリの一からの開発
- 完全自動・24h運用
Greasemonkeyとは
Greasemonkeyとは、各種Webサイトで任意のJavaScriptを実行することができるブラウザの拡張機能です。
本記事ではTampermonkeyを使用します。GreasemonkeyはFirefoxの拡張機能であり、同等の機能をChrome等マルチブラウザで提供しているものがTampermonkeyになります。
代表的なユースケースは以下の通りです。
- DOM操作
- ボタン自動クリック
- 入力補完・UI改善
ブラウザ上で任意のjavascriptを実行することで、ある程度自由にWebサイトをカスタマイズして使用できます。
また、javascriptはブラウザ上で実行されるためローカル環境での環境構築は一切不要です。
Greasemonkey×生成AI
GreasemonkeyはWebサイトの上で動く性質上、どうしてもHTMLの読み込みやDOMの追加などめんどくさい部分がありました。
しかし時代は生成AIです。そう言った部分は全部AIに任せることができます。
生成AIがやること
- WebサイトのHTML読み込み
- javascriptコードの開発
人間がやること
- Webサイトの情報を渡す
- やりたいことを伝える
使ってみよう
本章では、Qiitaのホームに表示される「トレンドの記事」にて、特定のタグを持つ記事のみを表示する機能を実装してみます。
1. GreaseMonkeyの準備
まずはご利用のブラウザにTampermonkey拡張機能を追加しましょう。
そしたらqiita.comを開きます。
拡張機能をクリックし、新規スクリプトの追加を選択してください。以下のような画面になるはずです。
Userscriptでは、スクリプトの名前や作者、スクリプトを使用するWebサイトのURLなどを定義します。ここも生成AIがいい感じにしてくれるのであまり意識する必要はありません。
function()の中に、実際に行われる処理を記述します。
まずは生成AIの力を借りる前に自分で少し遊んでみましょう。
以下スクリプトをコピーしてUserScriptの下に貼り付けてみてください。
(function() {
'use strict';
const text =document.createElement('div');
text.textContent = "Hello World";
text.style.padding = '8px';
text.style.backgroundColor = '#ffffcc';
document.body.prepend(text);
})();
できたらCtrl+Sでセーブし、Qiita.comをリロードします。
はい、表示されました。簡単ですね。
表示されない方は、
- 拡張機能のアイコンに「1」と表示されているか
- スクリプトがセーブできているか
- スクリプトの@matchがhttps://qiita.com/となっているか
などを確認してみましょう
@matchをhttps://qiita.com/*とすることでqiita.com配下のページも対応させることが可能です。
2. 実践
では、本記事の目的である「Qiitaのホームに表示される「トレンドの記事」にて、特定のタグを持つ記事のみを表示する機能」を実装してみましょう。
と言っても自分で実装するわけではないので、生成AIにお願いします。
ClaudeCodeでもChatGPTでもお任せします。生成AIの使い方はインターネットに溢れている他の記事をみてください。
開発を始めるにあたり、最低限必要な情報が2つあります
①対象WebサイトのHTMLを取得
まずは対象のWebサイトのHTMLファイルが必要です。F12か右クリック→検証で開発者ツールを開き、2行目付近のタグを選択し右クリック→コピー→copy elementでコピーしましょう。
そしたら適当なhtmlファイル(qiita.htmlなど)を作成し、ペースとして保存します。
②Greasemonkeyスクリプトのテンプレート取得
これは先ほどと同じく、対象のWebサイト上で拡張機能の「新規スクリプトを追加」ボタンを押します。
そしたら適当なjsファイル（script.jsなど）を作成し、デフォルトのスクリプトをコピペし保存します。
これらの2つを取得したら、AIに以下のように問いかけてみましょう。
Greasemonkeyスクリプトを開発したいです。
対象のページは<ファイル名>.htmlであり、テンプレートは<ファイル名>.jsです。
// ブラウザ上などで生成AIを利用している方は、内容をコピペしても大丈夫です
Greasemonkeyスクリプトは以下の機能を持ちます。
- おすすめの記事をタグでフィルタリング
- ヘッダーの下にフィルタリング用のUIを設置し、そこで選択したタグの記事のみを表示
テンプレートをもとにスクリプトを生成してください。
内容は簡素化しています。よしなに対話しつつ要件を伝えてみてください
そうしたらAIがjsファイルを出力してくれるので、その内容をブラウザのGreasemonkeyエディタにコピペします。
内容を保存した後、Qiita.comをリロードしてみてください。
タグ絞り込みボタンが出てきています。
例えばCiscoとかで絞ると、おすすめの記事にはciscoタグのついたものしか表示されなくなっています。
ものの数分で、Qiitaのホームにタグフィルタ機能を実装することができました。
もし想像した通りに動かない場合は、F12から開発者ツールを開き、Consoleタブに出力されている内容をコピペして生成AIに伝えてみましょう。
いっぱい出力がある場合は右クリック→save as...でファイル化してしまうのもいいです。
応用
今回は便利ではあるが、比較的実装が簡単な機能を追加してみました。
それでも人力でこれを開発するには結構な気合が必要です。
本拡張機能は歴史も古く、アイデア次第で無限の可能性を秘めています。
例えばQiitaのWebサイトだけでも以下のアイデアが浮かび、いずれも簡単に実装可能です。
- OpenAIなどのエンドポイントを叩き、記事の要約を表示
- 任意のカラーテーマや、特定のタグのみを色付け
- わからない言葉を選択し任意のボタンを押すと、説明が画面に表示される
- トレンド記事のタグの割合やランキングを表示
さらにQiitaだけでなく任意のWebサイトで使用可能ですので、ぜひ痒い所に手が届く機能を実装してみてください。
自分はブラウザ上にポモドーロタイマーを表示させたり、ショートカットキーで現在のURLをtinyURLに変換するようなスクリプトを自作し愛用しています。
注意点と限界
Greasemonkeyを使えば、Webページの見た目や挙動を自分好みにカスタマイズできます。AIにスクリプトを書かせれば導入のハードルはさらに下がりますが、いくつか注意が必要です。
まず、ユーザースクリプトはページのDOM構造に依存するため、サイト側の改修で突然動かなくなることがあります。また、対象サイトの利用規約でスクリプトによる改変やデータ取得が禁止されている場合もあるため、事前に確認しておきましょう。
スクリプトにはAPIキーや認証情報を埋め込まないよう注意し、AI生成コードはそのまま信用せず、必ず自分の目でレビューしてから使いましょう。
またご利用は自己責任でお願いいたします。
まとめ
Greasemonkey自体は、知る人ぞ知る昔ながらのツールでした。しかし、生成AIと組み合わせることで簡単にWebサイトを自分好みにカスタマイズできる拡張機能へと進化します。
欲しいものは自分で実装する時代である今、新しいものを0から作るのではなく愛用してる既存のWebサイトにもいろんな機能を実装してみてはいかがでしょうか。
本記事では紹介していない機能も山ほどありますので、ぜひAIと話しつつGreasemonkeyを活用してみてください。