Yak shaving logs


My life is just yak shaving.

Railsで作成したWebサービスにコメント機能を簡単に導入してみた

2017/05/26 #rails #disqus

By Yusuke Takita


こんにちは。Kajitz inc.の瀧田です。

コメント機能を実装するのは意外に大変です。
コメント機能と一言で言ってもコメントに対して返信できるようにするかといった仕様部分を決めたり、
返信がある場合はUIをどうするのかといったことも検討しないといけません。

そこでDISQUSというサービスを使って簡単にコメント機能を実装してみました。
このブログの記事の一番最後にあるコメント機能がそれです。

https://gyazo.com/02fa6b831c7a814edb204a187001c021

上記のようなコメント欄がこのくらいのコードで実装できます。

https://github.com/tackeyy/blog/pull/8/files

こんな人にオススメ

  • Railsで作成したWebサービスにコメント機能をつけたい人

DISQUS

ひとことで言うと「いい感じのコメント欄を提供してくれるサービス」です。
SNSのような仕組みもあるので気になる方はDISQUSのページを見てみてください。

https://disqus.com/
https://help.disqus.com/customer/en/portal/articles/466179-what-is-disqus-

コメント欄を実装する

アカウントを作成する

https://disqus.com/profile/signup/

コメントを追加するサイトを登録する

ログイン後に以下の管理画面に入った後で New をクリックしてサイトを登録します。

https://gyazo.com/5dd971b738ff159ce873bdbebdd38a02

ここで必要事項を入力してください。

https://gyazo.com/edec66855093e4356227ad0c13b62dbf

I don't see my platform listed, install manually with をクリックして次へ。

https://gyazo.com/2d222943ef5388ee6d1bc58e4a716baf

右下にconfigure ボタンがあるのでクリック。
あとから 1. Place the following code where you'd like Disqus to load: のコードは使います。

https://gyazo.com/b7d69a39aa2c59475fe3a4c536c89803

実装

DISQUS用のパーシャルを作成してそれを呼び出しているだけです。
説明するよりもコードを見た方が早いと思うので以下のプルリクを参考にしてください。

https://github.com/tackeyy/blog/pull/8/files

このプルリクは以下の点が微妙です。

  1. hamlを使用しているのにここだけerbを使っているところ
    jsファイルを追加するのが面倒でerbにscriptタグを書いてしまいました。

  2. disqusの設定をしていないところ
    動作上は問題ないのですが、disqusにおすすめされている設定をしていません。

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/

page.shortnameやpage.titleもあるようですが、調べてないので設定は省きました。

参考

DISQUSの説明だけでも理解できましたが、先にこの記事をみておけば良かったです。
http://blog.nrowegt.com/how-to-add-disqus-comments-to-a-rails-5-application/

DISQUSを簡単に導入するためのGemです。
https://github.com/sandric/disqus_rails

以下のような理由で今回は使いませんでした。
- Rails5に対応しているかわからない
- star数があまり多くなく、コミットなどを見てもアクティブじゃない

このエントリーをはてなブックマークに追加

categories


最新記事


tags