実践
素のHTMLでgenko-paginationによるページ送りと下書きプレビューを組み立て、コンテンツ更新の反映方法を選ぶ手順。
導入の一覧・詳細に、運用で必要になるものを足します。
ページ送り
genko-paginationをgenko-listの直下に置き、loadPageに「ページ番号を受け取って次のページを返す関数」を渡します。
<genko-list id="posts" href="/blog/{id}"> <article><h2><genko-list-item field="title"></genko-list-item></h2></article> <genko-pagination mode="url" param="page"></genko-pagination> <genko-loading template>読み込み中…</genko-loading> <genko-error template></genko-error> <genko-null>記事はまだありません。</genko-null></genko-list>list.loadPage = async (page) => { try { const result = await genko.apis.blog.list({ limit: 6, offset: (page - 1) * 6, orders: '-publishedAt' }); return { ok: true, result }; } catch { return { ok: false, message: '取得できませんでした。' }; }};既定（mode省略）はURLを変えず一覧だけを切り替えます。mode="url"にするとURLの?page=と連動し、ブラウザの戻る操作にも追従します。1ページに複数の一覧を並べる場合は、paramをそれぞれ別の名前にしてください。総ページ数が1以下のときはgenko-paginationは何も表示しません。
この対象にはサーバーがないため、loadPageもブラウザから直接@genko-me/sdkを呼びます。 Next.jsのPaginationのようにサーバー側でAPIキーを隠す仕組みはありません。キーを見せたくない場合は、この対象ではなくサーバーのあるフレームワーク（AstroやNext.jsなど）を検討してください。
保存済み下書きのプレビュー
URLのdraftKeyを読み、取得メソッドへ渡します。キーが合えば下書きが、合わなければ404になりgetOrNull()はnullを返します。
const params = new URLSearchParams(location.search);const id = params.get('id');const draftKey = params.get('draftKey') ?? undefined;
genko.apis.blog .getOrNull(id, draftKey ? { draftKey } : undefined) .then((entry) => { detail.removeAttribute('state'); if (!entry) detail.setAttribute('state', 'empty'); detail.entry = entry ?? undefined; }) .catch(() => detail.setAttribute('state', 'error'));プレビュー中の帯には<genko-preview-notice>を使います。ただし、この要素はどんな状況でも無条件に「プレビュー中」の帯と「終了」ボタンを描画するので、draftKeyがあるときだけ表示するのは呼び出し側の仕事です。
<genko-view id="detail"> <genko-preview-notice id="notice" hidden></genko-preview-notice> <h1><genko-view-item field="title"></genko-view-item></h1> <genko-view-item field="body"></genko-view-item> <genko-loading template></genko-loading> <genko-error template></genko-error> <genko-null>記事がありません。</genko-null></genko-view>document.getElementById('notice').hidden = !draftKey;
if (draftKey) { const meta = document.createElement('meta'); meta.name = 'robots'; meta.content = 'noindex, nofollow'; document.head.appendChild(meta);}「終了」ボタンはURLからdraftKeyを落としてlocation.replace()で読み直す処理を、genko-preview-notice自身がすでに持っています。呼び出し側で書く必要はありません。
検索避けは、この対象では自分で<meta name="robots">を追加するしかありません。 サーバーがないため、レスポンスヘッダーやSSR時点でのタグ出し分けはできず、プレビュー中だけdocument.headにタグを足す形になります。管理画面のAPI設定でプレビューURLテンプレートを、このページに合わせて設定してください。
https://your-site.example/post.html?id={id}&draftKey={key}Webhookで再生成・再検証する
この対象には受け取るサーバーがないため、Webhookを直接受信することはできません。 記事一覧・詳細はページを開くたびに配信APIへ問い合わせるので、記事を公開・更新すればそのまま次の表示に反映されます——再ビルドも再検証も不要です。
再検証が要るのは、CDNやリバースプロキシで配信APIの応答自体をキャッシュしている場合だけです。その場合は、このHTML自体とは別に、Webhookを受け取れる小さなサーバー（Node.jsのAPIルート、Cloudflare Workersなど）を用意してください。署名検証には@genko-me/sdkのverifyGenkoSignatureが使えます。受信側の実装はJavaScriptの実践ページと同じです。
イベントの種類、ペイロード、配送の制限はWebhookにまとめています。
次に読む
最終更新: 2026年9月17日