ようやくできた！feedlyの購読者数をJavaScriptのAjaxオンリーで取得する方法

先日、Pocketのシェア数をJavaScriptだけで取得する方法を書きました。

Pocketは、外部サービス向けにAPIが公開されていません。ですので、シェア数を取得する方法は、情報が少ないです。しかも、...

nelog.jp

2015-11-25 17:59

上の記事は、Google+のシェア数をJavascriptで取得する方法を参考に、「Yahoo! Pipes（サービス終了）」というサービスを経由することによって、AjaxでページのHTMLをXMLで取得し、正規表現でカウント数を抽出しています。

直接、PocketにjQueryのAjax経由で取得しようとすると、クロスドメイン制約（Access-Control-Allow-Origin）によってエラーが発生するのを、Yahoo! Pipesを経由（パイプ）することで防いでいます。

今回のfeedlyの購読者数も同様に取得します。で、その方法の紹介です。

追記：Yahoo! Pipes経由での取得は、feedly側で拒否られたかもしれません。ですので、オーソドックスにPHPで取得した方が良いかもしれません。

feedlyの購読者カウントの取得方法。Yahoo! PipesからAjaxでの取得拒否対策

以前feedlyの購読者数を「Yahoo! Pipes（サービス終了）」を経由して、Ajaxで取得する方法を書きました。ただこの...

nelog.jp

2015-11-23 16:34

追記（2015年10月）：Yahoo! Pipesがサービス停止ということで代替方法。

feedlyの購読者数をAjaxで非同期に取得するWordPressカスタマイズ方法

以前、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「feedly購読者数取得関数」を書きました。 ...

nelog.jp

2015-10-02 20:43

これまでのfeedly購読者数取得方法

feedlyの購読者数を取得するには以下のようにfeedlyにアクセスする必要があります。

<div class="blog-card external-blog-card blog-card-thumbnail-right blog-card-wide cf"><div class="blog-card-thumbnail"><a href="http://cloud.feedly.com/v3/feeds/feed%2F" class="blog-card-thumbnail-link" target="_blank" rel="nofollow noopener" data-wpel-link="external"><img src="https://s0.wordpress.com/mshots/v1/http%3A%2F%2Fcloud.feedly.com%2Fv3%2Ffeeds%2Ffeed%252F?w=100&h=100" alt="" class="blog-card-thumb-image" height="100" width="100" /></a></div><div class="blog-card-content"><div class="blog-card-title"><a href="http://cloud.feedly.com/v3/feeds/feed%2F" class="blog-card-title-link" target="_blank" rel="nofollow noopener" data-wpel-link="external">http://cloud.feedly.com/v3/feeds/feed%2F</a></div><div class="blog-card-excerpt"></div></div><div class="blog-card-footer"><div class="blog-card-site"><span class="blog-card-favicon"><img src="//www.google.com/s2/favicons?domain=cloud.feedly.com" class="blog-card-favicon-img" alt="" width="16" height="16" /></span>cloud.feedly.com</div><div class="blog-card-hatebu"><a href="//b.hatena.ne.jp/entry/http://cloud.feedly.com/v3/feeds/feed%2F" target="_blank" rel="nofollow noopener" data-wpel-link="external"><img src="//b.hatena.ne.jp/entry/image/http://cloud.feedly.com/v3/feeds/feed%2F" alt="" /></a></div></div></div>[URLエンコードしたフィードのURL]

1	http://cloud.feedly.com/v3/feeds/feed%2F[URLエンコードしたフィードのURL]

このようにアクセスすることで、以下のようなjsonデータが返ってきます。

{"id":"feed/http://nelog.jp/feed","feedId":"feed/http://nelog.jp/feed","language":"ja","subscribers":204,"title":"寝ログ","velocity":9.3,"topics":["ブログ","【wordpress】","it"],"website":"http://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"}

{"id":"feed/http://nelog.jp/feed","feedId":"feed/http://nelog.jp/feed","language":"ja","subscribers":204,"title":"寝ログ","velocity":9.3,"topics":["ブログ","【wordpress】","it"],"website":"http://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,
}

{

"subscribers": 204,

}

これまで、ネットにあるfeedlyの購読者数取得方法をまとめると以下のような感じです

PHPで取得

PHPで取得する方法は、以前僕も記事に書いているのでそれを紹介します。

feedly購読者数付き横型フォローボタンの作り方｜コピペで使えるWordPressカスタマイズ

feedlyアイコンの右側に、購読者数が表示される吹き出しのついた、小さなフォローボタンを作ってみました。Wordp...

nelog.jp

2014-11-05 11:58

この記事では、次のような関数を使って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;
  }
}

//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 = "http://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'];
}

//チェックするフィードのURL

$url = "http://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'];

}

参考ソーシャルカウントの取得方法まとめ(全9サイト)

PHP＋JavaScriptで取得する

あともう一つの方法として、クロスドメインエラー回避のため、自分のサーバーでPHPで購読者数を取得し、そこで取得した数値をJavaScript＋Ajaxで取得するという方法もあります。

PHPで購読者数を取得し書き出す。

<?php

//チェックするフィードURL
$feed = 'http://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;

<?php

//チェックするフィードURL

$feed = 'http://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>

//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');

1	get_social_count_feedly('<?php bloginfo("rss2_url"); ?>', '.feedly-count');

あとは、購読者数を表示させるHTML部分に以下のコードを挿入すればOKです。

<span class="feedly-count">0</span>

1	<span class="feedly-count">0</span>

0の部分をのようにFont Awesomeを使用したスピナーをクルクルさせることで、「読み込み中…」を表現すると、訪問者にもわかりやすいかもしれません。

<i class="fa fa-spinner fa-spin"></i>

1	<i class="fa fa-spinner fa-spin"></i>

まとめ

最初、ググってもこういったJavaScriptだけのfeedlyの取得方法は出てこなかったので、やり方がわかるまで、いろいろ試行錯誤しました。

ただ、「Yahoo! Pipes（サービス終了）」を使用してのJSONデータの返し方がわかってからは、XMLを返す方法よりも簡単でした。JSONデータを取得する今回の方法は、オブジェクトが返ってくるので、手軽にデータにアクセスできます。（Pocketの方法と違って、HTMLから正規表現で抽出する必要がないので。）

それにしても、Yahoo! Pipes本当に便利です。工夫次第でいろいろなものの取得に使えそうです。