JustCommentsを利用して投稿ページにコメントフォームを設置する
JustCommentsを利用してGridsomeのデモサイトの投稿ページにコメントフォームを設置します。
[ 目次 ]
はじめに
こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
今回はJustCommentsを利用してGridsomeのデモサイトの投稿ページにコメントフォームを設置します。
設置するサイトは、以前作成したGridsomeのデモサイトになります。
GridsomeについてはGridsomeを利用して簡単なサイトを作成しよう を参照ください。
JustCommentsとは
JustComments is a public comment system. It works for every
website. Perfect for the static ones.
公式にこのような説明がありますが、作成したWebサイトにコメントシステムを提供するクラウドサービスです。
Disqus と同じようにブログの投稿ページにコメント機能を追加することができます。
既にDisqusは有名です。ご存知の方も多くいらっしゃると思います。
今回は新しく見つけたJustCommentsを導入したいと思います。
今回は、Freeプランを試していきます。
Free枠は1,000クレジットになります。
ん？ 何をしたらクレジットが減るんだろう・・・
What consumes credits?
Fetching a batch of comments (up to 100 comments in a batch) consumes 1 credit. Additionally, email notifications and API requests, if used, consume credits.
コメントの取得、投稿、メール通知などJustCommentsへのアクセスでクレジットが減っていくようですね。
今回はデモなので気にせず進めていきましょう。
JustComments登録方法
公式サイト のトップページに新規登録フォームが用意されています。そちらから新規登録を行いましょう。
以下の内容から新規登録が可能です。
- Name: 名前
- E-mail Address : メールアドレス
- Password : パスワード
または、Github or FacebookのOAuth認証から新規登録してください。
新規登録完了すると認証メールが届きます。メール内の認証URLから認証を完了し、ログインしてください。
JustCommentsのダッシュボードからAPI Keyとhtmlタグを確認
コメントを表示させる為の情報をダッシュボードから確認します。
"Your Integration Code"にサンプルとなるhtmlタグが記載されています。このhtmlを組み込むことで、コメントが表示可能です。
【HTMLサンプル】
<div class="just-comments" data-apikey="50a3e2bf-a65d-aaaa-b8b4-5ede90xxxxxx"></div>
<script async src="https://just-comments.com/w.js"></script>
既にhtmlタグにAPI Keyが埋め込まれていると思いますが、"Your API Key, Secret Key and Account ID"からも確認できます。
Gridsomeの投稿ページにコメントを追加
それではGridsomeのデモサイトにコメントを追加していきましょう。
投稿ページにコメントを追加するので、src/templates/BlogPost.vueを修正します。
scriptタグを追加
JustComments用のscriptタグを追加します。
<script>
export default {
metaInfo () {
return {
title: this.$page.blogPost.title,
// metaInfoを利用してJustCommentsのjavascriptファイルを読み込む
script: [
{ src: '//just-comments.com/w.js', async: true, defer: true }
],
}
},
data:() => ({
// API Keyは環境変数にセットできるようにしたので、以下のように環境変数から値を取得します
just_comments_apy_key: process.env.GRIDSOME_JUST_COMMENTS_APY_KEY
}),
computed: {
tags () {
return this.$page.blogPost.tags.split(' ');
},
totalCount () {
return this.$page.allPost.totalCount
}
},
}
</script>
Gridsomeの環境変数については こちら をご確認ください。
htmlを追加
表示したい箇所に以下のhtmlタグを追加します。
<div
class="just-comments"
data-locale="ja"
:data-pageid="$page.blogPost.slug"
:data-apikey="just_comments_apy_key"
></div>
コメントフォームのUI設定については、JustCommentsのドキュメントをご確認ください。data属性を修正することでUIや機能を変更することができます。
完成したフォームは？
以下のようなコメントフォームができました。
Twitter認証 or "名前 & メールアドレス入力" をすることでコメントができます。
実際にデモサイトからご確認ください。
最後に
今回はJustCommentsを利用したコメントフォーム作成を試しました。
以前に導入した問い合わせフォームのgetform.ioと同じく、JustCommentsも導入が簡単ですね。
是非皆さんも試してみてください。
