SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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
 

Tendances (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
 

En vedette

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
 

En vedette (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
 

Similaire à テスト

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
 

Similaire à テスト (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」
 

Dernier

論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Hiroshi Tomioka
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki
 

Dernier (12)

論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 

テスト

  • 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