忍者ブログ
ネットで公開されている技術に知人が手を加えて結晶にしてくれました。@非表示ブログパーツのシリーズです。
2010.05.04 Tuesday
@抜きURL変換あり日付時間サムネイルタイプCSS説明付き
da34bf7a.png@抜きURL変換あり日付時間サムネイルタイプのCSS説明付きです。
「HTMLに貼ってみたけど形を整えられないから諦めた」という方用の、枠で囲っただけのシンプルCSS付き。
←デザインは大体このように表示されます。（見本画像のつぶやきはtwitter公式のtwjアカウントのものです。twitpic画像はダミーで す。）HTMLとCSSが利用できるブログなら設置できると思います。ブログパーツの幅、枠線色等は自由に変更できるようになってます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。


---↓これをサイトのHTMLのブログパーツを表示させたい部分に貼る。（アカウント名を書き換え る場所が一つあります）


<div class="twit">
   <div id="twitter">
     <ul id="twitter_update_list"></ul>
   </div>
     <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>


---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）　 <body></body>の中にしてください。（アカウント名を書き換える場所が一つあります）

<script type="text/javascript">
function twitterCallback(result)
{
    var item_max = 5;
    var timeline_list = new Array();
    var out = '<ul>\n';
    var cnt = 1;

    for (var i = 0; i < result.length; i++) {
        var text  = result[i]['text'];
        if (text.match(/^@/)) {
            continue;
        }
        if (cnt > item_max) {
            break;
        }
        cnt++;
        var created_at = result[i]['created_at'].split(" ");
        var post_date = created_at[1] + " " + created_at[2] + ", "
            + created_at[5] + " " + created_at[3];
        var date = new Date(post_date);
        date.setHours(date.getHours() + 9);
        var mon  = '0' + (date.getMonth() + 1);
        mon = mon.substr(mon.length - 2);
        var day  = '0' + date.getDate();
        day = day.substr(day.length - 2);
                var hour  = '0' + date.getHours();
                hour = hour.substr(hour.length - 2);
                var minute  = '0' + date.getMinutes();
                minute = minute.substr(minute.length - 2);
        var out_date = mon + "/" + day + "  " + hour + ":" + minute;
        text = text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[^"¥s¥<¥>]*[^.,;'">¥:¥s¥<¥>¥)¥]¥!])/g, function(url) {
            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '[<a href="'+url+'" target=_blank">URL</a>]';
            }
        })
        hash_tags = text.match(/\s*\#[a-zA-Z0-9]*[\s\r]/g);
        if (!!hash_tags) {
            for (var j = 0; j < hash_tags.length; j++) {
                hash_tag = hash_tags[j];
                hash_tag = hash_tag.replace(/^ /, "");
                hash_tag = hash_tag.replace(/[\s\n]$/, "");
                hash_tag_name = hash_tag.replace(/^#/, "");
                hash_url = '<a target="_blank" href="http://search.twitter.com/search?q=%23' + hash_tag_name + '&amp;lang=ja">' + hash_tag + '</a>';
                text = text.replace(hash_tag, hash_url);
            }
        }
        // out += '  <li>' + text + '</li>\n';
        out += '  <li>' + text + '<span class="period"><FONT size="-2" color="#aaaaaa"> ( ' + out_date + ' )</FONT></span></li>\n';
    }
    out += '</ul>\n';
    document.getElementById('twitter').innerHTML = out;
}
</script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback"></script>

---↓これをサイトのCSSに貼る。どこでもいいです。日本語の部分も全部貼っちゃってOKです。分かりやすいよう にCSSの一番最後に入れるといいでしょう。変更できる部分の説明が書いてありますので数字をいじってみてください。

/*twitter用サイドシンプル */
.twit {
/* -------------------------------------
↓ブログパーツの背景色設定
--------------------------------------- */
background-color: #ffffff;
/* -------------------------------------
↓ブログパーツの横幅設定
--------------------------------------- */
width:150px ;
/* -------------------------------------
↓ブログパーツの枠外隙間設定
--------------------------------------- */
margin: 10px 0px 10px 0px;
padding: 5px 10px 5px 10px;
/* -------------------------------------
↓ブログパーツの枠線設定
--------------------------------------- */
border: 2px #999999 solid;
}

