[ 目次 ]

• はじめに
• JustCommentsの設置
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はJustCommentsのコメントフォームをNuxt.jsで構築した本ブログに設置していきます。投稿した記事にユーザーがコメントを投稿できるようにすることが目的です。

JustComments

JustCommentsについては、過去記事「JustCommentsを利用して投稿ページにコメントフォームを設置する 」で紹介しています。

こちらもご確認ください。
それでは設置方法をまとめていきます。JustCommentsのダッシュボードからAPI Keyを事前にご確認ください。

JustCommentsの設置

JustCommentsのダッシュボードに以下のような設置サンプルがあります。

<div class="just-comments" data-apikey="50a3e2bf-a65d-aaaa-b8b4-5ede90xxxxxx"></div>
<script async src="https://just-comments.com/w.js"></script>

class属性にjust-commentsを記述し、data-apikey属性にはAPI Keyを記述することで、JustCommentsのJavascriptがコメントフォームを設置してくれます。

今回はJustCommentsの公式ブログにあるReact & GatsbyJSの利用例を参考にし、ビュー全体がレンダリングされたらJustCommentsのJavascriptを読みにいくことにします。
Vue.jsのmounntedとvm.$nextTickを利用した実装になります。

対象のコンポーネントに以下のmountedの実装を追加します。

mounted: function() {
  this.$nextTick(() => {
    if (this.$refs.comments) {
      const s = document.createElement('script')
      s.src = '//just-comments.com/w.js'
      s.setAttribute('data-timestamp', +new Date())
      this.$refs.comments.appendChild(s)
    }
  })
}

今回のHTMLは以下のようにしています。

<div
  ref="comments"
  class="mt-20 just-comments"
  data-locale="ja"
  :data-pageid="post.fields.slug"
  :data-apikey="just_comments_apy_key"
/>

JustCommentsのオプションについては、公式ドキュメントをご確認ください。
API Keyは環境変数から取得し、変数: just_comments_apy_keyにAPI Keyを代入して利用しています。

以上でJustCommentsのコメントフォームが表示されます。

最後に

JustCommentsの機能については本ブログに設置したコメントフォームからをご確認頂けると幸いです。
是非皆さんも試してみてください。
JustCommentsは利用量をクレジット（credits）として管理しています。Freeプランで足りるかどうか？どのくらいの利用量になるか？を本ブログで確認していきたいと思います。