Attractive HTML5

Attractive
HTML5
HTML5の魅力をこっそりと

@shoito
HTML5-FIT

ソフトウェア設計ツールの開発

Flex(Flash)アプリ開発 [3y]

ITシステムの変遷
高

C/S RIA
ユーザビリティ

1990年代初頭∼ 2003年後半∼

メインフレーム Web
1990年代中頃∼
/ダム端末
∼1980年代頃

低コストパフォーマンス高

参考文献：RIAシステム構築ガイド Essential 2007 p005

Hokuriku.lang - HTML5
2009/10

HTML5 Tech Talk in 金沢
2009/10

HTML5勉強会＠めがね会館
2010/03/12

WCAF Seminar Vol.3 - HTML5
2010/03/20

Chrome Extensions with HTML5作ろう会
2010/04/12

Google Hackathon for Chrome Extension
2010/04/17, 24

今日の目的
HTML5の魅力を

✤ 皆さんに共有すること

✤ 皆さんから共有してもらうこと

標準技術
HTML, CSS, JavaScript

デザイナ 1
ー
3
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現データ構造を表現
機能を実現

1
ー開発者
3
標準技術
HTML, CSS, JavaScript

Browser is a Platform
Webアプリケーションの制約からの解放

No Plug-in
Flash player, Silverlight plug-in, JavaFX runtime

Cross-Platform
Windows, Mac OS X, Linux, Chrome OS

Multi-device
PC, Mac, Mobile, .....

叶わなかった願い - Flash
iPhone OSへのFlash Playerの搭載

iAd
iPhone/iPad向け、モバイル広告広告はHTML5で作る

非Andoide Mobile AP-PFの共同開発
ブラウザのHTML5対応はどうなる？

Server-Side less
オフライン、ローカルストレージ、Drag&Drop、File API、WebWorker

Web/Desktopの低い垣根
Drag&Drop/File API、ネイティブアプリケーションとしてラッピング

<header>

<section>
<header>
<nav> <aside>
<article>

<footer>

<footer>

Webがよりセマンティックに
header, nav, section, article, footer, aside

HTML5 is Simple!
doctype, meta, script, link 省略...

<!doctype html>

<meta charset= utf-8 >

<script src= xxx.js ></script>

<link rel= stylesheet href= xxx.css ></link>

段階的変化の許容
HTML4/XHTMLからHTML5へ - 前方/後方互換性の維持(革新より発展)

N
ew
！

常に最新のソフトウェアを使える
Webアプリケーションの特性

低コストな開発/実行環境
デバッグ、プロファイラなどがブラウザに組み込める/まれている

皆さんが感じたHTML5の魅力って？
時間がなかったら懇親会で話しましょう

巷のFlash悲観論
FlashってFlash Playerのこと？
Flash CSのこと？

HTML5とFlashの共存
ExternalInterfaceを利用した
JavaScript ActionScript連携

HTML5 / Flash 比較
HTML5 Flash

公平性 ○ (標準技術) (Adobe独占)

互換性 (ブラウザ依存) ○
(Flash Playerのみ)

PC普及率 (IE未サポート) ○ (ほぼ100%)

モバイル普及率 △ △
開発者数 ○(HTML, JavaScript) △ (ActionScript)

開発ツール ○ ○

HTML5,
いつから使えるの？

もう, 使える機能から部分的に

iPhone/Android
＆
IE以外のブラウザでは
既に結構イケる

HTML5は
デザイナ/開発者にとって魅力的

次期Web標準技術なので
無視できない

これまでの
Webの制約が変わります

別に作りたいサイトや
Webアプリはないという方

Chrome Extensionsで
便利なツールを作っては？

Thanks!
shoito
sho.ito@air-life.net
http://twitter.com/shoito
HTML5-FIT

Attractive HTML5

More Related Content

Attractive HTML5