SlideShare a Scribd company logo
1 of 8
HTML5についての大まかな理
        解
   20110831 佐藤正志
外部環境の変化から見た世界地図

  ブラウザごとの互換      HTML5への
  性に悩まされた時代      統一が進行中




              Webkitが支配的
              (HTML5で大体動
              く)
基本的な心構え
• 仕様確定は2014年
  – http://www.atmarkit.co.jp/fdotnet/special/ie10earlyreview02/ie10ear
    lyreview02_01.html
• 「どのバージョンのブラウザにどの機能が利用可能か」は刻
  一刻と変わってしまう。
  – どの機能がどのブラウザで使えるのかを今は毎回テストしてか
    ら利用する必要がある。
  – DBは仕様の変化を続けている
      • SQL Database→IndexDB
      • ある程度汎用なのはLocalStorage、SessionStorage
  – Movieはコーデックがバラバラ
      • http://journal.mycom.co.jp/articles/2010/06/02/html5-videos/index.html
• どうしても新しい機能を使わなければならないわけではない。
  – 妥協も大事。
• スマートフォン・タブレットでの開発ではブラウザが固定に
  なる場合が多いので対応しやすい。
html5はどこまで?




  http://www.publickey1.jp/blog/10/html5_9.html
ざっくりした世界地図

マークアップ・デザイン
    寄り
    新しい要素                         クロスドメイン
                                   WebSocket
 input   Video
         Audio        SVG
                                    WebWorkers
                     Canvas
 CSS3
                                        DB
 MediaQuery
                      Drag-drop         File

              GeoLocation
                                  プログラミング寄り
どんな人のパスを考える?
• HTML&CSSのみのマークアップデザイナー
 – CSS3(角丸・アニメーション)
 – 新しい要素(section、article…)
• Ajaxでの動きも作成できるUIデザイナー
 – 基本的にはJSの標準APIが増えたと考えれば良い
• システム全体を考えるアーキテクト
 – システムの設計に影響する部分が大事と思われる
   • Websocket
   • DB
   • File
ライブラリ
• SenchaTouch
  – Ext.JS由来のモバイル用ライブラリ
  – JavaScript中心でUIを構築
  – プログラマならこれもやれそう
• jQueryMobile
  – 既存のWEBに簡単なマークアップをつけるだ
    けでスマートフォン用のわかりやすい動作を
    つけることが出来る。
  – デザイナーならこっちが手軽か
付録
• 新しいマークアップの解説
 – http://www.slideshare.net/futomihatano/html5-
   9066829

More Related Content

What's hot

Docker on azure!進化していくcontainerを覗いてみよう!
Docker on azure!進化していくcontainerを覗いてみよう! Docker on azure!進化していくcontainerを覗いてみよう!
Docker on azure!進化していくcontainerを覗いてみよう! Tsukasa Kato
 
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Hiroshi Hayakawa
 
ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」
ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」
ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」nisobe58
 
.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶ
.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶ.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶ
.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶTomomitsuKusaba
 
TypeScript x Bot Framework
TypeScript x Bot FrameworkTypeScript x Bot Framework
TypeScript x Bot FrameworkKazumi IWANAGA
 
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!Yuki Ishikawa
 
2012 kanemotolablecture7
2012 kanemotolablecture72012 kanemotolablecture7
2012 kanemotolablecture7ytanno
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめTomomitsuKusaba
 
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめWebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめAkira Inoue
 
Openness, Innovation and Opptunity
Openness, Innovation and OpptunityOpenness, Innovation and Opptunity
Openness, Innovation and OpptunityMakoto Kato
 
クラウド化が進む今だから読み解くHyper-Vアーキテクチャ
クラウド化が進む今だから読み解くHyper-Vアーキテクチャクラウド化が進む今だから読み解くHyper-Vアーキテクチャ
クラウド化が進む今だから読み解くHyper-VアーキテクチャTsukasa Kato
 
「何もしないのにCIが失敗した」を防ぐ
「何もしないのにCIが失敗した」を防ぐ「何もしないのにCIが失敗した」を防ぐ
「何もしないのにCIが失敗した」を防ぐKazushi Kamegawa
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、ReactのベストプラクティスとバッドプラクティスKohei Asai
 
新登場!Surface Laptop 4
新登場!Surface Laptop 4新登場!Surface Laptop 4
新登場!Surface Laptop 4Tomokazu Kizawa
 
ASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おうASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おうDevTakas
 
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?Microsoft
 
Database tools for .NET Core
Database tools for .NET CoreDatabase tools for .NET Core
Database tools for .NET CoreYuta Matsumura
 

What's hot (19)

Docker on azure!進化していくcontainerを覗いてみよう!
Docker on azure!進化していくcontainerを覗いてみよう! Docker on azure!進化していくcontainerを覗いてみよう!
Docker on azure!進化していくcontainerを覗いてみよう!
 
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
 
ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」
ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」
ソフトウェアパッケージベンダーのためのクラウドソリューション「SQL Anywhere OnDemand Edition」
 
