風柳メモ

ソフトウェア・プログラミング関連の覚書が中心

読んだ4!のブログパーツを作ってみました

yonda4

とりあえず

読んだ4!が提供しているAPIを用いたブログパーツです。



パターン1と2は、

<script type="text/javascript" charset="utf-8" src="http://furyu-tei.sakura.ne.jp/script/show_yonda4.js"></script>
<script type="text/javascript">
showYonda4({
    info:{
        user : '〜' // Twitterアカウント(省略すると全体の最新から取得)
    ,   name : '〜' // 表示名
    ,   atag : '〜'    // Amazon AssociateTag
　：

の〜の部分を、自分のTwitterアカウント・表示名・Amazon AssociateTagに置き換えて使います。
ちなみにuser指定無し('')にしておくと、全体の最新を表示します。

header,body,item,footer部それぞれにテンプレートが指定出来るようになっているので、これと後はCSSを適当にいじれば、自分のお好みでカスタマイズすることも出来るでしょう。

実際に設置した例はこちらのサイドバーにあります。
はてなダイアリーだとそのままじゃ貼れないからなぁ…。

パターン1

<style type="text/css">
#yonda4container {
    margin:0;
    padding:0;
    width:160px;
    overflow:hidden;
    border:solid 1px #ccff99;
    vertical-align:top;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif!important;
}

#yonda4container * {
    vertical-align:top;
}

#yonda4container img {
    border:none;
}

#yonda4container p {
    margin:0;
    padding:2px 0;
}

#yonda4container table {
    border-collapse:collapse;
}

.yonda4header {
    margin:0;
    padding:2px 4px;
    font-size:13px;
    background:#ffe5cc;
    text-align:center;
    font-size:13px;
}

.yonda4body {
    margin:0;
    padding:0;
    text-align:left;
    font-size:11px;
}

.yonda4footer {
    margin:0;
    padding:2px 4px;
    background:#ffe5cc;
    text-align:right;
    font-size:11px;
}

.yonda4_item td {
    border:solid 1px #ccff99;
    border-left:none;
    border-right:none;
    background:#ffffdb;
}

.yonda4_item td.image {
    text-align:center;
}

.yonda4_item td.text {
}

</style>

<script type="text/javascript" charset="utf-8" src="http://furyu-tei.sakura.ne.jp/script/show_yonda4.js"></script>
<script type="text/javascript">
showYonda4({
    info:{
        user : 'honnotsubuyaki' // Twitterアカウント(省略すると全体の最新から取得)
    ,   name : 'ほんのつぶやき' // 表示名
    ,   atag : 'furyutei-22'    // Amazon AssociateTag
    ,   start: 0                // 開始番号(オフセット)
    ,   num  : 5                // 取得item数
    ,   modify_value : function(value){ // jsonのvalueを編集したいときに関数を指定
            return value;
        }
    ,   modify_item : function(item){ // jsonのitems[n]を編集したいときに関数を指定
            item.description=item.description.replace(/^[\s　]*(http:.*?|[A-Z\d]{10}|\d{13})([\s　]|$)/,'');
            item.description=item.description.replace(/(.)/g,'$1<wbr />');
            return item;
        }
    }
,   template:{
        header:'<p><a href="{{link}}">読んだ4!</a></p><p><a href="{{link_user}}">{{info.name}}の読書記録</a></p>'
    ,   body:'<table><tbody>{{items_html}}</tbody></table>'
    ,   item:[
            '<tr class="yonda4_item">'
        ,       '<td class="image"><a href="{{item.link}}" title="読んだ4!のページ"><img src="http://images-jp.amazon.com/images/P/{{item.asin}}.09.THUMBZZZ.jpg" /></a></td>'
        ,       '<td class="text">'
        ,           '<p><a href="{{item.link}}" title="読んだ4!のページ">{{item.title}}</a></p>'
        ,           '<p>{{item.date.month}}月{{item.date.day}}日({{item.date.jwday}}) {{item.time.hour}}時</p>'
        ,           '<p><a href="{{item.guid}}" title="Twitter">■</a> {{item.description}}</p>'
        ,           '<p><a href="http://www.amazon.co.jp/exec/obidos/ASIN/{{item.asin}}/{{info.atag}}/">'
        ,               '<img src="http://rcm-images.amazon.com/images/G/09/buttons/buy-from-tan.gif" width="90" height="28" alt="amazon.co.jpで買う" />'
        ,           '</a></p>'
        ,       '</td>'
        ,   '</tr>'
        ].join('')
    ,   footer:'<a href="http://d.hatena.ne.jp/furyu-tei/20090718/yonda4gadget">パーツ提供：風柳</a>'
    }
});
</script>

パターン2

<style type="text/css">
#yonda4container {
    margin:0;
    padding:0;
    width:160px;
    overflow:hidden;
    border:solid 1px #ccff99;
    vertical-align:top;
}

#yonda4container * {
    vertical-align:top;
}

#yonda4container a {
    text-decoration:none;
}

#yonda4container a:link {
    color:navy;
}

#yonda4container a:visited {
    color:indigo;
}

#yonda4container img {
    border:none;
}

#yonda4container p {
    margin:0;
}

.yonda4header {
    margin:0;
    padding:2px 4px;
    background:#ffe5cc;
    text-align:center;
    font-size:13px;
    border-bottom:solid 1px #ccff99;
}
.yonda4header p {
    padding:2px 0;
}

