更新ペースについてのお知らせ 詳細はこちら

【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

webtech-scraping-1

この記事はPR目的のプロモーションを含みます

2024年4月ごろだったか、Fanzaブックスのサンプル画像が広告用で使用できるように緩和されました。

【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

(なお、DMMブックスのほうは解禁されてないのでご注意。詳細はリンク先規約を確認してください。)

目次

肝心の画像素材の準備が…

以前はサンプル画像の利用が不可能とされていたため、商品紹介がしやすくなりますね。

(まぁたまにこれってスクリーンショットでは…?という画像を使用している人を見かけなかったわけではないですが…。いや、きっとなにか特別に許可を貰っていたんだろう。アフィはFANZAだけでは無いしね、きっと、たぶん)

さて、じゃあ素材はどこからダウンロードできるのか…と確認してみましたが、そんなものは見当たらず…。

どうやら、「試し読み」で開く画面に表示されるものを使えということのようで、広告素材としてダウンロードできるものの用意はないみたいでした(記事執筆時点)

「試し読み」の画面に表示されるページは画像ではなく、canvas要素に描画されたデータなのでそのままダウンロードもできません。

HTTPリクエストを覗くと画像のダウンロードは確認できますが、スクランブル暗号化されており、こちらもそのままでは使い物になりません。

【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

え…じゃあ真心を込めて、一枚一枚丁寧に手動でスクリーンショットして素材集めをしろ…と??

手作業なんてやってられっか!

ムリムリムリムリかたつむり。そんなダルいことやってられませんわ。

ってことで面倒なことはプログラムでブラウザを操作して、キャプチャ&スクレイピングさせましょう。

【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

自動化する場合のおおまかな処理の流れを整理してみました。

  1. 商品ページを開く
  2. 「試し読み」ボタンからビューアを開く
  3. 見開きオフ、ページ送りアニメーションオフを設定する
  4. ページの等倍の高さを取得する
  5. ページが描画されているcanvas要素のスクリーンショットを撮る
  6. ページを送る
  7. 購入リンクが表示されるまで、4,5を繰り返し
【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

ビューア設定では1枚1ページ単位でスクリーンショットを撮るために見開きをオフにしています。

ページ送りアニメーションも、ページのスライドの完了について考えたくないのでオフにします。

ページの高さは画面HTML内の ‘//*[@id=”renderer”]/canvas[1]/@height’ に書かれているものが、それっぽかったのでそこから取得することにしました。

リクエストを浚うと configuration_pack.json というファイルに高さや幅の定義があるようですが、ここに書かれているものと値が一致していたので、ひとまずこれで良さそうです。

たまに横幅が異なるページが混ざっている作品もあるようなので、高さは取得した値で、横幅は 1440px 固定で余白込みのビューポートサイズへ変更しています。

ここまでが前準備処理で、スクリーンショットを開始していきます。

保存した画像は余白を持たせた画像になるので、この余白をトリミングして保存する処理も追加しています。

画像サイズが完全に等倍ではない可能性がありますが、仮にミスっていたとしても十分高画質な画像をキャプチャできているので、そこは妥協することにします。

真っ白・真っ黒、一面グレー(にロゴが入っているだけ)のようなページが含まれる作品もあったので、そのようなページもこのタイミングで判定して、除外しています。

1ページの処理が終わったら、ページ送りを行い、上記のスクリーンショットと処理を繰り返します。

【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

保存枚数を事前に把握するよりも、購入リンク画面が出たことを判定するほうが簡単にできたので、この画面がでたら終了判定としました。

【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

これで作業としてはだいぶ楽になり、数秒〜数分待つだけで素材を準備できるようになりました。

作品の情報については、開いたページのHTMLからシンプルにスクレイピングすることができるため、これも組み合わせたら作品の情報一式を抜き出すこともできそうですが、ひとまずはここまで。

まとめ・感想

最近は Selenium よりも Playwright の方がいろいろと使いやすくて簡単なので気に入っています。

React を始め、フロントエンド実装にウェイトが移ったために、そのテストの重要性が増したからでしょうか。

ともかく、簡単に色々なことができる良い時代になったもんです。

「試し読み」ページの解析をしたら、復号したデータが手に入れられるかもしれませんが、なんだかややこしそうだったのでスクリーンショットという手段で対応しました。

(ブラウザの画面に見えている、ということは情報を集めれば復号された状態のデータは手に入ると思われますし、それ自体はなにかに抵触することはない…はず。でも解析が大変そうだったので)

私自信、あんまりエロ漫画に興味がないところもあって(エロゲのスチールやエロ同人の一枚絵のほうが好き)、そんなに積極的な紹介はしてこなかったのですが、せっかくなのでアダルトコミックも眺めてみようかな、と思い始めました。

【Web技術】FANZAブックスの試し読みサンプル画像を自動スクリーンショットで収集する

そもそも公式でダウンロードできる形で素材を用意してくれるほうが望ましいですけどね。

X(旧Twitter)でもブログ更新情報やお得情報などを発信していくので、ぜひフォローお願いします!
メイドえっち(@maid_h_

まずは各サービスのアカウントを無料で作ってみるのはどうでしょう?

おすすめサイトにもぜひアクセスしてみてください!

webtech-scraping-1

この記事が気に入ったら
フォローしてね!

記事の拡散お願いします!
  • URLをコピーしました!
目次