【Chrome拡張機能】uAutoPagerizeで未対応サイトを独自のSITEINFOで対応する方法【ChatGPT活用術】

- 18:59

こんにちは！

今回は、Chrome拡張機能「uAutoPagerize」で未対応サイトを自分で対応させる方法をご紹介します。

私がこの方法を知ったきっかけは、以下の理由です。

✅ 【なぜこの記事を書こうと思ったか？】

ページネーションと呼ばれるページ分けをいろんなサイトで見かけますが、
次へのボタンを何回も押すのは、面倒で時間もかかるため、
調べて見つけた「uAutoPagerize」で自動化しようとしました。

しかし、マイナーなサイトは標準では未対応。
さらに、ネットを探しても「SITEINFO」の作り方を解説しているサイトを参考にしても解決できず、断片的な情報ばかり……。

そこで、ChatGPTに助けてもらい、SITEINFOを専用に設定して解決できました！
今回は、その具体的手順をまとめて紹介します。

✅ 【uAutoPagerizeとは？】

簡単に言えば、ページを自動的に読み込んで、1ページにまとめてくれる素晴らしい拡張機能です。(Manifest V3 対応でFirefox版もあります)
ただし標準対応していないサイトには「SITEINFO」という設定が必要で、自力対応が必要になります。

✅ 【プロンプト（具体例）】

MY_SITEINFO のサンプルを読み込ませる

→ 土台となるSITEINFOを作成する

→ 例：以下のサンプルを元に、「https://www.○○.com/」専用に解析して、書いてください。
/*** uAutoPagerize for Chrome の MY_SITEINFO のサンプル */
// MY_SITEINFO 配列に SITEINFO を記述する
MY_SITEINFO = [
  // url, nextLink, pageElement は必須。他は省略可。
  {
    url: '^http://example\\.com/',
    nextLink: 'id("nextPage")',
    pageElement: '//div[@class="entry"]',
  },
  {
    name: 'sample',
    url: '^http://example\\.com/',
    nextLink: 'id("nextPage")',
    pageElement: '//div[@class="entry"]',
    insertBefore: '',
    exampleUrl: 'http://www.example.com/'
  }
];

// MICROFORMAT 配列に SITEINFO を記述する
// Wedata に登録された SITEINFO より後にチェックされる
MICROFORMAT = [
  {
    url: '^http://example\\.com/',
    nextLink: 'id("nextPage")',
    pageElement: '//div[@class="entry"]',
  }
];

HTMLファイルを作成し、読み込ませる
→ デスクトップで右クリックして、新規作成(W) > テキストドキュメントを選択して、「index.html」と名前を変更する。
→ 開発者ツール(F12キー)を開き、上部のElementタブから「<html lang="ja">」を右クリックして、Copy > Copy elementを選択。
→ 作成したファイルを右クリックして、メモ帳で編集を選択し、先ほどコピーしたものを貼り付けて保存。
→ 作成したファイルをChatGPTにドラッグ＆ドロップして添付し、以下のプロンプト例と合わせて解析させる。
→ 例：添付したファイルを解析し、それを参考にしてSITEINFOを修正してください。
JavaScriptファイルを読み込ませる(オプション)
→ JavaScriptによる動的ページネーションの場合、先ほどの手順に加える必要があります。
→ ページを右クリックして、「名前を付けて保存」、ファイルの種類を「ウェブページ、完全 (*.htm;*.html)」を選択して、保存。
→ ダウンロードしたフォルダ内の「jquery.js.ダウンロード」をChatGPTにドラッグ＆ドロップして添付し、以下のプロンプト例と合わせて解析させる。
(jqueryではない場合は、別のjsファイルなので色々試してみる)
→ 補足で、複数のページネーションがある場合は、該当のHTMLタグを指定しないと予期しない場所がターゲットになってしまうので、指定すると良いです。
→ 例：追加の添付ファイルの情報を元に、SITEINFOを修正してください。
ただし、「<section id="main" class="container">」内が対象ですので注意してください。

✅ 【実際の適用方法】

uAutoPagerizeのオプションを開く
「MY_SITEINFO」欄に上記コードをコピペ
保存して、対象ページで動作確認！

✅ 【ポイント】

最近のサイトはJavaScriptでの動的読み込みが多いですが、「link rel="next"」タグがあれば比較的簡単に対応できます。
ダウンロードしたHTMLだとうまくいかなかったため、開発者ツールからのコピーで作成したHTMLファイルを代わりに読み込ませます（私はこれで解決しました）。

✅ 【ChatGPT活用のススメ】

今回はChatGPTに「このサイトのSITEINFOを作って」と頼んだところ、動作するコードを回答してくれました。

実際、ネットには詳しい解説サイトが少ないので、ChatGPTで聞くのが最短ルートになることもあります。
あなたもぜひ、SITEINFO作りに活用してみてください！

✅ 【まとめ】

uAutoPagerizeはSITEINFOを追加するだけで対応できる
ChatGPTを活用すれば、難しいSITEINFO作りもラクラク
自分でページを自動化できれば、ネットの作業効率は劇的に上がります！

もし「uAutoPagerizeのみでは対応が難しい！」という場合は、別の拡張機能「Tampermonkey」を用意してChatGPTに相談すれば、解決できるかもしれません。

このブログを検索

まったり寒天