Astroブログにコメント機能を追加：Giscus、Waline、Twikoo完全比較ガイド

Astroブログにコメント機能をつけること、私もかなり悩みました。

最初は「コメントシステムを導入するだけでしょ？簡単じゃん」と思っていました。しかしいざ手を動かしてみると、Giscus、Waline、Twikoo、Disqus…と選択肢が多すぎて、それぞれの設定方法も全く違います。さらに厄介なことに、苦労して設定していざ公開してみると、コメントは表示されるのに、別の記事に移動するとコメントが消えてしまう現象に遭遇しました。

後でわかったことですが、これはAstroの**View Transitions（ビュートランジション）**が原因でした。ページ遷移時にコメントコンポーネントが再ロードされないため、「シュレーディンガーのコメント」状態（クリックするまで存在するかどうかわからない）になっていたのです。

もしあなたが同じような問題に直面している、あるいはどのコメントシステムを選べばいいか迷っているなら、この記事が役立ちます。3つの主要なソリューション（Giscus、Waline、Twikoo）を比較し、Astroへの完全な統合コードを提供し、View Transitionsの互換性問題も解決します。これを読めば、10分で実装完了です。

コメントシステム比較：どれを選ぶべき？

正直なところ、私は3つとも試しましたが、それぞれに長所と短所があります。まずは直感的な比較表を見てみましょう。

私の選択アドバイス

表を見ても迷うかもしれませんね。もう少し具体的にアドバイスします。

あなたのブログが主にエンジニア向け（技術チュートリアル、OSSドキュメントなど）なら、Giscusを選びましょう。理由は簡単です。読者はすでにGitHubアカウントを持っているはずなので、ログインが楽です。さらにGiscusは純粋なフロントエンドソリューションなので、バックエンドのデプロイが不要で、設定は超簡単。5分で終わります。

あなたのブログが一般向け（日記、写真、旅行記など）なら、WalineかTwikooを選びましょう。これらは匿名コメントをサポートしており、読者の参加障壁が低いです（登録不要、ログイン不要、ニックネームとメアドだけでOK）。Walineは管理画面が強力でコメント数が多いブログ向き、Twikooはより軽量でデプロイが少し簡単です。

コストゼロを追求するなら、迷わずGiscusです。GitHubの無料サービスに完全に依存しており、データベースも有料クラウドサービスもサーバーも不要です。Walineも無料枠（LeanCloud開発版1GB）がありますが、トラフィックが増えると有料版へのアップグレードが必要になるかもしれません。

強力な管理画面が必要なら（コメント承認、統計データ、スパムフィルタなど）、Walineがベストです。WordPressのコメントプラグインに近い専用の管理パネルがあり、一括処理やアクセス解析が可能です。

まとめると：技術ブログはGiscus、生活ブログはWaline、シンプルさ重視ならTwikooです。

Giscus導入ガイド：最もシンプルな方法

Giscusは私が最もおすすめするコメントシステムで、特に技術ブログに最適です。設定は3つの中で最も簡単で、バックエンドもDBも不要、GitHubだけで完結します。

準備作業

Giscusを導入する前に、以下の準備が必要です。

KiloClaw - 企業向けマネージド OpenClaw、AI エージェントのオーケストレーションとスマートルーティングを加速

今すぐ始める →広告

1. 公開GitHubリポジトリの作成
ブログのソースコードリポジトリを使うか、コメント専用のリポジトリ（例：blog-comments）を新規作成します。必ず公開（Public）リポジトリにしてください。Privateでは機能しません。

2. Discussions機能の有効化
リポジトリの「Settings」ページに行き、「Features」セクションまでスクロールして「Discussions」にチェックを入れます。これはデフォルトでオフになっていることが多いので、手動でオンにする必要があります。

3. Giscusアプリのインストール
https://github.com/apps/giscus にアクセスし、「Install」をクリックして、さきほどのリポジトリを選択します。これでGiscusボットがDiscussionsを作成・管理する権限を得ます。

