2014-04-27

コメント欄が新しくなりました・Disqus導入雑記帳

Seesaaでブログを始めてBloggerにお引越ししてきたのが1年3ヶ月前。
移転後に真っ先にやらなければいけないブログ全体のカスタマイズの中にコメント欄も当然含まれていたのですが、まだ何もわからない・やってもいない状況でまったく別のシステムを導入するのは困難だったので、多少物足りなさはあったもののずっとBlogger標準のものを使用してきました。
Blogger仕様で実際に1年と3ヶ月使ってみて、

  • 選択肢が少ない(日本人には馴染みのないものが多い)
  • 名前記入欄がわかりづらい(空欄 ⇒「匿名」になってしまう)

といった問題があったので、より快適にわかりやすくするため、以前から候補として考えていたDisqus(ディスカス)というコメントシステムを導入・変更することにしました。


Disqusとは?どうやって使えばいいの?


ではどのようなものか順を追って見ていきましょう。

右上の『ログイン』をクリック



Disqus Facebook Twitter Google+ が表示されます。
『ディスカッションを開始』(すでに数件コメントがついていれば『コメントを新しく投稿する…』)をクリックするとコメント記入欄の下に画像マークが出現、さらにその下に各SNSのアイコンが表示されますので、そちらをクリックしても大丈夫です。
Facebook・Twitter・Google+にアカウントをお持ちの方はログインすることで自分の各プロフィールでコメントすることが出来ます。
何もアカウントを持っていないという方もメールアドレスさえ入力すればコメントできます。(入力したメアドはコメント投稿には表示されません。)   

ソーシャル別・その他の入力



Disqus
登録のための名前・メールアドレスとパスワードの記入をします。
一度登録すればログアウトしない限りは登録した名前と自分で設定したオリジナルのアイコンが表示されます。
いったんDisqusにアカウントを作れば、どこのサイトであってもDisqus採用のところならアイコンが表示されていてコメントを付けることができます。(CNNでも!)

Facebook
Facebookではお名前が実名であったりアイコンが個人を特定できるものもあり、FBの中だけで留めておきたいわという方は別の選択をおすすめします。

Twitter
連携アプリ認証画面が出るはずです。
というのは、Disqusで登録したものとTwitterが同じメアドだとどうやらDisqusが優先されてDisqusのものに自動で切り替わるようになっているみたいなので確認が取れませんでした。
(Disqus設定でTwitterを認証したのでこうなったのかな?)

Google+ 
複数アカウントを持っている場合はその中から使用したいものを選択します。

またはDisqusに登録してください または名前を入力してください
上記のSNSを何も利用されていない方・もしくは使い分けでそれらとは別の名前にしたいという方はこちらを利用してください。
この場合はデフォルト設定のアイコンが表示されます。
お名前・メールアドレス・パスワード記入で右の矢印ボタンをクリック。

  • Disqusは決して管理者や検閲者ではありません。このコミュニティのルールは独自に設定されています。
  • あなたのメールアドレスは私達が安全に管理します。メールは管理と任意の通知にのみ使用されます。
  • 嫌がらせや違法なことをしないでください。難しいことではありません。

Disqus規約にあるように、記入したメールアドレス・パスワードが他で使われたり一般公開されることはありません。
ただし、この方法ですとDisqus登録と同様、名前・メールアドレス・パスワードと記入する項目は同じになりますので、面倒でなければDisqus登録オリジナルアイコンの設定までしていただければコメント者の個性がわかりやすくコニュミケーションもよりスムーズになるかと思われます。


画像や動画を貼ることもできます


画像添付はコメント欄下のアイコンをクリック。
サイズが2MB以上の大きいものは投稿できません。
小さいサイズをご用意ください。
どのように投稿・表示されるかは、わかりやすく書かれているこちらのサイト様の記事を参考にされてください。


動画プレーヤー・Twitterの投稿を記事に表示させる時は埋め込みコードをHTMLに記入して表示させますが、なんとここではURL記入で動画が表示されるんです!
Web上にある画像を使いたい場合は画像URLを記入で表示されます。
ただし画像・動画はあくまでもコメントの補助なので使い過ぎには注意を。


コメントの並べ替えができます


アイコン上の文字をクリックで

  • ベスト ⇒ 評価の高い順に並べ替え
  • 最 新 ⇒ 新着順に並べ替え
  • 古い順 ⇒ 古い順に並べ替え

