Simplicityを少し改造してみた part4-2 Google+のカウントを自前phpで取得する編

2015/09/30 追記分

内容が古くなっていたので書き変えました。
また、これらを利用するajax部の書き変えを昨日(2015/09/29)に行いました。以下のブログカードがそれにあたります。

Simplicityを少し改造してみた part9-2 SNSボタンのカウント処理大改造の修復(2015年10月版)
Simplicity公式でもアナウンスがあったり、世間をそれほど賑わしていないもののの地味に広がりつつあるTwitterのSNSシェアカウン...

新しいスクリプトは以下の通りです。

以前に書いた記事は以下の区切り線以降になります。内容自体は変更していません。
これらを踏まえて、上記内容に変更したことをご理解頂ければと思います。
以下の記事をサックリと目を通していただき、ajaxで何をしているかを知ってもらい、Yahoo!Pipesのサービス終了に伴い上記に変更したと言う時系列を追っていただくと一層深く理解してもらえるのではないかと思います。


現在、Simplicityでは、Google+のカウントをyahooapiから取得するという方法でやっていますが、これを自前スクリプトでやってみようというのが今回のテーマです。

これを実現するにあたり、色々とややこしいことをしないといけませんが、まずは過去の記事を確認してみることから始めてみましょう。

Simplicityを少し改造してみた part4
2014/11/9版のSimplicityでは、feedlyのカウントが(非同期で)動作しなかったので、part3でやった方法に少し手を加え...

これが大元の記事で、以下がその補足になります。

Simplicityを少し改造してみた part4の補足
今しがた、新しいSimplicityのバージョンをダウンロードしてスクリプト見てみました。そのままでもおそらく問題ないのですが、実際は以下の...

ここで面倒なのが、yahooのapiからGoogle+のカウントを取得すると、返ってくるデータからカウントの部分を抜き出さねばなりません。まぁそのままやればもちろん「現在は」取得できるわけですが、考えてみるとyahooを中継して拾ってくるデータなのでその分遅い・・・んじゃなかろうかと思ったりもして、じゃあどうすれば良い?と言う話なのですが、結論はちょっと先延ばしにして下準備として以下のようにする必要があるのをまず書いておきます。

Simplicityでは、親テーマjavascript.js内の、コメント部で「ソーシャルボタンカウントの非同期取得」にてカウントを取得する操作をしています。ここのjQuery(window).scroll(function(){…}は、スクロール追従のボタン部分ですので、ここはまぁそのままで良いと思います。

その下の方で、Twitterのシェア数を取得等の部分。ここで直接またはyahoo等を仲介して間接的にカウント数をajaxにて非同期に取得する手法がとられています。

先のブログカード「Simplicityを少し改造してみた part4及びその補足」らは、スクリプトをajax部と成形部とに分離してやってみようじゃんと言う感じで書かれています。
そのため、やってることは同じようなことでも書き方が異なったりしているので、もしやってみるのであれば親テーマjavascript.jsの各シェア数取得部分をコメントアウトしたりしておいて、今回書くものを子テーマjavascript.jsに追記する必要があります。
まぁ実際このサイトでは、「Simplicityを少し改造してみた part4及びその補足」のやり方で実装しているので動作はするのですが、あんまりスクリプトをいじくるのは自信ないなと言う人は、下手にいじくらない方が良いかも知れません。予めご忠告しておきます。
親テーマの該当部分はコメントアウトしておけばいつでも復帰できるのでチャレンジしたい人だけ試してみて下さい。

準備1: 自前でGoogle+のカウントを取得するために新たにphpを書く

はい、いきなり書いてしまいました。これがphpでGoogle+のカウントを取得するプログラムです。file_get_contents等が利用できないサーバーでも動作するようにcURLを利用しています。関数になってますが、他で利用したい場合を除いて関数化する必要もないんですけれども、まぁそれは別にいいじゃんと言うことで。

これを新規ファイルとして子テーマのlibフォルダに保存します。文字コードはutf8にしとく方がいいですね。

次に子テーマjavascript.js部分。これちょっと長くなるので関数部分と実行部分で分けたいと思います。
※実際は続けて書きます。

はい、これ「Simplicityを少し改造してみた part4及びその補足」で書いたものにgpを足しただけになってます。しかも、feedlyと同じ内容なんですが、ひとまず分けてます。gp:部分をちょっと解説します。

先ほど作成したGoogle+のカウント数を取得するphpスクリプトは、例えばtwitterなどのapiが返すjson(またはjsonp)とは違い、phpスクリプトですでにカウントを整形までして出力している状態なので、上記のgp:内ajax部のdataTypeはhtmlになります。
feedly部とgp部は内容が全く同じなので、何かしら良い名前がアレばそれだけでも構いません。例えば、fgp:とか(笑)

この関数部分は、以下のようにして実行します。

まず変数surlとqueryを宣言しておきます。surlとqueryを使いますよと言う感じです。
次に自分のwordpressの子テーマlibフォルダまでのアドレスに、実行するgp-count.phpをアドレスとして入れておきます。ajaxはこのアドレスに対して動作します。
queryの部分は、gp-count.phpに記事のアドレスはurlですよと渡すパラメーターです。
そして次がとても重要、実行する部分です。

はい、ここで先の関数と比較してみてみて下さい。SNSの中のgpに対して(surlとquery)を送り、成功したら(done)以下を実行みたいに、とても日本語っぽく書けるのがご理解いただけるでしょうか?
これがしたいためだけに書いたようなスクリプトです(笑)

このようにすることでプログラムが見やすくなるのではないかという、それだけで書いてあるんですけれども、先ほど実際に動作するかどうか自分のGoogle+の記事に、自分でプラス1してきました(遠い目)
で、結果的に動作しているようなので、そそくさとこの記事を書いた次第でございます。

と、言うことで、一応簡単な説明が書けたので、全貌をコピペしておきます。
ちなみにこれらは全て関数となっていますので、子テーマjavascript.jsの最後辺りに追記するような感じになります。$(function(){…})やjQuery(function(){…})もしくは、jQuery(document).ready(function(){…})等の…部分には書かないようにして下さい。

スクリプト全容

スポンサーリンク

シェアする

フォローする