.yonda4body {
    margin:0;
    padding:0;
    text-align:left;
    font-size:11px;
}

.yonda4body p {
    padding:2px 0;
}

.yonda4_item {
    border-bottom:solid 1px #ccff99;
    background:#ffffdb;
}

.yonda4_item .text {
    position:relative;
    height:160px;
    overflow:hidden;
    font-weight:bolder;
    background:white;
}

.yonda4_item .text img {
    position:absolute;
    top:0;
    left:8px;
    z-index:1;
    width:100%;
}

.yonda4_item .text-body {
    position:absolute;
    top:5px;
    left:5px;
    z-index:2;
    height:142px;
    width:140px;
    padding:4px;
    background:white;
/*
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    opacity:0.6;
*/
    filter:alpha(opacity=0);
    -moz-opacity:0.0;
    opacity:0.0;
}

.yonda4_item .title {
    padding:2px 4px;
    background:khaki;
}

.yonda4_item .impression {
    color:darkred;
}

.yonda4_item .affiliate {
    text-align:right;
}

.yonda4footer {
    margin:0;
    padding:2px 4px;
    background:#ffe5cc;
    text-align:right;
    font-size:11px;
}

</style>

<script type="text/javascript" charset="utf-8" src="http://furyu-tei.sakura.ne.jp/script/show_yonda4.js"></script>
<script type="text/javascript">
(function(){
var	w=window,d=w.document;
w.yonda4_show_text=function(obj){
	var	s=obj.style;
	s.filter='alpha(opacity=0)';
	s.MozOpacity='0';
	s.opacity='0';
}
w.yonda4_hide_text=function(obj){
	var	s=obj.style;
	s.filter='alpha(opacity=60)';
	s.MozOpacity='0.6';
	s.opacity='0.6';
}
})();
showYonda4({
    info:{
        user : 'furyutei' // Twitterアカウント(省略すると全体の最新から取得)
    ,   name : '風柳' // 表示名
    ,   atag : 'furyutei-22'    // Amazon AssociateTag
    ,   start: 0                // 開始番号(オフセット)
    ,   num  : 5                // 取得item数
    ,   modify_value : function(value){ // jsonのvalueを編集したいときに関数を指定
            return value;
        }
    ,   modify_item : function(item){ // jsonのitems[n]を編集したいときに関数を指定
            item.description=item.description.replace(/^[\s　]*(http:.*?|[A-Z\d]{10}|\d{13})([\s　]|$)/,'');
            item.description=item.description.replace(/(.)/g,'$1<wbr />');
            item.stitle=item.title.slice(0,30);
            if (item.stitle.length<item.title.length) item.stitle+='…';
            return item;
        }
    }
,   template:{
        header:'<p><a href="{{link}}">読んだ4!</a></p><p><a href="{{link_user}}">{{info.name}}の読書記録</a></p>'
    ,   body:'{{items_html}}'
    ,   item:[
            '<div class="yonda4_item">'
        ,       '<div class="text">'
        ,           '<img src="http://images-jp.amazon.com/images/P/{{item.asin}}.09._PU15_.THUMBZZZ.jpg" />'
        ,           '<div class="text-body" onmouseover="yonda4_hide_text(this)" onmouseout="yonda4_show_text(this)">'
        ,               '<p class="title"><a href="{{item.link}}" title="{{item.title}}">{{item.stitle}}</a></p>'
        ,               '<p class="datetime"><a href="{{item.guid}}" title="Twitter">■ </a>{{item.date.month}}月{{item.date.day}}日({{item.date.jwday}}) {{item.time.hour}}時</p>'
        ,               '<p class="impression">{{item.description}}</p>'
        ,           '</div>'
        ,       '</div>'
        ,       '<div class="affiliate"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/{{item.asin}}/{{info.atag}}/">'
        ,           '<img src="http://rcm-images.amazon.com/images/G/09/buttons/buy-from-tan.gif" width="90" height="28" alt="amazon.co.jpで買う" />'
        ,       '</a></div>'
        ,   '</div>'
        ].join('')
    ,   footer:'<a href="http://d.hatena.ne.jp/furyu-tei/20090718/yonda4gadget">パーツ提供</a>'
    }
});
</script>

パターン3(Google Gadget)


ひとつずつ表示で▼▲で移動するタイプ。

設定方法(はてなダイアリーの例)
  1. Google ガジェット追加ページへ行く。
  2. 画面に基づいて各種設定を行ったあと、[コードを取得]を押し、表示されたHTMLをコピーする。
  3. 自分のはてなダイアリーの「詳細デザイン設定」（[管理]→[デザイン]の[詳細]タブ）にて、[ページのフッタ]欄の<div class="sidebar">〜</div>内の適当な箇所に、2で取得したHTMLを貼り付ける(その際、<div style="width:160px;">〜</div>で囲んだ方がよいかも)。
  4. 貼付けたHTMLで「<script src=...」となっているところを、「<script charset="utf-8" src=...」のように修正する（ charset="utf-8" を追加する）。
  5. [この内容に変更する]ボタンをおして、設定を保存する。

ブラウザによって見切れたり余白が出来たりするけれど……調整諦めた。

関連

よんだよ - なんだろー