html5 for designers (html5 時代の web デザイナーの新常識)

117
HTML5 for Designers Slides @ Firefox DevCon 2011 in Osaka by Tomoya ASAI (dynamis)

Upload: dynamis-

Post on 22-May-2015

6.256 views

Category:

Technology


1 download

DESCRIPTION

Firefox Developer Conference 2011 in Osaka で使用したスライド http://mozilla.jp/events/2011/fxdevcon-osaka/ 公開用に一部修正やスライド追加しました

TRANSCRIPT

Page 1: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

HTML5 for DesignersSlides @ Firefox DevCon 2011 in Osaka

by Tomoya ASAI (dynamis)

Page 2: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Web デザイナーの新常識

~ HTML5時代の CSS..............デザインとセキュリティ~

Page 3: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

サイト、ツール、ライブラリなどは別スライドで紹介:

http://dynamis.jp/r

Page 4: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

早期公開リクエストが多かったので現状公開今週中に一度更新予定

トークセッションで拾うつもりが拾えなかったネタなど少し追加予定スライドだけ見る人用に加筆修正も

Page 5: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

about:me Tomoya ASAI (dynamis) Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter dynamis mozilla-japan.org@

dynamis (古代ギリシャ語 dunamis) は「でゅなみす」と読んでください

Page 6: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Agenda

Page 7: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

about:Mozilla Firefox.Future CSS Design Mobile Web Animation Security

Agenda

Page 8: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

about:mozilla.com brain .org heart

Page 9: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 10: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

about:Firefox Firefox の意義

オープンで適切な実装の提供 Firefox の目的

公共のリソースとしてのインターネットの発展を促進

Page 11: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 12: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 13: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 14: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 15: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 16: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 17: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

.com brains - 会社組織 営利企業同様の開発スタイル 社員は全世界で 300 人程度

.org heart - 非営利組織 より良いインターネット環境へ 1000 人以上がコードを貢献

about:Mozilla

マニフェスト: http://www.mozilla.org/about/manifesto.ja.html

Page 18: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Firefox.FutureRapid Release...

Page 19: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Rapid Release リリースプロセスを変更

スケジュールベース Aurora チャンネルを新設

Nightly, Aurora, Beta, Release

http://blog.mozilla.com/channels/

Page 20: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

アドオン互換性について 今後はデフォルトで互換

対応バージョン書き換え不要 問題のある場合だけ非互換

機械的 & フィードバックで検出

https://dev.mozilla.jp/2011/04/add-on-compatibility-rapid-releases/

Page 21: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

自動更新について Firefox 4 以降は自動更新

起動時に自動バージョンアップ

Firefox 4.0.1 の次は 5 の予定 セキュリティや安定性の更新は機能の更新と共に提供

緊急セキュリティリリース除く

Page 22: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

来週 Beta チャンネルへ 6/21 リリース予定

Firefox 5

5/14 時点では Aurora チャンネル、来週 Beta にhttps://developer.mozilla.org/en/Firefox_5_for_developers

Page 23: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

ユーザインターフェイス 基本的には変更なし リリースチャネル変更機能

「Firefox について」画面に

Page 24: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

パフォーマンス 非表示タブのタイマー間隔長く Canvas の一部高速化 querySelector 高速化 HTTP 通信周りの高速化

https://developer.mozilla.org/en/Firefox_5_for_developers

Page 25: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Web Technologies CSS Animations サポート

期限数時間前にチェックイン...

setTimeout() を最短 4ms に XHR の loadend イベント createImageData() サポート

https://developer.mozilla.org/en/Firefox_5_for_developers

Page 26: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

再来週 Aurora チャンネルへ 8 月リリース見込み ユーザ向けの変更は少ない Web 開発者向けの変更

Firefox 6

5/7 時点では Nightly チャンネルのビルド

Page 27: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Web Technologies text-decoration 系スタイル ハイフネーション サポート matchMedia() サポート

https://developer.mozilla.org/en/Firefox_6_for_developers

Page 28: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

その他 URL バーでドメインを強調表示 マイクロサマリーサポート廃止

使ってる人いますか?

https://developer.mozilla.org/en/Firefox_6_for_developers

Page 29: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

アプリプラットフォーム アプリをインストール アプリに応じた UI

