Simplicityを少し改造してみた 番外編 part16 シェアボタンが画面内に入ったらカウント値をカウントアップする

全容が書いてあるにも関わらず、パッと見た目、何いってんの?ってタイトルばかりな今日この頃です。

まぁ別に数値であれば、シェアボタンのカウント値でなくても良いのですけれども、「何か、これ動かねぇかなぁ」と思ったりしたことはありませんか?
今回のはそれを動かすスクリプトです。

注意点は、数値であることです。
例えばSimplicityの場合、twitterやfacebookは<span class=”social-count”>値</span>と言う感じでクラスが付いていますが、evernoteなどの部分にはそれらはありません。なので、Simplicityの場合はそのままでも良いのですけれども、他で使う場合は対象が数値であるかどうかは十分確認して下さい。最悪、

こんな感じでやってみたりと色々条件が必要になることがあります。

さて、サンプルなのですが、そのままカウントアップだけではアレなので、画面内に対象の要素が入ったらカウントアップと言う手法をとっています。発火条件はスクロール、リサイズ、ロードです。スクロールして画面内に要素があれば発火、リサイズした時に画面内に要素があったら発火、ロードした時に画面内にあったら発火というような感じになっています。

See the Pen wordpressTheme Simplicity SNS count The count up automatically the count value of the SNS by Hidekichi (@Hidekichi) on CodePen.

どうやっているか

元のスクリプトは、codepenにあったs.shivasuryaさんのカウントアップスクリプトを利用しています。それだけだとアレだったんで、色々手を入れています。

カウントアップのスクリプト部分

例えば、$(ターゲット).text()としてカウント値を取得した場合、仮に100が入っているとしましょう。SNSのカウント値が100と言う感じです。すると、それを0に書き換えた瞬間、$(ターゲット).text()には0が入っていますから、さっきの100が上書きされてしまいます。
なので、.prop()にて、属性値にCounterというのを作りそこに0を代入するわけです。$(ターゲット).text()で取得する値は、例えば

こんな感じになります。

.prop()も.attr()も属性を取得するものなのですが、対象が違います。.attr()はhtmlの属性を扱い、.prop()はjavascriptのプロパティを扱います。
.attr()の属性は、例えばidやclass、styleやwidth,heightなど、タグ内によく出てくるあれです。

上記サンプル引用元: CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。

これ、aの値はタグにあるhref、つまり#commentsが返ってきます。
では、bはというと、http://testsite.com/test/etc_index_php#comments みたいな感じで返ってくるんです。

どっちも正しい訳ですが、人の感覚として、href=”#comments”とあれば、普通リンク先のページアドレス#commentsは極アタリマエのことです。しかしながら.attr()では#commentsと返ってきます。たいていhref=#comments”とリンクを省略する場合は、そのページの中の#commentsですから、#commentsでわかりますが、セレクタが欲しいのか値が欲しいのかで使いドコロが変わってしまうのでなかなかどっちを使うべきか考えさせられる部分です。

で、話は戻り、$(this).prop()、つまりは各.social-countに対して、プロパティCounterを追加して0をセットします。そしてanimateで、Counterの値をSNSの元々入っているカウント値にセットします。例で言うと100ですね。
.animateの2つ目の{}は設定です。ここにduration:どれぐらいで完了させるか、easing:どのように振る舞うか、step:アニメーションのフレーム処理とでも言いましょうか、その時々でどのように処理するかを設定します。Math.ciel()は小数点の切り上げです。stepの細かさによって小数点が出てくるので、それを切り上げて処理してます。

completeの部分は僕が追加しました。これはアニメーションが終了した時に発動する、いわゆるcallbackで、終了時に$(this)つまりは各.social-countに対して.finishと言うクラスを追加します。カウントアップ自体には関係のない処理です。

ターゲットの要素が画面内に入った時の処理について

これは function view(){…}で行っています。
先ほどのanimateのcompleteの部分で.finishクラスを付けました。それはこのviewの部分で利用しています。

目的の要素が画面内に入った時に、カウントアップの処理が動作するようにしていますが、もしanimateの処理が終わったことがわからない場合は、スクロールするたびにカウントアップの処理が入ります。それがアニメーションの途中だと正しく元の数値が拾えずに、おかしな値が出てきたりします。そのため、条件で、!$(ターゲット).is(“:animate”)も入れています。!が入っていることが重要です。!は条件の否定で使われます。つまりは、animateの処理中であるかどうかを調べてアニメーションの途中である場合は処理しないということです。

.finishクラスは、要素が画面外に行った時に除去することで、再び画面内に入った場合はアニメーションの処理が行われます。

で、関数自体はそこそこの行数がありますが、実行部は

これだけという(笑)
ここで、どの要素に対して処理を行うかを設定します。処理的には$(ターゲット).each()を利用しています。なので、同じクラスを持つ数値を処理したい場合はそのクラスを入れるだけで、同じクラスの全ての数値がカウントアップ処理されます。

アニメーションしている数値を見ていただくとわかるように、evernoteのclip!部分は何も動いてません。clip!の部分には.social-countが入っていないからです。ここからも上記の意味合いが理解して頂けると思います。

注意点

Simplicityはカウントの出力をPHPとjQueryにてajaxで行っています。テキストが出力されるまでにスピンアイコンが回っている状態では数値が拾えないと思われるので、場合によっては、

が必要になるかも知れません。

$(window).on(“load scroll resize”){…}という設定をしているのですが、ajaxが行われた後に処理がしたいのでそこらを何とかしないといけません。

Simplicityを少し改造してみた part9 SNSボタンのカウント処理大改造
2015/09/30 追記 以下ブログカードの内容にこの記事の内容を更新しました。 またまたSNSボタンのカウント部分を改造して...

上記のカウント処理ならばページ中程のユーティリティ関数の部分で、

この部分に、

などと、クラス追加を仕込んで、今回のスクリプトの実行部分で、

などと仕込んでおけば、.ajaxendクラスがついている場合は処理して、そうでない場合は「まず」スルーするわけですが、スクロールしている内にカウンタ値が読み込めると思うので、次にスクロールした時にはカウントアップができるのではないかと思います。
jQuery( selecter ).text( count )が読み込まれるのは、すでにajax通信が終わって、カウントを出力する所なのでここらに追加するのが良いのではないかなぁと思ったりします(試してない(笑))

おそらくSimplicityのオリジナルのスクリプトでも同様の処理の部分があると思うので、そこらに追加すればよいのではないかと思います。
念の為。

こんなことしなくても、そのままでも動くような気もするし動かないかも知れないしで、ひとまず注意が必要と言う感じです。.ajaxendを追加しなくても動けばそのままでも良いですし、動かなかった場合は、追加の方向で。

スポンサーリンク

シェアする

フォローする