.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶ
.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶ.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶ
.NETラボ2021年9月 Blazorのカスタム認証を通じてDIの便利さを学ぶ
 
TypeScript x Bot Framework
TypeScript x Bot FrameworkTypeScript x Bot Framework
TypeScript x Bot Framework
 
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
 
2012 kanemotolablecture7
2012 kanemotolablecture72012 kanemotolablecture7
2012 kanemotolablecture7
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
 
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめWebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
 
Openness, Innovation and Opptunity
Openness, Innovation and OpptunityOpenness, Innovation and Opptunity
Openness, Innovation and Opptunity
 
クラウド化が進む今だから読み解くHyper-Vアーキテクチャ
クラウド化が進む今だから読み解くHyper-Vアーキテクチャクラウド化が進む今だから読み解くHyper-Vアーキテクチャ
クラウド化が進む今だから読み解くHyper-Vアーキテクチャ
 
「何もしないのにCIが失敗した」を防ぐ
「何もしないのにCIが失敗した」を防ぐ「何もしないのにCIが失敗した」を防ぐ
「何もしないのにCIが失敗した」を防ぐ
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
 
新登場!Surface Laptop 4
新登場!Surface Laptop 4新登場!Surface Laptop 4
新登場!Surface Laptop 4
 
React.js + Flux
React.js + FluxReact.js + Flux
React.js + Flux
 
ASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おうASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おう
 
Azure Cloud Shell
Azure Cloud ShellAzure Cloud Shell
Azure Cloud Shell
 
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
 
Database tools for .NET Core
Database tools for .NET CoreDatabase tools for .NET Core
Database tools for .NET Core
 

Viewers also liked

HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]George Harada
 
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフPusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフRyunosuke SATO
 
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋Staffnet_Inc
 
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜満徳 関
 
初心者向けJavaScript/HTML5ゲームプログラミング
初心者向けJavaScript/HTML5ゲームプログラミング初心者向けJavaScript/HTML5ゲームプログラミング
初心者向けJavaScript/HTML5ゲームプログラミングKazuki Miyanishi
 
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流Web業務アプリの新しい潮流
Web業務アプリの新しい潮流久司 中村
 
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
Cordovaで業務アプリを作る 〜その事例とノウハウ〜Cordovaで業務アプリを作る 〜その事例とノウハウ〜
Cordovaで業務アプリを作る 〜その事例とノウハウ〜Kenichi Inoue
 
HTML5でギャルゲーを作れるか?
HTML5でギャルゲーを作れるか?HTML5でギャルゲーを作れるか?
HTML5でギャルゲーを作れるか?deflis
 
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceupHtml canvas shooting_and_performanceup
Html canvas shooting_and_performanceupYohei Munesada
 
次世代Web業務アプリケーション
次世代Web業務アプリケーション次世代Web業務アプリケーション
次世代Web業務アプリケーションFumio SAGAWA
 
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会Hiroshi Toda
 
第3回日本seleniumユーザーコミュニティ勉強会
第3回日本seleniumユーザーコミュニティ勉強会第3回日本seleniumユーザーコミュニティ勉強会
第3回日本seleniumユーザーコミュニティ勉強会Nozomi Ito
 
ルータでルータのプレゼンをした話。 ~# 技術解説
ルータでルータのプレゼンをした話。 ~# 技術解説ルータでルータのプレゼンをした話。 ~# 技術解説
ルータでルータのプレゼンをした話。 ~# 技術解説Takumi Sueda
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリアシアル株式会社
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?Fumio SAGAWA
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらHiroaki Okubo
 
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化Nozomi Ito
 
Selenium Antipatterns
Selenium AntipatternsSelenium Antipatterns
Selenium AntipatternsJumpei Miyata
 
20161218 selenium study4
20161218 selenium study420161218 selenium study4
20161218 selenium study4Naoya Kojima
 

Viewers also liked (20)

HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
 
Pusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフPusherとcanvasで作るリアルタイムグラフ
Pusherとcanvasで作るリアルタイムグラフ
 
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
『Business Model Canvas ~再演~』第15回 POStudy 〜プロダクトオーナーシップ勉強会〜
 
初心者向けJavaScript/HTML5ゲームプログラミング
初心者向けJavaScript/HTML5ゲームプログラミング初心者向けJavaScript/HTML5ゲームプログラミング
初心者向けJavaScript/HTML5ゲームプログラミング
 
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
 
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
Cordovaで業務アプリを作る 〜その事例とノウハウ〜Cordovaで業務アプリを作る 〜その事例とノウハウ〜
Cordovaで業務アプリを作る 〜その事例とノウハウ〜
 
