● 内容
① 『いいね！した人』の表示を『いいね！した人』をクリックしなくても常時表示します。
② プロフィール画像または、リアルピグ表示が可能です。
リアルピグが表示できない場合は、プロフィール画像を表示します。
リアルピグ画像のアクションを指定できます。
リアルピグ画像の指定できるアクションは下記の通り。
初期値 ・・・default
うれしい・・・glad
悲しい ・・・sad
怒り ・・・angry
はい！ ・・・pose_hi
どうぞ ・・・pose_please
スマイル・・・pose_smail
びっくり・・・pose_surprise
悩む ・・・think
シャイ ・・・pose_shy
クール ・・・pose_cool
③ カーソルを画像に乗せるといいね！した人のニックネーム、ブログ名、いいね！した日時が
ポップアップされます。
④ 表示する位置は、記事フッターなど記事内であれば自由に指定できます。
⑤ 表示数は、最初は１０人分のいいね！した人が表示されます。
いいね！した人が１１人以上ある場合は、『もっと見る』が表示されます。
『もっと見る』をクリックすると１１人目から１０人分表示されます。
⑥ 表示例
追記
⑦ 退会ユーザ対応
ユーザーが退会しているため表示できません が画像にカーソルを乗せると表示されます。
アメーバＩＤさん
ユーザーが退会しているため表示できません
いいね！した日時：●年▲月■日 ●時●分
画像は下記が表示されます。
● やり方
① 下記をフリープラグインへ追加します。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
iine_j=0;iine_url_array=[];
$(document).ready(function(){
iine_display(90,90,"いいね！した人",".articleLinkArea","1","glad","pose_please");
});
</script>
■ 説明
・ 下記はフリープラグインに既に書かれていれば不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
・ 90・・・いいね！した人の画像の幅
・ 90・・・いいね！した人の画像の高さ
・ "いいね！した人"・・・当ヘッダーの表題
・ ".articleLinkArea"・・・設置したい場所
・ "1"・・・リアルピグ表示の場合は、"1" プロフィール画像表示の場合は、"0"
・ "glad"・・・リアルピグ画像のアクション
・ ,"pose_please"・・・リアルピグのアクション（カーソルを乗せた時）
② ＣＳＳへ下記を追加する
/* ************************ */
/* いいね！した人の常時表示 */
/* ************************ */
.iine_head{/* ヘッダー */
height:30px;/* 高さ */
display:block;
background-color:#222222;/* 背景色 */
margin:10px 0px 0px 0px;/* 外側余白 */
padding:10px 0px 0px 10px;/* 内側余白 */
color:#ffffff;/* 文字色 */
border-radius: 5px 5px 0px 0px;/* CSS3角丸 */
}
.iine_userList{/* 明細 */
text-align:center;/* 中央寄せ */
border-radius: 0px 0px 0px 0px;/* CSS3角丸 */
background-color:#222222;/* 背景色 */
border-top:1px dotted #ffffff;/* 枠線（上） */
padding:5px;/* 内側余白 */
}
.iine_userList img{/* 画像 */
border-radius: 5px;/* CSS3角丸 */
margin-left:3px;/* 外側余白 */
}
.iine_Foot{/* フッター */
background-color:#111213;/* 背景色 */
border-radius:0px 0px 5px 5px;/* CSS3角丸 */
}
.more_iine{/* もっと見る */
display:block;
text-align:center;/* 中央寄せ */
font-size:12px;/* 文字の大きさ */
color:#dddddd;/* 文字色 */
}
/* ************************ */
● スクリプトのソース内容
// **********************************************************************
// * いいね！の表示
// **********************************************************************
// ************************
// いいね！もっと処理
// ************************
function iine_more(m_lastUpdMillis,m_entryId,m_iine_j,m_w,m_h,m_h_title,m_selc,m_iine_pigg_sw,m_iine_pigg_a1,m_iine_pigg_a2){
var more_url='http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId='+
ameba_id_get()+'&entryId='+m_entryId+'&updMillis='+m_lastUpdMillis+'&ts='+new Date/1+
'&callback='+m_entryId; // いいね！ json URL(callback関数=記事番号(任意))
load_iine(more_url);
iine_url_array[0]=more_url;
window.iine_j=m_iine_j;
iine_edit(1,m_w,m_h,m_h_title,m_selc,m_iine_pigg_sw,m_iine_pigg_a1,m_iine_pigg_a2);
}
// ************************
// いいね！JSON読み込み処理
// ************************
function load_iine(iine_url){ // JSONの読み込み処理 (いいね！のスクリプト(json)を読む)
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', iine_url);
script.setAttribute('charset', 'UTF-8');
document.getElementsByTagName('head').item(0).appendChild(script);
}
// **************************************************
// 初期処理（いいね！のＵＲＬ作成＆アレイにホールド）
// **************************************************
function iine_entry_get(){
var url_ix=0;
$(".skinArticle").each(function(){
var iine_json_url='http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId='+
ameba_id_get()+'&entryId='+$(".iineEntryCnt",this).attr("data-entryId")+'&ts='+new Date/1+
'&callback='+$(".iineEntryCnt",this).attr("data-entryId"); // いいね！ json URL(callback関数=記事番号)
iine_url_array[url_ix]=iine_json_url;
url_ix++;
});
if(typeof iine_url_array[0]!="undefined"){ // いいね！ＵＲＬが存在するか？
load_iine(iine_url_array[0]); // JSONの読み込み処理
}
}
// ************************
// いいね！表示処理メイン
// ************************
function iine_display(d_w,d_h,d_h_title,d_selc,d_iine_pigg_sw,d_iine_pigg_a1,d_iine_pigg_a2){
iine_entry_get(); // 初期処理
iine_edit(0,d_w,d_h,d_h_title,d_selc,d_iine_pigg_sw,d_iine_pigg_a1,d_iine_pigg_a2);
}
// ************************
// いいね！ネクスト処理
// ************************
function iine_next(n_w,n_h,n_h_title,n_selc,n_iine_pigg_sw,n_iine_pigg_a1,n_iine_pigg_a2){
iine_url_array.shift();
if(typeof iine_url_array[0]!="undefined"){
load_iine(iine_url_array[0]);
iine_edit(0,n_w,n_h,n_h_title,n_selc,n_iine_pigg_sw,n_iine_pigg_a1,n_iine_pigg_a2);
}
}
// ************************
// いいね！編集処理
// ************************
function iine_edit(more_sw,w,h,h_title,selc,iine_pigg_sw,iine_pigg_a1,iine_pigg_a2){
window.iineEntryDetailCallback = function(data){
if(more_sw==0){
var iine_list='<div class="iine_area"><span class="iine_head">'+h_title+
'</span>'+'<div class="iine_userList">';
}else{
var iine_list="";
}
for (var i = 0; i < data.userList.length; i++) {
var no_image = 'http://stat100.ameba.jp/common_style/img/common/noimage140.gif';
var pig_image = 'http://contents.pigg.ameba.jp/api/0/user/';
var iine_date=new Date(data.userList[i].iineMillis);
var iine_week = ['日', '月', '火', '水', '木', '金', '土'];
var iine_y = iine_date.getFullYear();
var iine_m = iine_date.getMonth() + 1;
var iine_d = iine_date.getDate();
var iine_w = iine_date.getDay();
var iine_h = iine_date.getHours();
var iine_mi = iine_date.getMinutes();
if(iine_h<10){iine_h="0"+iine_h;}
if(iine_mi<10){iine_mi="0"+iine_mi;}
if(iine_pigg_sw=="0"){ // プロフィール画像表示
if(data.userList[i].validFlg==true){
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].profile.nickname+'さん\n'+data.userList[i].blogTitle+
'\nいいね！した日時：'+iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+data.userList[i].profile.profileImage.url+'" width="'+w+'" height="'+h+'"></a>';
}else{
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].amebaId+'さん\n'+
'ユーザーが退会しているため表示できません\nいいね！した日時：'+
iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+no_image+'" width="'+w+'" height="'+h+'"></a>';
}
}else{ // pigg 表示
var pigg_image = 'http://contents.pigg.ameba.jp/api/0/user/';
var scale="&scale=264";
var shadow="&shadow=false";
var frame="?part=all";
var direction="&direction=FL";
// 最初の表示
var pigg_image_URL = pigg_image+data.userList[i].amebaId+'/image'+frame+direction+shadow+scale+
'&action='+iine_pigg_a1;
// カーソルを乗せた時の表示
var pigg_image_URL2 = pigg_image+data.userList[i].amebaId+'/image'+frame+direction+shadow+scale+
'&action='+iine_pigg_a2;
// pigg画像がない時はプロフィール画像を表示する(onerror)
if(data.userList[i].validFlg==true){
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].profile.nickname+'さん\n'+data.userList[i].blogTitle+
'\nいいね！した日時：'+iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+pigg_image_URL+'" width="'+w+'" onmouseover="this.src=\''+pigg_image_URL2+
'\'" onmouseout="this.src=\''+pigg_image_URL+'\'"'+' onerror ="(function(that){ that.src=\''+
data.userList[i].profile.profileImage.url+'\';})(this)"></a>';
}else{
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].amebaId+'さん\n'+
'ユーザーが退会しているため表示できません\nいいね！した日時：'+
iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+no_image+'" width="'+w+'" height="'+h+'"></a>';
}
}
}
// 記事番号を求める
var entryId=iine_url_array[0].substring(iine_url_array[0].length-11,iine_url_array[0].length);
// もっと見るの判断
var more_iine="";
if(data.lastFlg==false){
more_iine='<span class="more_iine"><a href="java'+'script:void(0)" class="iine_more"'+
' onclick="iine_more('+data.lastUpdMillis+','+entryId+','+window.iine_j+','+
w+','+h+',\''+h_title+'\',\''+selc+'\',\''+iine_pigg_sw+'\',\''+iine_pigg_a1+'\',\''+iine_pigg_a2+
'\');">もっと見る</a></span>';
}else{
more_iine='<span class="more_iine"></span>';
}
if(more_sw==0){
iine_list+='</div><div class="iine_Foot">'+more_iine+'</div></div>';
$(selc+':eq('+window.iine_j+')').after(iine_list);
window.iine_j++;
iine_next(w,h,h_title,selc,iine_pigg_sw,iine_pigg_a1,iine_pigg_a2);
}else{
$('.iine_area'+':eq('+window.iine_j+') .iine_Foot').remove();
iine_list+='<div class="iine_Foot">'+more_iine+'</div>';
$('.iine_userList'+':eq('+window.iine_j+')').append(iine_list);
}
};
}
● その他、覚書
① いいね！した人のデータの呼び出しは、下記の様に JSON with padding(JSONP)の形式で
コールバックで呼び出す。クロスドメインのため、Ajaxは使用できない。
http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId=アメーバＩＤ&entryId=記事番号&ts=現在の日時
② １つのJSONで呼び出せるのは１０件のみ。
次の１０件を呼び出すには下記の様に呼び出す。
http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId=アメーバＩＤ&entryId=記事番号&updMillis=上記①で呼び出した時のlastUpdMillisの値&ts=現在の日時
③ 呼び出した時のデータの内容
iineEntryDetailCallback({
"successFlg":true,
"lastUpdMillis":最終更新日時,
"lastFlg":false,
"userList":[{
"validFlg":true,
"amebaId":"アメーバＩＤ",
"blogTitle":"ブログタイトル",
"iineMillis":いいねした日時,
"profile":{
"nickname":"ニックネーム",
"profileImage":{"url":"プロフィール画像のＵＲＬ",
"height":高さ,
"width":幅
}}}
]});
赤字部分は繰り返し
"successFlg":true ・・・ false の場合はエラー
"lastFlg":false ・・・ false は続きあり、 trueは続きなし
iineEntryDetailCallback・・・固定のためcallback=での名前指定（変更）はできない。
④ JSON with padding(JSONP)では非同期のため、同期をとるためには、レンタルサーバを
利用してプログラムを作ればできる様であるが、サーバは用意できないので、
あくまで、クライアント側（ブラウザ側）で同期をとることとする。
⑤ アメブロのＨＴＭＬの該当部分
<script src="http://stat100.ameba.jp/blog/js/user/iineEntryDetail.1.000.js"></script>
<script>
new Amb.IineEntryAmb.PcBlog({
setting:{
receiveAmebaId:'new-blue-777',
blogDomain:'http://ameblo.jp',
statDomain:'http://stat100.ameba.jp',
iineDomain:'http://iine.blog.ameba.jp',
measureDomain:'http://measure.ameblo.jp'
}
});
</script>