Simplicityを少し改造してみた part13 シェアボタンのカウントをphpで行う

これまでのSimplicityのSNSカウントの取得方法及びajaxの説明

これまでのSimplicityでは、javascript等(主にajax)によってSNSボタンのカウントを拾っていましたが、カウント自体は特にjavascript(jQuery)でajaxさせなくては取得できないというものではありません。PHPで取得してそれを表示すればよいのです。しかし、PHPとjavascriptの特性の違いにより、その表示の仕方は変わります。

PHPはサーバーサイドのプログラムです。jQueryやjavascriptはクライアントサイドのスクリプトになります。画面に出力する前に何かしらの処理をするPHPと、出力された後で何かしらの処理をするjavascript(あぁもう面倒臭いので以下JSで)とでは利用方法に違いが出てきます。

世間ではnode.jsと言うのもあり、javascriptは決してクライアントサイドだけのものだけではなくなりましたが、それでも一般的には出力されたものに対して処理を行うものとされています。

これまでの仕組みをサックリと書くと、ひとまずSNSのシェアボタンにはfontAwesomeでクルクルまわるスピナーを表示させておきます。サイトにアクセスした時、スピナーがクルクル回っているのは何かしらの操作でそうなっているのではなく、単純にfontAwesomeでクルクル回るアイコンがセットされていたからに過ぎないわけです。

サイトが読み込まれ、javascript.jsが処理を始めると、そのスピナーアイコンの部分にカウントの数値を入れるための処理が始まります。
例えばSNSのAPIにアクセスし、その結果を求めてくるものや、Yahoo!のサービスで本来APIを叩いてレスポンスを得るための処理を別途サービスを経由することでjsonなどのデータとして取得して、それを整形しカウント値を割り出し、スピナーがクルクル回っているセレクターにそのカウント値を入れ替えるということをしていたわけです。

送信→ サーバー処理→ 数値整形→ 表示
js(jQuery) 何かしらサーバーでの処理 js(jQuery) セレクタの中身入れ替え

こういう流れをajax(エイジャックス・アジャックス・アヤックス)などと言います。
クライアント側(ブラウザ)だけでは処理できない内容をサーバーにクエリ(パラメーター)を送ることで処理させ、その答え(レスポンス)を再びクライアント側で表示すると言う処理のことです。

ブラウザはhtmlで書いてある事を上から順番に処理していきます。PHPの場合、サーバーサイドの処理ですから、このhtmlを作るための処理という意味合いでも間違いないかと思います。jsやjQueryはそのhtmlに対して何かを行ったり、別途何かしらの処理をする場合に用いられます。

SNSのカウント値自体は、PHPで予め処理させなくても、後からで問題ない場合が多いため非同期でブラウザの準備ができ次第読ませると言う事を行います。

例えば、サイトのタイトルはWordpressのデータベースに収納されています。それを読み取ることは一般的にJSだけではできません。サイトを表示してから、あの情報がデータベースから欲しいんだよって場合に、それを取得するためのPHPを別途用意しておき、JSあるいはjQueryのajaxの機能を利用して、PHPにクエリを送りデータベースにアクセスさせ、その結果をjQuery等で読み取るなどの処理ができます。

後読みができるメリットはいくつかあって、予め膨大な処理をしてからhtmlを作るよりも、必要な部分だけひとまず出力しておいて、サイト自体は既に表示されている箇所に、jQueryからPHPを利用し、データだけ読み取って、またjQuery等で表示させると言う事ができればサイト自体は素早く表示されたように見えます。
また、一定の条件で、書き変えたい内容がある場合に、ページ全体を書き換えるより、部分的に書き換えたほうが情報量も少なく、素早くページを作ることができます。
そういうのがajaxの魅力なのですが、カウント値がリアルタイムで変更されるというわけではないSimplicityの構造ですから、カウント値自体は予めPHPで処理させて表示させることで何も問題ないわけです。そこから、次のようにすればカウント値自体はhtml内に埋め込まれた状態で出力することが可能になります。

まずは、カウント値を取得するためのスクリプトを書く

現在当サイトでは、feedlyの購読者のカウント値を取得するために、上記のスクリプトを子テーマのlibフォルダに置き、javascript.jsにて、このPHPにアクセスすることでカウント値を取得しています。これをどうすればPHPだけで行うことにできるかですが、まずその構造を説明します。

うちのサイトでは、file_get_contentが利用できません。これでは、例えば外部のサイトの情報を取得できないということになります。なので、ブラウザのアドレス欄にアドレスを入れるだけでそのサイトの情報が表示されるように、外部のサイトのデータを取得するための手段が必要になります。
その方法がcURLです。

しかしこれは、file_get_contentsが利用できない場合の代替の方法なのですが、WordpressでSNSのカウントを取得したい場合(apiを叩く)はcUrlも必要ありません。Wordpressには、外部の情報を取得できる関数が用意されていて、それがwp_remote_getやwp_remote_postなのです。

