スマートフォン用の表示で見る

はてなブックマークコメントその場で表示ライブラリ

このページは古い情報を掲載しています

このページの情報は更新されていません。新しい情報は「はてなブックマークその場で表示ライブラリ - Hatena Developer Center」に移転しました。

本ドキュメントに関する注意事項

本ドキュメントははてなブックマークコメントをその場で表示するライブラリについての解説です。主にはてなスタッフがその作成と更新を行っています。

変更履歴

このライブラリは?

はてなブックマークのコメントをその場で表示する機能(詳しくは はてなダイアリー日記 - はてなブックマークコメントをその場で表示する機能の追加について を参照下さい)を、はてなアプリケーション以外のウェブアプリケーションウェブページなどで利用するためのライブラリです。このライブラリを利用することによって、あなたのブログアプリケーションに、はてなブックマークのコメントをその場で表示することが可能になります。

簡単な利用方法

本機能を利用するページの HTML の head 要素内で

<script type="text/javascript" src="http://b.hatena.ne.jp/js/BookmarkCommentViewerAllInOne.js" charset="utf-8"></script>
<script type="text/javascript">
initCreateRelAfterIcon();
</script>

script タグを記述します。src の値は先に保存したライブラリのパスを記述します。

次に、その場で表示アイコンを表示させたい箇所のリンクの a 要素の rel 属性の値に "bcomment-viewer" をセットします。

例:
<a href="http://www.hatena.ne.jp/" rel="bcomment-viewer">はてな</a>

すると、このリンクに並ぶ形でアイコンが表示されます。なお、コメント表示が正しく行われるためには後述するスタイルシートの設定が必要です。

f:id:hatenabookmark:20060921163234p:image

すでに はてなブックマークのブックマーク数を画像で取得する APIを利用している場合は

はてなをブックマークしている数 : <a rel="bcomment-viewer" href="http://b.hatena.ne.jp/entry/http://www.hatena.ne.jp/" class="bookmark-count"><img src="http://b.hatena.ne.jp/entry/image/http://www.hatena.ne.jp/" alt=""></a>

のように記述することで、ユーザ数画像の直後にアイコンを表示することができます。

f:id:hatenabookmark:20060921163233p:image

スタイルシートの記述

コメント表示を正しく行うためには、スタイルシートの設定が必要です。アイコンを表示するページに適用されるスタイルに以下のスタイルを追加すると、正常なレイアウトで表示されるようになります。

.hatena-bcomment-view {
  background-color:#fff;
  border-top:1px solid #CCC;
  border-left:1px solid #CCC;
  border-right: solid 1px #999;
  border-bottom: solid 1px #999;
  position: absolute !important;
  display: none;
  word-break  : break-all ;
  word-wrap   : break-word ;
  width: 400px;
  text-align:left;
  margin:0 !important;
  padding:0 !important;
  font-weight:normal !important;
  font-size:90%;
  z-index:100;
  color:#000 !important;
}

.hatena-bcomment-title {
  margin:0 !important;
  padding:3px 5px  !important;
  text-indent:0 !important;
}

.hatena-bcomment-title img {
  vertical-align: middle !important;
  margin: 2px 2px 2px 4px !important;
}


.hatena-bcomment-view ul {
  width: auto;
  overflow: auto;
  overflow-y:auto;
  border-top: 1px solid #5279E7;
  background-color: #edf1fd;
  list-style-type: none;
  padding: 5px 8px !important;
  margin: 0px !important;
  line-height: 150%;
}
.hatena-bcomment-view ul li{
  text-indent:0 !important;
  margin:0 !important;
  padding:0 0 2px 0 !important;
  font-size:90%;
  background:trasparent !important;
}
.hatena-bcomment-view ul li span.hatena-bcomment-tag a{
  color:#6365CE; 
  font-family:"Arial",sans-serif;
  margin:0 3px;
}

.hatena-bcomment-view ul li img{
  vertical-align:middle !important;
  margin:0 2px !important;
}

.hatena-bcomment-view ul li span.hatena-bcomment-date {
}

.hatena-bcomment-view-icon {
  cursor: pointer;
}

a タグではなく img タグで利用する方法

本機能は、img タグの onclick 要素にコメント表示するURLを記述することでも利用できます。

