article
標準プラグインでできること
ampless の first-party plugin を、SEO、計測、同意、構造化データ、Webhook、埋め込み表示の用途別に整理します。
ampless の標準プラグインは、@ampless/plugin-* として本体モノレポから出している first-party plugin です。SEO、RSS、計測タグ、Cookie 同意、構造化データ、コードハイライト、Mermaid 図、Webhook、埋め込み表示のように、コアに固定で持たせるとサイトごとの判断が混ざりやすい処理を、cms.config.ts から選んで登録できるようにしています。
2026 年 6 月 14 日時点では、標準プラグインは 14 個あります。全部を入れる前提ではありません。scaffold 直後のテンプレートでは SEO と RSS が有効で、Webhook、計測、同意、JSON-LD、読了時間、OG 画像は cms.config.ts にコメント例として並んでいます。Mermaid と highlight は publicHead だけで動くので、このサイトでは cms.config.ts に追加して有効化しています。YouTube と x.com の埋め込みは editor extension も関わるため、別途パッケージを追加して配線します。
まず知っておくこと
プラグインのインストールは、管理画面からワンクリックで行うものではありません。サイトのリポジトリに npm 依存を追加し、cms.config.ts の plugins 配列へ登録して、Amplify Hosting で再デプロイします。
一方で、登録後の設定値は /admin/plugins から変えられるものがあります。GA4 の測定 ID、GTM のコンテナ ID、Plausible のドメイン、Cookie 同意カテゴリ、読了時間の表示文言、Webhook の署名 secret などは、コードを書き換えずに運用画面から更新できます。
trust_level は「イベント hook がどの Lambda で動くか」を表します。公開ページの <head> にタグを返すだけのプラグインは untrusted、公開済み投稿を読み直して S3 にファイルを書くものや secret を読むものは trusted です。
基本セット
| プラグイン | trust_level | 使う場面 |
|---|---|---|
@ampless/plugin-seo |
trusted | 投稿ごとの title、canonical、Open Graph、Twitter card を整え、投稿イベントごとに sitemap.xml を再生成する |
@ampless/plugin-rss |
trusted | 公開済み投稿から RSS 2.0 の /feed.xml を生成する |
@ampless/plugin-seo は、ほとんどの公開サイトで最初に入れておくプラグインです。Next.js の metadata に OGP や canonical を足し、投稿が公開・更新・削除されたタイミングで public/plugins/seo/sitemap.xml を作り直します。
@ampless/plugin-rss は、ブログや更新情報を feed reader に流したいサイト向けです。投稿イベントのあとで公開済み投稿を読み直し、public/plugins/rss/feed.xml に RSS を保存します。limit や language は cms.config.ts で指定します。
計測と同意
| プラグイン | trust_level | /admin/plugins で変えられる主な値 |
|---|---|---|
@ampless/plugin-analytics-ga4 |
untrusted | GA4 measurement ID、同意カテゴリ |
@ampless/plugin-gtm |
untrusted | GTM container ID、同意カテゴリ |
@ampless/plugin-plausible |
untrusted | Plausible domain、script URL、同意カテゴリ |
@ampless/plugin-cookie-consent |
untrusted | 同意カテゴリ、バナー文言、ボタンラベル |
GA4、GTM、Plausible は、公開ページの描画時に head/body descriptor を返します。DynamoDB や S3 を読む必要はないため、AWS 側のデータ権限は持ちません。
訪問者の同意を得るまで計測タグを発火させたくない場合は、@ampless/plugin-cookie-consent を先に登録し、計測プラグイン側に consentCategory を指定します。window.amplessConsent.has('analytics') が true になるまで loader を出さない fail-closed の動きになるため、Cookie 同意プラグインの登録漏れがあると計測は発火しません。
Plausible は cookie を使わない解析サービスなので、多くのサイトでは同意バナーなしでも運用できます。ただし、サイトの方針として「すべての analytics を同意後にしたい」場合は、GA4 / GTM と同じ consentCategory に寄せられます。
記事ページを補強する
| プラグイン | trust_level | 何を足すか |
|---|---|---|
@ampless/plugin-schema-jsonld |
untrusted | 投稿ページに Article / BlogPosting などの JSON-LD を追加する |
@ampless/plugin-reading-time |
untrusted | 投稿本文から読了時間を推定し、本文の前後にラベルを表示する |
@ampless/plugin-og-image |
untrusted | /og/<slug> で投稿ごとの OGP 画像を動的に生成する |
@ampless/plugin-schema-jsonld は、投稿フィールドと管理設定から schema.org の Article 系 JSON-LD を組み立てます。著者名や発行者名を空にしておくと site.name にフォールバックします。テーマの post ページが ampless.publicBodyForPost(post) を呼んでいれば、<script type="application/ld+json"> が投稿ページに入ります。
@ampless/plugin-reading-time は publicHtmlForPost を使うプラグインです。投稿本文から英語の語数と CJK 文字数を数え、3 min read のようなラベルを beforeContent または afterContent に出します。表示文言、読書速度、表示位置は /admin/plugins から変えられます。
@ampless/plugin-og-image は SNS クローラー向けに PNG を返すプラグインです。/og/<slug> にアクセスが来ると、投稿タイトル、抜粋、サイト名、投稿本文の最初の画像や固定バナーを使って画像を生成します。Satori がフォントなしでは描画できないため、少なくとも 1 つの .ttf / .otf フォントを指定します。
コードと図を読みやすくする
| プラグイン | trust_level | 対象 |
|---|---|---|
@ampless/plugin-highlight |
untrusted | language-* が付いたコードブロックを highlight.js でハイライトする |
@ampless/plugin-mermaid |
untrusted | language-mermaid のコードブロックを Mermaid の SVG 図として描画する |
どちらも publicHead でインラインスクリプトを 1 本だけ追加し、実際の処理はブラウザ側で行います。ページ内に対象のコードブロックが 1 つもなければ、highlight.js や mermaid.js は CDN からダウンロードされません。
登録は通常のプラグインと同じです。
import mermaidPlugin from '@ampless/plugin-mermaid'
import highlightPlugin from '@ampless/plugin-highlight'
export default defineConfig({
plugins: [
mermaidPlugin(),
highlightPlugin(),
],
})
@ampless/plugin-highlight は、Markdown の ```ts や ```json のように言語名を付けたコードブロックだけを対象にします。言語名がない素のフェンスはそのままです。language-mermaid は明示的に除外するため、Mermaid の図ソースがハイライトされてから図に置き換わる、という競合は起きません。
@ampless/plugin-mermaid は、```mermaid のフェンスを SVG 図に置き換えます。この下のブロックも、公開ページではコードではなく図として描画されます。
flowchart LR
Source["mermaid フェンス"] --> Code["language-mermaid の code block"]
Code --> Script["Mermaid plugin が検出"]
Script --> Diagram["SVG ダイアグラム"]
Mermaid は既定で securityLevel: 'strict' です。図の中でリンクやクリックハンドラを使いたい場合は loose にできますが、投稿本文を書ける人を完全に信頼できる運用に限ってください。
投稿本文の埋め込み
| プラグイン | trust_level | 対象 |
|---|---|---|
@ampless/plugin-youtube |
trusted | YouTube URL を youtube-nocookie.com の iframe として描画する |
@ampless/plugin-x-embed |
trusted | x.com / twitter.com の投稿 URL を tweet embed として描画する |
埋め込み系プラグインは、Phase 7 の contentFields を使います。投稿本文の一部、たとえば Markdown の単独行 URL や tiptap の専用ノードを、プラグインが提供する React 要素に差し替える仕組みです。
@ampless/plugin-youtube は、https://youtu.be/<id> や https://www.youtube.com/watch?v=<id> の単独行を iframe に変換します。src は https://www.youtube-nocookie.com/... なので、再生開始まで YouTube cookie を設定しないモードです。サイト側で CSP を強制している場合は、frame-src に youtube-nocookie.com を追加します。
@ampless/plugin-x-embed は、https://x.com/<handle>/status/<id> と https://twitter.com/<handle>/status/<id> を <blockquote class="twitter-tweet"> に変換し、必要なページでだけ https://platform.twitter.com/widgets.js を 1 回読み込みます。CSP を使う場合は、script-src と frame-src に platform.twitter.com を追加します。
この 2 つは公開側だけでなく、管理画面の tiptap editor に Node を登録する配線も必要です。Phase 7 以降の first-party theme は、公開側で ampless.renderBody(post) と ampless.publicPostScriptsForPage([post]) を呼ぶ形に揃っています。
イベント連携
| プラグイン | trust_level | 何をするか |
|---|---|---|
@ampless/plugin-webhook |
trusted | 投稿イベントを外部 URL へ POST する |
@ampless/plugin-webhook は、content.published、content.unpublished、content.deleted、content.updated などのイベントを外部サービスへ送ります。受信側で検証できるように、本文を HMAC-SHA-256 で署名して X-Ampless-Signature ヘッダーを付けられます。
署名 secret は /admin/plugins の secret settings から保存できます。平文は公開設定キャッシュには出ず、trusted processor Lambda が ctx.secret() で読むだけです。キーをローテーションしたいときに git push や再デプロイを挟まなくて済むので、Webhook を本番運用するなら admin 管理の secret に寄せるのが扱いやすいです。
どう選ぶか
最初のサイトなら、SEO は入れたままで始めます。ブログや更新情報を外部 reader に流したいなら RSS。計測が必要になったら、Plausible、GA4、GTM のどれを使うかを先に決め、同意が必要な運用なら Cookie consent を前に置きます。
記事単位の検索エンジン向け補強なら Schema JSON-LD、読み物としての体験を少し足すなら Reading time、SNS 共有時の見え方を作り込みたいなら OG image。手順や設定例を読みやすくしたいなら Highlight、構成図やイベントの流れを本文内で見せたいなら Mermaid。外部ワークフローにつなぐなら Webhook。YouTube や x.com の URL を本文内でカード化したい場合は、embed plugin と editor extension の配線を追加します。
標準プラグインは、ampless のコア機能を置き換えるものではありません。テーマはページの見た目を決め、プラグインはテーマを替えても残したい処理を登録する。どちらに置くか迷ったときは、まず テーマとプラグインの使い分け を見ると境界を整理しやすくなります。
関連記事
- テーマとプラグインの使い分け → plugin-system
- サーバレス構成 → serverless-stack
- ampless を始めるのに用意するもの → getting-started