Firebaseを使用して独自のコメントシステムを構築する方法

公開: 2022-03-10
簡単な要約↬ブログにコメントセクションを作成したいと思ったことはありますが、高コストでメンテナンスソリューションに圧倒されていませんか？ Firebaseはあなたの救世主になることができます。 このガイドでは、Firebaseの基本を学びながら、Firebaseを使用してブログにコメントセクションを追加する方法を学習します。

コメントセクションは、ブログのコミュニティを構築するための優れた方法です。 最近ブログを始めたとき、コメント欄を追加しようと思いました。 しかし、それは簡単ではありませんでした。 DisqusやCommentoなどのホスト型コメントシステムには、独自の一連の問題があります。

  • 彼らはあなたのデータを所有しています。
  • 彼らは無料ではありません。
  • それらをあまりカスタマイズすることはできません。

そこで、独自のコメントシステムを構築することにしました。 Firebaseは、バックエンドサーバーを実行する代わりの完璧なホスティングのように見えました。

まず第一に、あなたはあなた自身のデータベースを持つことのすべての利点を手に入れます：あなたはデータを制御し、そしてあなたはあなたが望むようにそれを構造化することができます。 次に、バックエンドサーバーを設定する必要はありません。 フロントエンドから簡単に制御できます。 それは、両方の長所を備えているようなものです。つまり、バックエンドの手間をかけずにホストされたシステムです。

この投稿では、それを行います。 静的サイトジェネレーターであるGatsbyを使用してFirebaseを設定する方法を学習します。 ただし、この原則は、任意の静的サイトジェネレーターに適用できます。

飛び込みましょう！

Firebaseとは何ですか？

Firebaseは、データベース、ホスティング、クラウド機能、認証、分析、ストレージなどのアプリ開発者向けのツールを提供するサービスとしてのバックエンドです。

Cloud Firestore（Firebaseのデータベース）は、このプロジェクトで使用する機能です。 これはNoSQLデータベースです。 これは、行、列、およびテーブルを持つSQLデータベースのように構造化されていないことを意味します。 これは大きなJSONツリーと考えることができます。

プロジェクトの紹介

GitHubからリポジトリを複製またはダウンロードして、プロジェクトを初期化しましょう。

ステップごとに2つのブランチ（最初と最後に1つ）を作成して、変更を追跡しやすくしました。

次のコマンドを使用してプロジェクトを実行してみましょう。

 gatsby develop

ブラウザでプロジェクトを開くと、基本的なブログの骨子が表示されます。

基本ブログ
（大プレビュー）

コメントセクションが機能していません。 サンプルコメントをロードするだけで、コメントが送信されると、詳細がコンソールに記録されます。

私たちの主なタスクは、コメントセクションを機能させることです。

ジャンプした後もっと！ 以下を読み続けてください↓

コメントセクションの仕組み

何かをする前に、コメントセクションのコードがどのように機能するかを理解しましょう。

4つのコンポーネントがコメントセクションを処理しています。

  • blog-post.js
  • Comments.js
  • CommentForm.js
  • Comment.js

まず、投稿のコメントを特定する必要があります。 これは、ブログ投稿ごとに一意のIDを作成することで実行できます。または、常に一意であるスラッグを使用することもできます。

blog-post.jsファイルは、すべてのブログ投稿のレイアウトコンポーネントです。 これは、ブログ投稿のスラッグを取得するための完璧なエントリポイントです。 これは、GraphQLクエリを使用して行われます。

 export const query = graphql` query($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { title } fields { slug } } } `

それをComments.jsコンポーネントに送信する前に、 substring()メソッドを使用して、Gatsbyがスラッグに追加する末尾のスラッシュ（ / ）を削除しましょう。

 const slug = post.fields.slug.substring(1, post.fields.slug.length - 1) return ( <Layout> <div className="container"> <h1>{post.frontmatter.title}</h1> <div dangerouslySetInnerHTML={{ __html: post.html }} /> <Comments comments={comments} slug={slug} /> </div> </Layout> ) }

Comments.jsコンポーネントは、各コメントをマップし、そのデータを返信とともにComment.jsに渡します。 このプロジェクトでは、コメントシステムを1レベル深くすることにしました。

コンポーネントはCommentForm.jsもロードして、トップレベルのコメントをキャプチャします。

 const Comments = ({ comments, slug }) => { return ( <div> <h2>Join the discussion</h2> <CommentForm slug={slug} /> <CommentList> {comments.length > 0 && comments .filter(comment => !comment.pId) .map(comment => { let child if (comment.id) { child = comments.find(c => comment.id === c.pId) } return ( <Comment key={comment.id} child={child} comment={comment} slug={slug} /> ) })} </CommentList> </div> ) }

