静的ウェブサイトは、先に用意したHTML、CSS、JavaScriptファイルを通してコンテンツを配信するため、多くの人にとって扱いやすく経済的な選択肢となります。

静的サイトの情報は基本的には固定されますが、動的な要素を加えることでユーザーとのインタラクションが可能になります。コメント欄を組み込めば、訪問者がコンテンツやサービスについて感想を述べたり、フィードバックを提供したり、質問を投げかけたりすることができます。

これによりコミュニティが活発になり、オーディエンスと密につながり、フィードバックなどに基づいてサービスを改善することも可能です。今回の記事では、Kinstaの静的サイトホスティングで管理する静的サイトにコメントセクションを追加する方法をご紹介します。

Kinstaで基本的な静的サイトをセットアップする

今回の説明では、Kinsta GitHubアカウントで作成したDocusaurusテンプレートを使用します。Docusaurusは、人気のJavaScriptライブラリの1つであるReactをページ作成のUIライブラリとして採用した人気の静的サイトジェネレーターです。

以下の手順に従って、Kinstaでサイトをセットアップしてください。

  1. Docusaurusテンプレートを使用するには、「Use this template」＞「Create a new repository」をクリック
  2. 以下のコマンドを実行して、リポジトリをローカル環境に複製 
    https://github.com/kinsta/hello-world-docusaurus.git

  3. ログインするか、アカウントを作成してMyKinstaを表示
  4. GitサービスでKinstaを認証
  5. 左サイドバーの「静的サイト」をクリックし「サイトの追加」をクリック
  6. デプロイしたいリポジトリとブランチを選択
  7. サイトに一意の名前を割り当てる
  8. 次の形式でビルドの設定を行う
    • ビルドコマンド：npm run build
    • Nodeのバージョン：18.16.20
    • 公開ディレクトリ：build
  9. 最後に「サイトを作成」をクリック

サイトのデプロイが完了したら、デプロイしたサイトの「概要」タブからドメインやURLを確認することができます。

静的サイトのデプロイに成功
静的サイトのデプロイに成功

Disqusアカウントの作成

Disqusでは、ソーシャル機能の統合、モデレーション、分析を通じてエンゲージメントを高める工夫を凝らしていくことができます。単なるコメント追加の手段というよりは、オンラインディスカッションを助けるツールです。Disqusを使用する手順は以下の通りです。

  1. Disqusアカウントを作成
  2. 登録に必要な情報を入力
  3. 新規登録の完了後、「I want to install Disqus on my site」を選択
  4. Disqusにサイトを登録（サイトの短い名前とカテゴリを選択してください。今後作成するものを含むサイト一覧が自動で生成されます）
  5. 組織のDisqusプランを選択（Disqusでは、Plus、Pro、Businessなど、さまざまなプランから選択できます。今回の説明では、コメントプラグイン、高度なスパムフィルタリング、モデレーション、基本的な分析などの機能が搭載されたBasicプランを選択します）

Kinstaの静的サイトにDisqusを統合する

続いて、静的サイトジェネレーターにDisqusコードを統合します。

  1. サイトを登録した後「I don’t see my platform listed, install manually with Universal Code」をクリックします。
    ユニバーサルコードを使用して手動でDisqusコードを埋め込む
    ユニバーサルコードを使用して手動でDisqusコードを埋め込む

    表示されるページの「Place the following code where you’d like Disqus to load（以下のコードをDisqusに読み込ませたい場所に貼り付けてください）」と書かれたセクションにJavaScriptコードがあります。今回の静的サイトはReactアプリケーションなので、Reactで動作するようにこのコードを調整する必要があります。

  2. src/componentsフォルダ内にDisqusというフォルダを作成します。
  3. index.jsファイル内で以下のコードを使用します。https://your_shortname_placeholder.disqus.com/embed.jsをユニバーサルコードで受け取ったURLに置き換えてください。 
    import React, { useEffect } from 'react';

