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

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

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

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

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

今すぐ始める →広告

もしあなたが同じような問題に直面している、あるいはどのコメントシステムを選べばいいか迷っているなら、この記事が役立ちます。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を導入する前に、以下の準備が必要です。

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ボットだけがトピックを作成でき、他のユーザーは返信のみ可能になるため、スパムを防げます。

###設定パラメータの取得

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

価格を見る →広告

準備ができたら、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同様、記事テンプレートに追加します。

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

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

<Waline />

管理者アカウントの登録

デプロイ後、https://waline.yourdomain.com/ui/register にアクセスして最初のアカウントを作成します。このアカウントが自動的に管理者になり、コメントの承認や削除が可能になります。

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>

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

View Transitionsの落とし穴と解決策

前述の通り、各統合コードには以下の行を含めています。

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

これがAstroのView Transitions（SPA風遷移）におけるコメント「消失」問題の解決策です。View Transitionsを使うと、ページ遷移時にHTML全体がリロードされるのではなく、コンテンツ部分だけが置換されます。しかし、従来のコメントスクリプトはページロード時に一度だけ実行される設計のものが多く、遷移後に再実行されません。

Astroの astro:page-load ライフサイクルイベントをリッスンすることで、ページ遷移のたびに強制的にスクリプトを再実行させ、コンポーネントを描画し直しています。

その他の解決策（非推奨）

1. transition:persist の使用
コンポーネントを維持するディレクティブですが、記事Aから記事Bに移動しても記事Aのコメントが残ってしまうため、コメントシステムには不向きです。

2. View Transitionsの無効化
記事ページだけ従来の画面遷移（フルリロード）に戻す方法ですが、UXが低下するためおすすめしません。

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

今すぐ始める →広告

よくある質問

Q1: Vercelのドメインが見れません

A: .vercel.app ドメインは環境によって接続できない場合があります。独自ドメインを取得し、CNAME設定を行ってVercelに紐付けるのが確実な解決策です。

Q2: コメントデータの移行はできますか？

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

• Giscus: GitHub Discussions API経由でJSONエクスポート可能。
• Waline: 管理画面からCSV/JSONエクスポート可能。
• Twikoo: バックアップのエクスポートが可能。
  システム間の移行にはデータ変換スクリプトを書く必要があります。

Q3: スパム対策は？

A:

• Giscus: GitHubのスパムフィルタに依存（強力）。
• Waline: Akismetプラグイン内蔵、管理画面での承認制設定が可能。
• Twikoo: キーワードフィルタ、Akismet、IP制限などが可能。
  管理画面で「承認制」に設定するのが一番確実です。

まとめ

最後にまとめます。

Giscus：エンジニア向け、または完全無料・メンテナンスフリーを求めるならこれ一択。設定時間5分。

Waline：一般向け、匿名投稿OKにしたい、強力な管理画面が欲しいならこれ。

Twikoo：一般向けで、Walineよりシンプル・軽量なものが良いならこれ。

私は技術ブログを運営しているのでGiscusを使用しています。読者がエンジニアばかりなのでGitHubログインは障壁になりませんし、何より完全無料でメンテ不要なのが最高です。

コメントシステムを導入すると、ブログに「温度」が生まれます。読者からのフィードバックや質問は、書き続けるモチベーションになります。ぜひ導入してみてください。

6 min read · 公開日: 2025年12月4日 · 更新日: 2026年1月22日

Easton

技術開発