個別はてブコメントをはてなブログ記事に埋め込みするには
こんにちは！DAC(id:dacs）です。
今回は、個別はてなブックマークのコメントをはてなブログ記事内に埋め込みする方法を紹介します。想定読者は自分のような、はてなサービスにまだ慣れていないビギナーです。（使いこなしまくって日々獲物を探して流離う修羅な方々向きではありません。）
ただ、使い方に悩むところも幾つかあるので、一旦手順を書いた後にその点を記載します。正直自分には手に負えないので、もし解決法が分かればお教え下さると嬉しいです。
はてなブックマークコメントとは
みんな大好き、はてなブックマーク！
なので「コメントとは、とか今更何？」レベルに自明ですが、対象について触れておきます。
はてなブックマークのコメント欄には、そのエントリーの要約や自分用のメモを書くだけではなく、エントリーを読んでの感想を書いたり、気に入った他の人のコメントに☆を付けたりといった、コメント欄を使ったコミュニケーションを楽しむこともできます。
コメント欄でコミュニケーション - はてなブックマークヘルプ
ブックマークする際、下図の赤枠範囲の入力欄に記入することで登録できます。文字数は100文字までで簡潔に記入する必要がありますが、手軽で便利な機能です。
入力した結果はブックマークコメントとして保存されます。
例えば、下図（前回記事へのはてブコメント例）のように反映します。赤枠で囲った部分がコメントです。
コメントの用途
用途は自由です。自分の場合、エントリを書いたブログオーナー、連携したTwitterのFollowerに対してエントリの所感やリアクションを記入します。
一方、自分のエントリへのはてなブックマークでコメントを頂くこともあります。（はてなブログを始めてとても嬉しいのは、何かしらの反応で具体的に見えやすいことです。ブックマークコメントはその最たるものの一つです。）
折角少なからず時間を頂いて記入された貴重なコメントです。自分が反応できる範囲であれば極力エントリに追記して言及しています。元々自分は言及して話を膨らませるのが好きなので、何かとこの機能を重宝しています。
その際に利用するのが、埋め込み機能です。
はてなブックマークのコメントをはてなブログ記事内に埋め込む方法
3つの方法があります。
- 埋め込みたいコメントをインデックス画面から選びます。
- 対象のブックマークの「リンク」と記載された部分をクリックします。
- すると画面遷移し、選択したコメントのページが表示されます。（尚、この画面へのリンクはコメント付きのブックマークにしかありません）
この画面で3つの方法に分かれます。
- 1.はてなブックマークのコメントページのURLを使う（オススメ）
- 2.「ブログを書く」のはてな記法を使う
- 3.「ページに埋め込む」を使う
1.はてなブックマークのコメントページのURLを使う（オススメ）
- 表示されたはてなブックマークのコメントページのURLをWebブラウザのオムニバーからコピーします。
- はてなブログの編集画面に貼り付けます。
- 以下の貼り付け方法の選択画面がポップアップします。
- 任意の方法を選択して「選択した方法で張り付ける」ボタンをクリックします。
2.「ブログを書く」のはてな記法を使う
- 先の選択したコメントのページで「ブログを書く」をクリックします。
- すると、ブックマークコメントを引用するはてな記法が入力済みの新規エントリ作成画面に遷移します。もし、そのコメントを主題にしてエントリを書く場合はこのまま本文を追記出来るようになっています。もし、別エントリ用に使いたい場合は、表示された引用をコピーして対象のエントリに貼り付けます。
- はてな記法は2つ生成されます。これらは個々に独立していますから、両方でも、任意に片方だけ選択しても利用できます。
ブログカード型埋め込み（embed）
コメントだけではなく、そのブックマークコメントの属性情報（ブックマーク日時、スター数、ブックマーク者のブックマークページへのリンク、ブックマーク元エントリの情報）が纏まって表示されます。これらはひと塊のブログカードとして埋め込まれ、表示する属性情報の取捨選択機能は現状ありません。
[http://b.hatena.ne.jp/entry/331122740/comment/nych87:embed]
熱いっ！！俺達のドリルが熱い！！！！とうとう日本の科学者のドリルはマントルを穿つ！！（予定） - ぐだぐだわーくす映画でまさにコアていうのがあったの思い出した。あれは半分ギャグだったけど。。。ｗ
2017/04/09 11:32
タイトル要素のみ埋め込み（title）
ブックマークコメント本体と同じ内容が表示されます。（実は先のブログカードは、その仕様上それだけでhtml要素以下の構造を持っていて、そのtitle要素を持ってきています。従って、実はtitle要素がコメントそのものになる保証は本来ないのですが、今の実装上コメントだけが表示されると理解して良いと思います）
[http://b.hatena.ne.jp/entry/331122740/comment/nych87:title]
映画でまさにコアていうのがあったの思い出した。あれは半分ギャグだったけど。。。ｗ - nych87 のコメント / はてなブックマーク
3.「ページに埋め込む」で埋め込み用のHTMLを使う
- 先の選択したコメントのページで「ページに埋め込む」をクリックします。
- クリックした部分の下に埋め込み用のHTMLが表示され、選択された状態になります。
- このHTMLをコピーしてエントリの任意の場所に貼り付けると先のはてな記法の2つ「ブログカード型埋め込み（embed）」を張り付けた状態と同じになります。
<blockquote class="hatena-bookmark-comment"> <a class="comment-info" href="http://b.hatena.ne.jp/entry/331122740/comment/nych87" data-user-id="nych87" data-entry-url="http://b.hatena.ne.jp/entry/www.gudaguda.work/entry/First-to-Drill-into-the-Earth-Mantle" data-original-href="http://www.gudaguda.work/entry/First-to-Drill-into-the-Earth-Mantle" data-entry-favicon="http://cdn-ak.favicon.st-hatena.com/?url=http%3A%2F%2Fwww.gudaguda.work%2Fentry%2FFirst-to-Drill-into-the-Earth-Mantle" data-user-icon="/users/ny/nych87/profile.gif">熱いっ！！俺達のドリルが熱い！！！！とうとう日本の科学者のドリルはマントルを穿つ！！（予定） - ぐだぐだわーくす</a><br> <p style="clear: left">映画でまさにコアていうのがあったの思い出した。あれは半分ギャグだったけど。。。ｗ</p> <a class="datetime" href="http://b.hatena.ne.jp/nych87/20170409#bookmark-331122740"><span class="datetime-body">2017/04/09 11:32</span></a> </blockquote> <script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>
熱いっ！！俺達のドリルが熱い！！！！とうとう日本の科学者のドリルはマントルを穿つ！！（予定） - ぐだぐだわーくす
映画でまさにコアていうのがあったの思い出した。あれは半分ギャグだったけど。。。ｗ
2017/04/09 11:32
埋め込んで言及するには
埋め込んだ後に普通にいつも通り記事を書くだけです。せっかく個別のコメントを埋め込んだのですから、そのコメントの直前か直下に書くと紐づけが分かりやすいです。
ちょっと変わった使い方
別に埋め込みは、自分のエントリにつけてもらったブックマークコメントに限りません。
コメントが付けられているブックマークであれば、全く同じ操作で埋め込みは可能です。これは考え方を変えると、他者の書いたコメントをあちらこちらから集めて記事化することも出来ます（実際そういう作りのエントリもあります）。コメントはプライベートな（非公開の）ブックマーク以外は、全て自由に埋め込み可能です。逆に言えばプライベート化しているブックマークコメント以外は使われ放題、使い放題ということです。（勿論引用に相当するため、ブックマークコメントが従属する内容的に紐づくコンテンツで埋め込みをしていないと問題になりますが）
埋め込みの問題点と要望
埋め込み直後の要素がおかしくなることがある
1点注意が必要なのは、埋め込みの直後に記入すると、そこでP要素（段落）が生成されず、要素の無いテキストとなる場合があります。そういう仕様なのか使い方の問題と思います。
そういうHTMLが気持ち悪い場合は自分でP要素を明示的に付けることで回避は出来ますので、使い方の問題かもしれません。
ブログカードの要素が取捨選択できない
ブログカードには様々な情報が含まれます。ここまで盛るかというようなほどてんこ盛りです。要らないものを削りたい場合、その方法がありません。かといって、リンクだけというのも味気なくなります、程々の中間のような表示がしたい場合でもいずれかを選択するしかありません。
個人的にはブックマークの元になるエントリの情報は削るか、もっと場所を取らない表示を選択できるようにしてほしいです。構造上、ブックマーク元があってのブックマークですからHTMLの構造としてこうするのが妥当であることは分かるのですが、もう少し何とか出来ると有難いです。
「CSSで自分で何とかしてね」ということ（要素単位でdisplay:none;とか）なのでしょうけれど、どうも自分では上手く出来ません。
ブログカードのURL表示で日本語URLがエンコードされて凄いことになる
最近のWebブラウザや検索エンジンは、日本語を含むURLでも普通に動くようになりました。少し昔だと日本語のような2バイト文字はエンコードされて冗長な表示となっていたものです。
埋め込みのはてぶコメントブログカードでは、この日本語を含むURLがエンコードされた冗長な表示になってしまいます。（現在、自分がはてな運営に対処依頼中）
赤枠部は本当は、「http://www.nych87.com/entry/2017/04/07/」の後ろに「ゆるキャラの中の人の知られざる苦労とお礼。」が入っています。
エンコードされているだけですから、デコードすればこうなりますし機械から見れば同じ内容です。ただ、人間の目から見ると厳しいですよね。
ブログカードの下に無駄な隙間が出来る
ブログカード形式の場合、カード外縁の枠から下方向に空白の無駄な隙間が出来ます。
これも「CSSで自分で何とかしてね」ということなのでしょうけれど、どうも自分では上手く出来ません。
はてなブックマーク公式ヘルプ
公式ヘルプにも該当箇所はヘルプにしっかり書かれています。
bookmark.hatenastaff.com
staff.hatenablog.com
ただ、このエントリでは自分なりに気になったところを少し手を入れて追加したりしました。
終わりに
今回は自分が比較的多用している個別はてブコメントをはてなブログ記事に埋め込みする方法を書きました。
何分自分も使いこなしているとは言い難い状態ですので稚拙な部分があるかと思います。何かお気づきの点（もっと良い方法があるとか、表現を追加した方が良いとか、間違えているとか）があれば、優しく教えて下さると嬉しいです。理解できた限り極力追加反映したいと思っています。
また、問題点と要望に書いたCSSで対応の部分です。ほぼ間違いなく対応できる筈なんですが、力量不足で上手くいきません。実は今も埋め込み部分の高さを固定しているのですが、結構見苦しいことになっています。これもうまい方法があればお教え下さると嬉しいです。（贅沢を言えば、カスタムCSSにペタリコと貼るだけの形式で提供いただければ最高です）
などとクレクレ君をやりながら今回のエントリはひとまず終了です。
最後に、にーちさん（id:nych87）中心に、とらうさ園長さん（torausa_e）、Gelsyさん（id:Gelsy）、きるみすさん（id:kilminwq）説明用スクリーンショットに使ってしまいました。公開情報ではありますが、この場を借り悪しからずご容赦下さるようお願いいたします。