4. Discussionカテゴリの設定
リポジトリのDiscussionsページを開き、カテゴリ編集（鉛筆アイコン）から「Announcements」タイプのカテゴリ（例：「Comments」）を作成することをお勧めします。これにより、あなたとGiscusボットだけがトピックを作成でき、他のユーザーは返信のみ可能になるため、スパムを防げます。

設定パラメータの取得

準備ができたら、https://giscus.app/ja にアクセスし、ページに従って情報を入力します。

1. リポジトリ：ユーザー名/リポジトリ名（例：zhangsan/blog-comments）
2. ページとDiscussionの対応：pathnameがおすすめ（URLパスごとにDiscussionが自動作成されます）
3. Discussionカテゴリ：先ほど作成したカテゴリを選択
4. テーマ：light、dark、またはpreferred_color_scheme（自動）

入力が完了すると、ページ下部に設定コードが生成されます。data-repo、data-repo-id、data-category-idなどの値をメモしておいてください。

Astroへの統合コード

ここからが本番です。AstroプロジェクトにGiscusコンポーネントを作成します。src/components/Giscus.astroを新規作成し、以下のコードを貼り付けます。

---
// src/components/Giscus.astro
---

<div class="giscus"></div>

<script>
  function loadGiscus() {
    const script = document.createElement('script');
    script.src = 'https://giscus.app/client.js';
    script.setAttribute('data-repo', 'your-username/your-repo'); // リポジトリ名に変更
    script.setAttribute('data-repo-id', 'your-repo-id'); // repo-idに変更
    script.setAttribute('data-category', 'Comments');
    script.setAttribute('data-category-id', 'your-category-id'); // category-idに変更
    script.setAttribute('data-mapping', 'pathname');
    script.setAttribute('data-reactions-enabled', '1');
    script.setAttribute('data-emit-metadata', '0');
    script.setAttribute('data-input-position', 'bottom');
    script.setAttribute('data-theme', 'light');
    script.setAttribute('data-lang', 'ja');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;

    const container = document.querySelector('.giscus');
    if (container) {
      container.innerHTML = ''; // 重複ロード防止のためクリア
      container.appendChild(script);
    }
  }

  // 初回ロード時
  loadGiscus();

  // 【重要】View Transitions対応：ページ遷移時に再ロード
  document.addEventListener('astro:page-load', loadGiscus);
</script>

<style>
  .giscus {
    margin-top: 2rem;
  }
</style>

コード内の document.addEventListener('astro:page-load', loadGiscus); という行がView Transitions対応の肝です。Astroはページ遷移時に astro:page-load イベントを発火するので、これをリッスンしてコメントコンポーネントを再ロードすることで、コメントが消える問題を防ぎます。

記事ページでの使用

ブログ記事のテンプレートファイル（通常は src/pages/blog/[...slug].astro など）を開き、記事コンテンツの後ろにGiscusコンポーネントを追加します。

---
import Giscus from '@/components/Giscus.astro';
// ...他のインポート
---

<article>
  <!-- ブログ記事本文 -->
  <h1>{title}</h1>
  <div>{content}</div>
</article>

<!-- コメントエリア -->
<Giscus />

保存して開発サーバー（npm run dev）を起動し、記事ページを開いてスクロールすると、コメント欄が表示されているはずです。別の記事に遷移してもコメント欄が消えずに表示されれば成功です。

Waline導入ガイド：最強の機能性

GitHubログインのハードルを下げ、匿名コメントを許可したい場合はWalineがおすすめです。Giscusより機能が豊富で、管理画面、統計、メール通知などがありますが、バックエンドのデプロイが必要で設定は少し複雑です。

バックエンドのデプロイ（Vercel + LeanCloud）

Walineのバックエンドは複数のプラットフォームにデプロイできますが、Vercel + LeanCloudの組み合わせが一般的で、完全に無料です。