/* -------------------------------------
↓ブログパーツの文字設定
--------------------------------------- */
div.twit li {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka‐等幅";
font-size: 10px;
color: #000000;
text-align: left;
line-height: 150%;
list-style:disc;
/* -------------------------------------
↓つぶやきの間隔設定（上下に隙間をあけたい場合は初期値一番目と三番目の数字を大きく。黒丸が左に表示され過ぎてしまう場合は四番目の数字を大きくして下さい）
--------------------------------------- */
margin: 10px 0px 5px 0px;
}

/* -------------------------------------
↓画像の枠線設定
--------------------------------------- */
img.twitpic{  
margin-bottom:5px;
padding:3px;
border: 1px #666666 solid;
background: #ffffff;
}
PR
手取り足取りCSS解説付き
2010.05.04 Tuesday
@抜きURL変換あり日付のみサムネイルタイプCSS説明付き
6840132e.png@抜きURL変換あり日付のみサムネイルタイプのCSS説明付きです。
「HTMLに貼ってみたけど形を整えられないから諦めた」という方用の、枠で囲っただけのシンプルCSS付き。
←デザインは大体このように表示されます。（見本画像のつぶやきはtwitter公式のtwjアカウントのものです。twitpic画像はダミーで す。）HTMLとCSSが利用できるブログなら設置できると思います。ブログパーツの幅、枠線色等は自由に変更できるようになってます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。


---↓これをサイトのHTMLのブログパーツを表示させたい部分に貼る。（アカウント名を書き換え る場所が一つあります）

<div class="twit">
   <div id="twitter">
     <ul id="twitter_update_list"></ul>
   </div>
     <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>

---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）　 <body></body>の中にしてください。（アカウント名を書き換える場所が一つあります）

<script type="text/javascript">
function twitterCallback(result)
{
    var item_max = 5;
    var timeline_list = new Array();
    var out = '<ul>\n';
    var cnt = 1;
    for (var i = 0; i < result.length; i++) {
        var text  = result[i]['text'];
        if (text.match(/^@/)) {
            continue;
        }
        if (cnt > item_max) {
            break;
        }
        cnt++;
        var created_at = result[i]['created_at'].split(" ");
        var post_date = created_at[1] + " " + created_at[2] + ", "
            + created_at[5] + " " + created_at[3];
        var date = new Date(post_date);
        date.setHours(date.getHours() + 9);
        var mon  = '0' + (date.getMonth() + 1);
        mon = mon.substr(mon.length - 2);
        var day  = '0' + date.getDate();
        day = day.substr(day.length - 2);
        var out_date = mon + "/" + day;
        text = text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[^"¥s¥<¥>]*[^.,;'">¥:¥s¥<¥>¥)¥]¥!])/g, function(url) {
            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '[<a href="'+url+'" target=_blank">URL</a>]';
            }
        })
        hash_tags = text.match(/\s*\#[a-zA-Z0-9]*[\s\r]/g);
        if (!!hash_tags) {
            for (var j = 0; j < hash_tags.length; j++) {
                hash_tag = hash_tags[j];
                hash_tag = hash_tag.replace(/^ /, "");
                hash_tag = hash_tag.replace(/[\s\n]$/, "");
                hash_tag_name = hash_tag.replace(/^#/, "");
                hash_url = '<a target="_blank" href="http://search.twitter.com/search?q=%23' + hash_tag_name + '&amp;lang=ja">' + hash_tag + '</a>';
                text = text.replace(hash_tag, hash_url);
            }
        }
        // out += '  <li>' + text + '</li>\n';
        out += '  <li>' + text + '<span class="period"> ... ' + out_date + '</span></li>\n';
    }
    out += '</ul>\n';
    document.getElementById('twitter').innerHTML = out;
}
</script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback"></script>

---↓これをサイトのCSSに貼る。どこでもいいです。日本語の部分も全部貼っちゃってOKです。分かりやすいよう にCSSの一番最後に入れるといいでしょう。変更できる部分の説明が書いてありますので数字をいじってみてください。

