HTML5の最新技術を知ろう│東京のWeb制作会社のHTML5関連コラム

Columnコラム

ITトレンド・最新技術

HTML5の最新技術を知ろう!~その2~

HTML5の最新技術を知ろう!~その2~

2015/12/25
このエントリーをはてなブックマークに追加

html5の技術を使ったトレンドを紹介させてもらいます。

今回紹介するのは、前回紹介したhtml5を使ったゲームの続報です。
前回の記事をまだ読んでないよ!という方は気が向いたら、
こちらから読んでいただければと思います

カギはジャイロセンサー

前回紹介させていただいたゲームもびっくりするぐらいきれいでしたが
さらなる驚きが用意されていました。

そのカギとなるのは、「ジャイロセンサー」でした。

ジャイロセンサーって何?と思う方もいるかもしれませんが
実は、今やほとんどの人が触れる機会があるものなのです。

例えば、スマホの向きを変えると自動でスマホの向きを判断して
画面が縦や横に切り替わる機能がありますよね、
あれを判断するのに使われているのがジャイロセンサーです。

ジャイロセンサーとは、「角速度」の計測、つまり回転の動きやその速さを検知することができるセンサーです。
身の回りでは、先ほど紹介したスマホやデジタルカメラの手ぶれセンサー、カーナビなどに使われています。

ジャイロセンサーで回転を計測する機能を使うということは
すでに、お気づきの方もいるかもしれません

そうハンドルになるのです!!

kato_2015-10-12_01.jpg

スマホがハンドル


先日、W3Cの方と打ち合わせをした時に
デモの一つとして見せていただき存在を知りました。

パソコンの画面にQRコードが表示され
それをジャイロセンサーをオンにしたスマホで読み込むと
前回紹介したゲームが起動します。

前回紹介したものでは、操作方法はキーボードを使ったものでしたが、
スマホをハンドルとして使用する方法に操作方法が変わっていました。

まず、パソコンでゲームのページにアクセスし
そこに表示されたQRコードを読み込まれたURLにアクセスすると
パソコンとスマホの画面が切り替わりそれぞれ読み込み中の画面が表示されます。

そして、読み込みが完了するとパソコンの画面がゲーム画面に
スマホの画面が操作方法を表示したものに切り替わります。

そして、ゲームがスタートしスマホをハンドルのように右や左に切ると
パソコンの画面内でマシンが同じ動きをするのです。

すごいですよね!

kato_2015-10-12_02.jpg

もう一つすごいこと

ジャイロセンサーでゲームができることもすごいのですが
実は、もう一つすごいことがあります。

それは、ゲームを行っている2台の端末がインターネットで同期していることです。
bluetoothなどを使った近距離で端末をぺアリングするものは以前よりありました。
ですが、htmlだけでリアルタイムでの同期通信を行っているのはすごいと思います。

まとめ

2回にわたり、html5の機能をゲームというアプローチで紹介しましたが、
いかがでしたでしょうか?html5には可能性があると思います。
他にもまだまだ、面白いものや、すごいと思うものがたくさんあります。
機会があれば、随時紹介していこうと思います。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

関連コラム

HTML5の最新技術を知ろう!

text_totop