コメント表示ライブラリ
@niftyクリップに登録されたブログなどに付けられたコメントを、小窓で表示するライブラリについて説明します。
注意（2009/01/12）：
セキュリティ対応のためclip_comment_viewerを1.0.12へバージョンアップしました。
clip_comment_viewer-1.0.11.js、または、それ以前のバージョンをダウンロードして利用されているお客様は再度新しいバージョンのダウンロードをお願いします。
概要
このライブラリを利用するとクリップのコメントが小窓で表示できるようになります。
既に「
などのクリップ数画像の取得」を利用してクリップ数の画像を貼っている場合、
クリップ数画像に「クリップ情報ページへのリンク」、その隣にコメントの小窓を出すための吹き出し画像
が自動的に付加されますので、合わせてご利用ください。
もちろん自分での画像だけを貼ることも可能です。
詳しくは以下の利用方法をご覧ください。
また、いろんなページのコメントを見ることができるブックマークレット「クリコ」も合わせてご覧ください。
スクリーンショット
スクリーンショットは以下のようになっています。
- コメントの小窓を表示するための吹き出し画像です。クリックすることでコメント窓の表示/非表示が切り替わります。
- ページのタイトル、クリップ数、クリップ追加ボタンが表示されます。
- みんなのコメントが表示される部分です。アイコン、日付、ニックネーム、タグ、コメントが表示されます。
-
コメント窓を閉じるためのボタンです。クリックするとコメント窓を非表示にできます。
また、コメント窓の任意の場所をダブルクリックしても非表示にできます。
利用方法（準備）
headタグの中で「clip_comment_viewer-latest.css」と「clip_comment_viewer-latest.min.js」をロードするようにタグを記述してください。
-
「clip_comment_viewer-latest.css」は以下にありますので、必要に応じてダウンロードし、お使いのサーバへアップロードしてご利用ください。
http://clip.nifty.com/css/api/clip_comment_viewer-latest.css -
「clip_comment_viewer-latest.min.js」は以下にありますので、必要に応じてダウンロードし、お使いのサーバへアップロードしてご利用ください。
http://clip.nifty.com/scripts/api/clip_comment_viewer-latest.min.js
利用方法（呼び出し方）
次に以下のお好きな方法をお選びください。
-
クリップ数の画像を既に貼っている方
-
onloadを使った方法
クリップ数の画像取得のサンプルHTMLで説明しているタグに
「onload="Nifty.Clip.dom(this).addLinkAndCommentIcon()"」を追加してください。
上記の場合の実行結果は、となります。
-
onloadを使わず、scriptタグを記述する方法
-
クリップ数の画像タグに
「class="nifty-clipcounter"」
を追加してください。 - 次にそのimgタグよりも下の部分に、以下のscriptタグを記述します。
-
クリップ数の画像タグに
-
onloadを使った方法
-
コメント窓だけ欲しい方
以下のタグを貼り付けるだけで完了です。
上記の場合の実行結果は、となります。
設定オプション
上記で説明した関数「addLinkAndCommentIcon」と「bindComment」に設定オプションを渡し、 コメント窓をカスタマイズすることも可能です。
オプションの渡し方の形式はJSON形式です。
設定オプションは以下の通りです。
| オプション | 意味 | 値 | デフォルト値 |
|---|---|---|---|
| targetUrl | 対象となるページURL | 文字列(URL) | location.href |
| hideOtherComments | 他のSBMの結果を隠すか？ | true/false | false |
| hideUserIcon | ユーザアイコンを隠すか？ | true/false | false |
| hideBlankComment | 空白コメントを隠すか？ | true/false | true |
| hideTags | タグを隠すか？ | true/false | false |
| dateFormat | 日付のフォーマット | 文字列(※1) | '%y年%m月%d日' |
| commentWidth | コメント窓の幅 | 0以上の数値 | 400 |
| commentWidthAdjust | 右端からコメント窓までの空白 | 0以上の数値 | 30 |
| commentMaxHeight | コメント窓の高さの制限 | 0以上の数値 | 200 |
| listLimit | コメントの表示件数 | 0以上の数値 | 100 |
例：空白コメントを表示して、タグは表示しない。また日付のフォーマットはYYYY/MM/DD。
注意点
このJavaScriptライブラリはNiftyというグローバル変数を使用します。 また他のJavaScriptライブラリと衝突する可能性もありますのでご注意下さい。
このライブラリはjQueryを使用して作られています。
変更履歴
-
- 2009/10/01 v1.1.2 http://clip.nifty.com/scripts/api/clip_comment_viewer-1.1.2.js
- jQueryを1.3.2に変更
- はてなブックマークの追加ボタンのリンクを修正
-
- 2009/01/26 v1.1.1 http://clip.nifty.com/scripts/api/clip_comment_viewer-1.1.1.js
- jQueryを1.3.1に変更
-
- 2009/01/21 v1.0.12 http://clip.nifty.com/scripts/api/clip_comment_viewer-1.0.12.js
- 脆弱性対応
-
- 2008/12/18 v1.0.11
- jQueryと古いEffects.jsのバッティング問題Array.prototype.callを修正
-
- 2008/07/03 v1.0.10
- targetUrlがlocation.hrefの場合はクリップ追加にtitleを付加
- コメントのURLを全てリンクにするようreplaceにgを追加
- コメント窓フッタに「ダブルクリックで閉じます」のtitle追加
-
- 2008/06/12 v1.0.9
- targetUrlがlocation.hrefの場合はクリップ追加にtitleを付加
- コメントのURLを全てリンクにするようreplaceにgを追加
- コメント窓フッタに「ダブルクリックで閉じます」のtitle追加
-
- 2008/06/06 v1.0.8
- UTF-8以外の文字コードのページで読み込んだ際にIEでエラーになることを解消
-
- 2008/06/03 v1.0.7
- コメント窓の表示部分をドキュメント幅からwindow幅へ変更
- currentAPI,adjust がグローバル変数だったため修正
-
- 2008/05/30 v1.0.6
- 残っていた日本語をunicodeに変更
