0903 html5勉強会indh

phone：+81・3・３６６０・5884 url：www.co-tam-design.com コタムデザイン2・37・5・1203 Nihonbashi , Chuo-ku , Tokyo , JAPAN

09.03 HTML5セミナー


自己紹介

田村巧次たむら

こうじ

・フリーランス（コタムデザイン）http://co-tam-design.com/

http://venezia-works.com/

・RIA開発チーム： Venezia－Works(副代表)

1983年千葉県館山市生まれ。

2006年東京電機大学卒業後、船会社にてSE業務に就く。

勤務中に、WEBアプリケーションの設計、開発に携わる。

その後デジタルハリウッドにて1年間デザイン及びWeb製作に関する知識を身につける。2010年フリーランスとして独立。JWDA（日本WEBデザイナーズ協会）正会員。趣味はバレーボールと自転車。あとWEBが好き。

http://co-tam-design.com/

http://venezia-works.com/


目次

・HTML5とは？

・HTML5の追加要素&API


HTML5とは？


Wikipediaより抜粋HTML5 は

WHATWG によって2004年に定められたWeb Applications 1.0 に

Web Forms 2.0 を取り入れたものがW3C の専門委員会に採用され、W3C より2008年1月22日にドラフト（草案）が発表された。

現在、2014年までの正式勧告を目指して策定が行われている。

HTML5 は、プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォーム（JavaFX、Adobe Flash、

Silverlight

等）を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。そのため HTML5 が普及すれば

Adobe Flash などのプラグインは不要になるという意見があるが、アドビシステムズは社をあげて反論し Flash を擁護してい

る。

2008年以降に発表されたウェブブラウザの多くは HTML5 に段階的に対応している。Google Chrome 3.0 以降、Safari 3.1 以降、Firefox 3.5 以降、Opera 10.5、Internet Explorer 9 などであり主に<audio> 要素・

<video> 要素・ <canvas> 要素への対応が進んでいる（2010年3月現在）。

またWebSocket

など、当初 HTML5 の一部とされていたものの切り離され別の規格として策定作業が進められているものがある。

厳密には別仕様書として分離されているものの、一般的には、Web Storage・WebSocket・Geolocation

API・XMLHttpRequest

Level 2などもHTML5に含められることが多い。

W3C の

HTML5 Logo では以下のカテゴリを HTML5 に含めている。・セマンティックス -

HTML5の新タグ、RDFa、マイクロデータ、マイクロフォーマット・オフラインとストレージ -

App Cache、Web Storage、Indexed Database、File API・デバイスアクセス -

Geolocation

API、マイク・カメラ、アドレス帳・カレンダー、端末の向き・接続性 -

WebSocket、Server-Sent Event・マルチメディア -

audio, video要素・3D、グラフィックス、エフェクト -

SVG、canvas要素、WebGL、CSS3 3D・パフォーマンスと統合 -

Web Workers、XMLHttpRequest

Level 2・CSS3 -

WOFFも含む


要するに･･･現在のWEB標準を見直す。

||

新しいWEB標準を定める！！


HTML5は今までのWEBの概念を変えるもの。


なぜHTML5が登場したのか？

今まで制作者は、HTML4.01やXHTML1.0を利用してきました。

ブラウザの進化やインフラ環境の充実されることによって”WEB”で出来ることの可能制が広がってきました。


従来のHTML4.01やXHTML1.0の機能では物足りない！！


HTML5の追加要素&API

HTML5で追加になったもの。

HTML5 ＝Markup

＋ javascriptAPI


HTML5 Markupの特徴

・より明確な文書構造を作るため・よりインタラクティブな埋め込み要素・より高度な入力・出力・周辺技術、機能との親和性の向上と発展


Markup

XHTML1.0

<html> <head> <body><h1> <p> <img> <input>

HTML5<canvas> <audio> <video>

<header>

<footer>

<section><article> <nav> <aside>

<figure> <details>

<datalist> <meter>

<progress>

<time><mark><ruby>etc...

マークアップにも数多くの拡張がなされた。


Markup

広く浸透されているclass や

id をタグ要素として格上げ採用する。


Markup例えば...

<div id =”header” >→ <header>

<div id =”footer” >→ <footer>

etc..

セマンティックウェブを実現


代表的な新要素例

要素名0 意味

section 見出しに対する文章のまとまり

article 単独で配信される内容。ツイートやブログ記事等。時間が記載されるようなまとまり

nav 主要なナビゲーション

aside 補足や余談、広告など

header セクションのヘッダーまとまり

footer セクションのフッターまとまり


インタラクティブな埋め込み要素

今までは、外部API やプラグインなど、

HTML 以外の技術（php やflash）を併用しないと実現できなった機能のいくつかが、

標準のHTMLや

JavaScriptで比較的シンプルに実装できるようになる。


動画や音声、グラフィックの描画が可能になる。

動画

<video>

音声

<audio>

グラフィックの描画

<canvas>

ベクターデータの描画

<svg>


フォーム周りの機能強化入力した値の書式をチェックしたい<input type=emial><input type=range><input type=datetime>

:

入力した値の書式をチェックしたい<input type=”

text”

...required>

非フォーカス時にinput に文字を表示させたい

<input name="text" type="text" placeholder=" 例）東京都">


新要素まとめ

・セマンティックな要素

・インタラクティブな要素

・フォームの強化


