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

feedly

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

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

上の記事は、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で取得する方法を書きました。 ただこの...

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

以前、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「feedly購読者数取得関数」を書きました。 ...
スポンサーリンク
レクタングル(大)広告

これまでの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で取得する方法は、以前僕も記事に書いているのでそれを紹介します。

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

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

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

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);と書いて、コンソールに表示させると、中身を確認することができます。

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>

feedlyカウント1giffeedlyカウント取得後

まとめ

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

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

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

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

フォローする

スポンサーリンク