Simplicityを少し改造してみた part9 SNSボタンのカウント処理大改造

2015/09/30 追記
以下ブログカードの内容にこの記事の内容を更新しました。

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

またまたSNSボタンのカウント部分を改造してしまいました。これ何回目だろう(笑)

表示的にはこれまでと変わりません。最初にページにアクセスするとアイコンがくるくる回り、その後非同期でカウントの値を取得して表示するというものですが、これまでは見つかったものからそれぞれ表示されていました。しかしながら実際の処理というのはAPIの反応もあったりするのですがもっと速いんです。

玄関開けたら5分でご飯ぐらいの感じです。って、5分と考えたら遅いですけど、普通ご飯を炊くならまず米を研いで、水を測ってスイッチオンで30〜40分ぐらいと考えるとその5分ってのがどれだけ速いか想像できますよね?できない?まぁ想像したとしておいてください。

それぞれにスピンアイコンが数値にバラバラに変わっていく様を見たい場合は、これまでと同じ方法で特に改造する必要はありません。しかしajaxの通信というのは並列化できまして、一挙に送って返事があったら即表示ってことができるのです。

基本何も手を加えなければ、javascriptやjQueryというのは書かれている通りに動作していきます。上から下ですね。なので上で書いたことを下で書きなおせば、書きなおした値に変わったりするわけです。

これまでのSimplicityのSNSのカウント値の取得の流れは、親テーマjavascript.js内の、

この部分が受け持っています。この、get_social_count_SNS名(アドレス, 値を表示するセレクタ);は先の説明通り、ほぼ同時ぐらいでしょうけれどもやはり上から実行されていきます。ここを同時とまでは行かないまでも並列化すれば、体感はできなかったとしても速くなるんじゃないの?ってかるーい気持ちでやってみたのが今回の本筋です。

と言うことで、並列化したいのであれば、

もちろんこういう事になっちゃいますよね(笑)
作者のわいひらさんに気が付かれないように、こっそりとコメントアウトして変えておきましょう。

さて親テーマjavascript.jsのこの部分をコメントアウトしてしまうと、もちろんカウントの値を取り出すことはできません。これの意味合いとしては、ページが読み込まれたら、get_social_count_SNS名(アドレス, 値を表示するセレクタ);を実行するということなんですが、これは親テーマjavascript.jsの今コメントアウトした部分の上あたりに、

このような部分を読み込んでいるわけです。ここはそれぞれにコメントアウトしても良いのですが、関数部分(function get_なんちゃら)は、そのままでも良いです。何かしらあった時に元に戻せるように違う関数名やらでやりますので、ひとまずget_social_count_SNS名(アドレス, 値を表示するセレクタ);だけそれぞれにコメントアウトすれば動作するだろうと思います。

子テーマjavascript.jsに新たにカウント取得のスクリプトを書く

これまでの流れで、多分理解していただいたと思うのですが例えば親テーマのアップデートがあった場合、今コメントアウトしたものはやはり上書きアップデートされるのでなくなります。なのでアップデートのたびに親テーマjavascript.jsのget_social_count_SNS名(アドレス, 値を表示するセレクタ);はコメントアウトする必要があるとまずは覚えておいてください。

この一連のSNSカウントの部分に新たな処理であったり何かしらの手が入った場合、自身で変更しなくてはいけない場合もあるのでそこらも注意として書いておきます。

さて、子テーマjavascript.jsですが、まずそれぞれのSNSのAPIにアクセスするajaxの部分をそれぞれに書くととても大変なので以前、当サイトの記事でまとめて書く方法を紹介しました。今回もそれを流用します。

関係する記事としては、