HTML5でギャルゲーを作れるか?
HTML5でギャルゲーを作れるか?HTML5でギャルゲーを作れるか?
HTML5でギャルゲーを作れるか?
 
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceupHtml canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
 
次世代Web業務アプリケーション
次世代Web業務アプリケーション次世代Web業務アプリケーション
次世代Web業務アプリケーション
 
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
Seleniumの薄っすい話 百八式 @ 第3回 日本Seleniumユーザーコミュニティ勉強会
 
第3回日本seleniumユーザーコミュニティ勉強会
第3回日本seleniumユーザーコミュニティ勉強会第3回日本seleniumユーザーコミュニティ勉強会
第3回日本seleniumユーザーコミュニティ勉強会
 
ルータでルータのプレゼンをした話。 ~# 技術解説
ルータでルータのプレゼンをした話。 ~# 技術解説ルータでルータのプレゼンをした話。 ~# 技術解説
ルータでルータのプレゼンをした話。 ~# 技術解説
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
 
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化
 
Selenium Antipatterns
Selenium AntipatternsSelenium Antipatterns
Selenium Antipatterns
 
20161218 selenium study4
20161218 selenium study420161218 selenium study4
20161218 selenium study4
 

Similar to テスト

HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことMasakazu Muraoka
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashYasunobu Ikeda
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~Oda Shinsuke
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説Masakazu Muraoka
 
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」Osamu Shimoda
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線yoshikawa_t
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Masakazu Muraoka
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料OCHI Shuji
 
Intalio japan special cloud workshop
Intalio japan special cloud workshopIntalio japan special cloud workshop
Intalio japan special cloud workshopDaisuke Sugai
 
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかたあなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかたMasakazu Muraoka
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」Takashi Endo
 

Similar to テスト (20)

HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なことHTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説
 
Dot_fes2013
Dot_fes2013Dot_fes2013
Dot_fes2013
 
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
HTML5開発最前線
HTML5開発最前線HTML5開発最前線
HTML5開発最前線
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
 
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
Intalio japan special cloud workshop
Intalio japan special cloud workshopIntalio japan special cloud workshop
Intalio japan special cloud workshop
 
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかたあなたはどのタイプがお好き?  イケメンHtml5系男子 ゲットのしかた
あなたはどのタイプがお好き? イケメンHtml5系男子 ゲットのしかた
 
Angular2
Angular2Angular2
Angular2
 
Angularreflex20141210
Angularreflex20141210Angularreflex20141210
Angularreflex20141210
 
Html5制作の現在
Html5制作の現在Html5制作の現在
Html5制作の現在
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 

テスト

  • 1. HTML5についての大まかな理 解 20110831 佐藤正志
  • 2. 外部環境の変化から見た世界地図 ブラウザごとの互換 HTML5への 性に悩まされた時代 統一が進行中 Webkitが支配的 (HTML5で大体動 く)
  • 3. 基本的な心構え • 仕様確定は2014年 – http://www.atmarkit.co.jp/fdotnet/special/ie10earlyreview02/ie10ear lyreview02_01.html • 「どのバージョンのブラウザにどの機能が利用可能か」は刻 一刻と変わってしまう。 – どの機能がどのブラウザで使えるのかを今は毎回テストしてか ら利用する必要がある。 – DBは仕様の変化を続けている • SQL Database→IndexDB • ある程度汎用なのはLocalStorage、SessionStorage – Movieはコーデックがバラバラ • http://journal.mycom.co.jp/articles/2010/06/02/html5-videos/index.html • どうしても新しい機能を使わなければならないわけではない。 – 妥協も大事。 • スマートフォン・タブレットでの開発ではブラウザが固定に なる場合が多いので対応しやすい。
  • 5. ざっくりした世界地図 マークアップ・デザイン 寄り 新しい要素 クロスドメイン WebSocket input Video Audio SVG WebWorkers Canvas CSS3 DB MediaQuery Drag-drop File GeoLocation プログラミング寄り
  • 6. どんな人のパスを考える? • HTML&CSSのみのマークアップデザイナー – CSS3(角丸・アニメーション) – 新しい要素(section、article…) • Ajaxでの動きも作成できるUIデザイナー – 基本的にはJSの標準APIが増えたと考えれば良い • システム全体を考えるアーキテクト – システムの設計に影響する部分が大事と思われる • Websocket • DB • File
  • 7. ライブラリ • SenchaTouch – Ext.JS由来のモバイル用ライブラリ – JavaScript中心でUIを構築 – プログラマならこれもやれそう • jQueryMobile – 既存のWEBに簡単なマークアップをつけるだ けでスマートフォン用のわかりやすい動作を つけることが出来る。 – デザイナーならこっちが手軽か
  • 8. 付録 • 新しいマークアップの解説 – http://www.slideshare.net/futomihatano/html5- 9066829