タオルケット体操

サツバツいんたーねっとでゲームとかガジェットのレビューとかをします

トップ > JavaScript > はてな用の「あわせて読みたい」ウィジェット作った

はてな用の「あわせて読みたい」ウィジェット作った

JavaScript プログラミング CoffeeScript ブログカスタマイズ
Sponsored link

追記:

導入とかを楽にした版があるのでこっちのほうが楽だとおもいます

あわせて読みたいウィジェットをGitHub経由で配信するようにした - タオルケット体操

同一カテゴリでのレコメンドみたいのを出したいなぁと思ったんだけど、どうやらはてなは標準ではそういうのに対応していない様子。
zenbackとか、そこらへんのサービスも検討したんだけど、登録とかダルいし、zenback使ってるブログってどこも表示が遅くてイライラするし、余計な広告が増えるしで面倒なので作ることにした。

でもすでに作ってる人いるべと思ってググったらやっぱりいた。

はてなブログの「あわせて読みたい」を、カテゴリに連動させたら直帰率が改善した - AIUEO Lab2

http://www.ikedakana.com/entry/2014/02/01/130050

なので試しに使おうとしたんだけど、ソースコードがあまりよろしくない、命名とかロジックとか。

あと作法的にもよろしくない。いきなりArrayのprototypeを拡張してるし、即時関数で囲ってないから変数や関数がグローバルに漏れてる感じがする。

それと、Yahoo pipesっていうマッシュアップ支援用のサービスを使っているようだけど、なんか他人のidを使うのは申し訳ないし、自分で登録するのもめんどくさいからゴメンだ。

はてなブログoEmbed API - Hatena Developer Center

みたいな告知もあったことだし、oEmbed形式での表示にも対応したい。
というような諸々のアレがあったのでやっぱり自分で書くことにした。

以下のコードのうち、 BLOG_URL, LIMIT_OF_SUGGESTIONS, ENABLE_EMBED_WIDGET_STYLE, ENABLE_BOOKMARKED_COUNT, ENABLE_TWEETBUZZED_COUNT 各自のブログや好みに合わせて弄って、デザイン画面から記事下htmlに投げ込みましょう。

CoffeeScriptで書いたのでjs部分はちょっと読みにくいかもですね、Coffeeのコードは Gistにあげてあります -> 合わせて読みたいを設置するやつ。hatena_recommend_widget.htmlを記事の下に置こう。

rssとかはてなとかgoogleとかよくわからん状態で書いたので、マズい部分があったりとか、欲しい機能とかあったら適当にコメントとかで書いてくれたら対応したりします。

<style>
.loading {
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}
 
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
 
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
 
@keyframes blink{
0% {opacity:0;}
100% {opacity:1; }
}
</style>
 
<div id="relate_entry" class="hatena-module-foot">
<h3 class="loading">NOW LOADING...</h3>
</div>
 
<script src="https://www.google.com/jsapi"></script>
 
<script type="text/javascript">
/*
The MIT License (MIT)
 
Copyright (c) <2014> <OGURA_Daiki>
 
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
 
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
 */