const DisqusComments = () => {
    useEffect(() => {

    const disqus_config = function () {
        this.page.url = PAGE_URL;  // PAGE_URLを実際のページの正規URL変数に置き換える
        this.page.identifier = PAGE_IDENTIFIER; // PAGE_IDENTIFIERを実際のページの一意の識別子変数に置き換える
    };

    // Disqusスクリプトを動的に読み込む
    (function () {
        const d = document;
        const s = d.createElement('script');
        s.src = 'https://your_shortname_placeholder.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();

    // コンポーネントのアンマウント時にDisqusをクリーンアップ
    return () => {
        const disqusThread = document.getElementById('disqus_thread');
        if (disqusThread) {
        disqusThread.innerHTML = ''; // 他のコンポーネントとの干渉を避けるため、Disqusスレッドをクリア
        }
    };
    }, []); // このエフェクトはコンポーネントマウントで一度だけ実行

    return (
    <div>
        <div> id="disqus_thread"></div>
        <noscript>Disqusによるコメントを表示するには<a>  
href="https://disqus.com/?ref_noscript">JavaScriptを有効</a>にしてください。</noscript>
    </div>
    );
};

export default DisqusComments;

    disqus_config関数は以下の2つの変数を定義します。

    • this.page.url：この変数はPAGE_URLに設定されているので、ページの正規URLに置き換えてください。DisqusはこのURLを使用して、コメントが属する特定のページを識別します。
    • this.page.identifier：この変数はPAGE_IDENTIFIERに設定されます。ページの一意の識別子に置き換えてください。この識別子により、Disqusは同じURLのページを区別し、コメントを正しいページに関連付けることができます。
  4. このコンポーネントをDisqusコメントセクションを表示したいページにインポートします。 
    import DisqusComments from '@site/src/components/Disqus';
  5. 次に、ランディングページにDisqusコメントセクションを追加し、src/pagesディレクトリ内のindex.jsに以下のimport文を含め、DisqusCommentsを利用します。 
    export default function Home() {
    const {siteConfig} = useDocusaurusContext();
    return (
    <Layout
        title={`Hello from ${siteConfig.title}`}
        description="説明は<head />内のmetaタグに入る">
        <HomepageHeader />
        <main>
        <HomepageFeatures />
        <DisqusComments/>
        </main>
    </Layout>
    );
}
  6. この変更内容をリポジトリにコミットして、Kinstaがホストする静的サイトに反映します。 
    git add .
git commit -m "Disqusコメントの追加"
git push -u origin master

静的サイトのデプロイ時に「コミットに際し自動でデプロイ」を有効にした場合、新しい変更をコミットすると自動でMyKinstaにてデプロイが実行されます。そうでない場合は、変更後に手動でデプロイを行なってください。

Disqusコメントを統合した静的サイト
Disqusコメントを統合した静的サイト

これで、Kinsta静的サイトホスティングを使用して静的サイトを作成し、Disqusを使用してコメントセクションを統合することができました。

コメントセクションが意図したとおりに表示されるように、適宜DisqusCommentsコンポーネントを調整することもできます。

コメントセクションを調整する方法

静的サイトのコメントセクションは、外観の変更、リアクションの実装、コメントモデレーションの実行などでカスタマイズできます。Disqusで利用可能なカスタマイズオプションには以下のようなものがあります。

テーマのカスタマイズ

Disqus コメントのテーマをカスタマイズするには、Disqusのダッシュボードに移動し、「Settings」タブから「General」をクリックし、「Color Scheme」および「Typeface」ドロップダウンから好みのものを選択してください。

Disqusコメントのテーマに変更を加える
Disqusコメントのテーマに変更を加える

サイト上でのリアクションを有効にする

サイト上でリアクションを有効にすることで、サイト訪問者のエンゲージメントを高めることができます。お好みに合わせてリアクションを調整してください。

この機能を有効にするには、Disqusダッシュボードの「Settings」タブに移動し「Reactions」を選択します。次に「Enable Reactions on your site」をクリックします。

Disqusでリアクションを設定し機能を有効にする
Disqusでリアクションを設定し機能を有効にする

完了したらサイトを再読み込みしてください。するとリアクションが利用できるようになります。

静的サイトにリアクションを統合した結果
静的サイトにリアクションを統合した結果

コメントアバター

デフォルトのコメントアバターを設定することもできます。

この機能を有効にするには、Disqusダッシュボードに移動し、「Settings」タブから「General」をクリックし「Default Commenter Asvatar」から画像をアップロードします。

デフォルトのアバターを設定する機能
デフォルトのアバターを設定する機能

コメントの並べ替え

「Oldest First」「Newest First」または「Best First」に基づいてコメントをソート可能です。Disqusダッシュボード「Settings」タブの「Community」をクリックし、「Default Sort」ドロップダウンから好きな並び順を選択します。

指定した順序に基づいてコメントを並べ替える
指定した順序に基づいてコメントを並べ替える

コメントをモデレートする方法

Disqusのコメントをモデレートするには、DisqusダッシュボードのトップナビゲーションバーにあるDisqusモデレーションパネルを使用します。ここから、フォーラムのコメントとそのステータス（承認済み、保留中など）を素早く確認できます。

また、Disqusダッシュボード「Settings」タブ下の左ナビゲーションペインにある「Moderation」メニューからモデレーションルールを設定することも可能です。

Disqusダッシュボードからモデレーションパネルを表示する
Disqusダッシュボードからモデレーションパネルを表示する

Disqusのコメントを管理およびモデレートするのに便利な主な手順と機能については、Disqusのドキュメントをご覧ください。

訪問者にコメントを許可する

ゲストユーザーにコメントを許可するには、「Guest Commenting」チェックボックスにチェックを入れ、「Save」をクリックします。このコメントは、モデレーターがDisqusモデレーションダッシュボードから承認するまで保留状態になります。

ゲストにコメントを許可する
ゲストにコメントを許可する

コメントを承認、削除、スパムとしてマーク

モデレーションパネルでは、複数のコメントを選択することで、一括操作（コメントの承認、削除、スパムとしてマーク）を実行できます。また、拡張コメントビューで個別にモデレートすることも可能です。

この設定を有効にすると、モデレーターがコメントを承認した場合のみ表示されます。

一括操作でDisqusのコメントをモデレートする
一括操作でDisqusのコメントをモデレートする

まとめ

今回の記事では、静的サイトにコメント欄を追加する方法をご紹介しました。Docusaurus以外にも、VuePressやGatsbyなどのSSG（静的サイトジェネレーター）にDisqusを実装することができます。

Kinstaの静的サイトホスティングを利用すれば、構築した非動的ファイルを簡単にデプロイ可能です。Kinstaで静的サイトをホスティングし、コメントセクションのような機能を統合するのがおすすめです。詳しくは、Kinstaの静的サイトホスティングについてをご確認ください。

静的サイトにDisqusまたはその他のコメントサービスを実装したことはありますか？以下のコメント欄でその結果やご感想をお聞かせください。

Jeremy Holcombe Kinsta

Kinstaのコンテンツ＆マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。