サーバーサイド編。。
優しく書いたつもりですが。。
やっぱり難しいですね(笑)
やってることは。。
この右側がこないだの話、今回は、左側のクライアントサイド（ブラウザー）で動かしている部分です。
HTMLとCSSからJS
全体の構成は、Chromeで、
にアクセスして、F12にしてデベロッパーモードで見ると、HTMLの記述とCSSの記述を連携して見れるので便利ですね。
<html>で囲まれた部分に、<body>があって、その中に、<div>で囲まれたエリアがあります。
キュンキュンのハートを、きゅんきゅん動かす
HTMLでは、きゅんきゅんボタンは、<div id=”QnnQnnbutton”>のところにあります。
<!-- キュンキュンボタン --> <div id="QnnQnnbutton" > <img id="kyunimg" src="img/kyunBtn.PNG"/> <div id="Gauge_Now" class="epoch gauge-small" ></div> <P>今のキュンキュン数</P> </div>
このキュンキュンボタンを定義しているCSS（スタイルシート）の部分は以下の記述です。
CSS3のbounceという方法で、動かして、Transform : scaleという方法で少し縮めて動きを付けています。
/*キュンキュン動きを定義*/
#QnnQnnbutton:active {
-webkit-animation: bounce 2s ease-in-out;
animation: bounce 2s ease-in-out;
}
@-webkit-keyframes bounce {
5% { -webkit-transform: scale(1.1, .8); }
10% { -webkit-transform: scale(.8, 1.1) translateY(-5px); }
15% { -webkit-transform: scale(1, 1); }
}
@keyframes bounce {
5% { transform: scale(1.1, .8); }
10% { transform: scale(.8, 1.1) translateY(-5px); }
15% { transform: scale(1, 1); }
}
/*キュンキュンボタンの画像*/
#kyunimg {
position: absolute;
zoom: 1;
/*中央に来るように*/
top: 50%;
left: 50%;
-webkit-transform : translateY(-50%);
transform : translate(-50%,-50%);
}
この部分だけを、CodePenで作ってみました。いろいろCSSの数値をいじってみて動きの変化をみてみてください。
See the Pen
heart-bouce by Tetsuya Tominaga (@tom2rd)
on CodePen.
CodePenいろいろ遊べるので、やってみるといいですよ。
CodePenの使い方は、こちらがいいかな？
カウントアップを動かすまで
他にもCSSやHTMLで工夫されているところありますが。。まずは このきゅんきゅんボタンが押された場合にどのように動くのか？、AudioファイルとJavaScriptの方の記述を見てみます。
まずはHTMLの方のAudioは、このように配置されています。id =”heeAudio” となっているmp3のファイルです。
<!-- キュンキュンボタンの音声 --> <div id="sound-file" class="audio"> <audio src="audio/hee.mp3" id="heeAudio"><p>audio 要素に対応したブラウザでは「へぇ」の音声ファイルの再生が可能です。</p></audio> </div>
さきほどのキュンキュンボタンのHTMLで、
<div id="QnnQnnbutton" >
と書かれているように、クリックされると、KyunkyunCountUP() という関数を呼びにいきます。こちらは、JavaScriptにありますので、その関数を見てみましょう。
// キュンきゅんを再生してCountUPのWEBサービスをコール
function kyunkyunCountUP()
{
// [ID:heeAudio]の音声ファイルを再生[play()]する
var audioElm = document.getElementById( 'heeAudio' );
// 初回以外だったら音声ファイルを巻き戻す
if( typeof( audioElm.currentTime ) != 'undefined' )
{
audioElm.currentTime = 0;
}
// 他人のキュンキュンをならす状態だと自分のキュンキュンで二倍なってしまうので再生しない
if(MonitorFlg == false)
{
audioElm.play();
}
// カウンタ更新
$.post('countup.php',{},{});
}
Audio Elementに先ほどの heeAudioをセットして、１回目以外だと巻き戻して audioElm.play() で再生
そして、 サーバーサイドのCoutup.phpを呼び出して実行させています。
ちなみに、$.postは、サーバーとのやり取りをするJqueryの関数で、このあたりを見ると分かりやすいかな？
さて。。これで 一連の、ボタンが押されて、ボタンが動いて、サーバーにカウントしろというところまで行きました。
あとは、カウントした値を読み込むところですが、少し複雑な作りになっているので。。
超簡単に訳すと。。１秒ごとに、このpushPointという関数が呼ばれ、Load.phpが動いて、データがクライアントサイドにきます。
// インターバル処理から呼ばれる関数 毎秒実行
var pushPoint = function()
{
// カウンター状況を取得
$.get("load.php",{LastTime : LastTime},
function(data)
{
｝