/*twitter用サイドシンプル */
.twit {
/* -------------------------------------
↓ブログパーツの背景色設定
--------------------------------------- */
background-color: #ffffff;
/* -------------------------------------
↓ブログパーツの横幅設定
--------------------------------------- */
width:150px ;
/* -------------------------------------
↓ブログパーツの枠外隙間設定
--------------------------------------- */
margin: 10px 0px 10px 0px;
padding: 5px 10px 5px 10px;
/* -------------------------------------
↓ブログパーツの枠線設定
--------------------------------------- */
border: 2px #999999 solid;
}

/* -------------------------------------
↓ブログパーツの文字設定
--------------------------------------- */
div.twit li {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka‐等幅";
font-size: 10px;
color: #000000;
text-align: left;
line-height: 150%;
list-style:disc;
/* -------------------------------------
↓つぶやきの間隔設定（上下に隙間をあけたい場合は初期値一番目と三番目の数字を大きく。黒丸が左に表示され過ぎてしまう場合は四番目の数字を大きくして下さい）
--------------------------------------- */
margin: 10px 0px 5px 0px;
}

/* -------------------------------------
↓画像の枠線設定
--------------------------------------- */
img.twitpic{   
margin-bottom:5px;
padding:3px;
border: 1px #666666 solid;
background: #ffffff;
}
手取り足取りCSS解説付き
2010.05.04 Tuesday
@抜き日付時刻サムネイルタイプCSS説明付き
b843abcb.png@抜き日付時刻サムネイルタイプのCSS説明付きです。
「HTMLに貼ってみたけど形を整えられないから諦めた」という方用の、枠で囲っただけのシンプルCSS付き。
←デザインは大体このように表示されます。（見本画像のつぶやきはtwitter公式のtwjアカウントのものです。twitpic画像はダミーで す。）HTMLとCSSが利用できるブログなら設置できると思います。ブログパーツの幅、枠線色等は自由に変更できるようになってます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。


---↓これをサイトのHTMLのブログパーツを表示させたい部分に貼る。（アカウント名を書き換え る場所が一つあります）

<div class="twit">
  <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
  </div>
    <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>

---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）　 <body></body>の中にしてください。（アカウント名を書き換える場所が一つあります）

<script type="text/javascript">
function twitterCallback(twitters) {
  var item_max = 5;
  var cnt = 1;
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    if (twitters[i].text.match(/^@/)) {
      continue;
    }
    if (cnt > item_max) {
      break;
    }
    cnt++;
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[^"¥s¥<¥>]*[^.,;'">¥:¥s¥<¥>¥)¥]¥!])/g, function(url) {
            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '<a href="'+url+'" target=_blank">'+url+'</a>';
            }
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> ... <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var date = new Date(time_value);
  date.setHours(date.getHours() + 9);
  var mon  = '0' + (date.getMonth() + 1);
  mon = mon.substr(mon.length - 2);
  var day  = '0' + date.getDate();
  day = day.substr(day.length - 2);
  var hour  = '0' + date.getHours();
  hour = hour.substr(hour.length - 2);
  var minute  = '0' + date.getMinutes();
  minute = minute.substr(minute.length - 2);
  var out_date = mon + "/" + day + " " + hour + ":" + minute;
  return out_date;
}

</script>

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback&amp"></script>

---↓これをサイトのCSSに貼る。どこでもいいです。日本語の部分も全部貼っちゃってOKです。分かりやすいよう にCSSの一番最後に入れるといいでしょう。変更できる部分の説明が書いてありますので数字をいじってみてください。

/*twitter用サイドシンプル */
.twit {
/* -------------------------------------
↓ブログパーツの背景色設定
--------------------------------------- */
background-color: #ffffff;
/* -------------------------------------
↓ブログパーツの横幅設定
--------------------------------------- */
width:150px ;
/* -------------------------------------
↓ブログパーツの枠外隙間設定
--------------------------------------- */
margin: 10px 0px 10px 0px;
padding: 5px 10px 5px 10px;
/* -------------------------------------
↓ブログパーツの枠線設定
--------------------------------------- */
border: 2px #999999 solid;
}

/* -------------------------------------
↓ブログパーツの文字設定
--------------------------------------- */
div.twit li {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka‐等幅";
font-size: 10px;
color: #000000;
text-align: left;
line-height: 150%;
list-style:disc;
/* -------------------------------------
↓つぶやきの間隔設定（上下に隙間をあけたい場合は初期値一番目と三番目の数字を大きく。黒丸が左に表示され過ぎてしまう場合は四番目の数字を大きくして下さい）
--------------------------------------- */
margin: 10px 0px 5px 0px;
}

