VssueというVueのライブラリがある。これを使うとページに簡単にコメント欄を置くことができる。VuePressで作ってた日記に導入してみたので、ライブラリの紹介も兼ねて書く。
しくみ、やったこと
コメントを残す、ということはどこかにコメントデータを保持しておかなくてはいけない。静的ページでどうやって? Vssueはその問題をGit ホスティングサービスのIssueにAPI経由で読み書きすることで解決している。コメントの編集、削除はもちろん、 絵文字のリアクションもつけることができる。 もちろん Issueの emoji reaction を利用している。そりゃそうだよねと言った感じだけど。
対応しているGitホスティングサービスは以下のとおり。今回はGitHub(V3)を採用した。
詳細は Introduction | Vssue が詳しい。
GitHubのAPIを叩いてコメントを読み書きするので、OAuth2のGitHubアプリを作る必要がある。ClientIDとClientSecretを払い出したら環境変数に隠して置く必要はある。この日記はNetrifyにデプロイしているので、環境変数はSettings→Build & deploy → Environment variablesで設定すれば良い。
現物
実際のもの、作業記録は以下から確認することができる。
- 作業した記録 Vssue by ikaruga777 · Pull Request #26 · ikaruga777/ikaruga.org · GitHub
- 作業した結果生えたコメント欄 4月近況 | ikaruga.org
- コメントデータが記録されるIssue [Vssue]4月近況 | ikaruga.org · Issue #30 · ikaruga777/ikaruga.org · GitHub
1つの記事に対して1つのIssueでコメントを保存している。 誰もコメントしてないときはコメント欄が disabled になっているが、Click to create issue を選択することでVssueがリポジトリにIssueを新規作成してくれる。この状態でコメントを書いて投稿すると、Issueのコメントとして連なる、という仕組み。
コメントを書くのにGitHubのアカウントが必要だったり、たまーに表示されなくなって更新するとまた出てくるなどちょっと不安なところはあるけれど、なかなかおもしろいライブラリだと思った。
