Togetter風はてブ引用ツール

by md2tak 2011-05-24 [2011/05/24 23:36:26]

はてブコメントをTogetter風に引用できます。

• /*
   * @title Togetter風はてブ引用ツール
   * @description はてブコメントをTogetter風に引用できます。
   * @include http://b.hatena.ne.jp
   * @license MIT License
   * @require jQuery
   */
  
  if (typeof jQueryInstance == 'undefined') {
    jQueryInstance = $;
  } else {
    $ = jQueryInstance;
  }
  
  // スタイルシート
  
  var css = '\
  <style type="text/css">\
    div.togetteristic-hatebu * { border:none; padding: 0; margin:0; font-size:100%; }\
    div.togetteristic-hatebu span {color:#999999;}\
    div.togetteristic-hatebu { width: 610px;line-height:1.4em;font:13px Verdana,arial,helvetica,clean,sans-serif;border-bottom: 1px solid #999999;padding: 5px 0; }\
    div.togetteristic-hatebu:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }\
    div.togetteristic-hatebu span.tags {  }\
    div.togetteristic-hatebu span.tags a, div.togetteristic-hatebu span.timestamp  { color:#999999;font-size:92%; }\
    div.togetteristic-hatebu a.userid { text-decoration:underline; color:#105CB6;}\
    div.togetteristic-hatebu div.profile-img { margin-right:10px;float:left;border: 1px solid #E5E5E5;-moz-border-radius: 5px 5px 5px 5px;padding:4px; }\
    div.togetteristic-hatebu div.profile-img a { border:none; }\
    div.togetteristic-hatebu div.profile-img img { height:48px;width:48px;border:none; }\
    div.togetteristic-hatebu div.comment { margin-bottom: 5px;}\
    div.togetteristic-hatebu div.status { float:right;text-align:right; }\
  </style>\
  ';
  
  // シンプル
  var tmpl = '\
  <li> \
    <a href="$userpageLink$"><img src="$profileImg$" /></a>\
    <a href="$link$" class="userid">$userid$</a>\
    <span class="tags">$tags$</span>\
    <span class="comment">$comment$</span>\
    <span class="timestamp">$timestamp$</span>\
  </li>\
  ';
  
  // Toggeter風
  var tmpl = '\
  <div class="dummy">\
  \
  <div class="togetteristic-hatebu">\
    <div class="profile-img">\
      <a href="$userpageLink$"><img src="$profileImg$" /></a>\
    </div>\
    <div class="comment">$comment$</div>\
    <div class="status">\
      <a href="$link$" class="userid">$userid$</a><br />\
      <span class="tags">$tags$</span>\
      <span class="timestamp">$timestamp$</span>\
    </div>\
  </div>\
  \
  </div>';
      
  $('ul.bookmark-list li, ul.comment li').unbind().hover(function(){
      $(this).css('border', '2px solid red');
  },function(){
      $(this).css('border', '');
  }).click(function(){
      var hateb_url = 'http://b.hatena.ne.jp';
      var uid = $(this).attr('data-user');
      var profimg = 'http://www.hatena.ne.jp/users/' + uid.substr(0,2) + '/' + uid + '/profile.gif';
      var vars = {
          userid: uid,
          link: hateb_url + $('a.username', this).attr('href'),
          userpageLink: hateb_url + '/' + uid + '/',
          tags: $('span.tags', this).html(),
          comment: $('span.comment', this).html(),
          timestamp: $('span.timestamp', this).html(),
          profileImg: profimg,
      };
      
      html = tmpl;
      for (var k in vars) {
          html = html.split('$' + k + '$').join(vars[k]);
      }
      
      var htmlobj = $(html);
      $('a', htmlobj).each(function(){
          var href = $(this).attr('href');
          if (href.substr(0,1) == '/') { // 相対パスならURLの追加
              $(this).attr('href', hateb_url + href);
          }
      });
      html = htmlobj.html();
  
      var copytype = $('#togetteristic-hatebu-form input[name="copytype"]:checked').val();
      
      var rs = css + html;
      if (copytype == 1) rs = css + html;  
      if (copytype == 2) rs = html;
      
      if(jQuery.browser.msie){
          clipboardData.setData("Text", rs);
          alert('コピーしました！');
      } else {
          prompt('コピーしてください', rs);
      }
      return false;
  });
  
  // htmlの挿入
  
  var html = '\
  <div id="togetteristic-hatebu-form" style="position: fixed; top: 60px; right: 20px; z-index: 9999; background: none repeat scroll 0% 0% white; border: 2px solid gray; padding: 10px; font-size: 90%;text-align:left;">\
  <b>Togetter風はてブ引用ツール</b><br />\
  コピーしたいブコメをクリック！<br /><br />\
  <label><input type="radio" checked="" value="1" name="copytype">スタイル＋コメントHTML(普通はこれ)</label><br />\
  <label><input type="radio" value="2" name="copytype">コメントHTMLのみ(2個目以降)</label><br />\
  </div>\
  ';
  
  $('#togetteristic-hatebu-form').remove();
  $('body').append(html);
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。