春日井さんごめんなさい
ほとんど再構成してません。メモってことでご容赦ください。
＜html5プロジェクト舞台裏 ～SVG女子の作り方～＞
面白法人カヤック 吾郷さん
参考：SVG女子
http://jsdo.it/event/svggirl
SVGとは
10年前に仕様公開されて、最近漸く使われるようになった
Javascriptがなくてもアニメーションができる
CSS３でも画像を記述できるが・・・
iPhoneはたぶんすべて、ANDROIDは3.0からサポート
Webではぎりぎり使えるか微妙
解像度によらず画像がきれいに表示されるので、
SVGだけで作ったゲームの例
ILLUSTLATORでデザイン→svg書き出し→XXX
iPhoneだとちょっと重いけど現実的
アニメーションは重い
SVGはきれいに表示されるが基本的に重い。
MEDIA QUERY（CSS3）と相性がいい。
ILLUSTRATORで保存してブラウザで確認でき
svgについて社内のデザイナにきいた
容量を気にせず大きな画像が使える
ｃｓｓから内容を変更できる
レイヤー名やパスの構造がcｓｓや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で今すぐできるHTML５とCSS３のオーサリング＞
略
＜VMDとExpression Web4で構築するHTML５とJavaScript＞
MS物江さん
コーディング量がふえる
html5 css3 ajax jquery
・Visual webkit Developer2010 Exporess
vs2010からWebアプリ開発機能のみを抽出。
フリー
・Expression Web4
Webオーサリングツール
複数ブラウザのびょうが比較
・共通で実装している機能
インテリセンス
jsデバッグ
など。
sp1からhtml5に対応
jqueryとの連携デモ
javascriptがけっこうラクにできてデバッグもいい感じ
＜HTML５プロジェクトの舞台裏 ～The 書道～＞
株式会社ビジネスアーキテクツのお２人
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だと崩れたりするけど、適度にあきらめがいるんじゃないでしょうか。
0 件のコメント:
コメントを投稿