第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121

HTML5 Conference 2012
クイズの裏側

第35回 HTML5とか勉強会
Jan. 21, 2013
@KDDI, TOKYO

テーマ：
「Web+OS最前線！」

テーマ：
「Web+OS最前線！」

関係ないです

自己紹介
小野充輝
ONO Mitsuki
職業：
社会人2年目の
Webエンジニア見習い
Twitter :
@mitsuki_ni

大人の事情 2
（10秒CM）
宣
伝
す
る
こ
と
を

http://www.barcodefootballer.com

当日の動画
http://youtu.be/4LBOZTtiEh8

解答画面
WebSocket
解答受付

HTTP
名前登録

解答受付
出題画面

受付開始

受付停止

速答正解者

ランキング

html5slides
http://code.google.com/p/html5slides/

jQuery Mobile
http://jquerymobile.com/

WebSocket
HTTPリクエスト

HTTPレスポンス

Upgrade

WebSocket

クライアント
WebSocketサーバ
（ブラウザ）

接続確立後はどちらからでも
データの送信が可能

application cache

キャッシュを簡単かつ高度に制御
example.appcache index.html
CACHE MANIFEST <!DOCTYPE html>
# comment <html manifest="example.appcache">
<head>
CACHE: <meta charset="UTF-8">
index.html <title>Offline Application</title>
style.css <link rel="stylesheet" href="style.css">
js/script.js <script src="js/script.js"></script>
logo.png </head>
<body>
NETWORK: <img src="logo.png">
login.php <a href="login.php">Login</a>
/api </body>
</html>
FALLBACK:
images/large/ images/offline.png

http://www.html5rocks.com/ja/tutorials/appcache/beginner/

application cache
■容量
5MB まで (iOS 6 からは 25MB まで)

■MIMEタイプ
AddType text/cache-manifest .appcache

■キャッシュが更新されるタイミング
1. ユーザーがブラウザのデータをクリアした時
2. マニフェストファイルが更新された時
3. プログラムで更新命令を実行した時 (JavaScript)

※マニフェストに書いたキャッシュ対象ファイルを更新しても、再読込みされない
※マニフェストファイルの比較はバイト単位で行なわれる（ファイルの更新日時だけではNG）

・キャッシュすべきファイルか
・非対応ブラウザへの配慮はあるか

メディア要素 preload属性

バックグラウンドで（動画を）ダウンロード
sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Media Preload</title>
</head>
<body>

<video src="mov.mp4" type="video/mp4" preload="auto">
</video>
</body>
</html>

http://www.html5rocks.com/ja/tutorials/video/basics/

Q8の動画
http://youtu.be/4LBOZTtiEh8#t=10m43s

フレキシブル・ボックス

フレキシブル・ボックス
フレキシブル・ボックスとは、その中に含まれるボックスの
サイズ調整や配置を指定できる、柔軟なボックスのこと。

これまでのpositionプロパティや、floatプロパティを使う
ボックスのレイアウトに比べて、より簡単に指定できる。
sample.css

.containers {
display: -webkit-box;
-webkit-box-orient: vertical;
}

http://www.html5rocks.com/ja/tutorials/flexbox/quick/

slide.html

<div class="containers">
<div class="box1"></div>
</div>

style.css

.containers {
}

slide.html

<div class="containers">
<div class="horizontal">
</div>
<div class="horizontal">
</div>
</div>

style.css

.containers {
}
.horizontal {
-webkit-box-orient: horizontal;
}

Q6のアニメーション

style.css

@-webkit-keyframes zoom_out {
0% {background-size: 500%;}
}

.box {
background-position: 50% 50%;
-webkit-animation-name: zoom_out;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 8s;
-webkit-animation-fill-mode: forwards;
}

transition-timing-function

変化のタイミング・進行割合を指定
ease
cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ（開始と完了を滑らかに）（初期値）
linear
cubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ（一定）
ease-in
cubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ（ゆっくり始まる）
ease-out
cubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ（ゆっくり終わる）
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ（ゆっくり始まってゆっくり終わる）
cubic-bezier(p1, p2, p3, p4)
3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

cubic-bezier.com
http://cubic-bezier.com

CSS Filter Effects
画像にフィルターを適用させる。
sample.css

img {
-webkit-filter: grayscale(); /*グレースケール*/
-webkit-filter: sepia(); /*セピア*/
-webkit-filter: saturate(); /*彩度*/
-webkit-filter: hue-rotate(); /*反転*/
-webkit-filter: invert(); /*色相回転*/
-webkit-filter: opacity(); /*透明度*/
-webkit-filter: brightness(); /*輝度*/
-webkit-filter: contrast(); /*コントラスト*/
-webkit-filter: blur(); /*ぼかし*/
-webkit-filter: drop-shadow(); /*ドロップシャドウ*/
}

http://www.html5rocks.com/en/tutorials/filters/understanding-css/

第34回 HTMLとか勉強会
http://youtu.be/YT8s74HOLzk

なんだかんだと
とりとめなく
お話しましたが

楽しくなければ

じゃない！

第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (11)

Destaque

Destaque (20)

第35回HTML5とか勉強会「HTML5 Conference 2012 クイズの裏側」20130121