手順1：LeanCloudアプリの作成

1. https://console.leancloud.app/ （国際版推奨）または https://console.leancloud.cn/ （中国版、ドメイン登録必須）にアクセスし、アカウント登録。
2. 「Create App」をクリックし、「Development」プラン（無料1GBストレージ）を選択。
3. 作成後、「Settings → App Keys」に進み、以下の3つの値をメモします：
   • App ID (LEAN_ID)
   • App Key (LEAN_KEY)
   • Master Key (LEAN_MASTER_KEY)

手順2：Vercelへのデプロイ

1. https://vercel.com/new/clone?repository-url=https://github.com/waline/waline/tree/main/example にアクセス（Waline公式のワンクリックデプロイ）。
2. GitHubでVercelにログイン。
3. プロジェクト名（例：my-waline）を入力してCreate。
4. デプロイ完了まで1〜2分待ちます。
5. 「Settings → Environment Variables」に進み、3つの環境変数を追加します：
   • LEAN_ID = さっきのApp ID
   • LEAN_KEY = さっきのApp Key
   • LEAN_MASTER_KEY = さっきのMaster Key
6. 保存後、「Deployments」から最新のデプロイを選び、「Redeploy」を実行。
7. 成功するとドメイン（例：my-waline.vercel.app）が発行されます。

手順3：カスタムドメインの設定（重要！）

Vercelの.vercel.appドメインは一部のネットワーク環境でアクセスできないことがあるため、独自ドメインの設定を強く推奨します。

1. ドメイン管理画面（お名前.comやAWSなど）でCNAMEレコードを追加：
   • ホスト名：waline（任意）
   • 値：cname.vercel-dns.com
2. Vercelに戻り、「Settings → Domains」でドメイン（例：waline.yourdomain.com）を追加。
3. DNSが反映されるのを待ちます。

Astroへのフロントエンド統合

バックエンドの準備ができたら、Astro側に組み込みます。

手順1：クライアントのインストール

npm install @waline/client

手順2：Walineコンポーネントの作成

src/components/Waline.astroを作成：

---
// src/components/Waline.astro
---

<div id="waline"></div>

<script>
  import { init } from '@waline/client';
  import '@waline/client/style';

  function loadWaline() {
    const walineInstance = init({
      el: '#waline',
      serverURL: 'https://waline.yourdomain.com', // あなたのWalineドメインに変更
      path: window.location.pathname,
      lang: 'ja',
      dark: 'auto', // ダークモード自動対応
      emoji: [
        '//unpkg.com/@waline/emojis@latest/weibo',
        '//unpkg.com/@waline/emojis@latest/bilibili'
      ],
      meta: ['nick', 'mail'], // 入力項目：ニックネーム、メアド
      requiredMeta: ['nick'], // 必須項目
      pageSize: 10,
    });

    // インスタンスを返す（破棄用）
    return walineInstance;
  }

  // インスタンス保持用変数
  let walineInstance = null;

  // 初回ロード
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      walineInstance = loadWaline();
    });
  } else {
    walineInstance = loadWaline();
  }

  // 【重要】View Transitions対応
  document.addEventListener('astro:page-load', () => {
    // 古いインスタンスを破棄
    if (walineInstance && walineInstance.destroy) {
      walineInstance.destroy();
    }
    // 再ロード
    walineInstance = loadWaline();
  });
</script>

<style>
  #waline {
    margin-top: 2rem;
  }
</style>

ここでも astro:page-load イベントで再初期化を行いますが、Walineの場合は destroy() メソッドで古いインスタンスを破棄してメモリリークを防ぐのがポイントです。

手順3：記事ページでの使用

Giscus同様、記事テンプレートに追加します。

---
import Waline from '@/components/Waline.astro';
---
<!-- 記事本文 -->
<article>...</article>

<Waline />

管理者アカウントの登録

