Markdownに広告を挿入するプラグイン「rehype-auto-ads」
Markdownで作成した記事に自動的に広告を挿入する「rehype-auto-ads」というrehypeプラグインを開発しました!
![rehype-auto-adsのGitHubリポジトリーのスクリーンショット](/_astro/image.DiwPp6U5_Z2v9YYn.webp)
この記事では、rehype-auto-adsを開発した経緯や使い方について詳しく説明します。使い方だけ読みたい方は、そこまで飛ばしていただいて構いません。
rehype-auto-adsとは
rehype-auto-adsは、Markdownで作成した記事に、自動でいい感じに広告を挿入してくれるrehypeプラグインです。指定した段落数ごと(デフォルトでは5段落ごと)に自動で広告を挿入します。
Google Adsenseの自動広告と違い、コードブロックや引用ブロックなどの途中に広告が挿入されることはありません。また、何段落ごとに広告を挿入するか設定できるので、Adsenseの自動広告よりも柔軟性が高くなっています。
たとえば、次のようなMarkdownを書いたとします。
1# Hello, world!2
3This is a paragraph.4
5This is a paragraph.6
7This is a paragraph.8
9This 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のプラグイン開発に挑戦しました。
![記事のサムネイル](/og/2024/03/03/astro-custom-toc_Z1oUfFS.png)
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に変換する場合は、次のようになります。
1import remarkParse from "remark-parse";2import rehypeStringify from "rehype-stringify";3import remarkRehype from "remark-rehype";4import { unified } from "unified";5import rehypeAutoAds from "rehype-auto-ads";6
7const options = {8 // オプション9};10
11const processor = unified()12 .use(remarkParse)13 .use(remarkRehype)14 // rehype-auto-adsを適用15 .use(rehypeAutoAds, options)16 .use(rehypeStringify);17
18const markdown = `19# Hello, world!20
21This is a paragraph.22
23This is a paragraph.24
25This is a paragraph.26
27This is a paragraph.28`;29
30processor.process(markdown).then((result) => {31 console.log(result.toString());32});
こうすると、オプションで指定した段落数ごとに、オプションで指定したコードが挿入されます。Astroで使う場合は、こんな感じですね。
1import { defineConfig } from "astro/config";2import rehypeAutoAds from "rehype-auto-ads";3
4// https://astro.build/config5export default defineConfig({6 site: "https://example.com",7 markdown: {8 rehypePlugins: [9 [10 rehypeAutoAds,11 {12 // オプション13 }14 ]15 ]16 }17});
オプション
rehype-auto-adsのオプションは、次のようになっています。
1export 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を使ってみてください!