春日井さんごめんなさい
ほとんど再構成してません。メモってことでご容赦ください。
<html5プロジェクト舞台裏 ~SVG女子の作り方~>
面白法人カヤック 吾郷さん
参考:SVG女子
http://jsdo.it/event/svggirl
SVGとは
10年前に仕様公開されて、最近漸く使われるようになった
Javascriptがなくてもアニメーションができる
CSS3でも画像を記述できるが・・・
iPhoneはたぶんすべて、ANDROIDは3.0からサポート
Webではぎりぎり使えるか微妙
解像度によらず画像がきれいに表示されるので、
SVGだけで作ったゲームの例
ILLUSTLATORでデザイン→svg書き出し→XXX
iPhoneだとちょっと重いけど現実的
アニメーションは重い
SVGはきれいに表示されるが基本的に重い。
MEDIA QUERY(CSS3)と相性がいい。
ILLUSTRATORで保存してブラウザで確認でき
svgについて社内のデザイナにきいた
容量を気にせず大きな画像が使える
cssから内容を変更できる
レイヤー名やパスの構造がcssやjsに影響する
SVG女子について
はじめはVIDEOタグ
250枚を30秒
js部分の紹介
再生まではjsで画面繊維→読み込み時間をかせぐため
VIDEOタグの裏側で画像・音声を読み込みしている
svgアニメは別ドメインのIFLAME
<高速化>
クリック前、VIDEO再生時に裏で読み込み
svg読み込みとDomTreeへの追加を分離
svgファイルをCloudFront(Amazon)において、そこから読み込み。
EC2は海外にあったので通信面で遅かった
InnerHTML→InsertAdjacentHtmlに
Stringの扱い。Replaceの正規表現を排除
カヤックでは IDEを使ってる人は少なくてVIM使ってる人が多い
<html5が変えるWebの世界>
html5 2011年5月にLast コール(仕様が固まった)
html5の範囲
html5、jsのAPI(AND CSS3、svgなど)
divだらけからさらば
セクション要素(section、article、asidenav) その他の要素(header、footer、time、command)が既存要素の意味も変化
よりセマンティック
マイクロデータの活用
htmlに埋め込まれたデータのセマンティックを明確化するもの
schema.org
div itemscope itemtype=http://schema.org/xxx
アプリケーションキャッシュ
Webストレージ
機能は乏しい
indexed database API ・・・ブラウザ読込のkvs
機能は多いが難しい
file api
書き込み、仮想ファイルシステム
indexed database APIとは
ブラウザKVS
JAVASCRIPTオブジェクトをオブジェクトストアに読み書き
デモ’ リロード後に前回の入力値を表示できる
webkitindex、mozindex
ジオロケーションAPIがかなり実装されている
現在地の取得をgpsからおこなっているか、Wifiのアクセスポイントからアクセスされているかは隠蔽されている
httpサーバプッシュ
XHR
クロスオリジンリソースシェアリング
リクエストを受け付けたサーバーがクロスオリジンリクエストを返す
preflihtリクエストをactualりくえすと (これ何て書いたんだろ・・・)
→地味なデモ
VIDEOタグ
javascript、css、DOMの制御ができる
従来のjsでsettimeout、
setintervalで実現していたアプリケーション→requestanimationflame()
CPUの節約、なめらか
Webページの読み込み時間
<あまり仕様はでてない>
chromeで音声入力のサンプル
通知メッセージのAPI・・・Gmail
(勉強するには)
w3c、メーリングリスト、勉強会
<Adobe Dreamweaver CS5.5で今すぐできるHTML5とCSS3のオーサリング>
略
<VMDとExpression Web4で構築するHTML5とJavaScript>
MS物江さん
コーディング量がふえる
html5 css3 ajax jquery
・Visual webkit Developer2010 Exporess
vs2010からWebアプリ開発機能のみを抽出。
フリー
・Expression Web4
Webオーサリングツール
複数ブラウザのびょうが比較
・共通で実装している機能
インテリセンス
jsデバッグ
など。
sp1からhtml5に対応
jqueryとの連携デモ
javascriptがけっこうラクにできてデバッグもいい感じ
<HTML5プロジェクトの舞台裏 ~The 書道~>
株式会社ビジネスアーキテクツのお2人
http://www.theshodo.com/
ブラウザのブロック(このブラウザはOK、このブラウザはだめ)
ブラウザ判別によるブロックではなく、実装状況を見て振り分けることにした。
対象ブラウザ
write部分 キャンバス要素対応ブラウザ
gallary部分 非対応ブラウザ・js無効も配慮
ホームと全般
画像を使っている部分が少ない。Webフォントs →Webfonts typekitを使っている。クライアントに入ってなくてもそのままフォントが使える。
ギャラリー
たくさん画像があってもなめらかに動かしたい
html5 キャンバス
html5 postmessage
メディア
キャンバス ・・・ 書くところ
筆のおおもとはかすれた画像。連続して濃くする
sessionstorage・・・リロードしたら2回目からは流れない。ブラウザのセッションの中だけに保存する。
一方、localstorageはブラウザを閉じても残る。
左下のも、フォント。解像度が変わってもちゃんと見える。*画像ではない
svg・・・こまごまと使ってる。
お手本機能。お手本はsvgできていて、htmlに直接埋まっている。
css、javascriptから操作できるのが、イメージに対するアドバンテージ お手本をjavascriptで別のところにコピーして、黒くしたり (cssで色をつけている)
ie9はcssのグラデーションに対応していない→svgを埋めてcssで制御してみたらできた
影をつけるのもcssから制御がしている。最後1週間でリッチにするよう要求がきて急遽実装した
ボタンが複数の背景が合成してできている。3つの画像が結合されている。これをcssから制御。
<はまりどころ>
(今はだいたい治っているらしい)
video要素の挙動がまちまち、クラッシュしたり
メディアソースの複数要素が面倒
Chromeのオーディオ要素対応のミュートバグ
アジュール
windows azure blob・cdnとクロスドメイン問題
→postmessageで解決した(ブログに書いてる)
-----------------------------------
html5とJAVASCRIPTの重要性があがっていく
ie9をベースラインとすると、ベースラインが上がる。これを基準に、他のリッチ度を確認したり。
ie6だと崩れたりするけど、適度にあきらめがいるんじゃないでしょうか。