はじめまして。2011年入社の根岸と申します。
9月まで「あそんで♪HuggPet」というゲームのディベロッパーをしており、10月から新規ゲームのプロジェクト責任者（PS）をしております。
今回の記事では、「あそんで♪HuggPet」で使用している「ボタン」の実装方法について、少しだけお話させていただきたいと思います。
ボタンは押したらハイライトしてほしい
先日、居酒屋で「すみませ～ん！」と大声で店員を呼んだのですが、反応がありませんでした。
その後、すぐに店員が来たので問題無いと言えば無いのですが、私は店員に声が届いているのか不安で、危うくもう一度大声を出して呼ぶところでした。
もし、店員の「はい！ただいまお伺いしま～す！」の一言があれば、私は不安にならずに済みました。
店員には、呼ばれたらまず返事をしてほしいです。
これは、ボタンでも一緒だと思います。
日頃、スマートフォンのブラウザサービスを見ていると、ボタンを押しても視覚的な変化（Active効果）のないもの（特にゲーム）を時々見かけます。
押しても変化がないと、ユーザーはちゃんと押せたのか、押し間違えていないか、不安になってしまうのではないでしょうか？
ボタンを押した後、遷移に時間がかかるのはある程度仕方ないですが、ボタンが押されたらまずは視覚的に変化させて「ちゃんとココが押せているよ」ということを教えてあげるべきだと思います。
店員は、呼ばれたらまず返事をしてほしい。
ボタンは、押したらまずハイライトしてほしい。
リンクボタンを実装する上での問題点
「あそんで♪HuggPet」の初期の開発において、リンクボタンを、aタグを用いて次のように実装していました。
（良くない例です）
/* CSS */
<style type="text/css">
.btnRoundedRect{
font-size:20px;
line-height: 40px;
width:200px;
height:40px;
border-radius: 15px;
border:5px solid #FF85A3;
background-color:#FF3366;
text-align: center;
}
.btnRoundedRect a {
text-decoration: none;
display:block;
color:#FFFFFF;
}
</style>
/* HTML */
<div class="btnRoundedRect">
<a href="http://pet.ameba.jp">サンプル１</a>
</div>
しかし、この実装ではいくつかの問題がありました。
1. ブラウザのデフォルトのActive効果がイケてない
iOS端末、Android端末では、例えば次のようになります。
このデフォルトのActive効果はシステマチックで、HuggPetのデザインには合いませんでした。
2. Android端末のブラウザで、aタグのバグがある
HuggPetでは、ページ遷移を減らすために、擬似的なポップアップを使用しています。
これは、ベース要素の上に、ポップアップの要素をz-indexを用いて重ねているのですが、ポップアップ要素内をクリックすると、ベースの要素にあるaタグが反応してしまうバグがありました。
<再現方法>
1. 子に<a>を入れた要素A、Bを用意する
2. Bを「position:absolute」「z-index」を使ってAに重ねる
3. Aにある<a>をタップすると、Bを貫通してAの<a>が反応する
リンクボタンの実装方法
そこで私たちがとった実装方法は、
1. buttonタグ（divタグ）を使用
2. そのbutton要素に、タップ時のHover効果を、JavaScriptで追加
3. そのbutton要素に、タップ時の処理（ページ遷移）をJavaScriptで追加
というものでした。
しかし、全てのbuttonに対して、１つ１つjavascriptで処理をバインドするのは大変だし、ミスも生じやすいです。
また、JavaScriptの知識のないHTMLディベロッパーも開発に携わるため、プロジェクト進行上問題がありました。リンクを１つ追加するのに、Javascriptのできるディベロッパーに依頼しなくてはいけなくなってしまうのは、開発効率が悪いです。
そこで、
1. Active効果を追加するCSSクラス「enableActive」を作成し、そのクラスのある要素にJavaScriptでActive処理をバインド
2. ページ遷移処理を追加するCSSクラス「enableLink」を作成し、そのクラスのある要素にJavaScriptでページ遷移処理をバインド
という手段をとりました。
/* CSS */
<style type="text/css">
button{
background-color:transparent;
border: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btnRoundedRect div{
width:200px;
height:40px;
font-size:20px;
line-height: 40px;
border-radius: 15px;
text-align: center;
color:#FFF;
border:5px solid #FF85A3;
background-color:#FF3366;
}
.btnRoundedRect .active{
border-color:#DF2956;
background-color:#CA224B;
}
</style>
/* Javascript （jQueryが必要）*/
<script language="JavaScript">
<!--
$(function(){
//アクティブ効果を有効にする
$(".enableActive").on("touchstart mousedown",function(){
$(this).find("div").addClass("active");
});
$(".enableActive").on("touchend mouseup mouseout",function(){
$(this).find("div").removeClass("active");
});
//リンクを有効にする
$(".enableLink").on("touchend mouseup",function(){
alert($(this).data("link")+"に移動します。");
location.href=$(this).data("link");
});
});
//-->
</script>
/* HTML */
<button class="btnRoundedRect enableActive enableLink"
data-link="http://pet.ameba.jp">
<div>サンプル２</div>
</button>
実行結果は、以下のようになります。
最後に
ボタンをハイライトさせる実装の例として、「あそんで♪HuggPet」での実装方法をご紹介しました。
「あそんで♪HuggPet」は、ボタンのハイライトや、擬似的なポップアップ等、ユーザーの皆様に快適に遊んでいただけるように工夫しています。
今後も、スマートフォンブラウザで、より快適に遊べるゲームをつくっていきます。
最後までお読みいただき、ありがとうございました。