AngularJSでいいねボタン作成

利用するもの

・AngularJS
　ボタンクリック時などの各種機能を作る際に利用します。
　※当記事は、AngularJSをある程度理解していることを前提で書いています。
　AngularJS — Superheroic JavaScript MVW Framework

・propellerkit
　いいね数を表示するバッジを作る際に利用します。
　propeller.in　

・font awesome icons
　いいねボタンのデザインを作る際に利用します。
　fontawesome.io

ボタンデザイン

　完成形がこちらになります。
　

　早速HTMLを見てみましょう。

<div data-badge=0 class="material-icons pmd-md pmd-badge pmd-badge-overlap">
　<i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i>
</div>

　単純ですが少し解説してみます。

<i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i>

　この部分が　　にあたります。

<div data-badge=0 class="material-icons pmd-md pmd-badge pmd-badge-overlap">
</div>

　この部分が青色のバッジにあたります。
　バッジをつけたい箇所に囲むかたちで使用します(今回は　　ですね)

　「data-badge」の部分でバッジに表示する値を代入します。
　今は仮処理として初期値である「0」を代入しています。

クリックすると値が増える機能

　例えば
　
　この状態でボタンをクリックすると

　
　こうなる
　要はバッジの数が１つずつ増えていく機能です。

　ここからはAngularJSを利用していきます。
　
　ざざっとコードを見ていきましょう。
　まずはHTMLです。

<div data-badge={{good}} class="material-icons pmd-md pmd-badge pmd-badge-overlap">
<i class="fa fa-thumbs-up fa-lg" aria-hidden="true" ng-click="clickEvalute()"></i>
</div>

　次にJavascriptです。

$scope.good = 0; 
function clickEvalute(){
　$scope.good += 1;
}

　※AngularJSの基本的なところは省いています。

　こちらも単純ですのでざっくりと解説します。
　
　ポイントは主に2つあります。

　1つ目は「data-badge」の部分です。
　先ほどは仮処理として直接「0」を代入していましたが、これを「{{good}}」におきかえ、
　javascript側で「good」に初期値の「0」をセットしました。
　
　2つ目は「ng-click」の部分です。
　ボタンをクリックするとjavasciptの「clickEvalute」関数が動作し、
　「good」に1が加算されます。
　加算した結果は「data-badge」の部分に反映されます。

　以上で「クリックすると値が増える機能」が完成です。

クリックするとデザインが変わる機能

　例えば
　
　この状態でボタンをクリックすると

　
　色が薄くなります。
　クリックしたかどうかを判別しやすくなります。

　この機能もAngularJSを利用します。

　まずはHTMLです。

<div data-badge={{good}} class="material-icons pmd-md pmd-badge pmd-badge-overlap">
<i class="fa fa-thumbs-up fa-lg" aria-hidden="true" ng-click="clickEvalute()"ng-style="goodStyle"></i>
</div>

　
　次にJavascriptです。

$scope.good = 0; 
$scope.goodStyle = "";
function clickEvalute(){
　$scope.good += 1;
　$scope.goodStyle = {color:'gray'};
}

　変更点は「ng-style」の部分のみです。
　ボタンをクリックして「clickEvalute」関数が動作すると、
　「goodStyle」にクリック後のスタイルが代入されます。
　これが「ng-style」に反映されることで、デザインを変更することができます。　
　
　
　

1度しかクリックできない機能

　一般的な「いいねボタン」は一度に何回もクリックできるものではないので、
　一度クリックすると、その後はバッジの値もデザインも変化しないようにしたいですね。

　色々とやり方はありますが、恐らく一番単純なのがフラグを利用する方法だと思います。

　変更するのはJavascriptのみです。

$scope.good = 0; 
$scope.goodStyle = "";
$scope.goodFlag = false;
function clickEvalute(){
　if(!$scope.goodFlag){
　　$scope.good += 1;
　　$scope.goodStyle = {color:'gray'};
　　$scope.goodFlag = true;
　}
}

　「goodFlag」の初期値をfalseにして、
　「clickEvalute」関数が動作したときに「goodFlag」がfalseならば
　バッジの値とデザインの変更を行います。
　
　最後に、1度クリックした証として「goodFlag」をtrueにすれば
　2度目以降に「clickEvalute」関数が動作したときには、バッジの値やデザインの変更が
　行われない仕組みとなっています。

　
　本当は「ng-disabled」を使った方法を利用したかったのですが、
　調べてみるとbuttonにしか動作しない(?)ようなので、このような方法となりました。

　案外単純で簡潔なコードで作ることができて驚きです。
　ng-styleを使えばもっと色々なデザインが作れそうですね。
　時間があれば他の方法も模索していきたいと思います。
　
　以上です。