デプロイ後、https://waline.yourdomain.com/ui/register にアクセスして最初のアカウントを登録します。このアカウントが自動的に管理者になります。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

管理画面は https://waline.yourdomain.com/ui です。管理者でログインすると、スパムコメントの一括削除やデータエクスポートなど、WordPress のコメントプラグインに近い操作ができます。

Twikoo導入ガイド：軽量＆シンプル

Twikooは3つの中で最も軽量で、デプロイ方法も柔軟（Tencent Cloud, Vercel, Cloudflare Workers等）です。Walineほど複雑な機能は不要で、シンプルさを好み、匿名コメントを使いたい場合に適しています。

Cloudflare Workersへのデプロイ

ここでは無料で安定しているCloudflare Workersへのデプロイを紹介します。

手順1：Twikooのインストール

npm install twikoo

手順2：Cloudflare Workersへのデプロイ

1. Cloudflareアカウント作成/ログイン。
2. 「Workers & Pages」→「Create Application」→「Create Worker」。
3. 名前（例：my-twikoo）を決めてDeploy。
4. 「Quick Edit」をクリックし、デフォルトコードを削除して、Twikoo公式サイト（https://twikoo.js.org/）にあるCloudflare Workers用コードをコピペします。
5. 保存してデプロイ。WorkerのURL（例：my-twikoo.your-subdomain.workers.dev）をメモします。

Astroへのフロントエンド統合

src/components/Twikoo.astroを作成：

---
// src/components/Twikoo.astro
---

<div id="twikoo"></div>

<script>
  function loadTwikoo() {
    // 動的インポートでSSRエラー回避
    import('twikoo').then((twikoo) => {
      twikoo.init({
        envId: 'https://my-twikoo.your-subdomain.workers.dev', // WorkerのURL
        el: '#twikoo',
        path: window.location.pathname,
        lang: 'ja',
      });
    });
  }

  // 初回ロード
  loadTwikoo();

  // 【重要】View Transitions対応
  document.addEventListener('astro:page-load', () => {
    // コンテナをクリアして再レンダリング
    const container = document.getElementById('twikoo');
    if (container) {
      container.innerHTML = '';
      loadTwikoo();
    }
  });
</script>

<style>
  #twikoo {
    margin-top: 2rem;
  }
</style>

記事ページへの追加方法は他と同じです。

---
import Twikoo from '@/components/Twikoo.astro';
---

<article>
  <!-- 記事本文 -->
</article>

<Twikoo />

Astro 互換性：View Transitions の落とし穴

前述の 3 つの統合コードには、次のような 1 行が入っています。

document.addEventListener('astro:page-load', loadComment);

これが Astro の View Transitions（ビュートランジション）問題を解く鍵です。この行がないと、コメントコンポーネントは最初のページ表示時だけ読み込まれ、別記事へ遷移するとコメントが消えます。

なぜこうなるのか？

Astro の View Transitions は SPA に近いルーティングです。リンクをクリックしてもページ全体はリロードされず、コンテンツ部分だけ差し替わります。切り替えは速くて体験も良い一方、従来のコメントスクリプトは「ページ読み込み時に 1 回実行」前提のものが多く、再実行されないとコメントは当然消えます。

解決策

Astro にはライフサイクルイベントがあり、よく使うのが astro:page-load です。初回読み込みとルート切り替えのあと、コンテンツ読み込み完了のたびに発火します。このイベントをリッスンし、毎回コメントコンポーネントを再初期化すれば十分です。

document.addEventListener('astro:page-load', () => {
  // コメントを再初期化
  loadComment();
});

その他の方法（非推奨）

方法 1：transition:persist ディレクティブ

ページ遷移時に要素を維持するディレクティブです。一見うまくいきそうですが、記事ごとにコメント内容が違うため、維持すると記事 A に記事 B のコメントが出るなど、表示がずれます。

<!-- 非推奨：コメントがずれる -->
<div id="comments" transition:persist>
  <Giscus />