HTML5はブラウザごとに実装状況が異なります。

でも、最新Verのブラウザは対応している。


じゃあどこでHTML5を使うのか？

スマートフォンサイトならほぼ問題なく実装できます！

でもPC サイトだと対応していないブラウザがある。


HTML5 を使ってWEB制作者がPC サイトで今すぐできること？？


マークアップです！！


互換性のあるタグを使えばいい!!


HTML5マークアップ概要

doctype宣言

HTML5 のdoctype

はすごくシンプルです。

<!DOCTYPE html>


charset の記述も簡単に。

<html lang="ja"><meta charset="utf-8">

<!DOCTYPE html>


HTML5 で書かれたWEB ページはもれなくその先頭にHTML5 のDoctype

をもっています。

video タグやcanvas タグを使わなくても

それだけでHTML5 のWEB ページ

になります。


HTML 構造


<aside>英語だと「脇へ」「本題から離れて」その意味のとおり、このタグはWEBページ内のあまり

重要ではない箇所を指し示すために使います。


<section>「英語は節」。

WEBページ内で見合いの異なるパートをそれぞ節としてまとめるときに使用します。


<article>英語だと「記事」「論説」の意。WEBページ内の記事部分を指し示す場合。

単独で配信される内容。ツイートやブログ記事等。時間が記載されるようなまとまり。


<nav>主要なナビゲーション部に使います。

<header>ヘッダー部に使います。

<footer>フッター部に使います。


HTML5 構造


これなら簡単に使えそうですね！


実際に使用するには少し準備が必要です。

Ver9以下 Ver3以下 Ver11以下


①「html5.js」というjs

を読み込むhttp://remysharp.com/2009/01/07/html5-enabling-script/


②新しいタグにスクリプトやスタイルを当てないで利用する。


aside タグを使う場合IE9 以前などの未対応ブラウザに対応する為、aside タグをブロック化。

.css aside{ display:block; }

IE9 未満のブラウザでブロックタグとして認識される。


aside タグを使う場合aside タグとdiv タグの2 重入れ子で対応。

<aside><div class=”aside”

>

サイドバーなどが入ります。</div>

</aside>

div 要素にスクリプトやスタイルを当てることで、新しいタグを認識できないブラウザでも対応することができます。


仕事でHTML5を使うために。

HTML5 で作られたサイト集。実際にどのような構造で組み立てられているのかを研究してみましょう。

http://html5gallery.com/

次は私たちの番です！！！

ローソン：http://www.lawson.co.jp/index.html霧島酒造：http://www.kirishima.co.jp/無印良品：http://www.muji.netニッスイ：http://www.nissui.co.jp/

アメリカ合衆国政府公式サイト：http://www.usa.gov/

http://html5gallery.com/


JavaScript API

WEB アプリケーションを実装するためのJavaScript API（js

関数群）も標準化された！


JavaScript APIDrag＆Drop/FILE API

ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File APIを組み合わせることで、ファイルの中身まで扱うことが出来るよ

うになります。

Web Storage/Web Database

Web Storage/Web Database とは、クライアントサイドにデータを永続化するための仕組みで、オフラインWeb アプリケーションを作成する上で非常に重要なテクノロ

ジーです。SQL を用いた柔軟なデータアクセスを行える、リレーショナルデータベースを扱うための仕様がWeb Database です。


JavaScript APIGeolocation

API

プログラム（JavaScript）が実行されている位置の情報を取得することができます。

Web

SocketWeb Sockets は、サーバとの双方向通信を実現するための非HTTP 通信を

、Web

アプリケーションから行えるようにするための仕様です。HTTP では実現が容易でなかった、サーバからのデータプッシュ等をスマ

ートに実現するための技術として、非常に注目されています。

Web WorkersWeb Workers は、Web アプリケーションにおいてバックグラウンドでの処理実行を実現するための技術です。WEBをアプリケーションたらしめる


HTML5で未来はどうなる？

現在、世間で注目されている広義の意味でのHTML5とは、

OPEN WEB Technology

Platform

■HTML5仕様はOpen Webの礎

■HTML5 = W3CのHTML5仕様


OPENであるということは

■ロイヤリティーフリー

■互換性

■持続性

■信頼性

あらゆる母国語のため

ハンデキャップを持つ人のため

あらゆるデバイスのため


マルチ・デバイスiPad

iPhone

Androidスマートフォン

PC

TV

開発環境がシフトしている。

各プラットフォーム内で動くアプリケーションが共通化

されてきた！

各プラットフォーム専用の言語を覚えなくてよい。


開発環境のシフト

・HTML + JavaScript + CSSを使ってアプリケーションを開発する環境

・HTML5のAPIを数多くサポート

・Hardware機能へアクセスできるJS API を提供


究極は、

クロームOS。

私たち制作者は制作環境の整ったPCが必要ですが、

一般のユーザーはPCのほぼ大半はブラウザで時間を過ごしている。


プラットフォームのシフト

OSからブラウザーのシフトこのような可能性は十分にありうる。

JavaScriptが今後来る！！絶対に必要！とされている。


HTML5時代のスキル

デザイナー：デバイスごとのUXをよく理解したデザイナー！！！

プログラマー：jsによるフロントエンドプログラミング、データ蓄積・出力を意識し

たシステム開発ができる！！！


ご静聴ありがとうございました。

0903 html5勉強会indh

Documents