Submit Search
Upload
HTML5の今とこれから
•
13 likes
•
9,563 views
Takuya Yamamoto
Follow
WEBディレクターと企画担当者の方向けに行った「HTML5の今とこれから」という発表スライドを整理したものです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 40
Recommended
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
FICC inc.
Ssi 20150519
Ssi 20150519
真一 藤川
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
事業企画
事業企画
teradonburi Terai
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
デザインに騙されないデザイン
デザインに騙されないデザイン
Gyoda Nawoshi
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
Recommended
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法
FICC inc.
Ssi 20150519
Ssi 20150519
真一 藤川
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
事業企画
事業企画
teradonburi Terai
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
デザインに騙されないデザイン
デザインに騙されないデザイン
Gyoda Nawoshi
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
Daisuke Yamazaki
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
schoowebcampus
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
愛 増子
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
愛 増子
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Mariko Hayashi
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
HTML5 入門
HTML5 入門
NOAN
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
More Related Content
What's hot
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
Daisuke Yamazaki
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
schoowebcampus
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
Hiroyuki Makishita
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
愛 増子
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
愛 増子
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Mariko Hayashi
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
What's hot
(20)
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
groundwork-pasona-tech
groundwork-pasona-tech
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
モバイルにも通用するデザインカンプ制作のイロハ
モバイルにも通用するデザインカンプ制作のイロハ
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
ウェブ制作の学習方法 ~ウェブサイト制作のスキルを身に着けるには~
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Web制作者に向けた学習セルフマネジメントのすすめ(現状を把握する)
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
Web Design Process for The Future
Web Design Process for The Future
Viewers also liked
HTML5 入門
HTML5 入門
NOAN
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
Yoshiaki Sugimoto
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
Viewers also liked
(8)
HTML5 入門
HTML5 入門
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
HTML5, きちんと。
HTML5, きちんと。
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
Similar to HTML5の今とこれから
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
Yusuke Kojima
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
Yusuke Kojima
Web制作者視点で理解するソフトェアテスト
Web制作者視点で理解するソフトェアテスト
祐磨 堀
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
【Glide活用】ノーコードではじめるビジネスアプリ講座
【Glide活用】ノーコードではじめるビジネスアプリ講座
Kazuhiro Takada
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
Kazuhiro Kotsutsumi
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
Takeshiro Kani
リモートワーカー働き方実態とテレワーク導入企業事例について
リモートワーカー働き方実態とテレワーク導入企業事例について
ZappyLink Co.,Ltd.
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
Ishikawa Yuya
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
Masakazu Muraoka
もしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったら
Chloe Takahashi
ドメイン駆動設計と サーバサイドと私
ドメイン駆動設計と サーバサイドと私
Noriaki Kadota
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
Daichi Aoki
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
まべ☆てっく運営
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介
Kazuma Kadomae
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
ekushida
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
祐磨 堀
Similar to HTML5の今とこれから
(20)
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
0からのウェブディレクション講座:制作・開発編 ver 3.00
0からのウェブディレクション講座:制作・開発編 ver 3.00
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
Web制作者視点で理解するソフトェアテスト
Web制作者視点で理解するソフトェアテスト
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
【Glide活用】ノーコードではじめるビジネスアプリ講座
【Glide活用】ノーコードではじめるビジネスアプリ講座
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
リモートワーカー働き方実態とテレワーク導入企業事例について
リモートワーカー働き方実態とテレワーク導入企業事例について
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
もしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったら
ドメイン駆動設計と サーバサイドと私
ドメイン駆動設計と サーバサイドと私
はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
モバイル&コンシューマ向けのシステム開発ができるPHP&Javaプログラマの皆様へ
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
Recently uploaded
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Recently uploaded
(9)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
HTML5の今とこれから
1.
WEBディレクター・企画担当者向け HTML5の今とこれから
2.
山本卓也(31) ・株式会社イノセントグリーン代表 -フロントエンジニア ・ザオリア株式会社取締役 -Webディレクター 自己紹介 あだ名:やまたく 【仕事】
3.
海浜幕張でWEB設計・デザイン・コー ディング・運用を行う制作会社です。 WEBディレクション・フロントエンジニ アを担当してます。 スマホユーザーにアプリを使ってもらっ て、使用感や問題点などのフィードバック をもらえる、ユーザビリティテストをオン ラインで行えるサービスをやってます。 普段やっている仕事
4.
HTML5とは まずは整理
5.
HTML5の意味する範囲 「HTML5(エイチティーエムエルファイ ブ)」という言葉の意味ですが、厳密に は、WEBサイトをつくるためのHTMLと いう言語で5番目にルールが変更された バージョンのもの、になります。 ただ、いろいろなところで話題になってい るHTML5は、もっと広範囲のものを指し ていて、Javascriptでリッチにしてみた り、現在ルールが決められている新しい機 能群だったり、CSS3だったり、最新の ウェブ技術全般のことをHTML5と呼ぶこ とが多いようです。 僕は一般的な意味のほうをHTML5と呼ん でしまっていいのではないかと思っていま す。 (以降、この定義でHTML5という名称を 使います)
6.
含まれる技術 HTML5の新技術群というのは、こ れだけたくさんあります。 それぞれ一つ一つが、新しい技術仕 様になっていて、それぞれにワーキ ンググループというチームが作られ て仕様(ルール)づくりをしていま す。 これらの技術群によって、WEBの世 界がとてもおもしろいことになる、 と期待されています。
7.
戦いの歴史 戦いの歴史と言ってしまうと大げさです が、HTML5が出来上がるまでには二つの 団体の衝突がありました。 もともとHTMLのルールを作っていたの は、W3Cという組織で、インターネットの 生みの親とも言えるティムバーナーズリー という人が率いています。W3Cは厳格な ルールを作ることを目指してXHTMLとい うルールを作っていたのですが、それに異 議をとなえたのが、オペラやアップルやモ ジラなどのブラウザ会社達でした。 時代が進むにつれて、WEBサイトは、ただ情報をみるためだけのものから、アニメーションしたり、動画があった り、ゲームのようなものができたりと、より高機能なものになっていきました。そのため、厳密なルールよりも、 もっといろいろな高機能が使えるようなルール作りを優先するべきだとして、ブラウザ会社達はW3Cとは別の標準 化団体WHATWGをつくってしまいました。 そのWHATWGが提案していたものが今のHTML5の元になるもので、WEBの世界の流れはそちらを向いていると判 断したW3Cは、XHTMLのルールづくりを進めることをやめて、WHATWGと共同でHTML5をWEBの標準技術と してつくっていくことに決めました。
8.
2012年12月17日ついに勧告候補に。 仕様作りはほぼ 終わりましたよ。 みんな使ってみてネ First Public Working
Draft Working Draft Last Call Candidate Recommendation Rroposed Recommendation Recommendation HTML5は仕様が完成 (正確にはHTML5とCanvas 2D context) 2008年1月 2012年12月 HTML5タグの仕様は、2012年の12月17日によう やく勧告候補という段階にいきました。 「勧告候補」とは、仕様づくりがいったん終了した 状態。広くみんなに利用を呼びかけて何か不具合が あったら教えてね、という段階です。 英語ではcandidate Recommendationといい、 CRと略されたりします。 この段階までくると大幅な変更はもうないと言われ ていて、安心して使えるようになったな、という感 覚です。 (追記) とはいえ2013年4月には、<main>タグが追加され るという比較的大きな変更がありました・・。
9.
なぜ注目されるのか
10.
2008年1月 HTML5草案発表 2008年7月 iPhone3G発売 ジョブズ 「Flashをサポートしないから HTML5でやってね」 きっかけはiPhone(?) HTML5って? 2004年 Web application
1.0発表(WHATWG) ざわざわ ざわざわ HTML5が注目されるようになった理由は 諸説ありますが、やはり大きなきっかけは iPhoneの登場なのかなと思います。 iPhoneが発売された際、アップル社の故ス ティーブ・ジョブズは「iPhoneではFlash をサポートしない。動画などのコンテンツ はHTML5を使って欲しい」といった趣旨 のコメントを出しました。 これまで動画含めリッチなコンテンツは Flashで作るというのが当たり前になって いたので衝撃が走りました。 そのときに「で、HTML5っていったいな に?」と注目されていきました。
11.
WEBサイトをつくるための技術だったHTML CSS Javascriptが アプリケーションを作れるくらいに進化 WEBサイトを超えて WEBサイト
アプリケーション これまでのHTMLは、動きのないWEBペー ジを作るための言語でした。 HTML5になってもっとも大きな変化は、 その用途が変化したというところです。 ゲームや普段パソコンにインストールして 使っているような、アプリやソフトウェア と言われているものまで作れるように進化 したものがHTML5です。
12.
どのような環境でも、アプリ (ソフト)を開発するなら HTML5で行えるようになる アプリ開発のプラットフォーム 僕達が日常的に使っているアプリケーショ ンはOSに依存しています。 windows用に作られたアプリはwindows上 でしか動きませんし、macOS用に作られ たものはmac上でしか動きません。 HTML5で作られたアプリは、あたりまえ ですが、ブラウザで動きます。ブラウザは windowsでもmacでも搭載されています。 そのため、HTML5で作られたアプリはど のようなOSでもブラウザさえあれば動かす ことができます。 つまりOSに依存せずにアプリが作れるた め、HTML5がアプリ開発のプラット フォームになるのではないかと期待されて います。
13.
あらゆるアプリはブラウザ上で動く ようになり、ブラウザがかつての OSのようになる。 ブラウザがOSに? (OSに依存しない) OSに依存せずにブラウザ上でアプリが動くということは、ユー ザーにとって、OSの違いはさほど重要じゃなくなってくることを 意味します。 アプリが使えるかどうかは、むしろブラウザの差が関わってきま す。 そのため、これまでOSでおきていたような覇権争いは、HTML5 の普及にともなって、ブラウザでの争いに移行していくと言われて います。
14.
HTML5でサイト制作
15.
HTML5利用はiPhoneやiPadで見られることを想定するケース FlashでもOK HTML5 HTML5での制作現場 PC向けサイトでは複雑な動きや高機能部分は当分Flash HTML5ではアプリまで作れるほどの機能群 がある、と言いましたが、WEBサイト制作の 現場では、アプリというよりはこれまで同様 にページ制作として、すでに使われ出してい ます。HTML5ではリッチなコンテンツを作 ることができますが、その表現力やパフォー マンスにおいては、まだまだFlashに及びま せん。 PC用のサイトでは、Flashが使えますから、 わざわざHTML5を使う必要はなく、当面 Flashが使われていくものと思います。 ただ「PCでも、iPadなどのタブレットやス マートフォンでも見られるようなサイトを 作って欲しい」という要望は増えており、そ の際にはHTML5で作るという選択がとられ るケースが増えています。
16.
HTML5に強いブラウザ98% ブラウザシェア(日本) PC スマートフォン IE7 :
4% IE8 : 22% IE9 : 20% 2%1% 45% 52% iOS Android Opera 他 HTML5に強いブラウザ50% 2013年2月 ブラウザシェア HTML5のさまざまな機能 は、実はPC用サイトでは、 まだそれほど使えません。 ブラウザのシェアでIE8と9が 大きな勢力を持っており、こ のIE8と9はHTML5の機能に ほとんど対応していないため です。 一方、スマートフォンでは、 iPhoneのsafariとAndroidの Browserで98%のシェアを わけあっています。 これらの2つのブラウザは HTML5にある程度対応して いるため、HTML5はスマー トフォンサイトで主に利用さ れています。
17.
必須ライブラリ マークアップは準備OK ・ECサイト ・コーポレートサイト ・動きのあるキャンペーンサイト いわゆるWEBサイト ・html5shiv.js ・ie9.js ・css3pie ・jquery.js いくつかのライブラリを使えば HTML5+CSS3でマークアップできます。 サイトをマークアップするためのタグをHTML5にす るという意味では、PC用サイトでもすでに十分利用 することができます。 僕がお客様のWEBサイト制作を行う場合も、特別な 事情がない限りはHTML5を使ってマークアップして います。 その際は、いくつかのライブラリを使います。 html5から登場したタグをIEで使えるようにする html5shiv.jsや、css3の機能をIEで使えるようにする ためのcss3pieなどを利用することで、IE8以降を ターゲットブラウザとする制作では、問題なく HTML5を使うことができます。 (IE8以降のブラウザシェアは95%)
18.
アプリ化機能たちは限定的 Drag & Drop Canvas Videoタグ Web
Storage 【現状でも限定的に使える機能例】 HTML5をつかってPC用のアプリを作っていくのはま だ時期尚早と言えそうです。 さきほども言ったとおり、HTML5に対応していない ブラウザがシェアの半分を占めているためです。 IE8や9が根強く残っているうちは、いくつかの機能 しか使えません。 IE10からは本格利用OK! 現在の最新バージョンであるIE10 はHTML5をサポートしていま す。 IE8,9が少数派になり、IE10以降 が大きなシェアをもつようになっ て、ようやくアプリ化機能が安心 して使えるようになります。 予想としては2年後くらいになる のかなと思っています。
19.
http://caniuse.com/ ブラウザ対応表があります caniuse.comはHTML5やCSS3の機能別に、ど のブラウザで使えるのかがまとまっているサイト です。 「あの機能つかっていいのかな?」と思ったとき に確認すると便利です。
20.
スマホアプリ開発
21.
スマホのブラウザはHTML5に(ある程度)対応している。 スマホアプリをHTML5で Android ブラウザ iOS Safari HTML5サポート率72%(iOS6.0)HTML5サポート率60%(Android4.2) HTML5の利用はスマホで先行している スマートフォンでは、Android標準ブラ ウザと、iOSサファリがほとんどのシェ アをとっています。 そのため、IEを気にしなくてはならな いPC用サイトに比べて、ずっと HTML5が使いやすい環境です。 そのためHTML5でのアプリ開発は、 PCサイトよりも、スマートフォンサイ トが主戦場となっています。
22.
いまのスマホアプリは ネイティブアプリ Objective-C Java C#
Vidual Basic それぞれの端末で、別々の言語 スマートフォン用のアプリを作る際、 現状では、OSによって別々の言語でそ れぞれ作る必要があります。 例えば、iPhoneはObjective-Cという 言語をつかってアプリを作らなくては いけませんし、Android用にはJavaを 使って、Windows Phone用にはC#な どの言語を使ってアプリを開発しなく てはいけません。 これらの端末でアプリが使えるように するには、1つのアプリを提供するの にも、3つの言語でそれぞれ作ること になります。
23.
これからのスマホアプリは HTML5アプリ 1つの技術でマルチデバイス HTML5 (HTML+CSS+Javascript) 開発・運用費用は半分 という人もいる 一方、HTML5を使ったアプリでは、 OSに依存せずブラウザ上で動くため、 1つのプログラムで作られたアプリ が、すべてのOSで動きます。 (1ソース、マルチデバイス) OSごとに別々のプログラムで開発して いく必要がなく、HTML5という1つの 技術で済むので、アプリ開発がぐっと 楽になります。
24.
HTML5でネイティブアプリと 同じようなものが作れる?
25.
ネイティブのような機能 ・Application Cache ・Web storage ・Device
API たとえば上記の機能をつかえば、 HTML5アプリでもネイティブのような体 験が提供できる。 オフラインでも 動いちゃう! カメラやセンサー などを使えちゃう! HTML5アプリで、ネイティブアプリのような アプリを作ることができるのでしょうか? HTML5アプリとはブラウザ上で動くプログラ ムなので、ネイティブアプリのようにiPhone の傾きを使った機能が使えなかったり、電波 の届かないところでは画面が消えてしまったり するのではないか?と思う方もいます。 しかし、一般的に思われている以上にHTML5 ではいろいろなことができます。 たとえば、Application Cache(アプリケー ションキャッシュ)や、Web storage(ウェ ブストレージ)といったHTML5の機能を使う ことで、オフラインでも動くアプリが作れま すし、Device APIを使うことで、iPhoneのセ ンサーを使ったアプリをつくることができま す。工夫次第でネイティブアプリと同様のユー ザー体験を提供することができるのです。
26.
DEMOを作ってみました HTML5の機能を使って、シンプルなTODO管理アプリ を作ってみました。 スマートフォンで以下のURLに接続してみてください。 HTML5を使って作ったアプリですが、オフライン機能 を使っているため、一度接続したあとは、オフラインに なったあとも引き続き使うことができます。 また、iPhoneでホーム画面にアイコンを追加したあと は、アプリが立ち上がる起動画面を見せることもできま す。 tacshock.com/html5/stodo/
27.
しかし現状は問題も APIがそろっていない (細かな機種依存など) AndroidとiPhoneで CSSやjavascriptの 動きが違う ネイティブに比べて レスポンスが悪い(遅い) AppstoreやGoogle Play 経由以外では配布しずらい ゲームなどで特に 問題になってるようです。 ビジネス的な面 技術的な面 技術的な面 技術的な面 良いことずくしのように書きましたが、現状では 課題も多くあります。よく言われているのは以下 のような課題です。特に、Androidブラウザーで は、プログラムしたとおりに動かないケースも多 く、開発者を悩ませています。 現在、各所でAndroid対応のためのノウハウが貯 められていますし、ブラウザの差を吸収したライ ブラリなども盛んに作られています。
28.
Androidのシェア推移 モバイルは機種変更がデスクトップよりも速い 0% 20% 40% 60% 80% 100% 2012年4月 2012年10月 2013年4月 Android4 Android2系 モバイルは機種変更のペースがPCよりもずっと早いこと も、課題の解決を後押ししています。 バグの多いAndroid2系の端末は、2012年の4月時点で は、9割ものシェアをもっていましたが、新しく発売され たAndroid4系への機種変更がすすみ、1年で半減してい ます。PCにはない機種変更の早さです。 Android4系ですべてのバグを解消しているわけではあり ませんが、素早いペースで技術的な課題は解決されていく ことが期待できます。
29.
ネイティブアプリ Objective-C Java C#
Vidual Basic それぞれの端末用に開発スキルが必要 HTML5アプリ HTML+CSS+Javascript 1つの言語でOK(低コスト) 独自に配布しないといけない ネイティブに比べて遅い ○ バージョンアップや変更も簡単○ 決済・広告配信等の機能を時前で用意 デバイス固有の機能が統一されていない 内容に制限がない○ ストアを通じて配布できる レスポンスが良い バージョンアップや変更に時間がかかる 決済機能がついている デバイス固有の機能 内容の審査がある(主にiPhone) ○ ○ ○ ○ ネイティブアプリとHTML5 アプリのメリット・デメリッ トを整理してみました。 現時点で、それぞれ一長一短 あり、どちらが優っていると は言えませんので、アプリの 種類やビジネスモデルに応じ て開発方法が選択されていま す。 HTML5で現状もっとも問題 視されているのは、「ネイ ティブに比べて遅い」という ことです。 特に多くのグラフィックを動 かすゲームなどのアプリでは 問題となっています。
30.
HTML+CSS+Javascript 1つの言語(+α)でOK(低コスト)○ ツール デバイス固有の機能○ ストアで配布できる○ ハイブリッドアプリ ネイティブアプリ 一長一短あるネイティブアプリとHTML5アプリですが、それ ぞれの良さを持ち寄った開発手法として、ハイブリッドアプリ というスタイルがあります。 これは、HTML5で作られたプログラムを、ツールを使って、 それぞれのデバイス用のネイティブアプリに変換してしまうと いう方法です。 ネイティブアプリが出来上がるため、ストアで配布でき、デバ イス固有の問題の多くもツールが解決してくれます。 急増している開発スタイルです。 ツールとしては有名なものがいくつかあります。 Phonegapやtitanium、appmobiなどが話題になっていま す。 Phonegap
31.
HTML5アプリ化 踏み出すメリット
32.
30%の手数料がかからない(売上アップ) 開発、運用費用の大幅なコストダウン HTML5アプリのメリット 利益額のアップ HTML5アプリに踏み出す最大のメリット は、AppStoreやGoogleplayに支払う手数 料の回避と、開発・運用費用の削減ではな いかと思います。 売上アップと同時にコストダウンができる ため、同じサービスを提供するにしても利 益をアップさせることができます。 アメリカのFinancial Timesという新聞社が 提供するアプリは、2011年にネイティブア プリから撤退し、HTML5アプリに移行しま した。 ユーザー数は減らず、むしろ1年で77%も増 加し、HTML5アプリの成功事例として有名 です。 最近では、AmazonなどもHTML5アプリ化 への動きを見せています。
33.
カスタマーリーチが条件 AppStoreやGoogle Playの告知効果 に頼らなくてもユーザーにリーチでき るのであればHTML5化するメリット は大きい。 ネイティブアプリは、AppストアやGooglePlay上での 販売に大きく依存します。 ユーザーがアプリを探してダウンロードする経路は、ほ ぼストアしかないため、ストアで流通させることができ ないHTML5アプリをユーザーに届けるのは簡単ではあ りません。 しかし、すでに運営しているサービスでユーザーを抱え ているなどの場合は、ストアに頼らなくても効果的に告 知することで、HTML5アプリを端末に登録してもらう ことはできます。 ユーザーへのリーチをもっている企業にとっては HTML5アプリ化のメリットが大きいと言えそうです。
34.
これからのHTML5
35.
HTML5でアプリ開発が進む 2016年までに業務アプリの50%以上が HTML5で作ったハイブリッドアプリになる (米調査会社ガートナー) “モバイルアプリケーションのニーズに対応するため、 企業ではマルチプラットフォーム対応へのてこ⼊入れを することになる。HTML5アプリケーションをネイティ ブコンテナに載せたハイブリッドアーキテクチャで は、デバイスのネイティブな機能にもアクセスできる 利利点があり、多くの企業はこれに魅⼒力力を感じるだろ う。” docomoがHTML5アプリを 月額で使い放題サービス開始 NTTドコモがスマートフォン向けに、ニュースや天気 情報、交通案内など様々なコンテンツを⽉月額固定料料⾦金金 で使い放題にするサービスを6⽉月にも開始する。 〜~中略略〜~ 初年年度度は500万⼈人の会員獲得を⽬目指し、3年年後には最⼤大 800万⼈人にまで広げる⽬目標を掲げている。 〜~中略略〜~ ドコモがコンテンツ制作会社に要請しているのは、コ ンテンツの表⽰示にウェブ表⽰示⾔言語の最新⽅方式である 「HTML5」を使った「ウェブアプリ」だ。 HTML5は今後ますます浸透していくと考えられており、アメリカの調査会社ガートナーは、3年後までに業務用アプ リの過半数がHTML5で作られたアプリになると予想しています。また、docomoも月額で使い放題のHTML5アプリ サービスの開始を発表するなど、HTML5アプリ化への動きはますます続いていきそうです。
36.
各社HTML5推進 日米の影響力のある大きな企業たちが、こぞって HTML5推進を表明していることからも、一時的な ブームではなく、長期的に標準技術として浸透して いくことが予想できます。 もともとHTML5の発起人であったアップル社や、 HTML5推進を強く表明していたGoogleの立ち位 置は微妙なところですが・・。
37.
HTML5ベースのモバイルOS TIZEN OS TIZEN(タイゼン)というOSの搭載された端末が 2013年にドコモから発売されます。この端末では、最 初からHTML5アプリの利用を前提として作られてお り、HTML5で開発されたアプリを手軽にインストール し、ネイティブアプリのように使うことができるよう になっています。 スマートフォンのアプリを、iOSやAndroidのように閉 じられたものにするのではなく、オープンに自由に開 発・配布・インストールできるようにしよう、という 考え方に多くの企業が賛同しているようです。 他にもFirefox OSやubuntu
touchなど、モバイルOS 第3極と呼ばれる競争も起き始めています。 HTML5アプリが盛り上がるに連れて、どこかのタイミ ングでiPhoneやAndroidでもHTML5アプリが簡単に インストールできるような仕組みに変化するのではな いかと、僕は考えています。
38.
増えていくWebデバイス パソコンや携帯電話だけでなく、インターネッ トにつながるデバイスはますます増えていきま す。 たとえば、腕時計やメガネ、あるいは、冷蔵庫 や洗濯機まで、インターネットに接続するよう なものが発表されています。 こういったものにすぐにブラウザが搭載される かはわかりませんが、端末が増えれば増えるほ ど、共通して開発できる標準技術の重要性は増 して行きます。 HTML5なら、腕時計から冷蔵庫の操作をした り、メガネからエアコンの操作をするなど、デ バイス間のやりとりをすることも容易になり、 新たな便利をうむサービスの芽が大量に出てく るだろうと思います。
39.
これから登場してくる新たなデバイス向け のHTML5アプリを今から考えてみるのも いいかもしれません。 これからの未来にワクワクしますね!
40.
おしまい twitter:tacshock