---
title: utterberg
title_en: utterberg
created: 2026-05-04
updated: 2026-05-05
tags: [utterances, utterberg, codeberg, oss]
lang: ja
draft: false
---

[utterances](https://utteranc.es) の [Codeberg](https://codeberg.org) 移植版。
Codeberg の Issue をコメントストアとして使う軽量ウィジェットです。

## 特徴

- ✅ **バックエンド不要** — PKCE OAuth でブラウザのみで完結
- ✅ **Client Secret 不要** — `client_id` だけで動作（公開しても安全）
- ✅ **第三者コメント対応** — Codebergアカウントがあれば誰でも投稿可能
- ✅ **高速表示** — LocalStorageキャッシュで2回目以降は即時表示
- ✅ **utterancesと同じ使い方** — scriptタグ1行で埋め込み

## utterancesとの比較

| | utterances | utterberg |
|---|---|---|
| ホスティング | GitHub | Codeberg（Forgejo） |
| OAuth | バックエンド必須 | PKCE（ブラウザのみ） |
| Client Secret | 必要 | 不要 |
| 埋め込み | `<script>` 1行 | `<script>` 1行 |

## セットアップ

1. **コメント用リポジトリを作成**  
   Codebergに **public** リポジトリを作り、Issueを有効にします。

2. **OAuth App を登録**  
   Codeberg → Settings → Applications → OAuth2 Apps → Create
   - Application Name: 任意（例: `utterberg`）
   - Redirect URI: `https://あなたのサーバー/utterberg.html`

   発行される **Client ID** をメモします（Client Secret は不要）。

3. **トークンのスコープ**（コメント投稿者に必要）  
   Codebergのトークン設定で `read:user` と `write:issue` が必要です。  
   OAuthフローでは自動的に `write:issue` スコープが要求されます。

4. **ブログに埋め込む**  
   以下の `<script>` タグを記事の末尾に追加します。

```html
<script
  src="https://k-rebo.github.io/utterberg/client.js"
  repo="あなたのユーザー名/リポジトリ名"
  issue-term="pathname"
  client-id="あなたのClient ID"
  theme="github-light"
  crossorigin="anonymous"
  async
></script>
```

5. **オプション：投稿元を制限**  
   コメントリポジトリのルートに `utterberg.json` を置くと、許可するオリジンを制限できます。

```json
{
  "origins": ["https://bido.dev"]
}
```

## デモ

このページ下部のコメント欄がutterbergです。