Attractive HTML5

65
Attractive HTML5 @shoito HTML5-FIT HTML5の魅力をこっそりと

description

HTML5について私が感じる魅力を語る 2010/04/29

Transcript of Attractive HTML5

Page 1: Attractive HTML5

Attractive HTML5

@shoitoHTML5-FIT

HTML5の魅力をこっそりと

Page 2: Attractive HTML5

自己紹介/shoito

Page 3: Attractive HTML5

宮城 → 福井 [3.5y]

Page 4: Attractive HTML5

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

Page 5: Attractive HTML5

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

Page 6: Attractive HTML5

技術系コミュニティ

Page 7: Attractive HTML5

HTML5に興味を持った訳

Page 8: Attractive HTML5

ITシステムの変遷

 メインフレーム/ダム端末~1980年代頃

Web1990年代中頃~  

C/S  1990年代初頭~

RIA2003年後半~

低 高

コストパフォーマンス

ユーザビリティ

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

Page 9: Attractive HTML5

HTML5とワタシ

Page 11: Attractive HTML5

HTML5 Tech Talk in 金沢2009/10

Page 12: Attractive HTML5

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

Page 14: Attractive HTML5

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

Page 15: Attractive HTML5

Google Hackathon for Chrome Extension2010/04/17, 24

Page 16: Attractive HTML5

今日の目的 HTML5の魅力を

✤ 皆さんに共有すること

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

Page 17: Attractive HTML5

まずはご覧ください

Page 24: Attractive HTML5

私が感じる魅力

Page 25: Attractive HTML5

標準技術HTML, CSS, JavaScript

Page 26: Attractive HTML5

標準技術HTML, CSS, JavaScript

Page 27: Attractive HTML5

HTMLデータ構造を表現

CSS見栄えを表現

JavaScript各種APIの拡張により

機能を実現

デザイナ

開発者

標準技術HTML, CSS, JavaScript

ー13

ー13

Page 28: Attractive HTML5

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

Page 29: Attractive HTML5

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

Page 30: Attractive HTML5

Cross-PlatformWindows, Mac OS X, Linux, Chrome OS

Page 31: Attractive HTML5

Multi-devicePC, Mac, Mobile, .....

Page 32: Attractive HTML5

余談

Page 33: Attractive HTML5

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

Page 34: Attractive HTML5

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

Page 35: Attractive HTML5

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

Page 36: Attractive HTML5
Page 37: Attractive HTML5

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

Page 38: Attractive HTML5

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

Page 39: Attractive HTML5

<section>

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

<header>

<nav> <aside>

<header>

<footer>

<footer>

<article>

Page 40: Attractive HTML5

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>

Page 41: Attractive HTML5

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

Page 42: Attractive HTML5

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

New!

Page 43: Attractive HTML5

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

Page 44: Attractive HTML5

私のイチバン

Page 45: Attractive HTML5

HTMLデータ構造を表現

CSS見栄えを表現

JavaScript各種APIの拡張により

機能を実現

デザイナ

開発者

標準技術HTML, CSS, JavaScript

ー13

ー13

Page 46: Attractive HTML5

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

Page 47: Attractive HTML5
Page 48: Attractive HTML5

HTML5対応チェック

Page 50: Attractive HTML5

HTML5 Demos and Examples

Page 52: Attractive HTML5

FlashってFlash Playerのこと?Flash CSのこと?

巷のFlash悲観論

Page 53: Attractive HTML5

ExternalInterfaceを利用したJavaScript ⇔ ActionScript連携

HTML5とFlashの共存

Page 54: Attractive HTML5

HTML5 / Flash 比較HTML5 Flash

公平性

互換性

PC普及率

モバイル普及率

開発者数

開発ツール

○(標準技術) ×(Adobe独占)×(ブラウザ依存) ○(Flash Playerのみ)

×(IE未サポート) ○(ほぼ100%)

△ △○(HTML, JavaScript) △(ActionScript)

○ ○

Page 55: Attractive HTML5

HTML5に関してコメント

Page 56: Attractive HTML5

HTML5,いつから使えるの?

Page 57: Attractive HTML5

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

Page 58: Attractive HTML5

iPhone/Android&

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

Page 59: Attractive HTML5

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

Page 60: Attractive HTML5

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

Page 61: Attractive HTML5

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

Page 62: Attractive HTML5

提案

Page 63: Attractive HTML5

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

Page 64: Attractive HTML5

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