(function() {
 
  /* ブログURL */
  var BLOG_URL, ENABLE_BOOKMARKED_COUNT, ENABLE_EMBED_WIDGET_STYLE, ENABLE_TWEETBUZZED_COUNT, ID_OF_PLACEHOLDER, LIMIT_OF_SUGGESTIONS, createBookmarkedCount, createEachSuggestion, createRecommendHtmls, createTweetbuzzCount, initializeRealateEntry;
  BLOG_URL = "http://hachibeechan.hateblo.jp";
 
  /* ウィジェットを配置した要素のid */
  ID_OF_PLACEHOLDER = 'relate_entry';
 
  /* 表示件数 */
  LIMIT_OF_SUGGESTIONS = 4;
 
  /* oEmbedを使ったブログカードスタイル */
  ENABLE_EMBED_WIDGET_STYLE = true;
 
  /* ブックマーク数表示(ENABLE_EMBED_WIDGET_STYLEが有効だと無視されます) */
  ENABLE_BOOKMARKED_COUNT = true;
 
  /* ツイート数表示(同上) */
  ENABLE_TWEETBUZZED_COUNT = true;
  if (!document.getElementById(ID_OF_PLACEHOLDER)) {
    return;
  }
  google.load("feeds", "1");
  initializeRealateEntry = function() {
    var category_rss_link, feed;
    category_rss_link = document.querySelector('.categories a').href.replace('/category', '/rss/category');
    feed = new google.feeds.Feed(category_rss_link);
    feed.setNumEntries(20);
    return feed.load(function(result) {
      if (!(result.error || result.feed.entries.length === 0)) {
        return createRecommendHtmls(result.feed.entries);
      }
    });
  };
  google.setOnLoadCallback(initializeRealateEntry);
  createRecommendHtmls = function(entries) {
    var container, extracted_category_element, links, viewing_entry_uri;
    viewing_entry_uri = window.location.href;
    links = entries.filter(function(entry) {
      return entry.link !== viewing_entry_uri;
    }).sort(function() {
      return Math.random() - .5;
    }).slice(0, LIMIT_OF_SUGGESTIONS).map(createEachSuggestion);
    extracted_category_element = document.querySelector('.categories a');
    container = document.getElementById(ID_OF_PLACEHOLDER);
    return container.innerHTML = "<h3>あわせて読みたい カテゴリー: <a href=\"" + extracted_category_element.href + "\">" + extracted_category_element.text + "</a></h3>\n  <ul style=\"padding-left:0;\">\n  " + (links.join('')) + "\n</ul>";
  };
  createEachSuggestion = (function() {
    if (ENABLE_EMBED_WIDGET_STYLE) {
      return function(entry) {
        return "<li style=\"list-style-type:none;\">\n<p><iframe src=\"" + (entry.link.replace("" + BLOG_URL + "/entry/", "" + BLOG_URL + "/embed/")) + "\" width=\"100%\" height=\"190px\" scrolling=\"no\" frameborder=\"0\"></iframe></p>\n</li>";
      };
    } else {
      return function(entry) {
        return "<li style=\"list-style-type:none;\">\n<p><a href=\"" + entry.link + "\" rel=\"nofollow\" target=\"_blank\">" + entry.title + "</a>\n" + (createBookmarkedCount(entry.link)) + "\n" + (createTweetbuzzCount(entry.link)) + "\n</p>\n</li>";
      };
    }
  })();
  createBookmarkedCount = (function() {
    if (ENABLE_BOOKMARKED_COUNT) {
      return function(link) {
        return "<a href=\"http://b.hatena.ne.jp/entry/" + link + "\" rel=\"nofollow\" target=\"_blank\">\n<img src=\"http://b.hatena.ne.jp/entry/image/" + link + "\" style=\"opacity:0.8\" />\n</a>";
      };
    } else {
      return function(link) {
        return '';
      };
    }
  })();
  return createTweetbuzzCount = (function() {
    if (ENABLE_TWEETBUZZED_COUNT) {
      return function(link) {
        return " <a href=\"http://tweetbuzz.jp/redirect?url=" + link + "\" rel=\"nofollow\" target=\"_blank\">\n<img src=\"http://tools.tweetbuzz.jp/imgcount?url=" + link + "\" />\n</a>";
      };
    } else {
      return function(link) {
        return '';
      };
    }
  })();
})();
 
</script>

ウィジェットのタイプを指定する部分で、都度ifで分岐しないように最初にキャッシュしたりとか細かいことしてるけど、たいしたループまわすわけではないので多分パフォーマンスに影響は出ない。

2014/10/10 追記:

  • 閲覧中と同じ記事が出てくる問題を修正。

  • ピックアップしているカテゴリーとそのリンクを表示