Simplicityを少し改造してみた part4-2 Google+のカウントを自前phpで取得する編
2015/09/30 追記分 内容が古くなっていたので書き変えました。 また、これらを利用するajax部の書き変えを昨日(2015/09...
Simplicityを少し改造してみた part4の補足
今しがた、新しいSimplicityのバージョンをダウンロードしてスクリプト見てみました。そのままでもおそらく問題ないのですが、実際は以下の...
Simplicityを少し改造してみた part4
2014/11/9版のSimplicityでは、feedlyのカウントが(非同期で)動作しなかったので、part3でやった方法に少し手を加え...
Simplicityを少し改造してみた part3
part2ではSNSボタンのカウント読み込みをしているjQuery部分(javascript.js)でsuccess,errorで書かれてい...

これらあたりかと思います。特に今回は、Simplicityを少し改造してみた part4-2 Google+のカウントを自前phpで取得する編の記事で書いた部分を利用しているので、feedlyとGoogle+のカウントを自前PHPで取得するべく、子テーマlibフォルダに、それぞれのスクリプトを入れておく、までできているとものとしてカスタマイズしていきますので、ひとまず前置きとして書いておきます。最新のSimplicityの親テーマjavascript.jsに書いてあるアドレス等を流用して、自前phpで取得しなくても良いように応用しても良いと思います。

さて、ようやくここから本題。まず子テーマjavascript.jsにajaxと表示させる部分のユーティリティ関数を書きます。

まぁ、あまり気にしなくても良いですが、deferredオブジェクトを作っていると言う感じです。次に、ajaxする部分を書きます。

これらは各SNSのAPIもしくは自分の子テーマlibフォルダのPHPからカウントを含むjsonデータあるいは、その他のデータを取得する関数です。もし取得するAPIのアドレス等が変更になった場合は、ここらを修正することになります。ちなみにここは、データを取得するだけで、取得したデータの整形(カウント値を取り出す)のは別で行います。

はい、ようやくメインの部分になりました。メインと言っても取得したデータを取りに行って、そのデータを整形して表示する部分なんですけれどもね(笑)

冒頭から説明しているように、$.when()を利用して、ajaxの部分を並列して読みに行きデータを取得しておきます。.done()は成功した場合、.fail()は失敗した場合です。

$.when()でデータ取得に成功した場合は.doneにてデータを取得できるのですが、この.doneに入るデータはそれぞれに、[データ, “success”, jqXHR]という配列で返ってきます。なので、.done(function( twd, fbd, gpd, hbd, ptd, fyd ){}は、例えばtwitterの場合、twd[0]と言う感じでデータ部分を取り出して加工する必要があるわけです。

自前phpでカウント値を取り出しているGoogle+やfeedlyは、phpですでにカウント値が出力されており、それをajaxにて取得しているのでデータの中身としては、[カウント値, “success”, jqXHR]となっていて、gpd[0]などのようにすればすぐにカウントが取り出せるのですが、その他のSNSはjsonなどで取得しているので、値を取り出す必要があります。pocketがちょっと特殊ですが、その他はまぁ何となしに理解していただけるかも。

大まかな動作の説明

まずページが読み込まれると、

この部分が動作します。
get_social_count_SNS名(アドレス, 値を表示するセレクタ); が、それに対応するfunction get_social_count_SNS名(url){}を処理しに行きます。
function get_social_count_SNS名(url){}では、ユーティリティ部分の各関数を処理して、APIに通信に行きその結果を取得してdeferrefオブジェクトにして返します。それを受け取った$.whenは、deferrefオブジェクトの状態を見て、.done()するか.fail()するかを待ち受けます。

通信が成功してカウンタデータが拾えた場合は、$.when().done(function(各データ))が動作します。ここでは、ユーティリティ部分のSNS.countShow部分を利用して、ブログ内のhtmlにある各カウントを表示する部分のセレクタにその値を返します。内容的には、

こうなります。htmlの何かしらのSNSのセレクタのテキストをカウント値で書き換えと言う意味です。ここはテキストでカウント値を返しているわけですから、何かしら書いてもテキストで返されてしまいますが、SNSにある、countShow部分の該当部を、

などとすることも可能です。後は、子テーマstyle.cssに、

などとして、装飾することも可能です。場合によっては、アニメーションでブリンク(点滅)させたりすることもできます。このあたりはアイデア次第なので、色々とカスタマイズできるでしょう。

全体をとおして

書き方としては、まだ短くもできる感じもありますが、処理する部分を分けることによって、APIのアドレスが変更された時、カウンタの値の取り出し方法が変わった時、表示を変更したい時などと、それぞれにメンテナンスできるような感じになっています。

また一部、別呼称を使っていますがだいたいを同じ呼称で処理させることで、そこで何してるというのがわかりやすくなったんじゃないかなぁと思います。

更に、非同期ながらスピンアイコンが同時にカウンタ値に変更されるのを確認してください。

「そうだ山へゆこう」みたいに、「そうだ並列化しよう」と思い立って、3時間ぐらいどうやって実装するか考えましたが、書き始めたら30分もかからないという(笑)
このブログ書いてる方が時間かかってます(笑)

まぁ何かのお役に立てれば。

スポンサーリンク

シェアする

フォローする