JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<h1>ID:kachibito</h1>    
<ul id="twitter_update_list"><li>読み込んでいます</li></ul>
<h1>ID:web_tips</h1>
<ul id="twitter_update_list1"><li>読み込んでいます</li></ul>


    <script>
        //ここからtwitterCallback2です
function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+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_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
//ここまでtwitterCallback2です
//twitterCallback2を使うjsonはhttp://twitter.com/statuses/user_timeline/kachibito.json?callback=twitterCallback2&count=10

        //ここからtwitterCallback3です。今回追加したコード部分になります。
function twitterCallback3(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+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_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list1').innerHTML =...

CSS

#twitter_update_list,
        #twitter_update_list1{
        font-size: 13px;
        line-height: 21px;
        list-style: none;
        width: 400px ;
        }
        #twitter_update_list li,
        #twitter_update_list1 li{
        background: #fff;
        padding-bottom: 7px;
        margin-bottom: 9px;
        border-bottom: 1px solid #ababab ;
        }
        #twitter_update_list span, 
        #twitter_update_list span a,
        #twitter_update_list1 span, 
        #twitter_update_list1 span a{
        color: #7c7c7c;
        text-decoration: none;
        }
        #twitter_update_list a,
        #twitter_update_list1 a{
        color: #ff0000;
        }
.meta a{color: #3c799d ;}
h1{font-size:28px;margin-top:25px;}