情報科学屋さんを目指す人のメモ(FC2ブログ版)

何かのやり方や、問題の解決方法をどんどんメモするブログ。そんな大学院生の活動「キャッシュ」に誰かがヒットしてくれることを祈って。

ブログ内検索

スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告 | 編集
このエントリーをはてなブックマークに追加 Clip to Evernote

人気エントリの一覧表示を自前で実装する方法メモ(はてブ) このエントリーを含むはてなブックマーク

hatena_feed_1.png hatena_feed_2.png hatena_feed_3.png

ポイントは3つ:「とにかく自分で書いたJavaScriptから取得して一覧表示したかった」「ブログタイトルがいちいち邪魔だから消したかった」「続きを見るがやりたかった

ブログに人気エントリ一覧を表示したくて、今までははてなブックマークの公式ウィジェットを配置していたのですが、細かな設定が出来なかったので結局一覧の表示を自分で書くことにしました。その時のことに関してメモ。

エントリタイトルからブログタイトルを消去したり、続きを見るボタンを設置してみたりしました。 どのように改造すればよいかも解説しています。 ただ、最初に言っておきますが、大したことしてません。

どうして自分で書くことにしたのか

はてなブックマークウィジェットから移行した主な理由は以下の通り。

  • 記事のタイトルが固定文字数で省略されてしまう
  • 記事タイトル全てにブログタイトルが含まれていて邪魔
  • 細かい見た目を変えたくなった
  • 続きを見るボタンを設置したかった

特に2番目の、記事すべてに「情報科学屋さんを目指す人のメモ」が入ってしまうのが嫌でした。

ここからは、具体的に作るにあたって何をしたかをメモします。

Google API の API Key を取得する

はてなから人気記事のデータを取得するのにGoogle APIを使いました。 ただ、これを使うためには、あらかじめAPI Keyを取得しておく必要があります。

方法は簡単で、「Sign-up for an API Key」にブログのアドレスを入力して「Generate API Key」をクリックするだけです。

Google AJAX Feed APIを読み込む

ブログテンプレートのHEADの部分に

<script src="http://www.google.com/jsapi?key=(さっき取得したKey)" type="text/javascript"></script>

を追加します。

人気エントリの取得方法

まず、あらかじめHTML中に、一覧をJavaScriptから書き込むDIVタグを用意しておきます。

<div id="hatena_feed"></div>

そして、実際に書き込みを行う基本的なコードの枠組みは次のようになります。これをテンプレートのheadタグ中に設置します。

<script language="javascript" type="text/javascript">
<!--
// feed APIを使う準備
google.load("feeds", "1");

// ページが読込終わった段階で呼ばれる関数(initialize)
function initialize() {
  var feedurl = "http://b.hatena.ne.jp/entrylist?mode=rss&url=http://did2.blog64.fc2.com/&sort=count";
  var numEntries = 10; // 取得するエントリ数の上限

  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(numEntries);

  // 人気エントリ一覧の読み込みを行う
  feed.load(dispfeed);

  // 読込が終わったら呼ばれる関数(dispfeed)
  function dispfeed(result){
    var container = document.getElementById("hatena_feed");
    var htmlstr = "";

    // --------------------
    // HTMLを作る部分を書く
    // --------------------

    // HTMLを先ほど用意したdivに突っ込む
    container.innerHTML = htmlstr;
  }
}

// ページが読込終わったらinitializeが呼ばれるように登録しておく
google.setOnLoadCallback(initialize);
//-->
</script>

解説はコードの中に書き込んだ通りです。読込方法は大体これで分かると思いますが、読み込んだ後にどうやってHTMLを作るかがポイントです(コード中の「HTMLを作る部分を書く」)。

読み込んだ人気エントリ一覧オブジェクトの使い方

人気エントリリストの情報は、仮引数「result」に保存されています。基本的な取り出し方は以下の通り。

結果は配列になっている

