Hammer.jsを使ってフラッシュカードを作成してみた。
軽量JavascriptのHammer.jsを使って、フラッシュカード(カラー)を作ってみました。
フラッシュカードとは、目前でカードを高速で裏から表にめくって大量に見せることで、右脳が持っている驚異的な力を発揮させる実践的なプログラムです。
以前読んだ本で、ダウン症の子供にも効果的とあったので、いつか作ってみたいと思っていました。
今ではカードだけでなく、DVDをテレビに映すようなのもあるようです。
それならば、スマートフォンで使えるフラッシュカードを作りたくなったのがきっかけです。
たまたまなのですが、スマートフォンのタップやドラッグを取得できるJavascriptを見つけました。
http://eightmedia.github.com/hammer.js/
作ってみたのは単純なやつで、タップかドラッグをすると背景色が変わるというものです。
以下のサイトにアップしました。
http://sample.miyacomp.net/fc/
ちなみに、ソースはこんな感じ。
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>HTML5 Flash Card Toy</title>
<style>
body {
margin: 0;
padding: 0;
color: #fff;
}
#touchme{
width: 100%;
height: 100%;
position: absolute;
background-color: black;
}
</style>
</head>
<body>
<article>
<div id="touchme">
<span id="callout">タップかドラッグをしてね。</span>
</div>
<script src="hammer.js"></script>
<script>
var container = document.getElementById('touchme'),
shouts = []
shouts['tap'] = 'うまいうまい。';
shouts['dragend'] = 'じょうずだね。';
bgc = new Array();
bgc[0] = "#999999";
bgc[1] = "#ff9999";
bgc[2] = "#ff0000";
bgc[3] = "#99ff99";
bgc[4] = "#9999ff";
bgc[5] = "#0000ff";
bgc[6] = "#000000";
bgc[7] = "#ffffff";
bgc[8] = "#ff1493";
bgc[9] = "#008000";
bgc[10] = "#ffa500";
bgc[11] = "#800080";
bgc[12] = "#a52a2a";
var hammer = new Hammer(container);
hammer.ontap = hammer.ondragend = shout;
function shout(e){
callout.innerHTML = shouts[e.type] + 'もういちどできるかな？';
changebgcolor();
}
function changebgcolor(){
// before
var c = document.getElementById('touchme').style.backgroundColor;
// after
n = Math.floor(Math.random()*bgc.length);
document.getElementById('touchme').style.backgroundColor = bgc[n];
if (document.getElementById('touchme').style.backgroundColor == c) {
changebgcolor();
}
}
</script>
</article>
</body>
</html>
HTML5で作りましたので、対応していないブラウザでは利用できません。
お使いのブラウザが対応しているかどうかは、以下のサイトで確認できます。
http://www.findmebyip.com/litmus/
私が使っているスマートフォン(au ISW12HT)の標準ブラウザでは、動作しました。
Javascriptも面白いし、HTML5も面白い。
