Readme修正

Readme.md

TumblrRelationPost

tumblrで表示中の記事と同じタグをもつ記事を取得してくるjs

使い方

準備

TumblrRelationPost.jsを取得。
あるいはソースをコピペしてローカル保存

どこかweb上にアップする
おすすめは、tumblrなのでtumblrファイルアップローダーで良い
URLが表示されるのでコピーしておく

テンプレート編集

テンプレートの表示したい箇所に

{block:Permalink}
  {block:HasTags}
    <div id="tumblr-relation-space">
    <!-- ここに関連記事が書き出される -->
    </div>
    <script src="{TumblrRelationPost.jsをアップしたURL}" charset="utf-8"></script>
    <script>
      var relationPost = new TumblrRelationPost({
          postId       : {PostID},
          baseHostName : 'anz-note.tumblr.com',   // ドメインを指定 http://anz-note.tumblr.com/ の場合
          tags         :  '{block:Tags}{Tag},{/block:Tags}',
          limit        : 5    // 表示件数(最大10件)
      });
      relationPost.run();
    </script>
  {/block:HasTags} 
{/block:Permalink}

ちょっと長いけど、こんな感じで
{block:Posts}{/block:Posts}の間に入れ込んでください
じゃないと{Tag}が表示されないはず

スタイル編集

jsでは特にはスタイル編集はしていないので、
おのおのcssで自分好みに編集してください
結果は以下のようなタグで表示されます

<div id="tumblr-relation-space">
  <ul id="tumblr-relation-list">
    <li class="tumblr-relation-listitem">
      <a href="{該当記事のURL}">該当記事のタイトル</a>
      <span class="tumblr-relation-listitem-tag">該当記事のタグ1</span>
      <span class="tumblr-relation-listitem-tag">該当記事のタグ2</span>
      <!-- タグはある分だけ表示される -->
    </li>
    <!-- いか取得した分だけ li を繰り返し -->
  </ul>
</div>

ライセンス

特にないです。改変も配布もどうぞご自由に
ただ、いかなるトラブルも責任はとりません

補足

jQueryを使っているので、使用しているテンプレートが
jQueryを使用していない場合は、新たに使うように指定してください

<!-- ↓を追加 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- ↑を追加 -->
<script src="{TumblrRelationPost.jsをアップしたURL}" charset="utf-8"></script>

質問・不具合とかあれば、連絡オネシャス！
@AnzNetJp

TumblrRelationPost.js

function isset(data) {
  return (typeof(data) != 'undefined');
};

function containsArray(arr, val) {
  for (var i=0; i<arr.length; i++) {
    if (arr[i] == val) {
      return true;
    }
  }
  return false;
}

/**
 * 関連記事取得クラス
 * http://kid0725.usamimi.info/api_v2_docs_ja.html#m-posts
 * version: 1.0.0
 *
 * @param args Object
 */
function TumblrRelationPost(args) {
  var baseHostName = isset(args.baseHostName) ? args.baseHostName : console.log( 'host name is not defined');
  
  this.postId = isset(args.postId) ? args.postId : console.log('post id is not defined');
  this.baseHostName = baseHostName.replace('/', '');
  this.tags = isset(args.tags) ? args.tags : console.log( 'tags is not defined');
  this.limit = isset(args.limit) ? Math.min(args.limit, 10) : 5;
  this.space = isset($('#tumblr-relation-space')) ? $('#tumblr-relation-space') : console.log( 'space id is not defined');
  this.offset = 0;
  this.apiKey = 'aBh1le0xMN4Lkmk3hyy18SZvYSXLi4kxvwJfvQuVqRv8Toe71N';
  this.result = [];
  this.ids = [];
};

TumblrRelationPost.prototype = {
  // 関連記事の取得
  getRelationList : function(tag) {
    var instance = this,
      url = 'http://api.tumblr.com/v2/blog/' + this.baseHostName + '/posts',
      args = {
        api_key : this.apiKey,
        tag     : tag,
        limit   : this.limit * 2,
        offset  : this.offset
      };
            
    $.ajax({
      type     : 'GET',
      url      : url,
      data     : args,
      dataType : 'jsonp', 
      success: function(response) {
        
        response = response.response;
        
        if (response.total_posts == 0) {
          console.log('totalpost is zero');
          if (instance.result.length > 0) {
            instance.showResult();
          }
          return;
        }
        
        var posts = response.posts,
          item;
        
        for (var i = 0; i < posts.length; i++) {
          
          item = posts[i];
          
          // 表示中記事なら飛ばす
          if (instance.postId == item.id) {
            continue;
          }
          
          // すでに同じものがアレばとばす
          if (containsArray(instance.ids, item.id)) {
            continue;
          }
          instance.ids.push(item.id);
          var values = {
            title : isset(item.title) ? item.title : item.type,
            url   : item.post_url,
            tags  : item.tags
          };
          // 結果を保持
          instance.result.push(values);
          
          // limit到達
          if (instance.result.length >= instance.limit) {
            break;
          }
        }
        
        // 別のタグがある かつ limitに達していない場合
        if (instance.tags.length > 0 && instance.limit > instance.result.length) {
          // 再取得
          instance.getRelationList(instance.tags.pop());
          return;
        }
        
        // 結果表示
        instance.showResult();
        
      },
      error : function(XMLHttpRequest, textStatus, errorThrown) {
        console.log(textStatus + ':' + errorThrown.message);
      },
      beforeSend : function(xhr){
            xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
      }
    });
    
  },
  // 結果の表示<ul><li></li></ul>
  showResult : function() {
    
    var ul = $('<ul>').attr('id','tumblr-relation-list'),
      i,
      item;
      
    // 結果0件なら非表示にする
    if (this.result.length == 0) {
      this.space.hide();
      return;
    }
    
    for (i = 0; i < this.result.length; i++) {
      item = this.result[i];
      var li = $('<li>');
      li.attr('class', 'tumblr-relation-listitem')
      .text(item.title)
      .wrapInner($('<a href="' + item.url + '"></a>'))
      .append();
      
      // tags
      for (var j=0; j<item.tags.length; j++) {
        $('<span>').attr('class', 'tumblr-relation-listitem-tag')
        .text(item.tags[j])
        .appendTo(li);
      }
      
      li.appendTo(ul);
    }
    this.space.append(ul);
  },
  run : function() {

    // tags整形
    this.tags = this.tags.substr(0, this.tags.length - 1);
    this.tags = this.tags.split(',');
    
    this.getRelationList(this.tags.pop());

    
  }
};