人気エントリ一覧は「result.feed.entries」にあります。 これは配列となっていて、たとえば一番人気のエントリに関する情報は

result.feed.entries[0]

に保存されています。

エントリタイトルとエントリURLの取り出し方

たとえば人気ランキング一覧の「i」番目のタイトルは

result.feed.entries[i].title

で取得でき、そのURLは

result.feed.entries[i].link

です。

○○users の作り方

ここまで知識が貯まればあと少しです。よくある○○usersの表示の仕方を確認しておきます。

「○○users」はリンク付きの画像で、HTMLでは次のように書けます。

<a href="http://b.hatena.ne.jp/entry/(エントリURL)"><img src="http://b.hatena.ne.jp/entry/image/(エントリURL)"></a>

このテンプレートに、エントリのURLを2カ所埋め込めばできあがりです。覚えておきましょう。

コード

<a href="http://b.hatena.ne.jp/entry/http://did2.blog64.fc2.com/"><img src="http://b.hatena.ne.jp/entry/image/http://did2.blog64.fc2.com/"></a>

見本

人気エントリ一覧見本1「単なる一覧を作ってみる」

hatena_feed_1.png

ここまでの知識をもとに、単純な一覧を作ってみます。全体を「ul」タグで囲い、エントリごとに「li」タグで囲えばよいので、次のようになります。

動作見本

コード

<script language="javascript" type="text/javascript">
<!--
google.load("feeds", "1");

function initialize() {
  var feedurl = "http://b.hatena.ne.jp/entrylist?mode=rss&url=http://did2.blog64.fc2.com/&sort=count";
  var numEntries = 10

  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(numEntries);
  feed.load(dispfeed);

  function dispfeed(result){
    var container = document.getElementById("hatena_feed");
    var htmlstr = "";

    // ------------------
    // ▼HTMLを作る部分▼
    // ------------------

    htmlstr += "<ul>";
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      htmlstr += "<li>"
      htmlstr += '<a href="' + entry.link + '">' + entry.title + '<\/a> ';
      htmlstr += '<span class="users"><a href="http://b.hatena.ne.jp/entry/' + entry.link + '"><img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"></a></span>';
      htmlstr += "</li>"
    }
    htmlstr += "</ul>";

    // ------------------
    // ▲HTMLを作る部分▲
    // ------------------

    container.innerHTML = htmlstr;
  }
}

google.setOnLoadCallback(initialize);
//-->
</script>

これでも十分なのですが、明らかに「情報科学屋さんを目指す人のメモ」が無駄に場所を占領しています。

人気エントリ一覧見本2「エントリタイトルからブログタイトルを消してすっきり」

hatena_feed_2.png

では、その邪魔なブログタイトルを消すように改造してみます。 公式ウィジェットとは違って簡単に実現できます。

ポイントはreplace関数です。

entry.title

の部分を

entry.title.replace(" - 情報科学屋さんを目指す人のメモ", "")

に変更するだけで、余分な「 - 情報科学屋さんを目指す人のメモ」を削除できます。

できあがりはこちら。

動作見本

比較すれば分かるとおり、だいぶコンパクトになりました。コードはこちら。

コード

<script language="javascript" type="text/javascript">
<!--
google.load("feeds", "1");

function initialize() {
  var feedurl = "http://b.hatena.ne.jp/entrylist?mode=rss&url=http://did2.blog64.fc2.com/&sort=count";
  var numEntries = 10

  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(numEntries);
  feed.load(dispfeed);

  function dispfeed(result){
    var container = document.getElementById("hatena_feed");
    var htmlstr = "";

    // ------------------
    // ▼HTMLを作る部分▼
    // ------------------

    htmlstr += "<ul>";
    for (var i = 0; i < result.feed.entries.length; i++) {
      var entry = result.feed.entries[i];
      htmlstr += "<li>"
      htmlstr += '<a href="' + entry.link + '">' + entry.title.replace(" - 情報科学屋さんを目指す人のメモ", "") + '<\/a> ';
      htmlstr += '<a href="http://b.hatena.ne.jp/entry/' + entry.link + '"><img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"></a>';
      htmlstr += "</li>"
    }
    htmlstr += "</ul>";

    // ------------------
    // ▲HTMLを作る部分▲
    // ------------------

    container.innerHTML = htmlstr;
  }
}

