はてなブログにコメント欄を設置する

Pro が要る場所と、要らない場所

このサイトのプラットフォーム別記事は、たいてい「まず有料プランを買わないと設置が始まらない」という話から入ります。はてなブログはそこが裏返っています。設置そのものは無料の側に入っていて、お金がかかるのはその周りにある二つ、ブラウザに出るアドレスと、スマートフォンだけに出す HTML のほうです。

何を置くのか

アドレスは開設した日に決まっている

はてなブログを作るとき、名前と、hatenablog.com、hatenablog.jp、hateblo.jp、hatenadiary.com、hatenadiary.jp という五つのドメインからひとつを選びます。ブログはその組み合わせで応答し続けます。開設のヘルプはその結果をはっきり書いています。"ブログのURL（ドメイン名）は、開設後に変更できません"。あとから改名する道はありません。

自分のドメインを使うことはできて、そちらは有料プランの話です。使えるプランとしてはてなCMS、はてなブログPro、はてなブログBusiness、はてなブログ for DevBlog が挙がっていて、欄は「詳細設定」の「独自ドメイン」、持ち込むドメイン名に hatena という文字列は入れられません。

ウィジェットにとって効いてくるのはこの次で、ここで驚く人が多いところです。独自ドメインに移しても、元のはてなのアドレスが引退するわけではありません。ヘルプは自動ではリダイレクトしないと書き、必要なら自分で設定する話にしています。つまりその状態のブログはホスト名を二つ持っていて、読者はブックマークからも検索結果からも何年か前のリンクからも、その両方に着きます。

だから site id の後ろにある許可リストは、値ひとつではなく一覧になっています。両方が生きているあいだは両方をBootSignal のダッシュボードに入れてください。入れるときは省略せず、hatenablog.com ではなく yourname.hatenablog.com の形で。照合は登録したドメインで終わるホスト名を通すので、短いほうを入れると、同じドメインにある他人のブログまで静かに通ってしまいます。

HTML を受け取ってくれる欄

四つあります。この設置作業のほとんどは、そのどれを選ぶかで決まります。はてなブログのブログパーツのページは、よそから持ってきた貼り物の行き先を「カスタマイズ」タブの「ヘッダ」の「ブログタイトル下」か「フッタ」と案内していて、プラットフォーム側がどこを想定しているかはそこに出ています。

五つ目の道は、ここにはありません。ほかのたいていの場所にはあるので名前を出しておくと、編集するテンプレートファイルがないのです。はてなブログのテーマ制作の手引きは、その作業を CSS の話として書いています。"CSSを編集してオリジナルテーマを作ることができます" とあり、書く場所はデザイン編集画面の「デザインCSS」欄です。WordPress のフッタテンプレートに当たるものは出てきません。スクリプトを置ける面は、上の四つで全部です。

記事単位の欄には範囲が明記されています。「記事上HTML（記事本文上）」および「記事下HTML」に設置したブログパーツ等は … 記事ページにのみ表示します。記事ごとのスレッドが欲しい範囲そのものです。Pro を使っている、あるいは自分のプラン画面で保存できることを確かめた、というならそこへ置いてしまってよく、手順3の位置合わせは飛ばせます。

設置の手順

1. 読者が実際に着くホスト名をダッシュボードに入れる

   自分の公開済みの記事をひとつ開いて、アドレスバーからホスト名をサブドメインごと写します。その文字列をサイト設定に入れると site id が返ってきます。独自ドメインへの移行の途中なら両方を入れてください。元のアドレスははてなブログ側で応答し続けるからです。この id は秘密ではありませんし、秘密である必要もありません。一覧に並んでいるホスト名の上でしか働かないからです。

2. デザイン設定のフッタ欄を開く

   ダッシュボードから「デザイン」へ行き、「カスタマイズ」タブを選び、「フッタ」を開きます。はてなブログの説明は "ブログ全体の下部にHTMLコードを自由に配置できます。" です。同じタブに「ヘッダ」の「ブログタイトル下」もあって、こちらの説明は "ヘッダのタイトル下にHTMLコードを自由に配置できます。" ですから、ページの上のほうで動かしたい場合はそちらが同じ道の反対側になります。

3. ローダーと空の受け皿と、ページ名を決める五行を貼る

   ローダーのタグには defer が付いていて、文書を読み終えてから走査します。インラインのスクリプトは文書を読んでいる最中に動くので、走査の時点でマウント要素はもう置かれていて、再走査を呼ぶ必要がありません。触るのは ENTRY だけです。そのままにすればトップページを含めた全ページにスレッドが出ますし、自分の記事をひとつ開いてパスの形を見てから、その形だけに合うよう狭めてもかまいません。

   コードコピー

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ja" defer></script>
   
   <div id="bs-thread"></div>
   <script>
   (function () {
     // Narrow this to your own post path once you have looked at one.
     var ENTRY = /./;
     var slot = document.getElementById('bs-thread');
     if (!slot || !ENTRY.test(location.pathname)) return;
     var el = document.createElement('div');
     el.setAttribute('data-bootsignal', 'comments');
     // One conversation per path, so every post keeps its own.
     el.setAttribute('data-thread-id', location.pathname);
     slot.appendChild(el);
   })();
   </script>

4. 変更を保存するして、公開済みの記事で読む

   カスタマイズタブのヘルプは各欄の説明はしていますが、確定するボタンの名前までは書いていません。画面に出ているものを押してください。名前がヘルプに出ているのはサイドバー側で、そちらは「適用する」です。そのあと普通のタブで実際の記事を開きます。ページのいちばん下にスレッドが出ていれば、「フッタ」欄が書いてあるとおりに働いたということです。