/* -------------------------------------
↓画像の枠線設定
--------------------------------------- */
img.twitpic{  
margin-bottom:5px;
padding:3px;
border: 1px #666666 solid;
background: #ffffff;
}
手取り足取りCSS解説付き
2010.05.04 Tuesday
@抜きTwitter公式サムネイルタイプシンプルCSS説明付き
mihon.png@抜きTwitter公式サムネイルタイプのCSS説明付きです。
「HTMLに貼ってみたけど形を整えられないから諦めた」という方用の、枠で囲っただけのシンプルCSS付き。
←デザインは大体このように表示されます。（見本画像のつぶやきはtwitter公式のtwjアカウントのものです。twitpic画像はダミーです。）HTMLとCSSが利用できるブログなら設置できると思います。ブログパーツの幅、枠線色等は自由に変更できるようになってます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。

---↓これをサイトのHTMLのブログパーツを表示させたい部分に貼る。（アカウント名を書き換える場所が一つあります）

<div class="twit">
  <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
  </div>
    <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>

---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）　<body></body>の中にしてください。（アカウント名を書き換える場所が一つあります）

<script type="text/javascript">
function twitterCallback(twitters) {
  var item_max = 5;
  var cnt = 1;
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    if (twitters[i].text.match(/^@/)) {
      continue;
    }
    if (cnt > item_max) {
      break;
    }
    cnt++;
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {

            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '<a href="'+url+'" target=_blank">'+url+'</a>';
            }
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });

    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);
  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}
</script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback&amp;count=20"></script>

---↓これをサイトのCSSに貼る。どこでもいいです。日本語の部分も全部貼っちゃってOKです。分かりやすいようにCSSの一番最後に入れるといいでしょう。変更できる部分の説明が書いてありますので数字をいじってみてください。

/*twitter用サイドシンプル */
.twit {
/* -------------------------------------
↓ブログパーツの背景色設定
--------------------------------------- */
background-color: #ffffff;
/* -------------------------------------
↓ブログパーツの横幅設定
--------------------------------------- */
width:150px ;
/* -------------------------------------
↓ブログパーツの枠外隙間設定
--------------------------------------- */
margin: 10px 0px 10px 0px;
padding: 5px 10px 5px 10px;
/* -------------------------------------
↓ブログパーツの枠線設定
--------------------------------------- */
border: 2px #999999 solid;
}

/* -------------------------------------
↓ブログパーツの文字設定
--------------------------------------- */
div.twit li {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka‐等幅";
font-size: 10px;
color: #000000;
text-align: left;
line-height: 150%;
list-style:disc;
/* -------------------------------------
↓つぶやきの間隔設定（上下に隙間をあけたい場合は初期値一番目と三番目の数字を大きく。黒丸が左に表示され過ぎてしまう場合は四番目の数字を大きくして下さい）
--------------------------------------- */
margin: 10px 0px 5px 0px;
}

/* -------------------------------------
↓画像の枠線設定
--------------------------------------- */
img.twitpic{  
margin-bottom:5px;
padding:3px;
border: 1px #666666 solid;
background: #ffffff;
}
手取り足取りCSS解説付き
2010.05.02 Sunday
@抜きTwitter公式サムネイルタイプ
@抜きTwitter公式タイプのサムネイル表示タイプです。twitpic画像のURLがある場合、サムネイルで表示します。
サムネイル周りのソースはROBOX co.,Ltd.さんが公開している 「Twitter のタイムラインを表示する ブログパーツ」から無断拝借しました。
HTMLタイプなので簡単に設置できて、シンプルです。少し詳しい方なら背景を指定する事でデザインも自由に変えられます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。
※2010/05/03改訂版（URL変換ありになってました…直しました）

---↓これをブログパーツを表示させたい部分に貼る

<div class="twit">
  <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
  </div>
    <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>

---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）