google.setOnLoadCallback(initialize);
//-->
</script>

人気エントリ一覧見本3「『続きを見る』をクリックするとエントリが増える一覧」

hatena_feed_3.png

一覧の表示数は変数一つで簡単に調節できます。しかしせっかくなので、「続きを見る」をクリックしたら表示数が増えるようにしてみます。

できあがりはこんな感じです。

動作見本(右下に「続きを見る」がある)

コード

<script language="javascript" type="text/javascript">
<!--
google.load("feeds", "1");

function initialize() {
  var feedurl = "http://b.hatena.ne.jp/entrylist?mode=rss&url=http://did2.blog64.fc2.com/&sort=count";
  var numInitialEntries = 12;
  var numReadmoreEntries = 12;

  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(numInitialEntries + numReadmoreEntries);
  feed.load(dispfeed);

  function dispfeed(result){
    var container = document.getElementById("hatena_feed");
    var htmlstr = "";

    if (result.error) { container.innerHTML = "<p>" + result.error.code + ":" + result.error.message + "<\/p>";  }

    // <li><\/li>を作る
    function entryToLi(entry) {
      var li = "";
      li += "<li>";
      li += '<a href="' + entry.link + '">' + entry.title.replace(" - 情報科学屋さんを目指す人のメモ", "") + '<\/a> ';
      li += '<span class="users"><a href="http://b.hatena.ne.jp/entry/' + entry.link + '"><img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"></a></span>';
      li += "</li>";
      return li;
    }

    // デフォルトで表示されるリストを構築する
    htmlstr += '<ul id="hatena_feed_list">';
    for (var i = 0; i < Math.min(result.feed.entries.length, numInitialEntries); i++) {
      htmlstr += entryToLi(result.feed.entries[i]);
    }
    htmlstr += "</ul>";
    container.innerHTML = htmlstr;

    if (numInitialEntries > result.feed.entries.length) {
      return; // 表示する「続き」が存在しなければ終了
    }

    // 「続きを表示」ボタンを作る
    var readmoreButton = document.createElement("p");
    readmoreButton.innerHTML = "続きを表示";

    with(readmoreButton.style) {
      textAlign = "right";
    }

    // ボタンをクリックしたときの動作
    readmoreButton.onclick = function()
    {
      var readmorestr = "";
      for (var i = numInitialEntries; i < Math.min(result.feed.entries.length, numInitialEntries + numReadmoreEntries); i++) {
        readmorestr += entryToLi(result.feed.entries[i]);
      }
      document.getElementById("hatena_feed_list").innerHTML += readmorestr;
      container.removeChild(readmoreButton);
      return false;
    };

    // ボタンの設置
    container.appendChild(readmoreButton);
  }
}

google.setOnLoadCallback(initialize);
//-->
</script>

自分で改造してみよう

以上で最低限の解説を行いました。自分のブログやウェブサイトに合わせて、書き出すHTMLを変更して、いろいろ作ってみてください。今回の「続きを表示」はちょっと安っぽいですが、工夫次第でもっと綺麗なものも作れるはずです。

参考

通信部分のコードは「はてなブックマークの人気エントリを表示」を参考にしました。

ブログ | コメント:0 | トラックバック:0 | 編集
このエントリーをはてなブックマークに追加 Clip to Evernote

この記事のコメント

コメントの投稿 エントリの新旧に関わらず、極力18時間中に返信します。














この記事のトラックバック

トラックバックURL:
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。