ポジティブ心理学研究所

幸福度(EQ)アップの研究所です。ポジティブ心理学に出会う前の古い記事はネガティブなので注意。

レンタルブログでもFeedlyの読者数カウントつきボタンを設置する方法

はてなブログ等のレンタルブログでもFeedlyの購読者数つきボックスボタンを設置する方法です。

Feedlyの購読者数のボックスボタンとはこれのことです。

f:id:lettuce0831:20140219225926p:plain

こういうソーシャルボタンは他のSNSでは用意されているものの、Feedlyではそれがなく、ただのボタンしか用意されていません。

WordPressとレンタルブログの違い

先日、「[Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモ」の記事を見て自分のとこにも設置したいなあと思ったのですが、あかめ女子さんや他の方の場合はブログがWordPressで構築されていて、PHPによりサーバー側でデータを取得して埋め込んでいます。

しかしレンタルブログの場合はサーバー側でどうこうするということはできません。レンタルブログでのデータ取得方法について説明していきます。

データ取得方法

http://cloud.feedly.com/v3/feeds/feed%2Fに対して自分のブログのfeedのURLをUTF-8でURLエンコードしたURLを付け足してアクセスするとJSON形式で読者数が得られます。

このブログのfeedのURLはhttp://rrt.hateblo.jp/feedで、URLエンコードしたものがhttp%3a%2f%2frrt%2ehateblo%2ejp%2ffeed です。

URLエンコードはこちらで。文字コードはUTF-8にしてください。

合わせると

http://cloud.feedly.com/v3/feeds/feed%2Fhttp%3a%2f%2frrt%2ehateblo%2ejp%2ffeed

となります。これにアクセスすると

{"feedId":"feed/http://rrt.hateblo.jp/feed","id":"feed/http://rrt.hateblo.jp/feed","language":"ja","subscribers":10,"velocity":14.0,"title":"現代版徒然草 〜めぐりあいWeb〜","website":"http://rrt.hateblo.jp/","description":"人生はオワコン。媚びない、推敲しないを目標に駄文をお送りする。"}

といったJSONデータが得られます。もう少し見やすく整形すると以下です。

{
    "feedId"      : "feed/http://rrt.hateblo.jp/feed",
    "id"          : "feed/http://rrt.hateblo.jp/feed",
    "language"    : "ja",
    "subscribers" : 10,
    "velocity"    : 14.0,
    "title"       : "現代版徒然草 〜めぐりあいWeb〜",
    "website"     : "http://rrt.hateblo.jp/",
    "description" : "人生はオワコン。媚びない、推敲しないを目標に駄文をお送りする。"
}

この中で必要な情報はsubscribersだけですね。

なのでこれさえ使えばOKです。サーバーサイドでやる場合は何の工夫もなく、JSONを取得してそれを使えばいいだけです。

忌々しいクロスドメイン制約

と、ここまでは簡単なのですが、しかしこれを、レンタルブログ等のようにサーバーサイドをいじれないブログでやるにはJavaScriptのAjaxを使うしかありません。

しかしAjaxで取得するにはドメインが異なるため、セキュリティ上の理由で制限があり取得できません。

なので一度自前のサーバーを通して取得したものを利用するなどの工夫、というか手間が必要です。

そこで今回はその手間を少しだけ省く方法をご紹介します。

ScraperWiki

f:id:lettuce0831:20140220000057p:plain

いちいちちょっとしたデータを取得するためだけにサーバーにスクリプトを用意するのも面倒です。

そこで今回使うのが、「ScraperWiki」というサイトです。

このサイトは簡潔にいうと、Webサイトのスクレイピングをするスクリプトをサーバー上で作って走らせられて、なおかつそのデータをこのサーバー上に保存して、みんなでJSONなどで使いまわせる。といったなんとも素敵なサイトとなってます。

これを使わない手はありません。

なにはともあれ登録

サービスを利用するにはなにはともあれSign Upをしなくてはなりません。登録をよろしくお願いします。

スクレイプ方法

f:id:lettuce0831:20140219232801p:plain

登録を終えたら、「New Dataset」から新規スクレイピングスクリプトを作ります。

f:id:lettuce0831:20140219232804p:plain

ずらっと出てくるので「Code in your browser」を選択してください。

選択すると、言語の選択画面になりますのでPythonを選んでください。もちろんご自分でスクレイピングスクリプトを組める方はどれでも結構です。

後は、何も考えず、次のスクリプトをコピペして貼りつけてください。

#!/usr/bin/env python

import scraperwiki
import requests
import json

data = requests.get("ここに自分のFeedURL")
data = json.loads(data.content)

# Saving data:
unique_keys = [ 'id' ]
scraperwiki.sql.save(unique_keys, data)

f:id:lettuce0831:20140219233805p:plain

ここに自分のFeedURLにはさっきのURLを貼りつけてください。ダブルクオーテーション"の間に貼りつけてくださいね。私の場合は

data = requests.get("http://cloud.feedly.com/v3/feeds/feed%2Fhttp%3a%2f%2frrt%2ehateblo%2ejp%2ffeed")

となります。

これで取得してデータを保存できるようになりました。

さっそく、青の「Run」を押してスクリプトを走らせてみてください。

f:id:lettuce0831:20140219233801p:plain

つづいて「View in a table」を見てみてください。成功すると上記の画面のように、先ほどのJSONデータが取得されて、データベースに保存されているのがわかります。

スケジュール化する

続いてこれをスケジュール化して、定期的に走るようにしましょう。手動で定期的に更新するのは大変です。

f:id:lettuce0831:20140219233808p:plain

更新する頻度は自由ですが、私のブログは過疎だし常に読者が変動するわけではないので「Daily at」(毎日)にしています。

SQL文のちJSON API

ここまで来たら、あとはブログ側のAjax処理を書くだけです。

その前にまずは、JSONデータを取得できる公開URLを取得しましょう。

f:id:lettuce0831:20140219234340p:plain

「Query with SQL」を選択し、次のSQL文を貼りつけます。

select 
    subscribers
from swdata

これは読者数のみを引っ張ってくる文です。他の情報は使わないので読者数のみ取得すれば十分です。

f:id:lettuce0831:20140219234514p:plain

Runを押して、SQLの結果に問題がない場合は黄色のボタンの「JSON API」をクリックし、JSONの公開URLにアクセスしましょう。

[{"subscribers": 10}]というJSONが得られたので問題ないことがわかります。後はこのURLにAjaxでアクセスすればいいだけです。

ブログ側でAjax

コードの設置

<div id="feedly-followers" class="over">
    <span class="subscribers" id="feedlyCount"></span>
    <a href='自分のFeedlyfollowURL'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
</div>

<script>
    function getJSON(){
        var req = new XMLHttpRequest();
        var span = document.getElementById("feedlyCount");
        
        if (req) {
            req.onload = function(){
                if (req.status >= 200 && req.status < 400) {
                    // 成功
                    var json = JSON.parse(req.responseText);
                    
                    span.innerHTML = json[0]["subscribers"];
                    console.log(json[0]["subscribers"]);
                    
                }else{
                    span.innerHTML = 'error1';
                    console.log("なんらかの失敗");
                }
            };
            req.onerror = function(){
                span.innerHTML = 'error2';
                console.log("通信の失敗");
            };
            
            var url = "さっきのJSON APIのURL";
            req.open('GET', url);
            req.send();
        }
    }
    document.addEventListener( "DOMContentLoaded", getJSON, false );
</script>

該当箇所を自分のURLに変更して、これを任意の場所に貼りましょう。私は記事の下に設置してあるので確認してみてください。

修正箇所は次の二箇所になります。<a href='自分のFeedlyfollowURL'var url = "さっきのJSON APIのURL";

CSS

カウント自体は上のコードで取得できてますが、見栄えをそれっぽく整えるCSSも必要です。

CSSはあかめさんのものをそのまま使っているのでそちらを参照してください。

[Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモ

ボタンのカスタマイズ

f:id:lettuce0831:20140219235509p:plain

私はフラットなデザインのものを使用していますが、こちらは公式サイトでデザインを自分で選択することができます。

上のコードの

<a href='自分のFeedlyfollowURL'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>

がボタンに該当する部分ですので、カスタマイズする場合はここをまるごと交換してください。

公式のカスタマイズサイトはこちらです

feedly. your news. delivered.

はてなブログでの設置方法

私の場合は記事下に設置しています。お好みの場所に貼り付けて設置してください。

f:id:lettuce0831:20140220010253p:plain

scraperWikiでスクレイピングをより手軽に

今回紹介した「ScraperWiki」は、今回以外の用途にも様々な使い方ができると思います。

自分でサーバーを用意せずとも気軽にスクレイピングできるので、ぜひ活用してみてください。

押さえておきたい書籍

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript & Ajax プロが教える“本当の使い方”

JavaScript & Ajax プロが教える“本当の使い方”

はじめてのJavaScript―Ajax/jQuery対応 (TECHNICAL MASTER)

はじめてのJavaScript―Ajax/jQuery対応 (TECHNICAL MASTER)

10日でおぼえるAjax 入門教室

10日でおぼえるAjax 入門教室

Ajax ポケットリファレンス (POCKET REFERENCE)

Ajax ポケットリファレンス (POCKET REFERENCE)

サーバサイドAjax入門 Java/PHP/ASP.NET連携でAjaxプログラミングを極める!

サーバサイドAjax入門 Java/PHP/ASP.NET連携でAjaxプログラミングを極める!