本文・シェアの補助部品
リッチテキスト本文とシェアボタンの表示、props、スタイル調整。
Next.js App Routerで取得から表示まで任せる場合は、List・Viewを使います。このページでは、取得済みのHTMLを表示するRichTextと、公開URLを共有するShareButtonsを説明します。これらの補助部品はコンテンツを取得しません。以下は公開版@genko-me/[email protected]に対応しています。
npm install @genko-me/react閲覧数の計測と表示にはPV(ページビュー)のPageView・ViewCountを使います。
本文を表示する：RichText
RichTextにはリッチテキストフィールドのHTML文字列を渡します。Next.jsのサーバーコンポーネントからも使用できます。
import { notFound } from "next/navigation";import { RichText } from "@genko-me/react";import { genko } from "@/lib/client";
export default async function BlogPostPage({ params,}: { params: Promise<{ id: string }>;}) { const { id } = await params; const post = await genko.apis.blog.getOrNull(id); if (!post) notFound();
return ( <main> <h1>{post.title}</h1> <RichText html={post.body} as="article" className="article-body" /> </main> );}原稿を、あなたの環境へ
リッチテキストフィールドの値は、保存時にサーバー側でサニタイズされたHTML文字列です。取得した値をそのまま RichText に渡します。
- 見出し・段落・リスト
- リンクと画像
- 引用とコード
装飾はサイト側のCSSで用意します。詳しくはgenko.meをご覧ください。
| prop | 既定値 | 内容 |
|---|---|---|
html | — | HTML文字列。null／undefinedは空文字として描画 |
as | div | 描画するHTML要素 |
className | — | コンテナのCSSクラス |
本文の装飾はサイト側のCSSで用意します。proseというクラスを付けるだけで、タイポグラフィのCSSが自動で追加されるわけではありません。
.article-body { line-height: 1.9; }.article-body h2 { margin-block: 2em 0.75em; font-size: 1.5em; }.article-body p { margin-block: 1em; }.article-body img { max-width: 100%; height: auto; }.article-body pre { overflow-x: auto; }RichText自体はHTMLをサニタイズしません。genko.meの保存処理を通ったリッチテキストを表示する用途で使い、別の外部入力をそのまま渡さないでください。
シェアボタンを表示する：ShareButtons
クリック操作のあるシェアボタンは、別のサブパス@genko-me/react/share-buttonsからimportします。
import { ShareButtons } from "@genko-me/react/share-buttons";
export function ArticleShare() { return <ShareButtons url="https://your-site.example.com/blog/abcDEF123456" title="はじめての記事" />;}urlにはサイト側の公開記事URLを渡します。配信APIのURLや、draftKeyを含むプレビューURLではありません。
| prop | 既定値 | 内容 |
|---|---|---|
url | 必須 | シェア先の公開URL |
title | 空文字 | シェアするタイトル |
services | x、line、hatena、copy、share（shareは0.5.3以降） | 表示するサービス。facebookも指定可能 |
size | 18 | アイコンサイズ。標準ボタンは44×44px |
className | — | コンテナのクラス |
buttonClassName | — | 各ボタンのクラス |
tooltipClassName | — | コピー完了ツールチップのクラス |
lang | ja | jaまたはen |
labels | 言語ごとのラベル | サービス名（shareを含む）・copiedのラベルを個別上書き |
unstyled | false | 標準のレイアウト・ボタン等の装飾を外す |
コピーにはブラウザのClipboard APIを使います。利用できない環境ではコピーできないため、公開環境でも動作を確認してください。
share（@genko-me/[email protected]以降）はOSの共有シート（navigator.share）を開きます。スマートフォンなど対応した環境でだけ、画面に表示されたあとに現れます（サーバー側の出力には含まれず、非対応の環境では出ません）。servicesを省略すると最後に並び、明示した場合は書いた位置に出ます。共有シートを閉じたときは何も起こらず、開けなかったときはリンクをコピーします。iPhoneのXアプリでは、Xのシェア画面（x）がログイン画面で止まることがあるため、shareが代わりの手段になります。
見た目を調整する
0.5.4の標準スタイルの主なCSS変数です。コンポーネントを囲む要素などへ指定します。
| 変数 | 既定値 | 対象 |
|---|---|---|
--genko-radius | 10px | 角丸 |
--genko-border | #858b8d | 枠線 |
--genko-border-hover | #717779 | ホバー時の枠線 |
--genko-bg | #ffffff | 背景 |
--genko-bg-hover | #f7f8f8 | ホバー時の背景 |
--genko-fg | #303537 | アイコンの色（ブランドロゴを除く） |
--genko-focus-ring | rgba(37, 42, 44, .055) | フォーカス時に外側へ重ねる淡いリング |
--genko-ok | #2e7d54 | コピー完了の色 |
--genko-tooltip-bg | #252a2c | ツールチップ背景 |
--genko-tooltip-fg | #ffffff | ツールチップ文字 |
既定値は@genko-me/reactのGENKO_DESIGN_TOKENSからも取得できます。各ブランドのアイコン色は固定です。フォーカス時の表示は--genko-focus-ringで調整できます。
独自スタイルを使う場合はunstyledを有効にします。キーボード操作時のフォーカス表示も用意してください。
<ShareButtons url="https://your-site.example.com/blog/abcDEF123456" unstyled className="share-row" buttonClassName="share-button"/>.share-row { display: flex; gap: 12px; }.share-button { padding: 10px; border: 1px solid currentColor; }.share-button[data-focus-visible] { outline: 2px solid blue; outline-offset: 3px; }UIを自作する場合は、SDKのbuildShareUrl(service, { url, title })でシェアURLだけを組み立てられます。copyとshareはURLを開く操作ではないため、この関数の対象外です（型にも含まれません）。
最終更新: 2026年10月19日