<script type="text/javascript">
function twitterCallback(twitters) {
  var item_max = 5;
  var cnt = 1;
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    if (twitters[i].text.match(/^@/)) {
      continue;
    }
    if (cnt > item_max) {
      break;
    }
    cnt++;
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {

            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '<a href="'+url+'" target=_blank">'+url+'</a>';
            }
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });

    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);
  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}
</script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント名.json?callback=twitterCallback&amp;count=20"></script>
ブログパーツタイプ
2010.05.02 Sunday
@抜き日付時刻サムネイルタイプ
@抜き日付時刻タイプのサムネイル表示タイプです。twitpic画像のURLがある場合、サムネイルで表示します。
サムネイル周りのソースはROBOX co.,Ltd.さんが公開している 「Twitter のタイムラインを表示する ブログパーツ」から無断拝借しました。
HTMLタイプなので簡単に設置できて、シンプルです。少し詳しい方なら背景を指定する事でデザインも自由に変えられます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。
※2010/05/03改訂版（URL変換ありになってました…直しました）

---↓これをブログパーツを表示させたい部分に貼る

<div class="twit">
  <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
  </div>
    <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>

---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）

<script type="text/javascript">
function twitterCallback(twitters) {
  var item_max = 5;
  var cnt = 1;
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    if (twitters[i].text.match(/^@/)) {
      continue;
    }
    if (cnt > item_max) {
      break;
    }
    cnt++;
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[^"¥s¥<¥>]*[^.,;'">¥:¥s¥<¥>¥)¥]¥!])/g, function(url) {
            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '<a href="'+url+'" target=_blank">'+url+'</a>';
            }
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> ... <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var date = new Date(time_value);
  date.setHours(date.getHours() + 9);
  var mon  = '0' + (date.getMonth() + 1);
  mon = mon.substr(mon.length - 2);
  var day  = '0' + date.getDate();
  day = day.substr(day.length - 2);
  var hour  = '0' + date.getHours();
  hour = hour.substr(hour.length - 2);
  var minute  = '0' + date.getMinutes();
  minute = minute.substr(minute.length - 2);
  var out_date = mon + "/" + day + " " + hour + ":" + minute;
  return out_date;
}

</script>

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback&amp"></script>
ブログパーツタイプ
2010.05.02 Sunday
@抜きURL変換あり日付のみサムネイルタイプ
@抜きURL変換あり日付のみタイプのサムネイル表示タイプです。twitpic画像のURLがある場合、サムネイルで表示します。
サムネイル周りのソースはROBOX co.,Ltd.さんが公開している「Twitter のタイムラインを表示する ブログパーツ」から無断拝借しました。
HTMLタイプなので簡単に設置できて、シンプルです。少し詳しい方なら背景を指定する事でデザインも自由に変えられます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。

---↓これをブログパーツを表示させたい部分に貼る

<div class="twit">
   <div id="twitter">
     <ul id="twitter_update_list"></ul>
   </div>
     <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>

---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）

<script type="text/javascript">
function twitterCallback(result)
{
    var item_max = 5;
    var timeline_list = new Array();
    var out = '<ul>\n';
    var cnt = 1;
    for (var i = 0; i < result.length; i++) {
        var text  = result[i]['text'];
        if (text.match(/^@/)) {
            continue;
        }
        if (cnt > item_max) {
            break;
        }
        cnt++;
        var created_at = result[i]['created_at'].split(" ");
        var post_date = created_at[1] + " " + created_at[2] + ", "
            + created_at[5] + " " + created_at[3];
        var date = new Date(post_date);
        date.setHours(date.getHours() + 9);
        var mon  = '0' + (date.getMonth() + 1);
        mon = mon.substr(mon.length - 2);
        var day  = '0' + date.getDate();
        day = day.substr(day.length - 2);
        var out_date = mon + "/" + day;
        text = text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[^"¥s¥<¥>]*[^.,;'">¥:¥s¥<¥>¥)¥]¥!])/g, function(url) {
            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '[<a href="'+url+'" target=_blank">URL</a>]';
            }
        })
        hash_tags = text.match(/\s*\#[a-zA-Z0-9]*[\s\r]/g);
        if (!!hash_tags) {
            for (var j = 0; j < hash_tags.length; j++) {
                hash_tag = hash_tags[j];
                hash_tag = hash_tag.replace(/^ /, "");
                hash_tag = hash_tag.replace(/[\s\n]$/, "");
                hash_tag_name = hash_tag.replace(/^#/, "");
                hash_url = '<a target="_blank" href="http://search.twitter.com/search?q=%23' + hash_tag_name + '&amp;lang=ja">' + hash_tag + '</a>';
                text = text.replace(hash_tag, hash_url);
            }
        }
        // out += '  <li>' + text + '</li>\n';
        out += '  <li>' + text + '<span class="period"> ... ' + out_date + '</span></li>\n';
    }
    out += '</ul>\n';
    document.getElementById('twitter').innerHTML = out;
}
</script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback"></script>
ブログパーツタイプ
2010.05.02 Sunday
@抜きURL変換あり日付時間サムネイルタイプ
@抜きURL変換あり日付時間タイプのサムネイル表示タイプです。twitpic画像のURLがある場合、サムネイルで表示します。
サムネイル周りのソースはROBOX co.,Ltd.さんが公開している「Twitter のタイムラインを表示する ブログパーツ」から無断拝借しました。
HTMLタイプなので簡単に設置できて、シンプルです。少し詳しい方なら背景を指定する事でデザインも自由に変えられます。
アカウント名　の部分を　ご自分のtwitterアカウント名　に書き換えてお使い下さい。
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパー ツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も表示されないことになります。