</div>

方法 2：View Transitions を無効化

どうしても難しい場合は、記事ページだけ View Transitions をやめ、従来のフルリロードに戻せます。

---
// src/pages/blog/[...slug].astro
// <ViewTransitions /> を読み込まない
---

ただし切り替えアニメーションは失われ、体験は落ちます。通常は astro:page-load で再初期化する方がよいです。

テーマ切り替えへの対応

ブログがライト／ダーク切り替えに対応しているなら、コメント側のテーマも追従させます。Giscus の例：

document.addEventListener('theme-change', (e) => {
  const theme = e.detail.theme; // light / dark

  const iframe = document.querySelector('iframe.giscus-frame');
  if (iframe) {
    iframe.contentWindow.postMessage(
      { giscus: { setConfig: { theme } } },
      'https://giscus.app'
    );
  }
});

Waline と Twikoo も同様の API があります。詳細は各公式ドキュメントを参照してください。

よくある質問

Q1: Vercel がブロックされて見れない場合は？

A: よくある問題です。.vercel.app ドメインは一部のネットワークで DNS 汚染などによりアクセスできません。対策は独自ドメインの利用です。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

1. ドメイン管理画面で CNAME を追加し、cname.vercel-dns.com を向ける
2. Vercel の Settings → Domains にドメインを追加
3. DNS 反映後、そのドメインでコメントサービスにアクセス

Q2: コメントデータは移行できる？

A: 可能ですが手間がかかります。

• Giscus：GitHub Discussions に保存。GitHub API で JSON エクスポート可能
• Waline：管理画面から CSV または JSON でエクスポート
• Twikoo：バックアップでローカルにエクスポート

システム間の移行にはデータ形式の変換スクリプトが必要で、既製の一括移行ツールはありません。

Q3: スパムコメントはどう防ぐ？

A: 3 つともスパム対策があります。

• Giscus：GitHub のスパム対策に依存。ほぼ心配不要
• Waline：Akismet 内蔵。管理画面で手動承認も可能
• Twikoo：キーワードフィルタ、CAPTCHA、IP ブラックリストなど

「コメント承認」を有効にし、管理者承認後に表示するのが確実です。

Q4: 複数のコメントシステムを同時に使える？

A: 技術的には可能ですが、おすすめしません。読み込みが重くなり、コメントがプラットフォームごとに分散して管理しづらくなります。切り替える場合は、まず旧システムからデータをエクスポートし、新システムへ移行する流れが現実的です。

Q5: コメントの読み込みが遅い場合は？

A: 次のような最適化があります。

• 遅延読み込み：コメント欄が画面に入ったタイミングで読み込む
• CDN の利用：Waline と Twikoo は CDN 設定に対応
• 絵文字パックの削減：Waline はデフォルトで複数パックを読み込むため、常用分だけに絞る

まとめ

ここまでの内容を整理します。

Giscus — 読者が主にエンジニア、またはコストゼロ・運用負荷ゼロを優先するなら第一候補。設定はいちばん簡単で、約 5 分で完了。GitHub ネイティブな体験です。

Waline — 強力な管理画面が欲しい、匿名コメントで参加のハードルを下げたい場合。アクセスやコメントが多いブログ向きです。

Twikoo — Waline ほど複雑な管理機能は不要で、軽量・シンプルさを重視する場合。デプロイ先の選択肢も柔らかく、UI もすっきりしています。

私の技術ブログは Giscus です。読者はエンジニアが多く、GitHub ログインはむしろ便利です。完全無料でメンテもほぼ不要なのが決め手でした。

コメントを入れると、ブログに対話と温度が加わります。読者の声や質問は、書き続けるモチベーションになります。チュートリアルどおりに設定すれば、10 分程度で公開できます。

ほかに疑問があれば、ぜひコメント欄で（笑。もちろん、その前にコメントシステムの導入が済んでいることが前提です）。設定がうまくいくことを願っています。