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

言葉の解説

ネットで話題

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

(はてな)

【はてなぶっくまーくそのばでひょう】

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

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

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

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

変更履歴

2009年08月24日 v1.3 API のエンドポイントを変更
- http://b.hatena.ne.jp/js/BookmarkCommentViewerAllInOne.1.3.js
2006年09月21日 v1.2 グローバル領域の汚染を少なくするように変更
- http://b.hatena.ne.jp/js/BookmarkCommentViewerAllInOne.1.2.js
2006年09月21日 v1.1 リリース
- http://b.hatena.ne.jp/js/BookmarkCommentViewerAllInOne.1.1.js

このライブラリは？

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

簡単な利用方法

本機能を利用するページの 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>

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

すでにはてなブックマークのブックマーク数を画像で取得する 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>

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

スタイルシートの記述

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

.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 要素を記述することで挙動を変更できます。上記を適用した例では次のような表示になります。

画像の 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;
  }
})();

ライブラリのライセンス

ライセンスのライセンスは MITライセンス ( Open Source Initiative OSI - The MIT License:Licensing )とします。

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

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

iconImageClickHandler
initCreateRelAfterIcon
BookmarkCommentViewer

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

参考リンク

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。