Markdownに広告を挿入するプラグイン「rehype-auto-ads」

Markdownで作成した記事に自動的に広告を挿入する「rehype-auto-ads」というrehypeプラグインを開発しました！

この記事では、rehype-auto-adsを開発した経緯や使い方について詳しく説明します。使い方だけ読みたい方は、そこまで飛ばしていただいて構いません。

rehype-auto-adsとは

rehype-auto-adsは、Markdownで作成した記事に、自動でいい感じに広告を挿入してくれるrehypeプラグインです。指定した段落数ごと（デフォルトでは5段落ごと）に自動で広告を挿入します。

GitHub - Robot-Inventor/rehype-auto-ads: rehype.js plugin that automatically inserts Google Adsense (and theoretically any ad service) code

rehype.js plugin that automatically inserts Google Adsense (and theoretically any ad service) code - Robot-Inventor/rehype-auto-ads

github.com

rehype-auto-ads

rehype.js plugin that automatically inserts Google Adsense (and theoretically any ad service) code. Latest version: 1.1.1, last published: 2 days ago. Start using rehype-auto-ads in your project by running `npm i rehype-auto-ads`. There are no other projects in the npm registry using rehype-auto-ads.

www.npmjs.com

Google Adsenseの自動広告と違い、コードブロックや引用ブロックなどの途中に広告が挿入されることはありません。また、何段落ごとに広告を挿入するか設定できるので、Adsenseの自動広告よりも柔軟性が高くなっています。

たとえば、次のようなMarkdownを書いたとします。

1
# Hello, world!
2

3
This is a paragraph.
4

5
This is a paragraph.
6

7
This is a paragraph.
8

9
This is a paragraph.

説明のために、rehype-auto-adsを使って2段落ごとに<ad-code />というコードを挿入する場合を考えます。この場合、次のようなHTMLが生成されます。もちろん、何段落ごとにどのようなコードを挿入するかはオプションで設定できます。

1
<h1>Hello, world!</h1>
2
<p>This is a paragraph.</p>
3
<p>This is a paragraph.</p><AD-CODE />
4
<p>This is a paragraph.</p>
5
<p>This is a paragraph.</p><AD-CODE />

rehype-auto-adsのメリット

Markdownベースのサイトで、サイトの上部や記事の末尾、サイドバーなどに広告を挿入する際には、テンプレートを編集するだけなのでプラグインは不要です。

しかし、記事の本文中に広告を挿入する場合は、途端に面倒になります。

Google Adsenseの自動広告は評判が悪いですし、手動で広告コードを挿入するのも大変です。さらに、手動で挿入した場合は、サイトから広告を削除したくなった場合や広告サービスを変更する場合に、すべての記事を修正しなければなりません。

rehype-auto-adsは、このような問題を解決します。Google AdSenseの広告コードを想定していますが、他のサービスのコードも利用できるはずです。

開発した経緯

このブログでは、静的サイトジェネレーターの「Astro」を利用しています。AstroではMarkdownのパースにremark、HTMLの生成にrehypeが使われています。

以前、QiitaのNote記法を使えるようにするためのMarkedプラグイン「qnote-parser」を開発したことがありました。しかし、Markedに比べてremark/rehypeは処理が抽象化されており、ASTを操作する必要があるため、難しいという印象を持っていました。

Google Adsenseの自動広告は評判が良くないので代替手段を探していましたが、remark/rehypeやAstroでそういったプラグインが存在しないので放置していました。

そして最近、Astroで任意の位置に任意の構造の目次を挿入できる「astro-custom-toc」というAstro integrationを開発するために、remark/rehypeのプラグイン開発に挑戦しました。

Astroでカスタマイズ可能な目次を生成する「astro-custom-toc」

Astroでカスタマイズ可能な目次を生成するAstro integration「astro-custom-toc」を作りました！この記事では、astro-custom-tocの使い方や他のプラグインとの違い、カスタマイズ方法などについて説明します。

astro-custom-tocについての記事を投稿したところ、FFの方から「コードブロックの中に広告が入ってしまっている」という指摘を受けました。Google Adsenseの自動広告の評判が悪いのは知っていましたが、まさかここまでとは…。

ということで、広告をいい感じに挿入するプラグインを開発することにしました。

もともとはremarkプラグインとしてremark-auto-adsという名前で開発していました。しかし、remarkのプラグイン一覧に追加するPull Requestを出したときに、rehypeプラグインにした方がよいという指摘を受けました。

こうして、rehypeプラグインに書き換えたのがrehype-auto-adsです。

使い方

まずは、rehype-auto-adsをインストールします。

npm install rehype-auto-ads

rehype-auto-adsは、通常のrehypeプラグインと同様に利用できます（rehypeプラグインなので当たり前ですが）。たとえば、Markdownをremarkでパースし、rehype-auto-adsを適用したrehypeでHTMLに変換する場合は、次のようになります。

1
import remarkParse from "remark-parse";
2
import rehypeStringify from "rehype-stringify";
3
import remarkRehype from "remark-rehype";
4
import { unified } from "unified";
5
import rehypeAutoAds from "rehype-auto-ads";
6

7
const options = {
8
    // オプション
9
};
10

11
const processor = unified()
12
    .use(remarkParse)
13
    .use(remarkRehype)
14
    // rehype-auto-adsを適用
15
    .use(rehypeAutoAds, options)
16
    .use(rehypeStringify);
17

18
const markdown = `
19
# Hello, world!
20

21
This is a paragraph.
22

23
This is a paragraph.
24

25
This is a paragraph.
26

27
This is a paragraph.
28
`;
29

30
processor.process(markdown).then((result) => {
31
    console.log(result.toString());
32
});

こうすると、オプションで指定した段落数ごとに、オプションで指定したコードが挿入されます。Astroで使う場合は、こんな感じですね。

1
import { defineConfig } from "astro/config";
2
import rehypeAutoAds from "rehype-auto-ads";
3

4
// https://astro.build/config
5
export default defineConfig({
6
    site: "https://example.com",
7
    markdown: {
8
        rehypePlugins: [
9
            [
10
                rehypeAutoAds,
11
                {
12
                    // オプション
13
                }
14
            ]
15
        ]
16
    }
17
});

オプション

rehype-auto-adsのオプションは、次のようになっています。

1
export interface RehypeAutoAdsOptions {
2
    adCode: string;
3
    countFrom?: number;
4
    paragraphInterval?: number;
5
}

adCode

挿入する広告コードです。たとえば、Google Adsenseのディスプレイ広告のコードを指定します。このオプションは必須です。

countFrom

段落カウンターの初期値です。つまり、このオプションにはparagraphIntervalの値から最初の広告を挿入したい段落数を引いた値を設定します。

たとえば、3段落目から5段落ごとに広告コードを挿入したい場合は、この値を2に設定します。

デフォルト：0

paragraphInterval

何段落ごとに広告コードを挿入するか指定します。たとえば、5を指定すると、5段落ごとに広告コードが挿入されます。

デフォルト：5

まとめ

rehype-auto-adsは、Markdownで作成した記事に、自動でいい感じに広告を挿入してくれるrehypeプラグインです。Google Adsenseの自動広告と違い、コードブロックや引用ブロックなどの途中に広告が挿入されることはありません。

また、何段落ごとに広告を挿入するか設定できるので、Adsenseの自動広告よりも柔軟性が高くなっています。

このプラグインを使うことで、記事の本文中に広告を挿入する際の手間を省けます。また、広告サービスを変更する際にも、すべての記事を修正する必要がなくなります。

ブログでMarkdownを使っている方は、ぜひrehype-auto-adsを使ってみてください！