素のHTML

ビルドツールもUIフレームワークも使わない、.htmlファイルと<script type="module">だけのページからでも、genko.meのコンテンツを表示できます。@genko-me/wcは、genko-list・genko-viewのような標準のカスタム要素として表示部品を提供するパッケージです。中身は@genko-me/react・@genko-me/vue・@genko-me/svelteと同じロジック（@genko-me/core）で動くため、出てくるDOMも読み上げもフレームワーク版と一致します。

React・Vue・Svelte・Astroのいずれかを使っているなら、それぞれの専用ページ（React、Vue、Svelte、Astro）のほうが書きやすいはずです。このページは、それらのどれも使わない・使いたくない場合のためのものです。

使うパッケージ

正直な話：クライアントでしか描画しない

これらの要素はブラウザのJavaScriptが動いてから中身を描画します。 HTMLだけを配信した時点では空で、declarative shadow DOMによるSSRにも対応していません。検索エンジンやSNSのクローラーがJavaScriptを実行しなければ、本文もOGPも空のまま届きます。

この構成で配信APIキーをHTMLやJavaScriptに書くと、そのページを開いた誰もが読めます。 バンドルに埋めてもfetchのヘッダーに書いても、開発者ツールから見えます。隠す方法はありません。APIキーを対象を「選択したAPIのみ」に絞り、有効期間を短く保つ前提で使ってください。この前提はJavaScriptページの「ブラウザにAPIキーを置いてよいか」と同じです。

向いている用途

• 管理画面・社内ツールなど、検索流入を前提としない画面へのお知らせ・ヘルプの表示
• すでにあるサイトの一部分だけに、フレームワークを増やさず記事一覧やお知らせを埋め込む
• React・Vue・Svelteのどれかに決め打ちしたくない、あるいは複数のサイトで同じ埋め込みスニペットを使い回したい場面

向いていないもの

• 検索エンジンやSNSのプレビューを重視する公開ページ。 サーバーで本文入りのHTMLを返せるAstro・Next.js・Nuxt・SvelteKitのほうが確実です
• APIキーを見せたくない構成
• Webhookの受信。受け取るサーバーがないため、実践では別に用意する前提で説明します

次に読む

• 導入：インストールから一覧・詳細の表示まで
• 実践：ページ送り・下書きプレビュー・コンテンツ更新の反映
• 配信API：SDKを使わずHTTPで取得する