
先日、Pocketのシェア数をJavaScriptだけで取得する方法を書きました。
上の記事は、Google+のシェア数をJavascriptで取得する方法を参考に、「Yahoo! Pipes(サービス終了)」というサービスを経由することによって、AjaxでページのHTMLをXMLで取得し、正規表現でカウント数を抽出しています。
直接、PocketにjQueryのAjax経由で取得しようとすると、クロスドメイン制約(Access-Control-Allow-Origin)によってエラーが発生するのを、Yahoo! Pipesを経由(パイプ)することで防いでいます。
今回のfeedlyの購読者数も同様に取得します。で、その方法の紹介です。
追記:Yahoo! Pipes経由での取得は、feedly側で拒否られたかもしれません。ですので、オーソドックスにPHPで取得した方が良いかもしれません。
追記(2015年10月):Yahoo! Pipesがサービス停止ということで代替方法。
目次
これまでのfeedly購読者数取得方法
feedlyの購読者数を取得するには以下のようにfeedlyにアクセスする必要があります。
http://cloud.feedly.com/v3/feeds/feed%2F[URLエンコードしたフィードのURL]
このようにアクセスすることで、以下のようなjsonデータが返ってきます。
{"id":"feed/https://nelog.jp/feed","feedId":"feed/https://nelog.jp/feed","language":"ja","subscribers":204,"title":"寝ログ","velocity":9.3,"topics":["ブログ","【wordpress】","it"],"website":"https://nelog.jp","contentType":"article","description":"寝ながら出来るコトや使えるモノを紹介","twitterScreenName":"MrYhira","twitterFollowers":330,"facebookUsername":"nelog.jp","facebookLikes":71,"partial":true,"iconUrl":"http://storage.googleapis.com/site-assets/u7dFSjq8MbNv7f_wAXjQwOc06y1w_fY50rdYAxg_KV0_icon-14841ba5294","visualUrl":"http://storage.googleapis.com/site-assets/u7dFSjq8MbNv7f_wAXjQwOc06y1w_fY50rdYAxg_KV0_visual","coverUrl":"http://storage.googleapis.com/site-assets/u7dFSjq8MbNv7f_wAXjQwOc06y1w_fY50rdYAxg_KV0_cover","coverColor":"EBEBEB"}
この返却値の以下の部分が購読者数になります。
{
"subscribers": 204,
}
これまで、ネットにあるfeedlyの購読者数取得方法をまとめると以下のような感じです
PHPで取得
PHPで取得する方法は、以前僕も記事に書いているのでそれを紹介します。
この記事では、次のような関数を使ってWordpress上で購読者数を取得しています。
//feedlyの購読者数取得
function get_feedly_count(){
$feed_url = rawurlencode( get_bloginfo( 'rss2_url' ) );
$res = '0';
$subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
if (!is_wp_error( $subscribers ) && $subscribers["response"]["code"] === 200) {
$subscribers = json_decode( $subscribers['body'] );
$subscribers = $subscribers->subscribers;
set_transient( 'feedly_subscribers', $subscribers, 60 * 60 * 12 );
$res = ($subscribers ? $subscribers : '0');
return $res;
}
}
WordPressを使用していないんだったら、以下のような感じ。
//チェックするフィードのURL
$url = "https://nelog.jp/feed";
//データを取得
$json = @file_get_contents("http://cloud.feedly.com/v3/feeds/feed%2F".rawurlencode($url));
//JSONデータを連想配列に変換
$array = json_decode($json,true);
//データが存在しない場合は0扱い
if(!isset($array['subscribers'])){
$count = 0;
}else{
$count = $array['subscribers'];
}
PHP+JavaScriptで取得する
あともう一つの方法として、クロスドメインエラー回避のため、自分のサーバーでPHPで購読者数を取得し、そこで取得した数値をJavaScript+Ajaxで取得するという方法もあります。
PHPで購読者数を取得し書き出す。
<?php
//チェックするフィードURL
$feed = 'https://nelog.jp/feed';
//URLエンコードをする
$feed = rawurlencode($feed);
//フィードのデータを取得
$json = @file_get_contents("http://cloud.feedly.com/v3/feeds/feed%2F{$feed}");
$obj = json_decode($json,true);
//登録者数が0の場合
if(isset($obj['subscribers'])){
$count = $obj['subscribers'];
}else{
$count = 0;
}
//チャンネル登録者数を出力
echo $count;
これで取得した数値を、JavaScriptからAjaxで取得します。
ただ、この方法だと、PHPのfile_get_contents()関数が、サーバーの設定次第では、動作しません。サーバーのPHP.iniの設定により、外部ファイルを取得できるように設定していないと、この関数はエラーが出ます。(後、file_get_contents()関数は、Wordpress的にも推奨されていない関数です。)
ですので、多くの人に配布するテーマ内で、この方法を利用することはできません。(今回、本来テーマにそんな機能は不要ということは置いといてください。)
JavaScriptのみで購読者数を取得する方法
そこで、「こちらが書くコードはJavaScriptオンリーで、サーバーの状態関係なく取得する方法はないものか?」と考えたとき、やっぱり「Yahoo! Pipes(サービス終了)」を使うしかないということになりました。その他の方法も思いつかないですし。
で、Yahoo! Pipesを利用して取得する方法が以下。
<script>
//feedlyの購読者数を取得
function get_social_count_feedly(rss_url, selcter) {
jQuery.ajax({
type: "get", dataType: "json",
url: "http://query.yahooapis.com/v1/public/yql",
data: {
q: "SELECT content FROM data.headers WHERE url='http://cloud.feedly.com/v3/feeds/feed%2F" + encodeURIComponent(rss_url) + "' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
format: "json",
env: "http://datatables.org/alltables.env"
},
success: function (data) {
count = data.query.results.resources.content.json['subscribers'];
//console.log(count);
jQuery( selcter ).text(count);
}
});
}
jQuery(function(){
get_social_count_feedly('[フィードのURL]', '.feedly-count');
//get_social_count_feedly('<?php bloginfo("rss2_url"); ?>', '.feedly-count');//Wordpressを使用する場合
});
</script>
簡単に説明すると、Yahoo! PipesからJSONデータを取得する設定にしてクエリをかけて、うまくいったら、dataオブジェクトが取得されます。
その後、detaオブジェクト内にjsonがあるので、その中の、購読者数を取得します。
dataオブジェクトは、Chromeのディベロッパーツールでconsole.log(data);と書いて、コンソールに表示させると、中身を確認することができます。

今回まとめて書きましたが、関数部分を外部ファイルに書き出しても良いです。
WordPressで使用する場合は、コメントしてある以下の部分のように使用すればOKです。
get_social_count_feedly('<?php bloginfo("rss2_url"); ?>', '.feedly-count');
あとは、購読者数を表示させるHTML部分に以下のコードを挿入すればOKです。
<span class="feedly-count">0</span>
0の部分を のようにFont Awesomeを使用したスピナーをクルクルさせることで、「読み込み中…」を表現すると、訪問者にもわかりやすいかもしれません。
<i class="fa fa-spinner fa-spin"></i>
まとめ
最初、ググってもこういったJavaScriptだけのfeedlyの取得方法は出てこなかったので、やり方がわかるまで、いろいろ試行錯誤しました。
ただ、「Yahoo! Pipes(サービス終了)」を使用してのJSONデータの返し方がわかってからは、XMLを返す方法よりも簡単でした。JSONデータを取得する今回の方法は、オブジェクトが返ってくるので、手軽にデータにアクセスできます。(Pocketの方法と違って、HTMLから正規表現で抽出する必要がないので。)
それにしても、Yahoo! Pipes本当に便利です。工夫次第でいろいろなものの取得に使えそうです。
