Web関連

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

0

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の最新技術を知ろう!

0

マーケ担当必見!国内ECマーケティングオートメーション(MA)事例前のページ

Web制作会社が教えるDDos攻撃からのWEBサイトを守る方法次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    改めて知っておこう!アドテクノロジーの種類と手法の説明

    昨今様々なインターネット広告の形態が浸透していますが、その中でも見…

  2. Web関連

    One to Oneマーケティングへの道(1)~DMPとは?~

    今回のテーマは、 「One to Oneマーケティング」。今後も継続的…

  3. SEO関連

    ブログを書く時に注目すべきSEO対策まとめ~前編~

    ブログ記事にもSEO対策!どうも、デザイナーの尾崎です。これま…

  4. Web関連

    「Sass」で神速コーディング!? 概要編

    ページのレイアウトに必須になっているCSS(Cascading Sty…

  5. Web関連

    Web制作者が見落としがちなユーザーのスマホUIについて

    Webページ制作者や担当者の視点では、ついつい見落としがちになってしま…

  6. Web関連

    【人工知能・AI×インバウンド】災害時必ず必要になる情報収集手段

    災害時、自分の身を守るのに一番大事なのものは情報です。もちろん…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AI関連

    AIチャットボットが向いている分野
  2. AIさくらさん

    SEO対策はCHATさくらさんにお任せ!
  3. AI関連

    知らないと損する!令和の不動産テックがめちゃくちゃ便利な件
  4. Web関連

    WordPressのセキュリティ対策プラグイン『SiteGuard WP Plu…
  5. AI関連

    【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
PAGE TOP