HTML5の新機能について

社内勉強会でHTML5の新機能について話をしたときの資料です。

Transcript

1. HTML5の新機能紹介 2016-10-07 fixpoint 社内勉強会資料
2. 目次 1. 用語整理 2. 注意事項 3. HTML5の新機能 4. まとめ
3. 用語整理  HTML5 – 最新のWeb技術、特にWebページを形作るHTMLというものの最新規格 – CSSやJavaScriptなども、意味合いとして含まれる  HTML – Webページの入力部品などを配置するための言語  CSS – HTMLで作成されたWebページに色やデザインを設定するための言語  JavaScript – HTMLやCSSと連携するプログラミング言語
4. 注意事項  HTML5はまだ主要なブラウザでも対応が終わっていない – 使えない機能もある  Web上にある記事はあまり信用できない – HTML5が本決まりするまで紆余曲折あったため
5. HTML5の新機能 ※一部のみ紹介  動画や音声の再生  高度なグラフィック処理  ドラッグ&ドロップ機能
6. 動画の再生  <video>という新しいタグ  字幕、音声の切り替えなどにも対応  HTML, CSS, JavaScriptを使ったカスタマイズ – 動画を再生しながら、変換処理を行う – ぼかし、フェードイン、フェードアウトなど 例: http://html5doctor.com/video-canvas-magic/
7. 音声の再生  <audio>という新しいタグ  音声の合成や高度な編集も可能 – 街頭の音声から、人の声だけ抜き出すなども技術的には可能 例: http://labs.dinahmoe.com/ToneCraft/
8. 高度なグラフィック処理  2D, 3Dの両方が使える  画像編集、3Dポリゴン作成などにも応用可能 例: https://www.draw.io/ : http://clockmaker.jp/labs/140102_away3d_ts_particle/
9. ドラッグ&ドロップ機能  これまで、JavaScriptで頑張らないとできなかった機能  ファイルをブラウザにドラッグ&ドロップ  Webページ中の部品をドラッグ&ドロップ 例: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
10. まとめ  HTML5の新機能を紹介した – 動画や音声などの扱いがかなり良くなっている – よりリッチなWebページを作ることができる