先日、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にアクセスする必要があります。
|
1 |
http://cloud.feedly.com/v3/feeds/feed%2F[URLエンコードしたフィードのURL] |
このようにアクセスすることで、以下のようなjsonデータが返ってきます。
|
1 |
{"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"} |
この返却値の以下の部分が購読者数になります。
|
1 2 3 |
{ "subscribers": 204, } |
これまで、ネットにあるfeedlyの購読者数取得方法をまとめると以下のような感じです
PHPで取得
PHPで取得する方法は、以前僕も記事に書いているのでそれを紹介します。
この記事では、次のような関数を使ってWordpress上で購読者数を取得しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//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を使用していないんだったら、以下のような感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//チェックするフィードの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']; } |
PHP＋JavaScriptで取得する
あともう一つの方法として、クロスドメインエラー回避のため、自分のサーバーでPHPで購読者数を取得し、そこで取得した数値をJavaScript＋Ajaxで取得するという方法もあります。
PHPで購読者数を取得し書き出す。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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を利用して取得する方法が以下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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です。
|
1 |
get_social_count_feedly('<?php bloginfo("rss2_url"); ?>', '.feedly-count'); |
あとは、購読者数を表示させるHTML部分に以下のコードを挿入すればOKです。
|
1 |
<span class="feedly-count">0</span> |
0の部分を のようにFont Awesomeを使用したスピナーをクルクルさせることで、「読み込み中…」を表現すると、訪問者にもわかりやすいかもしれません。
|
1 |
<i class="fa fa-spinner fa-spin"></i> |
まとめ
最初、ググってもこういったJavaScriptだけのfeedlyの取得方法は出てこなかったので、やり方がわかるまで、いろいろ試行錯誤しました。
ただ、「Yahoo! Pipes（サービス終了）」を使用してのJSONデータの返し方がわかってからは、XMLを返す方法よりも簡単でした。JSONデータを取得する今回の方法は、オブジェクトが返ってくるので、手軽にデータにアクセスできます。（Pocketの方法と違って、HTMLから正規表現で抽出する必要がないので。）
それにしても、Yahoo! Pipes本当に便利です。工夫次第でいろいろなものの取得に使えそうです。