---↓これをブログパーツを表示させたい部分に貼る

<div class="twit">
   <div id="twitter">
     <ul id="twitter_update_list"></ul>
   </div>
     <a target=_top href="http://twitter.com/アカウント名" id="twitter-link" style="display:block;text-align:right;">Twitter</a>
</div>

---↓これをサイトのHTMLの下の方に貼る（twitterの読み込み順を後にする為）

<script type="text/javascript">
function twitterCallback(result)
{
    var item_max = 5;
    var timeline_list = new Array();
    var out = '<ul>\n';
    var cnt = 1;

    for (var i = 0; i < result.length; i++) {
        var text  = result[i]['text'];
        if (text.match(/^@/)) {
            continue;
        }
        if (cnt > item_max) {
            break;
        }
        cnt++;
        var created_at = result[i]['created_at'].split(" ");
        var post_date = created_at[1] + " " + created_at[2] + ", "
            + created_at[5] + " " + created_at[3];
        var date = new Date(post_date);
        date.setHours(date.getHours() + 9);
        var mon  = '0' + (date.getMonth() + 1);
        mon = mon.substr(mon.length - 2);
        var day  = '0' + date.getDate();
        day = day.substr(day.length - 2);
                var hour  = '0' + date.getHours();
                hour = hour.substr(hour.length - 2);
                var minute  = '0' + date.getMinutes();
                minute = minute.substr(minute.length - 2);
        var out_date = mon + "/" + day + "  " + hour + ":" + minute;
        text = text.replace(/((https?|s?ftp|ssh)¥:¥/¥/[^"¥s¥<¥>]*[^.,;'">¥:¥s¥<¥>¥)¥]¥!])/g, function(url) {
            if(url.match(/¥/twitpic.com¥/([0-9a-zA-Z])/)){
                var img_url = url.replace(/http¥:¥/¥/twitpic¥.com¥//, function(img_url){
                    return 'http://twitpic.com/show/mini/';
                })
                return '<br><a href="'+url+'" target=_blank alt="twitpic"><img border=0 class="twitpic" src="'+img_url+'"></a><br clear=all>';
            }else{
                return '[<a href="'+url+'" target=_blank">URL</a>]';
            }
        })
        hash_tags = text.match(/\s*\#[a-zA-Z0-9]*[\s\r]/g);
        if (!!hash_tags) {
            for (var j = 0; j < hash_tags.length; j++) {
                hash_tag = hash_tags[j];
                hash_tag = hash_tag.replace(/^ /, "");
                hash_tag = hash_tag.replace(/[\s\n]$/, "");
                hash_tag_name = hash_tag.replace(/^#/, "");
                hash_url = '<a target="_blank" href="http://search.twitter.com/search?q=%23' + hash_tag_name + '&amp;lang=ja">' + hash_tag + '</a>';
                text = text.replace(hash_tag, hash_url);
            }
        }
        // out += '  <li>' + text + '</li>\n';
        out += '  <li>' + text + '<span class="period"><FONT size="-2" color="#aaaaaa"> ( ' + out_date + ' )</FONT></span></li>\n';
    }
    out += '</ul>\n';
    document.getElementById('twitter').innerHTML = out;
}
</script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback"></script>
ブログパーツタイプ
2010.04.02 Friday
背景との基本の組み合わせ
ce5e1480.jpeg背景画像と組み合わせる事で、パーツの見た目を自由に変えられます。
HTMLで自由に組み立てられますが、
簡単なこのような形なら、画像を三つ用意して、
上・中・下に貼り付けると出来上がります。

