前回は、PHPでPush7のAPIを利用してプッシュボタンを実装する方法を紹介しました。
で、今回はPHPを使わずJavaScript（jQuery）を利用してPush7ボタンの購読者数を取得する方法を紹介します。
目次
主な手順
JavaScriptからAPIを使用してPush7ボタンを設置する主な手順は以下です。
- Push7からAPPNOを取得する
- JavaScriptを書く
- ボタン用のHTMLを挿入する
大体こんな感じです。
Push7のAPI詳細については、以下を参照してください。
APIの使用については、ドキュメントにゆだねるとして、以下では使い方のみを紹介します。
Push7からAPPNOを取得する
まずは、Push7にログインして、「アプリケーション設定 → 自動プッシュ設定 → WordPress」を選択してください。
すると、APPNOが表示されるので、メモしておいてください。
Push7について詳しくは以下を参照してください。
JavaScriptを書く
次に、</body>手前に、以下のようなjQueryコードを書きます。
<script type="text/javascript">
(function($) {
//Push7で購読者数を取得
function fetch_push7_count(app_no, selector) {
url = 'https://api.push7.jp/api/v1/'+app_no+'/head';
$.ajax({
url:url,
dataType:'json',
timeout: 10000, //10sec
data:{
url:url
}
}).done(function(res){
$( selector ).text( res.subscribers || 0 );
}).fail(function(){
$( selector ).html('error');
});
}
//push7カウントの取得
fetch_push7_count('APPNO', '.push7-count');
})(jQuery);
</script>大文字で「APPNO」と書かれている部分は、前項で取得したAPPNOと置換してください。
関数の説明
fetch_push7_count関数について、簡単に説明しておきます。
第1引数にAPPNOを指定してください。
第2引数には、取得したPush7購読者数を表示するための要素を表すCSSセレクタを指定してください。指定したCSSセレクタの要素に対して、購読者数が挿入されます。
ボタン用のHTMLを挿入する
Push7購読用のURLは、Push7管理画面にある「アプリケーションURL」をそのまま利用します。
購読用リンクの作成
当サイトのものだったら、以下になります。
上記の、URLに移動するだけでも購読できる仕組みになっています。
リンクにするとしたら、こんな感じです。
<a href="https://nelog.app.push7.jp">購読する</a>
こんな感じで、単なる通常リンクで購読リンクを作成することができます。
購読者数を表示する要素を書く
あとは、購読者数表示用のHTML要素を追加します。
先程のJavaScript関数の第2引数のCSSセレクタを「.push7-count」としました。ですので、購読者数を表示させたいところに、「.push7-count」クラスを使用したHTML要素を書けばOKです。
例えばこんな感じです。
<span class="push7-count">0</span>
JavaScript関数で、Push7購読者数が取得出来た場合は、上記の0が購読者数に置き換えられます。
Push7ボタン例
僕の場合は、上記のコードを応用して、以下のようなバルーンボタンの形にして使用しています。
バルーンの、HTML記述やスタイルなどについては、以下を参照してください。
まとめ
今のところ、Push7のAPIは早くて、わざわざ非同期で取得するほどでもないかもしれません。
なので通常は、PHPを使った方法で、速度的にも問題なく動作すると思います。（※比較的新しいサービスなので、利用者が増えるとどうなるかはわからないけど）
PHPでするにも、Ajaxで取得するにも、取り立ててトリッキーなことを行う必要がないので、普段WEB系のプログラミングを行っている人なら、結構簡単に実装できると思います。
内容が長いもうちょっと簡潔にまとめろ、ネット検索したら頻繁にお前のサイトが出てきてうざい、氏ね