アカウントマネージャ サイトのアカウントを管理

コンテンツプロセス分離

Firefox 7, 8, 9...

5/7 時点ではデザイン中やプロジェクトレポジトリでの開発

Page 30: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

アプリ in Firefox Web アプリボタン? Web アプリダッシュボード? まだまだデザイン検討中...

注意: スクリーンショットは現時点で提案されている UI の一部です

Page 31: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

ページ共有 (リンク送信) F1 プロジェクトの統合 Twitter, Facebook などで簡単にリンクを共有できるように

https://wiki.mozilla.org/Labs/F1

Page 32: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

新グラフィックス API Azure Project 2D Graphics API を置き換え

Cairo から Azure へ GPU をフル活用できる API に Windows 以外でも高速に

http://blog.mozilla.com/joe/2011/04/26/introducing-the-azure-project/

Page 33: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

新 JavaScript エンジン Incremental & Generational GC

GC 時間の短縮化 型推測 JIT エンジン

型チェックを減らして高速に IonMonkey

中間言語を最適化しやすく変更

http://blog.mozilla.com/dmandelin/2011/04/22/mozilla-javascript-2011/

Page 34: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Web をより豊かに text-overflow: ellipsis Full-screen API Media Capture API Server-Sent Dom Events サイト別データ管理 UI などなど...

Page 35: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

and more... アドオンパフォーマンス情報 ユーザプロファイル初期化 about:memory 刷新 開発者ツールの改善 ECMAScript Harmony

Page 36: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Design

Page 37: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS DesignWeb FontsFont ControlLess ImagesCSS Transforms

Page 38: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Web Fonts ダウンロードフォント Firefox 3.6 からは WOFF も

IE9 なども WOFF サポート iPhone は WOFF 未サポート WOFF: Web用圧縮フォント

Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

Page 39: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

デコもじ

http://decomoji.jp/

日本初の WebFont サービス http://decomoji.jp/

字游工房のフォントもある!

JavaScript 埋め込み型 ¥315/月~と低価格

Page 40: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

webfonts.fonts.com 多言語対応 WebFont サービス http://webfonts.fonts.com/

10,000 以上のフォント 日本語フォントも 100 以上

JavaScript 埋め込み型 25,000 view/30days まで無料

http://webfonts.fonts.com/

Page 41: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Google Web Font API 現在 100 種類以上サポート

開始当初は 18 しかなかった

日本語フォントはない メニューなど限られた用途で

サブセットも指定可能 ファイルサイズを最小限に

Page 42: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Web Font API の使い方

http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html

<html><head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; } </style></head><body> <h1>Firefox Developer Conference 2011 in Osaka!</h1></body></html>

Page 44: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

WOFF フォントに変換 WOFF コンバータ

http://musashi.or.tv/woffconv.htm Windows, Mac アプリ

@font-face kit generator http://www.fontsquirrel.com/fontface/generator

Web サービス (サイズ制限あり)

Page 45: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

サブセットフォントを作る 必要文字だけ取り出して軽量化 @font-face kit generator

Expert モードの Subsetting でCustom Subsetting を指定する

その他のフォントツール例 http://sourceforge.net/projects/fonttools/

http://fonts.philip.html5.org/