CommentForm.jsに移りましょう。 このファイルは単純で、コメントフォームをレンダリングし、その送信を処理します。 送信方法は、詳細をコンソールに記録するだけです。

 const handleCommentSubmission = async e => { e. preventDefault() let comment = { name: name, content: content, pId: parentId ∣∣ null, time: new Date(), } setName("") setContent("") console.log(comment) }

Comment.jsファイルには多くのことが起こっています。 それをより小さな断片に分解しましょう。

まず、コメントをレンダリングするSingleCommentコンポーネントがあります。

かっこいいアバターを取得するためにAdorableAPIを使用しています。 Moment.jsライブラリは、人間が読める形式で時間をレンダリングするために使用されます。

 const SingleComment = ({ comment }) => ( <div> <div className="flex-container"> <div className="flex"> <img src="https://api.adorable.io/avazars/65/[email protected]" alt="Avatar" /> </div> <div className="flex"> <p className="comment-author"> {comment.name} <span>says</span> </p> {comment.time} &&(<time>(moment(comment.time.toDate()).calendar()}</time>)} </div> </div> </p>{comment.content}</p> </div> )

ファイルの次はCommentコンポーネントです。 このコンポーネントには、子コメントが渡された場合に子コメントが表示されます。 それ以外の場合は、返信ボックスが表示されます。返信ボックスは、[返信]ボタンまたは[返信のキャンセル]ボタンをクリックしてオンとオフを切り替えることができます。

 const Comment = ({ comment, child, slug }) => { const [showReplyBox, setShowReplyBox] = useState(false) return ( <CommentBox> <SingleComment comment={comment} /> {child && ( <CommentBox child className=comment-reply"> <SingleComment comment={child} /> </CommentBox> )} {!child && ( <div> {showReplyBox ? ( <div> <button className="btn bare" onClick={() => setShowReplyBoy(false)} > Cancel Reply </button> <CommentForm parentId={comment.id} slug={slug} /> </div> ) : ( <button className="btn bare" onClick={() => setShowReplyBox(true)}> Reply </button> )} </div> )} </div> )} </CommentBox>

概要がわかったので、コメントセクションを作成する手順を見ていきましょう。

1.Firebaseを追加します

まず、プロジェクト用にFirebaseを設定しましょう。

サインアップすることから始めます。 Firebaseにアクセスして、Googleアカウントにサインアップします。 お持ちでない場合は、「はじめに」をクリックしてください。

「プロジェクトの追加」をクリックして、新しいプロジェクトを追加します。 プロジェクトの名前を追加し、「プロジェクトの作成」をクリックします。

Firebaseを初期化する
（大プレビュー）

プロジェクトを作成したら、CloudFirestoreをセットアップする必要があります。

左側のメニューで、「データベース」をクリックします。 「CloudFirestore」というページが開いたら、「データベースの作成」をクリックして、新しいCloudFirestoreデータベースを作成します。

CloudFirestore
（大プレビュー）

ポップアップが表示されたら、「テストモードで開始」を選択します。 次に、最寄りのCloudFirestoreの場所を選択します。

Firestoreテストモード
（大プレビュー）

このようなページが表示されたら、CloudFirestoreデータベースが正常に作成されたことを意味します。

Firestoreダッシュボード
（大プレビュー）

最後に、アプリケーションのロジックを設定します。 アプリケーションに戻り、Firebaseをインストールします。

 yarn add firebase

ルートディレクトリに新しいファイルfirebase.jsを追加します。 このコンテンツを貼り付けます。

 import firebase from "firebase/app" import "firebase/firestore" var firebaseConfig = 'yourFirebaseConfig' firebase.initializeApp(firebaseConfig) export const firestore = firebase.firestore() export default firebase

yourFirebaseConfigをプロジェクト用のものに置き換える必要があります。 これを見つけるには、Firebaseアプリの[プロジェクトの概要]の横にある歯車のアイコンをクリックします。

プロジェクト設定
（大プレビュー）

設定ページが開きます。 アプリの小見出しの下で、次のようなWebアイコンをクリックします。

プロジェクトのインストール
（大プレビュー）

これにより、ポップアップが開きます。 「アプリのニックネーム」フィールドに任意の名前を入力し、「アプリの登録」をクリックします。 これにより、 firebaseConfigオブジェクトが提供されます。

 <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script> // Your web app's Firebase configuration var firebaseConfig = { ... }; // Initialize Firebase firbase.initializeApp(firebaseConfig); </script>

firebaseConfigオブジェクトの内容だけをコピーして、 firebase.jsファイルに貼り付けます。

Firebase APIキーを公開しても大丈夫ですか？

はい。 Googleのエンジニアが述べているように、APIキーを公開しても問題ありません。

APIキーの唯一の目的は、Googleのデータベースでプロジェクトを識別することです。 Cloud Firestoreに強力なセキュリティルールを設定している場合は、誰かがAPIキーを入手しても心配する必要はありません。

前のセクションでセキュリティルールについて説明します。

現在、Firestoreはテストモードで実行されているため、APIキーを公開しないでください。

Firestoreの使い方は？

次の2つのタイプのいずれかにデータを保存できます。

  • コレクション
    コレクションにはドキュメントが含まれています。 それはドキュメントの配列のようなものです。
  • 資料
    ドキュメントには、フィールドと値のペアのデータが含まれています。

コレクションにはドキュメントのみが含まれ、他のコレクションは含まれない場合があることに注意してください。 ただし、ドキュメントには他のコレクションが含まれている場合があります。

つまり、コレクションをコレクション内に保存する場合は、次のように、コレクションをドキュメントに保存し、そのドキュメントをコレクションに保存します。

 {collection-1}/{document}/{collection-2}

データを構造化する方法は？

Cloud Firestoreは本質的に階層的であるため、人々は次のようなデータを保存する傾向があります。

 blog/{blog-post-1}/content/comments/{comment-1}

ただし、この方法でデータを保存すると、問題が発生することがよくあります。

コメントを取得したいとします。 ブログコレクションの奥深くに保存されているコメントを探す必要があります。 これにより、コードでエラーが発生しやすくなります。 Chris Esplinは、サブコレクションを使用しないことをお勧めします。

データをフラット化されたオブジェクトとして保存することをお勧めします。

 blog-posts/{blog-post-1} comments/{comment-1}

このようにして、データを簡単に取得および送信できます。

Firestoreからデータを取得する方法は？

データを取得するために、Firebaseには2つの方法があります。

  • get()
    これは、コンテンツを1回取得するためのものです。
  • onSnapshot()
    このメソッドはデータを送信し、購読を解除しない限り更新を送信し続けます。

Firestoreにデータを送信する方法は？

データを取得する場合と同様に、Firebaseにはデータを保存するための2つの方法があります。

  • set()
    これは、ドキュメントのIDを指定するために使用されます。
  • add()
    これは、自動IDを使用してドキュメントを作成するために使用されます。

私は知っています、これは把握することがたくさんありました。 しかし、心配しないでください。プロジェクトに到達したときに、これらの概念を再検討します。

2.サンプル日付を作成します

次のステップは、クエリ用のサンプルデータを作成することです。 Firebaseにアクセスしてこれを実行しましょう。

CloudFirestoreに移動します。 「コレクションの開始」をクリックします。 「コレクションID」にcommentsを入力し、「次へ」をクリックします。

コレクションを追加
（大プレビュー）

「ドキュメントID」は「自動ID」をクリックします。 以下のデータを入力し、「保存」をクリックします。

ドキュメントを追加
（大プレビュー）

データを入力するときは、「フィールド」と「タイプ」が上のスクリーンショットと一致していることを確認してください。 次に、「保存」をクリックします。

これが、Firestoreで手動でコメントを追加する方法です。 プロセスは面倒に見えますが、心配しないでください。今後、アプリがコメントの追加を処理します。

この時点で、データベースは次のようになります： comments/{comment} 。

3.コメントデータを取得します

サンプルデータをクエリする準備ができました。 ブログのデータを取得することから始めましょう。

blog-post.jsに移動し、作成したFirebaseファイルからFirestoreをインポートします。

 import {firestore} from "../../firebase.js"

クエリを実行するには、ReactのuseEffectフックを使用します。 まだインポートしていない場合は、インポートしてみましょう。

 useEffect(() => { firestore .collection(`comments`) .onSnapshot(snapshot => { const posts = snapshot.docs .filter(doc => doc.data().slug === slug) .map(doc => { return { id: doc.id, ...doc.data() } }) setComments(posts) }) }, [slug])

データの取得に使用されるメソッドはonSnapshotです。 これは、状態の変化も聞きたいからです。 したがって、コメントは、ユーザーがブラウザを更新しなくても更新されます。

filterメソッドとmapメソッドを使用して、スラッグが現在のスラッグと一致するコメントを見つけました。

最後に考えなければならないのは、クリーンアップです。 onSnapshotは引き続き更新を送信するため、アプリケーションでメモリリークが発生する可能性があります。 幸い、Firebaseはきちんとした修正を提供します。

 useEffect(() => { const cleanUp = firestore .doc(`comments/${slug}`) .collection("comments") .onSnapshot(snapshot => { const posts = snapshot.docs.map(doc => { return { id: doc.id, ...doc.data() } }) setComments(posts) }) return () => cleanUp() }, [slug])

完了したら、 gatsby developを実行して変更を確認します。 これで、Firebaseからデータを取得するコメントセクションが表示されます。

Firestoreデータの取得
（大プレビュー）

コメントの保存に取り掛かりましょう。

4.コメントを保存する

コメントを保存するには、 CommentForm.jsファイルに移動します。 このファイルにもFirestoreをインポートしましょう。

 import { firestore } from "../../firebase.js"

コメントをFirebaseに保存するには、 add()メソッドを使用します。これは、Firestoreで自動IDを使用してドキュメントを作成するためです。

handleCommentSubmissionメソッドでそれを行いましょう。

 firestore .collection(`comments`) .add(comment) .catch(err => { console.error('error adding comment: ', err) })

まず、コメントコレクションへの参照を取得してから、コメントを追加します。 また、 catchメソッドを使用して、コメントの追加中にエラーをキャッチしています。

この時点で、ブラウザを開くと、コメントセクションが機能していることがわかります。 新しいコメントを追加したり、返信を投稿したりできます。 さらに驚くべきことは、ページを更新しなくてもすべてが機能することです。

コメントの保存
（大プレビュー）

Firestoreをチェックして、データが保存されていることを確認することもできます。

Firestoreに保存されたデータ
（大プレビュー）

最後に、Firebaseで重要なことの1つであるセキュリティルールについて説明しましょう。

5.セキュリティルールを強化する

これまで、CloudFirestoreをテストモードで実行してきました。 これは、URLにアクセスできる人なら誰でも、データベースに追加してデータベースを読み取ることができることを意味します。 怖いです。

これに取り組むために、Firebaseはセキュリティルールを提供します。 データベースパターンを作成し、CloudFirestoreで特定のアクティビティを制限できます。

Firebaseは、2つの基本的な操作（読み取りと書き込み）に加えて、取得、一覧表示、作成、更新、削除というよりきめ細かい操作を提供します。

読み取り操作は、次のように分類できます。

  • get
    単一のドキュメントを取得します。
  • list
    ドキュメントまたはコレクションのリストを取得します。

書き込み操作は、次のように分類できます。

  • create
    新しいドキュメントを作成します。
  • update
    既存のドキュメントを更新します。
  • delete
    ドキュメントを削除します。

アプリケーションを保護するには、CloudFirestoreに戻ります。 「ルール」の下に、次のように入力します。

 service cloud.firestore { match /databases/{database}/documents { match /comments/{id=**} { allow read, create; } } }

最初の行で、サービス（この場合はFirestore）を定義します。 次の行は、 commentsコレクション内のすべてのものを読み取って作成できることをFirebaseに通知します。

これを使用した場合：

 allow read, write;

…つまり、ユーザーが既存のコメントを更新および削除できるということですが、これは望ましくありません。

Firebaseのセキュリティルールは非常に強力であり、特定のデータ、アクティビティ、さらにはユーザーを制限することができます。

独自のコメントセクションの作成について

おめでとうございます！ Firebaseのパワーを見てきました。 これは、安全で高速なアプリケーションを構築するための優れたツールです。

非常にシンプルなコメントセクションを作成しました。 しかし、さらなる可能性を探求することを妨げるものはありません。

  • プロフィール写真を追加し、Cloud Storage forFirebaseに保存します。
  • Firebaseを使用して、ユーザーがアカウントを作成し、Firebase認証を使用してユーザーを認証できるようにします。
  • Firebaseを使用して、インラインのMediumのようなコメントを作成します。

始めるのに最適な方法は、Firestoreのドキュメントにアクセスすることです。

最後に、以下のコメントセクションに移動して、Firebaseを使用してコメントセクションを作成した経験について話し合いましょう。

もちろん、SmashingWorkshopsで新しい洞察を探求するSmashingCat。

便利なフロントエンドとUXビット。週に1回配信されます。

あなたがあなたの仕事をより良くするのを助けるためのツールで。 購読して、VitalyのスマートインターフェイスデザインチェックリストPDFを電子メールで入手してください。

フロントエンドとUX。 190.000人から信頼されています。