といったようにコメント表示の入れ替えができます。

新着順は従来のように次々と書き込まれたコメントが下に付いていくといった見慣れた形式。
古い順は複数コメントが付いていて新しいコメントを見たい場合に、といった具合にそれぞれで見やすい表示に何度でも切り替えて見ることができます。

評価の高い順はYouTubeのコメント欄のように
「このコメント者、今いいこと言った!(・∀・)」
と思った人が各コメント下の『高く評価する』をポチっと押した数の順ってことで、ここではほぼ必要のない機能です。


では一例として当ブログ過去最多63コメント(半分は私の返信)が付いた記事のコメント欄を見てみましょう。


コメントは記事内容に関するものなので特に読まなくてもいいです。

膨大にあるコメントがすべて表示されると縦に長くなるので、
一番下に  もっとコメントを見る  という表示が出て一部が格納されています。
また、長文のコメントの下にももっと見るがあります。いずれもクリックすることで元のコメントがニュルっと現れます。

コメント投稿者右横の○年前にカーソルをあてると投稿日時の詳細が現れます。
日付をクリックするとアイコン左に黄色い縦ラインが現れます。


特定のコメントをわかりやすく見てもらうためなのでしょう。
さらに別のコメント者の日付をクリックで黄色ラインはそちらへ移動します。
「今この人のコメントを読んでいる」という栞のような役割かと思われます。


コメントへの返信


主に私がすることではありますが、会話が弾めば誰かが書いたコメントに対しての返信をしてもらって構いません。
その場合は各コメント下の返信をクリックすればコメント記入欄が表示されます。

あなたが書いたコメントに管理人である私RQ、もしくは別の方から返信が付くと、返信内容が書かれたメールがDisqusからここに登録したメールアドレスに届きます。(TwitterだったらTwitterで登録したメアド)
「コメントが記事に反映されたか、返信が付いたかどうか」と何度も訪問しなくても返信内容がメールでわかります。


このあと、この記事のコメント欄にて実際にテストを兼ねていくつか書き込んでみます。
皆様もどのように表示されるのか確認がてらテストしてもらって構いません。



ブログタイトルクリックで情報表示


ここの部分はこの記事を出してから10日後の追記です。
この記事には現時点で私のテスト投稿4つのみしかありませんが、コメント欄上部のブログタイトル(みどりの森の回転木馬)をクリックしてみます。
そうすると

このようにDisqusになってからこのブログに書き込んでもらった方のアイコンと情報(いくつコメントをしたかという数)、さらにその下には私がこれらの方に返信したコメントが表示されました。
左のコメント数クリックで表示が元に戻ります。




これまでは余程の悪質なスパムコメ・差し障りがあるコメント以外は削除しない方針でやってきました。
昨年、該当するものが数件あったのを機にコメントを承認制に切り替えました。
Disqusではスパム管理もできるそうで、管理ページで承認制と思われるところにチェックを入れてあるのですが、これからコメントがつかないとわからないこともまだ多くあります。
画像や動画の添付も記事内容にあまりにもそぐわないもの・不謹慎なものであれば管理者の権限で削除させてもらうこともあるかもしれませんが、基本的には見ていただいている皆様に楽しく自由に使ってもらって構いません。

まだ皆様から実際にコメントをいただいて軌道に乗るまでは試しながらこのシステムに慣れていくしかないのですが。




これからDisqusを導入する方へ(2014年4月~)


これより以降は私がDisqusシステムを導入するにあたってまずぶち当たる壁・苦労した点を備忘録として記載しておきます。
特にBloggerユーザーの方でこれからDisqusに変更されるどなたかのお役に立てればよいのですが。


英語サイトの説明の壁


新規アカウント取得・基本設定。ここが一番大事なのだけどイマイチよくわからない。
こちらのサイト様がわかりやすく説明されていますのでこちらを参考にされてください。



日本語変換の壁


さて、なんとか登録できたら次にぶち当たる壁は『英語表記を日本語に変換すること』
半年くらい前までに書かれた記事では現行バージョンではなく『2012年の旧バージョンを選択する』のだとあちこちで見かけました。
2014年4月現在、そのような選択項目はなさそうだし、
 Admin Settings General Language
