概要
「広告が多すぎるサイトって、どこまで作れるんだろう」という思いつきから、100万個の広告を並べたサイトを作りました。
サイト: 日本一（たぶん世界一）広告が多いサイト
現時点でこのサイト単体で 950円 の収益が発生しています。
この記事では、100万個の広告をどうやってブラウザに表示したのか、その技術的な工夫についてまとめます。
課題：100万個の広告をそのまま表示するとブラウザが死ぬ
最初は「広告を100万個並べれば完成じゃん」と考えていました。当然ながら、HTMLに100万個配置すると以下の問題が発生します：
| 問題 | 状況 |
|---|---|
| メモリ使用量の爆増 | DOMノード100万個分のメモリ消費 |
| 描画の停止 | レイアウト計算が追いつかない |
| スクロール不能 | スクロールイベントの処理が重すぎる |
| ブラウザのフリーズ | 総合的な負荷でブラウザが固まる |
何も工夫しないと、サイトを開いた瞬間にブラウザがクラッシュします。
解決策：仮想スクロール
採用した手法は 仮想スクロール（Virtual Scrolling） です。
仕組み
シンプルに言うと、「見えている範囲だけ表示する」だけです。
[画面外 - 削除] [画面外 - 削除] [表示中] [表示中] [表示中] [画面外 - 追加予定] ...
- 画面に表示されている広告 + その上下少し先 だけを描画
- スクロールに応じて必要な広告を追加
- 画面外へ出た広告はDOMから削除
結果として、100万個の広告が存在しているように見えますが、実際にDOM上に存在するのは表示範囲の約10倍程度 です。
なぜ軽くなるのか
ブラウザのレンダリングコストはDOMノード数に大きく依存します：
- Layout（レイアウト計算）: ノード数に比例
- Paint（ペイント）: 描画領域に依存
- Style Recalculation: ノード数に比例
仮想スクロールでDOM上の要素数を常に数十〜数百に抑えることで、これらの処理コストを実用的なレベルに保ちます。
これにより、100万個の広告がありながら、かなり軽快にスクロールできます。
広告サービスの選定：忍者AdMax
広告配信には 忍者AdMax を使用しました。
| サービス | 審査 | 導入の容易さ |
|---|---|---|
| Google AdSense | 厳しい | 審査通過後に利用可能 |
| 忍者AdMax | なし | 登録後すぐに利用可能 |
思いつきで作ったネタサイトでも、審査なしですぐに広告を掲載できる点で忍者AdMaxが適していました。
収益結果
現時点の収益：950円
「こんなサイトでも収益が発生するんだ」というのが一番の驚きでした。大きな収益ではありませんが、技術デモ兼ネタサイトとしては十分面白い結果です。
得られた知見
このプロジェクトを通じて得られた技術的知見：
- 仮想スクロールの実装: 大量要素を扱う際の基本テクニック
- 大量DOMの扱い: DOMノード数とパフォーマンスの関係
- ブラウザ性能の検証: 限界値の把握と最適化
- 広告配信の仕組み: 忍者AdMaxの導入手順と実際の収益発生
「面白そう」と思ったら、とりあえず作ってみることの大切さを実感しました。ネタから始まっても、得られる技術的知見は本物です。
リポジトリ・デモ
デモサイト: 日本一（たぶん世界一）広告が多いサイト
スクロールすると広告が延々と出てきます。ぜひ遊んでみてください。
まとめ
- 100万個の広告をそのままDOMに配置するとブラウザが壊れる
- 仮想スクロールにより、DOM上の要素を表示範囲の約10倍に抑えることで軽快に動作
- 忍者AdMaxなら審査なしですぐに広告配信可能
- ネタサイトでも950円の収益が発生
- 「面白そう」を形にすると、意外と学びが多い
もし変なアイデアを思いついたら、とりあえず作ってみるのがおすすめです。