![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2021-06-28T11:23:28+00:00","default:admin","admin") -[[どうしてHTML5が廃止されたのか:https://future-architect.github.io/articles/20210621a/]] HTML5 + CSS3 = 次のWeb標準？ -[[HTML5]] -[[CSS3]] -[[いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0:http://www.publickey.jp/blog/09/webhtml5css3javascript_20.html]] -------- -[[HTML5 草案:http://dev.w3.org/html5/spec/Overview.html]] -[[HTML5-Developers-jp:http://groups.google.com/group/html5-developers-jp?hl=ja]] -[[HTML5.JP:http://www.html5.jp/]] --[[HTML関連英文書の日本語訳:http://www.html5.jp/trans/index.html]] ---[[HTML5のFAQ:http://www.html5.jp/trans/whatwg_html5faq.html]] ---[[HTML4との違い:http://www.html5.jp/trans/w3c_differences.html]] --[[html5doctor 日本語訳:http://www.html5.jp/html5doctor/index.html]] -[[HTML5 関連情報メモ:http://www.junglejava.jp/archives/2009/01/entry_900.html]] -[[HTML5 を学ぶための情報源まとめ:http://hyper-text.org/archives/2009/11/html5_resources.shtml]] -[[HTML5, きちんと。:http://www.slideshare.net/myakura/html5-2480964]] -[[グーグルが賭けるHTML 5の未来:http://www.atmarkit.co.jp/news/200905/28/html5.html]] -[[HTML5はFlashやSilverlightを不要なものにする:http://www.atmarkit.co.jp/fwcr/design/benkyo/html5_03/01.html]] -[[HTML 5 Web Sockets vs. Comet and Ajax:http://www.infoq.com/jp/news/2008/12/websockets-vs-comet-ajax]] -[[Adobe AIR/FlashはHTML5と連携しモバイルにも進出:http://www.atmarkit.co.jp/fwcr/design/benkyo/html5_06/01.html]] -[[iPhone OSのFlash排除で、HTML5/JavaScriptだけがマルチプラットフォーム対応として残った:http://www.publickey1.jp/blog/10/iphone_osflashhtml5javascript.html]] -[[WebKit／Google Chrome開発者に聞く、HTML5最前線:http://www.atmarkit.co.jp/news/201005/12/chrome.html]] -[[HTML5仕様、2014年の勧告目指す:http://www.itmedia.co.jp/news/articles/1102/16/news061.html]] * 概要 [#saea271e] -[[5分で把握するHTML5 - Google Developer Dayセッションリポート:http://journal.mycom.co.jp/articles/2009/06/15/gdd1/index.html]] -[[HTML5 Web Messagingが変えるWebアプリ開発（ダイジェスト版）:http://www.slideshare.net/shumpei/html5-web-messagingweb]] -Webブラウザベンダが参加するWHATWGコミュニティによって作成が進められていた仕様 -以下が可能になる --2D/3Dグラフィックス操作 --動画や音声の再生 --オフラインWebアプリケーション（Web Applications 1.0） --クロスドメイン通信 --クライアントサイドデータベース（SQLストレージAPI） --バックグラウンドプロセス --サーバからのデータプッシュ --多様な入力フォーム（Web Forms 2.0） -一部の機能はすでに最新のWebブラウザに実装されている -スケジュール --2009年3月にワーキングドラフトの最終版を発表 --2009年6月に準備リコメンデーションを発表 --2010年6月にプロポーザルリコメンデーションを発表 --2010年9月にHTML5をW3C勧告として公表 * HTML5 [#l606ef53] -[[HTML5のレイアウト要素:http://codezine.jp/article/detail/4274]] -[[HTML 5 — HTML 4 からの変更点:http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/]] -フォームの強化 --input要素のtype属性に指定できる型の追加 --フォームに入力された値を検証する仕組みの追加 ---入力が必須である事を表すrequired属性 ---入力値のパターンを表すpattern属性 (正規表現で指定) -canvasタグ --任意のグラフィックを自由に描画できる領域として、canvas要素が利用できる --幅と高さを指定したcanvasを定義し、あとはJavaScriptコードを用いて矩形や円、画像などを自由に描画できる -メディア要素(videoタグ、audioタグ) --JavaScriptコードを用いて操作し、再生・停止・頭出しなど、細かい操作を行うことが可能 -文書構造をより明確に表すsectionやarticleといった要素 -メニュー項目を作成するためのmenuタグやcommandタグ -progress(進捗バー), meter(メーター) * 機能 [#d9b25cc4] -[[詳解! HTML 5と関連APIの最新動向 - 新タグ&API編:http://journal.mycom.co.jp/special/2009/html5-1/]] -[[詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編:http://journal.mycom.co.jp/special/2009/html5-2/index.html]] ** Web Storage [#y004616a] -[[日本語訳:http://www.html5.jp/trans/w3c_webstorage.html]] -クライアント内にデータを永続化するための機構。StorageとDatabaseの2つがある。 -Storage --キー/バリューの形式で永続化できる --キーと値はどちらも文字列である必要がある --localStorage ... ドメインごとに保存され、永続化期間は無制限だ。 --sessionStorage ... ウィンドウごと保存され、永続化期間はそのウィンドウを閉じるまでとなる -Database --SQLを用いてアクセスする事の出来る永続化領域 --非同期APIと同期APIの双方を用いてアクセスすることができる --非同期APIは扱いにくい分、データアクセスがバックグラウンドで行われるため、UI操作の妨げにならない -大きなデータを蓄積できるので、ユーザーエクスペリエンスの向上やサーバー負荷の低減に役立てることができる ** Web Workers [#ad5da498] -バックグラウンドで動作するJavaScriptスレッド -「重い」処理を行うJavaScriptコードも、ワーカで実行するようにすれば、UIをブロックする事なく処理を行える -メインページのJavaScriptとワーカ、もしくはワーカ同士はJavaScriptオブジェクトを「メッセージ」として送受信することにより、ワーカ間の協調を実現 -SharedWorker ... 複数のウィンドウ間で共有 -Persistent Worker ... ブラウザのウィンドウを閉じても動作を続ける（策定中？） 」 ** The Web Sockets API [#n5ce2b7d] -[[日本語訳:http://www.html5.jp/trans/w3c_websockets.html]] -JavaScriptからサーバーとの双方向通信を行いメッセージ交換を実現するAPI -サーバ側でもWeb Socketsへの対処を必要とされるが、HTTPを用いずに効率的な双方向通信を実現可能 ** Offline Web Applications [#o02d8b13] -[[日本語訳:http://www.html5.jp/trans/w3c_offline_webapps.html]] -次の2つで実現 --SQL-based database API ... ローカルにデータを保存する --offline application HTTP cache ... ユーザーがネットワークに接続していないときでもアプリケーションが確実に利用できるようにする * ブラウザ [#oac81f0f] -[[Browser support for CSS3 and HTML5:http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/]] -[[FindMeByIP.com:http://www.findmebyip.com/]] ... 自分のブラウザの対応状況がわかる -[[HTML5のコーデック策定決裂:http://d.hatena.ne.jp/satox/20090710/1247152468]] -[[HTML5 video、ブラウザ対応状況とコーデックまとめ:http://journal.mycom.co.jp/news/2010/01/27/033/]] -[[Safari Dev Center:http://developer.apple.com/safari/]] -[[Mozilla Developer Center:https://developer.mozilla.org/ja]] ** IE9 [#wbc51a96] -[[IE 9、HTML5互換性でChromeやFirefoxを突き放す:http://www.computerworld.jp/topics/pcc/189695.html]] -[[IE9で「HTML5への愛」を強調するMicrosoft:http://www.itmedia.co.jp/enterprise/articles/1003/18/news025.html]] ... Microsoftも危機感を持ち始めたみたい --[[Internet Explorer 9初披露、HTML5対応、DirectXで描画。Silverlight 4は今日からβ公開:http://www.publickey.jp/blog/09/internet_explorer_9html5directxsilverlight_4.html]] ... 他の主要ブラウザは対応済みなのにね。いつ出ることやら。 ** ブラウザ補完計画 [#qe9798cb] -[[ExplorerCanvas:http://excanvas.sourceforge.net/]] ... JavaScriptで対処 -[[Modernizr:http://www.modernizr.com/]] ... 対応状況チェック * ライブラリ・フレームワーク [#odc3729f] -[[html5lib:http://code.google.com/p/html5lib/]] -[[AjaxフレームワークのYUI2.8.0がHTML5ライクなクライアントストレージに対応:http://blog.8maki.jp/2009/09/yui2-8-0_html5_like_localstorage.html]] -[[RGraph: HTML5 canvas graph library based on the HTML5 canvas tag:http://www.rgraph.net/]] -[[Canvasを活用するJavaScriptライブラリ「LibCanvas」:http://www.moongift.jp/2010/10/libcanvas/]] * HTML5 サンプル [#w2672c4f] -[[SketchPadを見ずしてHTML5を語るなかれ:http://www.atmarkit.co.jp/news/201002/10/sketchpad.html]] -[[デザイナーのためのHTML5リソースまとめ:http://www.designwalker.com/2009/11/html5.html]] -[[(株)あゆた - HTML5サンプル集:http://ayuta.co.jp/html5-samples/index.html]] -[[Bespin:https://mozillalabs.com/bespin/]] ... <canvas> で作られたエディタ -[[Chrome Experiments:http://www.chromeexperiments.com/]] * HTML5 活用事例 [#f916e293] -[[Apple HTML5 showcase:http://www.apple.com/html5/]] ... HTML5、CSS3、JavaScriptだけで実現出来る事例とそのソースを公開 -[[GoogleのChromeチームがHTML5電子書籍「20 Things I Learned About Browsers and the Web」を公開:http://ebook.itmedia.co.jp/ebook/articles/1011/22/news060.html]] -[[mbtweet:http://taiyolab.com/mbtweet/about.html]] ... HTML5で作成されたHTML Webアプリケーション -[[iPad向けHTML5ベースの動画配信技術、Brightcoveが提供:http://www.itmedia.co.jp/enterprise/articles/1003/30/news069.html]] -[[Google開発者が「Quake II」をHTML5に移植 ブラウザでプレイ可能に:http://www.itmedia.co.jp/news/articles/1004/06/news038.html]] -[[HTML5/JavaScriptの遊べるゲームライブラリ「Akihabara」、iPhone/Androidにも対応:http://www.publickey1.jp/blog/10/html5javascriptakihabaraiphoneandroid.html]] -[[で、実際のところHTML5でどのくらいのアプリが実装できるのか実験してみた:http://satoshi.blogs.com/life/2009/09/html5.html]] -[[HTML5 VideoでiPadがデジタルサイネージに！:http://ascii.jp/elem/000/000/534/534533/?mail]] -[[ニコニコ動画、HTML5に対応へ 9月末予定:http://www.itmedia.co.jp/news/articles/1008/27/news064.html]] -[[HTML5で制作したサイト「The Shodo」を解剖する:http://itpro.nikkeibp.co.jp/article/COLUMN/20110126/356508/]] -[[3Dの「夢の世界」をマウスでぐりぐり HTML5を使ったミュージックビデオ:http://nlab.itmedia.co.jp/nl/articles/1105/16/news087.html]]
