HTML5で変わり始めているWeb
小山田 晃浩 | @yomotsu | (株)ピクセルグリッド

Tuesday, June 18, 13

Web制作、変わってきていますか？

Tuesday, June 18, 13

5年前のWeb、今のWeb

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

XHTML1.0
CSS2.1
Flash

HTML5
CSS3
JavaScript
APIs
Flash

Tuesday, June 18, 13

技術の進化でWebはどう変わる？

Tuesday, June 18, 13

Tuesday, June 18, 13

新技術はHTML5タグだけじゃない

Tuesday, June 18, 13

新しいWebの表現

Tuesday, June 18, 13

タイポグラフィーを向上させる技術
Web Fonts

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

オロナイン公式サイト
http://www.otsuka.co.jp/ohn/
Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

FONT+ http://webfont.fontplus.jp/ | TypeSquare http://www.typesquare.com/
デコもじ http://decomoji.jp/ | アマナイメージズ WEBフォント http://amanaimages.com/font/web/
Tuesday, June 18, 13

デバイスの特性に応じる技術
Media Queries

Tuesday, June 18, 13

ソニー製品情報
http://www.sony.jp/
Tuesday, June 18, 13

日本マイクロソフト
http://www.microsoft.com/ja-jp/default.aspx
Tuesday, June 18, 13

Tuesday, June 18, 13メタ情報を強化する
Microdata

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

レシピ大百科http://park.ajinomoto.co.jp/recipe/card/705346
Tuesday, June 18, 13

<div class="(省略)" itemscope
itemtype="http://data-vocabulary.org/Recipe"><img itemprop="photo" src="(省略)" width="304"height="223" alt="豚バラと白菜の重ね鍋" /></div><time datetime="PT25M" itemprop="cookTime">25分</time><dd class="(省略)" itemprop="calories">338kcal</dd>

Tuesday, June 18, 13

HTML Microdata
http://www.w3.org/TR/microdata/
Tuesday, June 18, 13

schema.org
http://schema.org/
Tuesday, June 18, 13

2D画像をコントロールできる
Canvas2D

Tuesday, June 18, 13

LIGHTNING RETURNS : FINAL FANTASY XIII
http://www.square-enix.co.jp/fabula/LightningReturnsFFXIII/
Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Dragon's Crown ドラゴンズクラウン
http://dragons-crown.com/
Tuesday, June 18, 13

Tuesday, June 18, 13

PMK Design Labs
http://www.pmkcustoms.com/designlabs/
Tuesday, June 18, 13

http://www.pmkcustoms.com/
designlabs/assets/nikeair/01.png
Tuesday, June 18, 13

EaselJS
http://www.createjs.com/#!/EaselJS
Tuesday, June 18, 13

紙ではできない、3Dを可能にする
WebGL

Tuesday, June 18, 13

Find Your Way to Oz
http://www.findyourwaytooz.com/
Tuesday, June 18, 13

new Google Maps
http://maps.google.com/preview/
Tuesday, June 18, 13

Tuesday, June 18, 13

three.js
http://threejs.org/
Tuesday, June 18, 13

Plus, my recent work!
http://yomotsu.github.com/threejs-examples/
Tuesday, June 18, 13

The Web Platform: Browser technologies
http://platform.html5.org/
Tuesday, June 18, 13

The Web Platform: Browser technologies
http://platform.html5.org/
Tuesday, June 18, 13

The Web Platform: Browser technologies
http://platform.html5.org/
Tuesday, June 18, 13

技術の分だけできることが広がる

Tuesday, June 18, 13

National Geographic: Forest Giant
http://adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src/
Tuesday, June 18, 13

仕事だとつかえない？

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

今、私が実際にやっている仕事• Flashで作ったシミュレーターをHTML５を使ってiPadで動かしたい•Canvas2D(CreateJS)をつかって実装中• 大量の静止画像をつかった製品の360度回転をWebGLで動かしたい•WebGL(three.js)をつかって実装中

Tuesday, June 18, 13

新しい技術を使うために

Tuesday, June 18, 13

Interactive Film いつも可愛い
http://www.itsumokawaii.jp/
Tuesday, June 18, 13

Tuesday, June 18, 13

新しい技術を使うということ• 情報が少ない• 仕様に沿っていない場合もある• トライアル&エラーの連続
つまり、時間とお金がかかる

Tuesday, June 18, 13

• Videoにはonloadイベントがない!

Tuesday, June 18, 13• かわりにcanplaythroughがある• でもcanplaythroughが発生しないときもある

Tuesday, June 18, 13• canplaythroughが発生するまでvideo.play()を高速で繰り返す

Tuesday, June 18, 13

Tuesday, June 18, 13

地獄のvideo／audio要素
http://takazudo.github.io/blog/entry/2013-02-06-videoaudio.html
Tuesday, June 18, 13

Tuesday, June 18, 13

おもしろいこと、新しいことができる！

Tuesday, June 18, 13

まとめTuesday, June 18, 13

• Webを取り巻く環境は進化した• ブラウザー、デバイス、技術仕様

Tuesday, June 18, 13

• 進化した技術はもう使われている• Web Fonts• Drag and drop

• Media Queries• Canvas2D• Microdata• WebGL• History APIなど

Tuesday, June 18, 13

• 環境にあわせて新技術を選ぶ• 時間とお金がかかる• 予算確保をわすれずに• スケジュールに余裕を持とう

Tuesday, June 18, 13いま、そして未来に向けて新しい技術を知ろう

Tuesday, June 18, 13

Tuesday, June 18, 13

購読開始から30日間無料(月額840円)

Tuesday, June 18, 13

CodeGridwww.codegrid.net

Tuesday, June 18, 13

ありがとうございました@yomotsu

Tuesday, June 18, 13