22. window.msPerformance
新しいパフォーマンス計測機能：W3C Web Timing に準拠
<script type="text/javascript">
var w = window;
var navStart = w.msPerformance.timing.navigationStart + "ms";
var navStartTime = Date(w.msPerformance.timing.navigationStart);
</script>
22
23. Canvas
Javascript で 2D の図形を描くことができるブロック要素
描画方法: path, box, circle, text, ラスターイメージ
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
23
25. HTML5 <video>
HTML5 <video> タグをサポート
業界標準の MPEG-4/H.264 動画
動画はページ上の他の要素と組み合わせ可能
HTML コンテンツ、画像、SVG グラフィックス
GPU 支援による再生
属性
src – ソースファイルの場所を指定
autoplay – 準備でき次第自動再生
controls – 操作パネルを表示
preload – ページロード時に動画のロードも開始
loop – ループ再生
height & width – プレイヤーのサイズを指定
<video src="video.mp4" id="videoTag" width="640px" height="360px">
<!-- Only shown when browser doesn’t support video -->
<!-- You Could Embed Flash or Silverlight Video Here -->
</video>
25
26. HTML5 <audio>
HTML5 <audio> タグをサポート
業界標準の MP3 と AAC audio
DOM 経由でスクリプト操作可能
属性
src – ソースファイルの場所を指定
autoplay –準備でき次第自動再生
controls – コントロールパネルの表示
preload – ページロード時に、オーディオのロードも開始
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- Only shown when browser doesn’t support audio -->
<!-- You could embed Flash or Silverlight audio here -->
</video>
26
27. WOFF フォントと @font-face
クライアントにないフォントでも、自由に利用可能に
Web Open Font Format で、サイトごとにフォントを配布
@font-face 宣言によりフォント指定
OpenType や TrueType フォントを再パッケージ
W3C Fonts Working Group により策定
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt MyFontName, sans-serif;">
This will render using MyFontName in FontFile.woff
</div>
27
28. CSS3 Media Queries
メディアのプロパティに応じて、スタイルを自動選択
<link href=‚mobile.css" rel="stylesheet"
media="screen and (max-width:480px)" type=‚
text/css" />
<link href=‚netbook.css" rel="stylesheet"
media="screen and (min-width:481px) and (max-
width: 1024px)"
type="text/css" />
<link href=‚laptop.css" rel="stylesheet"
media="screen and (min-width:1025px)" type="text/css" />
28
