【javascript】ツイートを縦読みで表示する。

logo ツイートを縦表記にして表示する勝手サービス(?)たてったーを作りました。

縦表記ライブラリ「nehan」を使ってみました。 https://code.google.com/p/nehan/ ソースはこんな感じ。prev nextが消えたりするようにしました。 SimpleReaderの中に目に見える形でpageNoがあってよかった。 以下作ったjs

    $(function(){
      var max = 0;
      String.prototype.linkify_tweet = function() {
        var tweet = this.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&amp;%@!&#45;\/]))?)/,'<a href="$1" target="_blank">$1</a>');
        return tweet.replace(/(^|\s)#(\w+)/g, '$1<a href="http://search.twitter.com/search?q=%23$2" target="_blank">#$2</a>');
      };
      var twset = {
        baseurl:'http://twitter.com/statuses/public_timeline.json?callback=?'
      };
      function load(){
        $.getJSON(twset.baseurl,{la:'ja'},
        function(json){
          var htmls = [];
          var html = [];
          var tweet = '';
          max = 0;
          for(var i=0;i<json .length;i++){
            if(json[i].user.lang == "ja"){
              tweet = json[i].text.linkify_tweet();
              html.push('<img width="42" height="42" src="'+json[i].user.profile_image_url+'" align="left"/>');
              html.push("其れ名は「<strong><a href='http://twitter.com/"+json[i].user.screen_name+"' target='_blank'>"+json[i].user.name+"</a></strong>」である。<br />");
              if(json[i].user.location){
                html.push("現在は「<strong>"+json[i].user.location+"</strong>」に住む。<br /><br />");
              }
              html.push("<strong>"+json[i].user.name+"</strong>は云ふ。<br /><br />");
              html.push("<b>「<font scale='1.2'>"+tweet+"</font></b>」<br />と。");
              html.push("<end -page/>");
              htmls.push(html.join(""));
              html = [];
            }
          }
          max = htmls.length;
          $("#source-text").html(htmls.join('\n'));
          var $prev = $("#pager-prev");
          var $next = $("#pager-next");
          var $pageno =  $("#pageno");
          $prev.css('visibility','hidden');
          SimpleReader.start({
            direction:"vertical-rl",
            width: 400,
            height: 500,
            fontSize: 14,
            charImgRoot:"./img"
          });
          $pageno.html("1/"+max);
          $next.click(function(e){
            $pageno.html((SimpleReader.pageNo+1)+"/"+max);
            if(SimpleReader.pageNo>0){
              $prev.css('visibility','visible');
            }
            if(SimpleReader.pageNo>max-2){
              $next.css('visibility','hidden');
            }
          });
          $prev.click(function(e){
            $pageno.html((SimpleReader.pageNo+1)+"/"+max);
            if(SimpleReader.pageNo==0){
              $prev.css('visibility','hidden');
            }
            if(SimpleReader.pageNo<max){
              $next.css('visibility','visible');
            }
          });
        });
      };
      load();
    });


Tags:

 
 
 

コメントをどうぞ