と進んでJapaneseを選択しようにもJapaneseが項目に見当たらない!

そこでお世話になったのがこちらのサイト様。

 ChromeでLanguageを右クリック ⇒ 要素を検証(N)デベロッパーツール
<option value="en" selected>"en"をダブルクリックで<option value="ja" selected>に書き換えます。
一気に日本語化されるのではなく、部分的に徐々に切り替わっていきます。
日本語のブログ名であれば日本語変換にしておきたいですね。

※ この記事を書いた後、5月以降に『Japanese』の選択ができるようになったみたいです。



過去のコメントインポートの壁


Blogger関係でわからないことばあれば必ずここにたどり着くSunaboxさん。

ご覧のように登録や日本語化ならWordPress向けの説明サイトでもなんとかなりますが、それ以降のBloggerに対応したものとなるとグッと数は減るわけです。
SunaboxさんにはBlogger移転前から何かとガンガンに参考にさせてもらっていて絶賛お世話になっているのですが、ここに書かれてある通りに

Toolsからimportを開いて、「Sync New Comments」を選ぶだけです。この設定で、自動的に反映されるようになります。

これを信じて実践しました。ええ、何の疑いもなく。

4月20日午後10時過ぎ~24日夜まで経っても一向に反映される気配がない・・・これまでのコメントはきれいさっぱり消えてしまってる・・・
24時間くらいで0%から100%に一気に反映されるはずなんだけど丸4日って一体どういうことなの・・・(´;ω;`)

途中で別のところをいじってどこか壊れてしまうんじゃないかと思って我慢してたけどもう我慢の限界!4月24日午後7時半、
 Admin Discussions Import Blogger
  One-time Import [Import comments from Blogger]
を思い切ってクリック!
あ、あれ・・・マズい、さらに時間かかってしまうことやっちゃった?(;´д`) あと24時間経っても反映されなかったらもうどうしていいやらお手上げ

って一晩寝て朝起きて何の期待もしてなくてブログ開いたらズラっとデフォルトアイコンのコメントが表示されテタ――(゚∀゚)――!!

長かったわ・・・長い悪夢を見ていたわ・・・
Sunaboxさんを疑うわけではないの、ウチのブログは約4年分のコメントがあったし、他のブログだったら下のSync New Commentsですんなりいけるのだろうけどウチの場合はそうではなかったと、まぁそういうこともあるってことで誰かの今後の参考になればいいかなってことで書き記しておきました。
すなふさんこれからもお世話になりますぅぅ。


新テンプレにしたらDisqusが消えた…!?


ガジェットの順番が入れ替わるのはテストブログでわかっていたので想定内、後は新しいテンプレートページに無事に変わって・・・

Disqus消えてる・・・!! (((゜Д゜)))ヒイィィィ!!

あんなに時間かかったのに、あんなに苦労したのにまた一からやり直し!?
いや、落ち着くんだ、ガジェットがおかしくなってるんだからまたDisqus管理ページからガジェットを入れ直せば

元に戻ったーーーー°+(´∀`)b°+°

疲れた・・・疲れたんだよパトラッシュ・・・ (:3[▓▓]




デフォルトアイコンにも凝ってみました


 旧デフォルトアイコン

  新デフォルトアイコン(どちらかにする予定)

コメントしてくださる皆様が各SNSのものを使用・またはDisqus登録してもらえればカラフルで様々なアイコンが並ぶでしょう。
Bloggerになって以降の私の返信コメントはGoogleアイコンになっていたのですが、過去のコメント全てがデフォルトアイコンに変わってしまっていた (´-ω-`) これは修正できないのだろうか。残念。

このアイコンも様々な素材で幾通りも作ってみましたが、小さく表示されるものなので模様に凝ったところで結局よくわからないですし、飽きがこないものとなったらこの二つが候補として残りました。
今後しつこくないイメージの方どちらかを選びます。


過去のコメントが反映されるまで時間がかかって不安でイライラして大変でしたが、やっとインポートが完了した後で管理画面見てびっくり!ここでこれまでにもらったコメントが全てわかりやすく見られてる。

説明読んでてもよくわからないって方は下のコメント欄で実際に試してみてくださいね。



「記事は読んでもコメントまでは」とこれまでコメントをしたことがなかったという方も見やすく書きやすくなった新コメント欄をぜひお気軽にお試し下さい。
(承認制なのでコメントが反映されるまで少し時間はかかりますが)
新しく生まれ変わったみどりの森の回転木馬をこれからも御贔屓に。


