富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. HTML
  3. ブログ

意外と知らないHTML5でなにができるかまとめてみました。

top

皆さんお疲れ様です。
プログラマの湊です。

数年前よりWeb業界で話題となり大人気となったHTMLの最新の仕様の「HTML5」。
とりあえず最新だからという理由で使っている人も多いかもしれません。
今回は、実際何ができるかわかりずらいこのHTML5で何ができるかを調べてみました。

これまでのHTMLとHTML5の違い。

はじめにいっておきますが、HTML5といってもまだ現段階で
草案であり実は仕様は固まっていません。
今後の流れによっては仕様が大きく変わってくる可能性もあるということを踏まえておきましょう。

さて、これまでのHTML4は、一般的に「XTML」というマークアップで、
記載の仕方は複数ありました。

これまでのHTMLの宣言方法

Strict (厳密型)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Transitional (移行型)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Frameset (フレーム設定用)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

いわゆるDOCTYPE宣言といわれる部分で、それぞれの記載によって
実は微妙に同じブラウザであっても表示のされ方がバラバラで
コーダー泣かせの一因となっていました。

HTML5の宣言方法

<!DOCTYPE html>

逆にHTML5では宣言の方法が簡略化され、見た目もすっきり!

とってもわかり易くなっております。

さらにHTML4より新たに増えたタグを使用することで、
HTMLの記載だけでウェブの構造がわかりやすくなり、
これからのSEOでも大きな要因となり得るかもしれません。

HTML5で追加されたタグの一例

<header>
<nav>
<section>
<article>
<footer>

当然最新の技術であることで、実は検索エンジンでも若干の有利であるという噂がある反面、
新しいタグは、古いブラウザには対応しておらず、別途対応が必要になってきたりします。
※よく使われるのはJavaScriptで対応するHTML5.jsというものがあります。
https://code.google.com/p/html5shiv/

 

男は黙って最新技術を使え!〜あしたのために~

「そんな小手先の技術はいらない!」
漢と書いて「おとこ」という猛者なあなたの為に、
いよいよ本題の追加技術を教えましょう!

 

2

あしたのために その1.動画や音声をHTMLから使え!

これまでのHTMLでは、動画を使うには「Flash」を使っていました。
HTML5では動画も音楽も<video>や<audio>タグを使用することで、
簡単に扱えちゃいます。
■参考
http://www.tagindex.com/html5/embed/video.html
http://www.tagindex.com/html5/embed/audio.html

 

 

 

・・・・え、
そんなの「Flash」使えばいいじゃんという生意気なあなたは次を見てください。

 

あしたのために その2.3Dを堪能せよ!

やっぱりなんといっても3D表現を使えるのが、HTML5の特徴!
これによりこれまでの2次元表現から3次元の表現が増えたことで、
さらにウェブでの表現の幅が増えることでしょう。
いわゆる「WebGL」といわれる技術を使ったAway3Dフレームワークを使っての
デモでは下記のようなものがあります。
■Away3Dのデモ
http://ics-web.jp/lab-data/140101_away3d_ts/4_camera.html
http://ics-web.jp/lab-data/140101_away3d_ts/5_model_ex.html
■参考
http://ics-web.jp/lab/archives/1129

3Dゲーム大好きな自分としてはかなりうはうはな技術で、
IEさえ滅んでくれれば、仕事でも使うことがでてくるかもしれません。

 

 

 

・・・・なになに?・・・
それもFlashでもUnityでもできるだろという天才肌なあなた!
HTML5でできることはまだまだあります。

あしたのために その3.フォームはHTMLで簡単チェックしろ!

これまでのHTMLではテキスト入力では「<input type=“text”>」しか対応していませんでした。
HTML5を使うことで入力する値によってフォームの入力タイプを設定することで簡単チェックが行えます。
■例:メールアドレスの入力場合
<input type=“email”>
■例:必須項目にしたい場合
<input type=“text” require>
■例:未入力時にテキストを出したい場合
<input type=“text” placeholder=“テキスト”>

 

 

 

・・・・ん?
そんなのJavascriptでもできるだろというせっかちなあなた!
まだ待ってください!こんなものではありません。

あしたのために その4.CSS3を駆使し、表現の幅を広げろ!

HTML5とセットで紹介されるCSSの新しい技術「CSS3」を使えば、
下記のような技術も画像やJavascriptを使わなくても簡単に実現できるでしょう。
・透過処理
・角丸
・ドロップシャドウ
・線形グラデーション
・円形グラデーション
・回転
・縮小
・傾斜
・アニメーション
これまでプログラマしか難しかったJavascriptを使用しなくてもアニメーションが使えるのが、
かなり大きな技術改革になりますね!

 

 

 

 

・・・・んん?
それは、CSSの技術であってHTML5ではないよね?っていう意地悪なあなた!

あしたのために その5.漢は黙ってモバイルアプリ!

HTML5の改新によって、ウェブでの表現の幅が広がり、
iPhone、AndroidといったモバイルアプリをHTMLでも作ることができる時代になりました。
各モバイルアプリを作る為には、Object-CやJavaの各開発言語よりプログラムを記載する必要があったのに対し(ネイティブアプリ)、HTMLで作成することにより「だれでも、簡単に」開発の難易度が大きく下がりました。(ハイブリッドアプリ)
もちろんネイティブアプリと比べると表現できることや、精度は下がりますが、簡単なアプリであればハイブリッドアプリで済ませれることが多いです。

 

4

いかがでしたでしょうか。
今後も大注目のHTML5!
みなさんもぜひ試してみてくださいね!

この記事を書いたスタッフ