<img src="http://r.hatena.ne.jp/images/popup.gif" onclick="iconImageClickHandler(this, 'http://www.hatena.ne.jp/', event);" alt="">

と記述すると、画像をクリックしたときにその場でコメントが表示されます。

なお a タグの rel 属性を使わず、本機能のみを使う場合は冒頭で解説した

<script type="text/javascript">
initCreateRelAfterIcon();
</script>

の記述は必要ありません。

細かいオプション

はてなブックマークコメントその場で表示ライブラリでは様々なオプションが利用可能です。このオプション( BookmarkCommentViewer.options )、を上書きすることでコメント表示の挙動をカスタマイズできます。

オプションは以下の通りです。

dateFormat
日付のフォーマットです。デフォルト値は '%y年%m月%d日' です。
bUserIcon
ユーザアイコンを表示するかどうかです。デフォルト値は true です。
tags
タグを表示するかどうかです。デフォルト値は true です。
blankCommentHide
コメントが空白なコメントを表示するかどうかです。デフォルト値は false です。
screenshot
スクリーンショットを表示するかどうかです。デフォルト値は false です。
commentWidth
コメント表示部分の横幅です。デフォルト値は 400 です。
maxLimit
コメント最大表示件数です。デフォルト値は 200 です。
maxLimitIE
WinIE でのコメント最大表示件数です。デフォルト値は 100 です。Windows Internet Explorer では表示速度が遅いため、標準より少なく設定してあります。
maxListHeight
コメント表示部分の高さの最大値です。この数値を超えるとスクロールバーが表示されます。デフォルト値は 200 です。
firstShowLimit
先に描画するコメント件数です。デフォルト値は 20 です。
sortReverse
日付順のソートを反転するかどうかです。デフォルト値は false です。

たとえば

  • コメントが空な場合はコメントを表示しない
  • タグは表示しない
  • 日付のフォーマットは 2006/12/30

とする場合は、ライブラリ読み込みの後

<script type="text/javascript">
    BookmarkCommentViewer.options['dateFormat'] = '%y/%m/%d';
    BookmarkCommentViewer.options['blankCommentHide'] = true;
    BookmarkCommentViewer.options['tags'] = false;
</script>

script 要素を記述することで挙動を変更できます。上記を適用した例では次のような表示になります。

f:id:hatenabookmark:20060921163633p:image

画像の URL を場合を変えたい場合は、BookmarkCommentViewer のプロパティを変更することで対応が可能です。画像のプロパティは以下の通りです。

ICONURL
その場で表示アイコンデフォルトは 'http://r.hatena.ne.jp/images/popup.gif’
B_APPEND_ENTRY_ICONURL
ブックマークに追加するアイコンデフォルトは 'http://r.hatena.ne.jp/images/b_add.gif’
LOADING_ICONURL
ロード時のアイコンデフォルトは 'http://r.hatena.ne.jp/images/load_s.gif’

たとえばロード時のアイコンを変更したい場合は、

<script type="text/javascript">
    BookmarkCommentViewer['LOADING_ICONURL'] = 'http://example.com/loading.png';
</script>

とすることで変更できます。

greasemonkey での応用例

これらのオプションgreasemonkey を併用すると、自分のブラウザブックマークコメントその場で表示の見た目を変更することができます。たとえば次のようなユーザスクリプトを用意してインストールすることで自分の好きなように見た目をカスタマイズすることができます。

// ==UserScript==
// @name        hatebucommentvieweroption
// @description hatebucommentvieweroption
// @namespace   http://www.hatena.ne.jp/
// @include     *
// ==/UserScript==

(function () {
  var w = unsafeWindow;
  if (typeof(w.BookmarkCommentViewer) != 'undefined') {
    w.BookmarkCommentViewer.options['dateFormat'] = '%y/%m/%d';
    w.BookmarkCommentViewer.options['blankCommentHide'] = true;
    w.BookmarkCommentViewer.options['tags'] = false;
  }
})();

ライブラリのグローバル領域の汚染

このライブラリをロードすることで汚染される JavaScript のグローバル領域(windowオブジェクト)は、

  • iconImageClickHandler
  • initCreateRelAfterIcon
  • BookmarkCommentViewer

です。他の JavaScript ライブラリコンフリクトする可能性がありますのでご注意下さい。