7 件のコメント :
  1. Disqusになってから初のコメントをテストを兼ねて書いてみます。

    Twitterのつぶやきをコメント欄で紹介することはほとんどないと思いますが、どんな感じに表示されるのかやってみましょう。

    URLを書くだけで大丈夫とのことですが。

    https://twitter.com/nobutaro1001/status/454535414636744704



    今URLを書き込んだ直後にこの下に画像が表示されました。
    このまま投稿してみます。

    返信削除
  2. うっひゃー、強烈ですねwww
    記念すべきDisqus初コメはこんな感じになりました。
    思っていたより大きく表示されるんですね。


    ではせっかくなので、このノブナリツイートが投下された時にFacebookで出したネタをここで出してみましょうか。
    みどりのマキバオー実写化実行委員会の方、ノブナリをぜひ起用してやってください。

    返信削除
  3. さすがは変態の森です、いきなりこんなの連投。

    いや、ノブナリとカナコの恐れを知らない思い切りの良さのおかげです。

    美味しいネタをたくさんありがとう。

    ではここで動画もURLだけで動画プレーヤーが表示されるらしいので試してみましょう。

    https://www.youtube.com/watch?v=g1kjr8P8UHE

    返信削除
  4. ♪ウマナミナノネー あなたとってもー

    とってもウマナミ http://www.jtw.zaq.ne.jp/animesong/mi/makibao/tottemo.html



    放送当時、意味がわかっていない子供が声高らかに歌い上げてお母さんは苦虫潰した顔してお父さんはニヤニヤしてたんでしょうか。
    制作側の意図的な戦略ですな。いい時代だ。
    うんこたれ蔵って。
    あ、Googleさん、これマンガのキャラクター名なので利用規約に抵触しないですよね? (;・∀・)


    私のコメントテストはこれでおしまいにします。
    ああやだわぁ、お上品なブログなのになんでこんな流れになってるのかしらwww

    返信削除
  5. みやすけ2014/05/08 14:40

    なるほどー(一人で納得)。

    マキバオーはこの歳になって改めて見たらきっと違うおもしろさがあるのかもね←

    全然関係ないけど、モナ王のCMがスクールウォーズとコラボしていて、最後のカットが光男の「悔しいです!」になっていてまさかの私得♪

    宮田恭男かっこいいわー☆

    http://www.lotte.co.jp/products/catalogue/ice/02.html

    返信削除
  6. おーみーやーーー( ;∀;)
    おとといコメントもらったガラカメ記事終わりの追記内容がそのサイトにしっかり出てるじゃないの!
    私がそのガラカメ×ロッテの情報見た時はスクール・ウォーズのやつはなかったわ。
    あったらすぐに食いついておみやさんに知らせてるわよっ<3

    これこそが正しいコンテンツの使い方よね。
    ONE FOR ALL, ALL FOR ONE よ。
    CM何度もリピートしちゃったわ。
    まんまと企業の思惑に乗せられて悔しいですっ!

    思わずググったら素敵な動画を見つけたのでおみやさんに捧げるわよ。

    宮田恭男「バースデイ事件」: 80's メモリアル・BOYアイドル~最初の2枚(ファースト・キック&セカンド・キック)~
    http://80boys.seesaa.net/article/356288403.html



    お世辞にもうまいとはいえない歌唱力・のっけからギャーギャー叫んでる親衛隊・そしてたったワンコーラスであっけなく終わります。
    赤いボーダーシャツ二大愛好家・楳図かずお&cobaに宮田恭男も加えましょう。


    ここのブログ、左にも美味しそうなラインナップが目白押しよ。

    これで当分おかずには困らないわね。

    返信削除
  7. さっきの動画、もう一回見直したら


    ♪ あいつが来るとは思わなかったよ
    (えー、ホントー?)


    ♪ 教えてよ
    (ダーリン)
    ♪ 本命は誰なのか
    (オンリーユー!)




    ・・・よくできたコントだことwww
    親衛隊ってあちこち追っかけしてこういうの自分たちで考えてやってたんですかね?


    っていう雑談で終わります。

    返信削除

新しい記事 以前の記事
  
Related Posts Plugin for WordPress, Blogger...