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

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

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

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

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

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

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

どうやら、「試し読み」で開く画面に表示されるものしかないようで、広告素材としての用意はないみたいでした（記事執筆時点）

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

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

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

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

ってことで面倒なことはプログラムにスクレイピングさせて自動化しましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ・感想

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

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

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

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

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