【もくもく勉強会】キュンキュンボタンを支える技術2 クライアントサイド編 【HTML CSS JS】

サーバーサイド編。。

優しく書いたつもりですが。。

【もくもく勉強会】きゅんきゅんボタンを支える技術の勉強会 in サインカフェ【もぐもぐ会】
小平あたりでCivicTechでそもそもやりたかったこと。。 プログラマーや、ちょっとやってみたい方とか、こんなことしたいな~って人が集ま...

やっぱり難しいですね(笑)

やってることは。。

この右側がこないだの話、今回は、左側のクライアントサイド(ブラウザー)で動かしている部分です。

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の使い方は、こちらがいいかな?

【2019年版】CodePenとは?使い方や登録方法、WordPressサイトへの埋め込み方法まで解説
CodePenはWebブラウザ上でHTML/CSS/JavascriptをコーディングしてリアルタイムでプレビューできるWebサービスです。登録方法から基本的な使い方、Wordpressサイトへの埋め込み方法まで解説します。

カウントアップを動かすまで

他にも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をセットして、1回目以外だと巻き戻して audioElm.play() で再生

そして、 サーバーサイドのCoutup.phpを呼び出して実行させています。

ちなみに、$.postは、サーバーとのやり取りをするJqueryの関数で、このあたりを見ると分かりやすいかな?

$.post() | jQuery 1.9 日本語リファレンス | js STUDIO
Ajax通信によって送られるオプションを送信前に独自に制御したい場合に使用します。

さて。。これで 一連の、ボタンが押されて、ボタンが動いて、サーバーにカウントしろというところまで行きました。

あとは、カウントした値を読み込むところですが、少し複雑な作りになっているので。。

超簡単に訳すと。。1秒ごとに、このpushPointという関数が呼ばれ、Load.phpが動いて、データがクライアントサイドにきます。

 // インターバル処理から呼ばれる関数 毎秒実行
var pushPoint = function() 
{
// カウンター状況を取得
$.get("load.php",{LastTime : LastTime},
function(data)
{

}