（説明の為だけに数秒で作った見本なのでデザインの見苦しさはご勘弁下さい。この画像の中にあるつぶやきは、twitter日本公式アカウントの　twj　を利用しています）







0f38fbe7.pngタイトル画像をブログパーツの上に配置します。



9ddb685a.pngブログパーツの背景に適当な画像を縦リピート指定で配置します。

7dbe962f.png下に適当な画像を配置します。

1581d01e.png自由にデザインしてください。











パーツ設置のミニ技
2010.03.31 Wednesday
取得件数の増やし方
twitter発言の最新20件（HOME1ページ分）を取得し＠表示を除いてvar item_maxの数だけパーツに反映する仕様の為、その20件のうち全てが＠発言だとブログパーツに一件も 表示されない仕様ですが、取得件数を増やす事でこれを回避することができます。
一番最後の

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback&amp"></script>

の部分を

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/アカウント 名.json?callback=twitterCallback&count=取得希望件数"></script>

に差し替えてください。取得希望件数は任意の数字を入れてください。但し多ければ多いほど重くなります。
パーツ設置のミニ技
1  2  →
Admin　/　Write
管理人より
このブログの管理人です。ジャバスクリプトって何それ美味しい？レベルの全くの素人です。
「ブログパーツには全く興味がない」という知人を宥め脅して嫌々作ってもらったtwitterブログパーツを公開する為だけにこのブログを作りました。とりあえず要求した動作をするようにその時その時でネットで公開されているソースを参照して手を加えてもらっただけの為、綺麗なソースではありません。後に機能を追加してもらった際、気が向いて直してくれた部分があるようで、多機能ver.ソースの方がマシになっているらしいです。そういう意味でお勧めはサムネイル表示バージョンです。（URL変換の部分も手を加えたらしいので知らない内にどこにURLが来てもきちんと変換するようになっているようです）
一応確認はしたつもりですが、ブログ作成の最中にコピペを失敗したりして、上手く動かないソースが存在するかもしれません。
表示見本
忍者ブログのテンプレートの不自由さに泣いた。テンプレートが自由にいじれるところなら、不自然な右寄りにならずにすみます。これは@抜きURL変換あり日付時間タイプです。
    Twitter
    このアカウントは日本語版Twitter公式です
    最新記事
    @抜きURL変換あり日付時間サムネイルタイプCSS説明付き
    (05/04)
    @抜きURL変換あり日付のみサムネイルタイプCSS説明付き
    (05/04)
    @抜き日付時刻サムネイルタイプCSS説明付き
    (05/04)
    @抜きTwitter公式サムネイルタイプシンプルCSS説明付き
    (05/04)
    @抜きTwitter公式サムネイルタイプ
    (05/02)
    @抜き日付時刻サムネイルタイプ
    (05/02)
    @抜きURL変換あり日付のみサムネイルタイプ
    (05/02)
    @抜きURL変換あり日付時間サムネイルタイプ
    (05/02)
    背景との基本の組み合わせ
    (04/02)
    取得件数の増やし方
    (03/31)
    カテゴリー
    ブログパーツタイプ ( 8 )
    パーツ設置のミニ技 ( 2 )
    手取り足取りCSS解説付き ( 4 )
    未選択 ( 0 )
    アーカイブ
    2010 年 05 月 ( 8 )
    2010 年 04 月 ( 1 )
    2010 年 03 月 ( 1 )
    2010 年 02 月 ( 3 )
    2010 年 01 月 ( 1 )
    RSS
    RSS 0.91
    RSS 1.0
    RSS 2.0
    ブログ内検索
    アクセス解析
    ブログ [PR]海外旅行 バイク買取