これらの関数を利用する場合には、wordpressの中での処理にしないといけません。上記のように、子テーマのlibフォルダに入っているphpは外部のスクリプトと言う扱いなので、wp_remote_get関数がそのままでは利用できないからです。そのため、上記スクリプトではcUrlを利用しています。

では、Wordpressの関数が利用できる部分というのはどこでしょうか?
答えは子テーマfunctions.phpです。

ここに書けば、wordpressの関数が使えるばかりか、親テーマのアップデートにも影響されません。では、どのように書くかを上記feedlyのスクリプトを利用して書いてみます。

子テーマfunctions.phpに追記

※ 子テーマfunctions.phpは、すでにファイル上部でPHPの始まりである事を示す<?phpが準備されているので、上記スクリプト追加だけ。
※ getfeedly_count()は、get_feedly_countがSimplicityのテーマで利用されているため重複を避けるための名称です。

利用方法としては、例えば誰も使わないと言われているbefore-main.php(笑)に、

このように書くと、Simplicity公式のfeed数が得られます。通常は、

みたいな感じで、feedのアドレスを入れます。getfeedly_count(“rss_url”)はどこでも入れられるので、例えば、footerとかに仕込んでもよいでしょうし、独自のデザインのボタンなども作れます。独自デザインのボタンにカウント値が必要かどうかはわかりませんけども(笑)

で、肝心のSNSボタンの場合はどこに入れるんだ?と言うことなんですが、親テーマsns-buttons-icon.phpの下の方、

この部分(わかりやすいようにインデント入れてます)の6行目をphpを利用してコメントアウトしておき、7行目のように追加します。

もし仮に、jQueryが動作する場合は、Simplicityデフォルトの書き変えで.social-icon icon-feedlyの中身が書き変えられます。phpですでにカウント値が出力されていますが、非同期で書き変えられます。
書き変えられるのが嫌だという場合は、jQueryのajaxしている部分をコメントアウトしておけば良いでしょう。
また、iOS9などのようにコンテンツブロッカー等でスクリプトが動作しなくても数値はでている状態が作れます。おそらく(笑)
この場合、クルクルまわるのはありませんけどね。

クルクル回るスピナーをどうしても入れたいというふうに考えられるかも知れませんが、僕は以下の様に思ってます。
例えば、ファーストビューで表示される部分、いわゆる最初にブラウザで見える部分ですが、ここはスピナーを表示させて何かしら演出する事は表示の遅さに繋がる可能性があり(微々たるものですが)、クルクルなしの方向が良いかと思います。
それでもPHPにて処理していることに変わりはないため、ajaxとPHPどちらが速いとか色んな意見も出る箇所かと思います。ぶっちゃけどちらでもお好きな方でと言う感じでしょうか。合わせても良いですし、別のアイデアがあればそれでも良いです。

ファーストビュー以外、例えば記事下のシェアボタンは、クルクルがあっても良い部分です。なので、どうせ最初は見えてないんですからjQueryで、記事下のカウント部分にはクルクルスピナーを入れて(※)、画面内に入ったらajaxすると言う方向でも良いですし、前に書いた以下のブログカードのような演出も良いのではないでしょうか?
※既にカウント値は入っているけれども、更にそこにjQueryで上書きしスピナーを入れたりすることです。

Simplicityを少し改造してみた 番外編 part16 シェアボタンが画面内に入ったらカウント値をカウントアップする
全容が書いてあるにも関わらず、パッと見た目、何いってんの?ってタイトルばかりな今日この頃です。 まぁ別に数値であれば、シェアボタンのカ...

さて、大まかな流れが理解して頂けたと思うので、後は手を変え品を変え色々と手を入れられる部分です。カウント取得のAPIを叩く部分はもっと細かくエラー処理をしたり、一時的にデータベースにキャッシュしたりなどもできるようになります。

上記を踏まえてまとめ(他のSNSカウントも入れる場合)

20151001_sns_countチェックサイトアドレス: PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法 | 寝ログ

寝ログの上記アドレス(http://nelog.jp/w3-total-cache)を借りまして動作確認。画像にてカウント取得に間違いないのを確認して頂けると思います。

親テーマbefore-main.php

子テーマfunctions.php

こんな感じです。色々追加している間に、getData($url)では取得した内容のbody($response[‘body’])だけ返すようにして、それぞれのSNSにて処理するようにしました。Simplicityで利用されている方法と若干違う箇所もあるかと思いますが、特別意味はありません。方法は何だっていいんです。結果表示されてりゃ万事OK。
速度面やら色々考える箇所もあるかと思いますけれども、そこらは各々調整して下さい。

スポンサーリンク

シェアする

フォローする