HTML5では、デバイスの傾きや加速度といったスマホやタブレット端末独特のセンサーの情報を

JavaScriptで読み取ることが可能です。

古い機種などでは対応していない場合もありますが、

スマホやタブレット端末でのインターネット利用がとても多くなっている今、

こういったPCにはなかった情報を利用することも表現方法を模索する上で無視できなくなってきています。

今回はその情報のひとつである、重力加速度（デバイスの傾き）を読み取って、

色が変化するアイコンを、jQueryとWebフォントを利用して作ってみました。

ちなみにこの重力加速度（デバイスの傾き）は、iOS4.2 Android 3 以上で利用可能です。

（Android2.3系でも、最新のfirefoxなど、利用可能なブラウザもあります。）

↓こちらが作ってみたもの(iOS4.2 Android 3 以上のスマホ、タブレット端末で見られます)

DEMO

方法

まずはWebフォントのアイコンを用意します（詳しくはこちら）。

HTMLでWebフォントを適用した要素を配置します。

HTML

HTML

XHTML

<p class="icosnow"><span class="snow1">s</span></p> <p class="icosnow"><span class="snow2">s</span>　　　<span class="snow3">s</span></p>

1 2	<p class="icosnow"><span class="snow1">s</span></p> <p class="icosnow"><span class="snow2">s</span>　　　<span class="snow3">s</span></p>

今回は’s’にアイコンをあてはめています。

 

 CSS

@font-face { font-family: 'icosnow'; src:url('fonts/icosnow.eot?wsol0r'); src:url('fonts/icosnow.eot?#iefixwsol0r') format('embedded-opentype'), url('fonts/icosnow.woff?wsol0r') format('woff'), url('fonts/icosnow.ttf?wsol0r') format('truetype'), url('fonts/icosnow.svg?wsol0r#icosnow') format('svg'); font-weight: normal; font-style: normal; } .icosnow { font-family: 'icosnow'; speak: none; font-size: 128px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: center; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

@font-face { font-family: 'icosnow'; src:url('fonts/icosnow.eot?wsol0r'); src:url('fonts/icosnow.eot?#iefixwsol0r') format('embedded-opentype'), url('fonts/icosnow.woff?wsol0r') format('woff'), url('fonts/icosnow.ttf?wsol0r') format('truetype'), url('fonts/icosnow.svg?wsol0r#icosnow') format('svg'); font-weight: normal; font-style: normal; }   .icosnow { font-family: 'icosnow'; speak: none; font-size: 128px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-align: center; line-height: 1;   /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

 

JavaScriptでデバイスの動きのイベントが発生する度に、重力加速度（デバイスの傾き）を読み取ります。

そしてこの値をcolorにあてはめて色を変えます。

重力加速度はおおよそ-9.8〜+9.8の値を取るようですので、

255 ÷ 9.8 ≒ 26 ですので、重力加速度を26で割った値をrgbそれぞれにあてはめます。

今回はこのままだと若干暗めの色になってしまうため、さらにその値と255の平均値を使いました。

JavaScript

JavaScript

JavaScript

$(function(){ //デバイスが動くたびに実行 window.addEventListener("devicemotion", function(evt){ //重力加速度(傾き)からRGBにあてはめる値を計算 var xg = parseInt((255 + Math.abs(evt.accelerationIncludingGravity.x * 26)) / 2); var yg = parseInt((255 + Math.abs(evt.accelerationIncludingGravity.y * 26)) / 2); //colorのrgbに値をあてはめる $(".snow1").css("color", "rgb(" + yg + "," + xg + "," + 0 + ")"); $(".snow2").css("color", "rgb(" + 0 + "," + yg + "," + xg + ")"); $(".snow3").css("color", "rgb(" + xg + "," + 0 + "," + yg + ")"); }, true); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$(function(){ //デバイスが動くたびに実行 window.addEventListener("devicemotion", function(evt){   //重力加速度(傾き)からRGBにあてはめる値を計算 var xg = parseInt((255 + Math.abs(evt.accelerationIncludingGravity.x * 26)) / 2); var yg = parseInt((255 + Math.abs(evt.accelerationIncludingGravity.y * 26)) / 2);   //colorのrgbに値をあてはめる $(".snow1").css("color", "rgb(" + yg + "," + xg + "," + 0 + ")"); $(".snow2").css("color", "rgb(" + 0 + "," + yg + "," + xg + ")"); $(".snow3").css("color", "rgb(" + xg + "," + 0 + "," + yg + ")");   }, true);   });

 

今回作ったものはかなり大きく傾けないと色の変化がわかりづらいですが、

応用すればアクセントなどに使うことができるかもしれません。