Page 46: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Web Fonts の使い方@font-face { /* IE8 以前用 EOT フォント設定 (最初に) */ font-family: Sawarabi; src: url(Sawarabi.eot) /* IE8 以前は format() 非サポート */;}@font-face { /* WOFF 非対応ブラウザ向けフォント設定 */ font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype");}@font-face { /* WOFF 対応ブラウザには WOFF を */ font-family: Sawarabi; src: url(Sawarabi.woff) format("woff");}body { font-family: Sawarabi, sans-serif; }

Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

Page 47: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Font Control Features CSS3 font-variant フォントの詳細な機能を制御

分数、桁揃え、合字、旧字体... 仕様のエディタ自身による実装

実装者本人の解説: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf

Page 50: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

IE9 ヤバイ? 一部フォントの文字がくっついて非常に読みにくくなる問題 MS P ゴシックなど一部のビットマップフォント

標準モード使用時に発生

http://freesoft.tvbok.com/tips/net_tips/ie9_doctype.html

Page 51: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

IE9 フツー Web デザイナーへの配慮はないが DirectWrite 標準の描画結果 MS P ゴシック等と相性が悪い MS P ゴシックは GDI 向け... その為の Meiryo フォント...

http://subtech.g.hatena.ne.jp/mayuki/20110510/1304997242

Page 52: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Internet Explorer 9

Page 53: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Internet Explorer 9

太字だと完全に隣と合体 (><)

Page 54: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

FIrefox イイネ! DirectWrite 使用時も問題なし

ビットマップフォントではSubpixel Positioning しない

そのままじゃユーザが困るよね

https://bugzilla.mozilla.org/show_bug.cgi?id=574907

Page 55: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Internet Explorer 9

Firefox 4

Page 56: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Internet Explorer 9

Firefox 4

Firefox なら太字でも結合しない

Page 57: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS で画像を作る 角丸、影、グラデーション etc...

ドラえもんも CSS で描ける ボタンなどは CSS で作ろう

ファイル数もサイズも手間も 特にモバイルサイトにオススメ

http://shopdd.blog51.fc2.com/blog-entry-932.html

Page 58: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Gradients 線形 or 放射グラデーション 繰り返し(縞模様)なども可能 CSS3 Images で定義

背景画像として利用する -webkit- は独自構文注意

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Page 59: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Gradients<p><a class="gradationbutton" href="http://hacks.mozilla.org"> <span>hacks.mozilla.org</span><br/> <span class="info">HTML5 の最新情報はこちら!</span></a></p><style>.gradationbutton { /* ...割愛... */ color: #ffffff; text-shadow: -1px -1px 2px #777777; /* エンボス */ -moz-border-radius: 10px; border-radius: 10px; /* 角丸 */ background: #99ca28; /* 非サポートブラウザ向け Fallback */ background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%, #5DA331 97%, #659635 100%);}.info { font-weight: normal; }</style>

http://dynamis.jp/demo/css-gradients/

Page 60: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Gradient 生成ツール人が書く気のしないスタイルは大抵ツールが...CSS Button Maker

http://css-tricks.com/examples/ButtonMaker/CSS3 Gradient Generator

http://gradients.glrzad.com/CSS Pattern Generator

http://www.patternify.com/Background Maker

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Page 61: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Multiple Backgrounds 背景画像を複数重ねて表示 グラデーションと重ねると便利

フェードアウト効果などにも 画像の数やサイズ削減にも有効 -webkit- は 5.0.2 まで独自構文

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Page 62: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Multiple Backgrounds<style>.fadedflower { background: /* 左が白、右が無色透明となるグラデーション */ -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), /* その後ろに表示する画像 */ url(flowers-pattern.jpg);}</style><div class="fadedflower"> <!-- グラデーション背景画像つき要素 --></div>

http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Page 63: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Transform 任意の要素を変形させる

拡大縮小、回転、移動、歪み 3D 変形は現状 WebKit のみ Firefox も 3D 変形対応予定 IE8 は Matrix Transform

https://developer.mozilla.org/en/CSS/-moz-transform

Page 64: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Transform 使用例<iframe id="skewframe" width="800" height="600" src="http://mozilla.jp/firefox/"></iframe><style>#skewframe { /* 150px 右に移動し、左下を原点として 10°歪める*/ -moz-transform: skewx(10deg) translatex(150px); -moz-transform-origin: bottom left;}</style>

https://developer.mozilla.org/En/CSS/Using_CSS_transforms

Page 65: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Mobile Web Design

Page 66: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Mobile Web DesignMedia QueriesViewportDevice Pixel Rate

Page 67: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Media Queries デバイスに応じたスタイル指定

画面サイズ、解像度、縦横... Responsive Web Design

https://developer.mozilla.org/en/CSS/Media_queries

Page 68: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

画面サイズ別 CSS を書く<style>/* @media 規則で画面サイズ別ルールを記述 */@media only screen and (min-width: 481px) { #header { backgournd: url(head.png); /* 大きい画像 */ }}@media only screen and (max-width: 480px) { #header { backgournd: url(head-small.png); /* 小さい画像 */ }}</style><!-- 外部ファイルで分けるときは media 属性 --><link rel="stylesheet" type="text/css" href="pc.css" media="only screen and (min-width:481px)"><link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:480px)">

cm など物理サイズは iPhone などで正しくないので注意

Page 69: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Responsive Web Design ピクセル単位で調整しない

Web はそもそもピクセル制御の適するメディアではない

画面サイズなどに応じて適切に

http://www.alistapart.com/articles/responsive-web-design/

Page 70: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Responsive Web Design ピクセル単位で調整しない

Web はそもそもピクセル制御の適するメディアではない

画面サイズなどに応じて適切に

http://www.alistapart.com/articles/responsive-web-design/

Page 72: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

背景画像も左右切り取り

横幅に応じてサイズを変更

http://www.alistapart.com/articles/responsive-web-design/

Page 73: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

http://colly.com/

Page 74: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

http://colly.com/

横幅に応じて要素数を増減

Page 75: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

<meta> viewport 拡大率制御には viewport

ユーザのズーム禁止も可能 表示領域の CSS ピクセル幅

iPhone はデフォルト 980px Firefox for Mobile は 800px

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Page 76: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

viewport を指定する<!-- デバイスの画面幅で等倍表示 --><meta name="viewport" content="device-width, initial-scale=1.0">

<!-- 幅 500px の領域に描いて等倍表示 --><meta name="viewport" content="width=500, initial-scale=1.0"/>

<!-- デバイスの画面幅で等倍固定表示 --><meta name="viewport" content="width=device-width,user-scalable=no">

古い WebKit は上書き前のスタイルで指定した画像も DL してしまうバグあり

Page 77: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Device Pixel Rate CSS と端末画面のピクセル比

iPhone 4 以降の高解像度端末では 1:1.5 や 1:2 の端末が多い

拡大されてぼやけないように ベクター画像 SVG を使う 高解像度画像を読み込ませる

Page 78: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

高解像度画像の読み込み/* 高解像度ディスプレイ用スタイル *//* 最小/最大(min/max)と接頭辞(-moz-/-webkit-)の順に注意 */header { /* 通常サイズの画像 */ background: url(head.png);}@mediaonly screen and (min--moz-device-pixel-ratio: 1.5),only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { header { /* 解像度(サイズ)2倍の画像 */ background: url(head-2x.png); }}

古い WebKit は上書き前のスタイルで指定した画像も DL してしまうバグあり

Page 79: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

おまけ: CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% - 1rem)

-moz- prefix に注意 IE9 は no prefix 実装

自称コンサバ実装の IE9 も積極的にサポートしてますね...

Page 80: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

おまけ: CSS3 calc()/* margin 分を考慮した左右の分割を行う例 */#main { width: 75%; margin-right: 1rem;}#side { width: -moz-calc(25% - 1rem); width: calc(25% - 1rem); /* prefix なし忘れずに */}/* rem はルート要素の font-size (Firefox 3.6̃) */

http://hacks.mozilla.org/2010/06/css3-calc/

Page 81: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Animation

Page 82: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

AnimationJavaScript AnimationCanvas 2DSVG & SMILCSS TransisionsCSS AnimationsWebGL

Page 83: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

JavaScript Animation setTimeout でループ処理 多数のタイマー回すと重くなる バックグラウンドでも重くなる

Page 84: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

JS Timer 間隔の変更 setTimeout Timer の最小値変更

HTML5 で 4ms と規定された IE9, Fx5, WebKit: 4ms に IE9 は Canvas 操作時短い(バグ)

IE9 バッテリー動作時 10~15ms Firefox 5, Chrome 11 以降アクティブタブ以外は最大1回/秒

setTimeout()/setInterval() などの時間間隔に依存しないように

Page 85: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

RequestAnimationFrame 無駄なく省電力アニメーション

setTimeout() だと最大 250fps 実際のディスプレイは 60fps...

Transition などと JS の同期 JS 以外のアニメーションと同期

http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

Page 86: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

RequestAnimationFrame 使い方は極めてシンプル

setTimeou() の代わりにmozRequestAnimationFrame()

Date.now() の代わりにmozAnimationStartTime とevent.timeStamp

http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

Page 87: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

RequestAnimationFreme 使用法var d = document.getElementById("d"); // 動かす対象要素var start = window.mozAnimationStartTime;function step(event) { var progress = event.timeStamp - start; d.style.left = Math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozRequestAnimationFrame(); } else { window.removeEventListener("MozBeforePaint", step, false); }}// フレームを再描画する前に実行する関数を設定window.addEventListener("MozBeforePaint", step, false);// 次のフレーム再描画まで待って上記で設定した関数を実行window.mozRequestAnimationFrame();

http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

Page 88: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Canvas 2D JavaScript API で描画

点、線、弧、矩形、影、画像、テキストなど自由に描画

https://developer.mozilla.org/en/Canvas_tutorial

Page 89: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Canvas 使用時の注意 Same Origin Policy による制約 toDataURL(), getImageData()

他サイトの画像を DrawImage()した後で使用するとエラー

measureText() 他サイトのフォントを使用する場合に呼び出すとエラー

Page 90: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Canvas とパフォーマンス 細かく編集より一度に編集

小さな領域を何度も書き換えるより一度に大きな領域を描画

レイヤーを重ねて使う 激しく動くモノと動きの少ない背景がある場合レイヤーに分離

Page 91: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Canvas とパフォーマンス 位置座表は整数値で保持

浮動小数点計算は遅い Transitions との同時使用は注意

GPU 描画モードとの切り替えオーバーヘッドに要注意

Page 92: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

SVG Animation SVG のアニメーション機能

<animate>, <set> などで定義 GPU を用いた高速処理 IE9 のみ未サポート

SVG を使ったアニメとは別

Page 93: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

http://people.mozilla.com/~dynamis/demo/smil/<svg ... xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."> ... <ellipse cx="290" cy="200" rx="80" ry="80"><!-- 中心の円 --> <!-- 毎秒指定色へと変化する 5秒間の色変更を無限に繰り返す --> <animate attributeType="CSS" attributeName="fill" dur="5s" values="#ff8; #f88; #f8f; #88f; #8ff; #8f8" keyTimes="0; .2; .4; .6; .8; 1" repeatCount="indefinite"/> </ellipse> ... <g id="R1" transform="translate(200, 200)"><!-- グループ化 --> <ellipse id="EL" cx="0" cy="0" rx="100" ry="30" ...><!-- 周囲の楕円 --> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite"/><!-- 回転 --> <animate attributeName="cx" dur="8s" values="-20; 120; -20" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 中心の移動 --> <animate attributeName="ry" dur="3s" values="10; 60; 10" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 半径の変更 --> </ellipse> </g> <use xlink:href="#R1" transform="rotate(30, 300, 200)"/><!-- 回転複製 --> ...</svg>

Page 94: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Transitions スタイル遷移をなめらかに 簡単にアニメーションできる GPU を用いた高速処理

Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

Page 95: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Transitions 使用例#somebox { color: black; background-color: yellow; /* すべてのスタイル変化を2秒かけて開始をなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in;}#somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5);}

http://hacks.mozilla.org/2010/07/firefox4-beta2/

Page 96: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS Animations Firefox 5 からサポート 手で書くのは結構面倒です

今日は詳細割愛します

https://developer.mozilla.org/en/CSS/CSS_animations

Page 97: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

WebGL <Canvas> の 3D コンテキスト OpenGL ES2.0 相当の API

携帯用 GPU も広くサポート

http://www.khronos.org/webgl/

Page 98: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

WebGL

http://webos-goodies.jp/archives/getting_started_with_webgl.html

<canvas id="glcanvas" width="640" height="480"/><script type="text/javascript">var canvas = document.getElementById("glcanvas");// WebGL コンテキストを取得// コンテキスト名は仕様確定まで "experimental-webgl"var gl = canvas.getContext("webgl") ¦¦ canvas.getContext("experimantal-webgl");if (gl) { // ... OpenGL 同様にいろいろ描画処理 ... // Int32Array など固定型配列も使って高速演算可能}</script>

Page 99: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

WebGL アブナイ? 他サイト画像の解析ができる?

明示的 CORS 許可サイトの画像以外 WebGL 使用不可にする?

GPU ドライバのバグを突ける? その為のブラックリスト 対策コードの強化も続ける

http://blog.jprosevear.org/2011/05/13/webgl-security/

Page 100: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

アニメーション使い分け Canvas

コードさえ書けば何でも可能 SVG & SMIL

オブジェクト操作に便利 CSS Transitions/Animations

ブラウザが自動で高速処理 WebGL

高速アニメーションの最終兵器

Page 101: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Canvas が適した処理 ピクセル単位の描画・編集

領域に比例して重くなる! 細かく高速なアニメーション コード書くのは面倒 画像のコピー (drawImage) など限られた処理だけ GPU 活用

Page 102: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

SVG が適した処理 拡大しても滑らかな画像 フィルタ処理や切り抜きも簡単 ユーザインタラクティブな処理 DOM イベントに対する処理 hover イベントには特に便利

Page 103: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSS が適した処理 簡単な事は簡単に書ける スタイル変化のアニメーション 回転や歪みは Transition GPU 処理で高速化も

Page 104: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

WebGL が適した処理 3D グラフィック ゲームなどでの高速処理 Open GL の知識が必要

Page 105: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Security

Page 106: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

SecurityHTTP Strict Transport SecurityX-Frame-OptionsContent Security PolicyCross-Origin Resource SharingDo Not Track

Page 107: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

HTTP Strict Transport Security HTTPS での接続を要求

HTTPS 認証ページなどで使う HTTP 接続禁止秒数を指定する

簡単なのですぐにでも採用を 非対応ブラウザへの副作用なし 古い Firefox は拡張機能で...

http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/

Page 108: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

HSTS ヘッダ送信例

http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html

注: HTTPS ページでのみ有効 HTTP ページで送信しても無効

// 86400秒はこのサイトに HTTP での接続を禁止Strict-Transport-Security: max-age=86400

// 送信元サイトのサブドメインも HTTP 接続を禁止するStrict-Transport-Security: max-age=86400; includeSubdomains

Page 109: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

X-Frame-Options <iframe> への埋め込み禁止 埋め込まれたくないページでX-Frame-Options: ヘッダ出力 値は DENY, SAMEORIGIN

クリックジャッキング対策等に

Fx 3.6.9~ https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header

// Apache の設定でサイト全体に設定する場合:Header always append X-Frame-Options SAMEORIGIN

Page 110: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Content Security Policy 次世代セキュリティポリシー

許可ドメインとポートを指定 Same Origin Policy はもう古い

画像や JS の読み込み先も制御 XSS などの攻撃を防止

WebKit も実装取り組み中

https://developer.mozilla.org/ja/Introducing_Content_Security_Policy

Page 111: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSP ヘッダ送信例// 全コンテンツを同一ドメインのみ (サブドメインも不可)X-Content-Security-Policy: allow 'self'

// 自身と dynamis.jp のサブドメインのみ許可X-Content-Security-Policy: allow 'self' *.dynamis.jp

// secure.mozilla.jp からの読み込みは HTTPS のみX-Content-Security-Policy: allow https://secure.mozilla.jp/

https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy

Page 112: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

CSP ヘッダ送信例

// 自身と *.mail.jp は全許可、他サイトは画像のみに制限// allow 書いたので script-src などは書かずとも制限済みX-Content-Security-Policy: allow 'self' *.mail.jp; img-src *

// 画像は任意サイト、メディアファイルと JS は指定サイトに限定X-Content-Security-Policy: allow 'self'; img-src *; (実際は改行なし) media-src video.tld audio.tld; (実際は改行なし) script-src script.tld;

https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy

Page 113: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Cross-Origin Resource Sharing 他ドメインからの読み込み許可

Cross-Site XMLHttpRequest

// dynamis.jp のページからはこのサイトの読み込み許可Access-Control-Allow-Origin: http://dynamis.jp

https://developer.mozilla.org/en/http_access_control

// 任意サイトからの読み込みを許可 (公開 API などに)Access-Control-Allow-Origin: *

Page 114: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Security 機能のまとめ HTTP Strict Transport Security

HTTPS に接続を限定 X-Frame-Options

クロスドメインフレーム禁止 Content Security Policy

JS や画像なども読み込み元制限 Cross-Origin Resource Sharing

クロスサイト読み込みを許可

Page 115: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

ユーザ追跡拒否ヘッダ Do-Not-Track (DNT:1) ヘッダ

ユーザ追跡拒否の意思表示 IE も Safari も対応 Chrome だけ非対応...

受け取ったらユーザ追跡禁止

Page 116: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
Page 117: HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)

Any Question ?