5. 人に知らせる前にスマートフォンの側を決める

   ブログをパソコンだけで読む人は、もうほとんどいません。無料プランでの答えは「詳細設定」の「レスポンシブデザイン」で、スマートフォン表示が PC のデザイン設定を使うようになり、貼ったものもそこに乗ります。Pro ならスマートフォン専用の枠、「タイトル下（はてなブログPro）」と「カスタムHTML（はてなブログPro）」もあるので、向こうだけ別の並びにすることもできます。どちらにしても、終わったと思う前に実機で開いてみてください。

記事の横に置きたいなら

サイドバーは同じ貼り物を別の入口から受け取ります。「カスタマイズ」タブ、「サイドバー」、「モジュールを追加」と進んで「HTML」を選び、コードを貼って「適用する」。ひとつだけ注意があって、これははてなブログの都合ではなく列の形の話です。サイドバーは幅が狭く、会話は下へ伸びます。短い一言コーナーなら似合いますが、記事の本題のコメント欄としては読みにくくなります。

自分でコードを書くことについて、はてなブログが出している条件

この点、はてなブログはめずらしいほど率直です。開発者向けの設定のページは、まず許可から始まります。"詳細設定やデザイン設定で「開発者向けの設定です。」の表示がある項目は、ご自身でHTML、CSS、JavaScriptなどを記述できます." そのうえで条件を置きます。書いたものはサポートの対象外。はてなブログ側の仕様変更で、予告なく動かなくなることがある。そして利用規約で禁止されているカスタマイズはしないこと。ページはその例として、広告やヘッダ・フッタを非表示にすることを挙げています。

最後の一行は、こわがるより落ち着いて読むべきところです。あれは、はてなブログの広告や枠をページから消してしまう類のカスタマイズの話です。記事の下にスレッドを足すのは、何も消しませんし、何も隠しません。

ドキュメントが答えを書いていない一点

サイトビルダーによっては、貼った HTML がクロスオリジンのサンドボックス iframe に落とされます。そうなると、自分がどのサイトにいるかを確かめるウィジェットは原理的に生き残れません。この記事のために読んだはてなブログのページには、これらの欄について iframe やサンドボックスの話が出てきません。むしろ逆向きで、自分で HTML や CSS や JavaScript をブログに書く、という書き方をしています。とはいえ、サンドボックスではないと言い切った文もありません。ですから、確定ではなく未文書という置き方が正確です。

決着は自分のブログで三十秒あれば付きます。公開済みの記事を開き、スレッドが出るはずの場所を検証で覗いて、自分の div の周りに何があるかを見ます。ふつうのページのマークアップならホスト名は自分のものが読まれています。よそのホストから配られた <iframe> の中にいるなら、読まれているのはそちらのホストです。サンドボックスするビルダーが読者側からどう見えるかは、Wix の記事に書いてあります。

はてなブログの請求に何が足されるか

BootSignal は登録ドメイン単位で 月 $20 または年 $200、カタログのウィジェットは全部込みで、購読後に増えたものも入ります。ページビューで動く項目はありません。この点ははてなブログでは効き方が大きくて、いちばん読めない数字がまさにそれだからです。どこかで拾われた記事は一週間だけ跳ね、それから元の流量に戻ります。従量課金のコメントツールは、よりによってその一週間に高くなります。

はてなブログのプラン料金ははてなブログからの別の請求で、この記事はその金額を持っていません。自分のアカウントで確かめる価値があるのは、Pro がいくらか、そもそも要るのか、のほうです。こちらの金額は料金ページに、ほかのホスティング型コメントサービスとの金額比較は比較のセクションにあります。あちらは数字ごとに出典と、誰かがそれを読んだ日付が付いています。

次のウィジェットは同じ欄の五行

貼ったローダーはカタログの残り全部を動かすので、二つ目はもう書いてある関数の中に数行足すだけで済みます。ブログと相性がいいのはリアクションです。コメントは一生書かないけれど、よかったとだけは伝えてくれる読者がかなりいます。

  var re = document.createElement('div');
  re.setAttribute('data-bootsignal', 'reactions');
  re.setAttribute('data-thread-id', location.pathname);
  slot.appendChild(re);

ブロック全体を site id ごと、ブログのメモの隣にファイルで残しておいてください。テーマを替えるとき人が最初に書き直すのがデザイン設定です。ひと晩かけて整えた貼り物も、見つかるところにファイルがあれば戻すのは二分で済みます。

ページの下が空のままのとき

1. キャッシュを迂回して記事を読み込み直す。保存されなかったデザイン変更は、動かなかったスクリプトとまったく同じ見た目になります。
2. ネットワークタブに bootsignal.js は出ていますか。出ていなければ欄が保存されていないか、いま見ているページがその欄の効く範囲の外です。
3. コンソールで document.getElementById('bs-thread') は要素を返しますか。null なら、欄の HTML がページまで届いていません。
4. ENTRY を狭めたあと、合わないページで試していませんか。いったん広げて読み込み直すと分かります。
5. アドレスバーのホスト名は、登録したものと一字一句合っていますか。yourname.hatenablog.com と yourname.com は一覧の中の別々の項目です。
6. スマートフォンなら「レスポンシブデザイン」は入っていますか。入っていなければスマートフォン表示は別のデザインで、そちらの HTML 枠は Pro のほうです。
7. 空いている場所を検証で見る。自分の div がよそのホストの <iframe> の中にあるなら、読まれているホスト名は自分のものではありません。