いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
2009-09-24
code var foo, bar, buz = 'javascript:alert("Hello, World!")' ; for (foo in {}.valueOf.call()){ if (foo.split('o')[0] === 'l'){ ({}.valueOf.call())[foo.split('bar')[0]] = buz; } } // works on IE6, Firefox1.5.0.8, Opera9.02, etc Why does it works on IE6? //Because of ... /* Original code is provided by Gareth Heyes */ Object.prototype.valueOf.call() == window //this is true on IE6, Firefox1.5.0.8 ,
中島聡氏が見せるhtml5の未来：前半6本 | AppBank
本日鎌倉に来ていただいた中島聡さん、html5で何が実現できるのか？を現在果敢に挑戦されていまして、こちらのページ（WidgetPad.com）で実験作品を随時公開されているのですが、現在公開されている12個のhtml5で作成されたウェブアプリケーションをすべてご紹介いたします！ 信じられますか？これらはSafari上で動いているんですよ！？まずは前半6個です。 これがiPhoneのSafari上でスムーズに動いているんです。 まずは6本、個別に紹介していきます！ Gold Fish Simulation 小さなお魚さんが画面上をスイスイ泳ぎます。 このウェブアプリの動画はこちら。 Blob Sallad これが一番すごいかも！！！ 指で触れます。ぴょんぴょん触れます。 2本指で触るとなんと分裂します！！！ このウェブアプリの動画はこちら。 YAHOO! Finance 3D ヤフーファイ
最近公開のHTML5関連の参考サイト色々まとめ:phpspot開発日誌
最近公開のHTML5関連の参考サイト色々をまとめてみました。 チュートリアル〜チートシートまでをご紹介。 Coding A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine ゼロからHTML5レイアウトを行うためのチュートリアル HTML 5 Reset Stylesheet | HTML5 Doctor HTML5用のCSSリセットスタイルシート How to build a desktop WYSIWYG editor with WebKit and HTML 5 - Ars Technica WebkitとHTML5を使ってWYSIWYGエディタを作成するチュートリアル HTML5 drag and drop in Firefox 3.5 ? 0xDECAFBAD Firefox3.5でHTML5のド
あまり知られていないけれど、HTML5では正規表現が使えるようになる
正規表現といえば、主にsedやawkといったUNIXのコマンドで、あるいはPerlやPHP、JavaScriptなどのスクリプト言語の中などで、プログラマーが文字列を操作するために使う道具でした。 その正規表現がHTML5でサポートされる見通しです。いままで正規表現を使わずに済んでいたデザイナやコーダーといった職種の方々も、いずれ仕事としてきちんと正規表現を扱わなければならない時代がやってきます。 HTML5のどこに正規表現が使えるようになるの？ 正規表現は、input要素のpattern属性の中で使えることになる予定です。W3Cが2009年8月25日付け公開しているHTML5のワーキングドラフトの「4.10 Forms」の「4.10.4.2.8 The pattern attribute」では次のように記載されています。 The pattern attribute specifies a
JavaScriptでNESエミュ - NullPointer's
HTML5 developerグループでJavaScriptのファミコンエミュレータが紹介されていました。 画面はHTML Canvasに書き込んでいるとして、ROMの読み込み方法が予想できなかったのでソースコードを読んでみたところ、ROMのバイト値を８進数の文字コードに変換してJavaScript文字列として保存しておいたものを、AjaxでロードしてcharCodeAtで数値に戻しているようだ。 http://benfirshman.com/projects/jsnes/ http://twoseater.bob.buttobi.net/ これは変態コードですねえ…
HTMLとCSSしか書かなかったコーダーは今なにしてる？ - Hato-Style
2009年09月13日 （日） Web雑談 風邪ひいた。頭が痛くて熱が下がらない...しかし悶々として眠れない。いろいろと他にの人に迷惑かけちゃったり、マジごめんなさい。ちょっと寝付けなくなっちゃったので、横になりながら頭の中で思ってたことをiPhoneでメモ書き。 マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記 HTMLは道具 3ping.org マークアップエンジニア云々に関して書いてみる | Blog hamashun.com プログラミング知らないHTMLコーダーがダメな理由 はてな匿名ダイアリー HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね - kwatchの日記 (X)HTML + CSS しか出来ない人はそれなりに危機感を感じたほうがいいと思った今日の昼ご飯でした。 マークアップエンジ
html5の新しい要素 « KuniMemo
html5はhtmlの新しいバージョンである。この特徴は今はweb2.0の時代であり、動的な要素がどんどん必要になってきたから対応していこうというものである。そのためjavascriptを使う前提でつくられた要素がちょこちょことあってcanvasをうまく使えばflashがいらなくなりそう。 html5がちらほらで始めてきたので今のうちからモノにしておきたい。ブラウザもけっこう対応していて、html5でWebを作っても見れるようになってきている。実験的にだとは思うけど、appleのsafari 4のページはhtml5で書かれている。ハックをうまくつかえばどのブラウザでも何となくは使えるみたい。 調べてみた感じだとけっこうめんどくさそう。なんか前より似たような要素がいっぱいある気がする。英語ができないので細かな意味が分からないせいなのかもしれないけど。でもcanvasとかvideoとかがすごそ
HTML5サンプル集 - 株式会社あゆた
このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。 このサンプルの多くは、弊社技術顧問の白石氏がマイコミジャーナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。 どれも非常にシンプルなものではありますが、HTML5の各機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプリケーションキャッシュのサンプル (ダウンロード) (Safari4、Google Chrome3で動作確認済み。Firefoxだと、アプリケーションキャッシュのイベントが正しく発生せず、動作しないと
新しいHTML5の草案が公開 | Web標準Blog | ミツエーリンクス
HTML WGより、新しいHTML5の草案が、変更点をまとめた文書と共に公開されました。 HTML 5 (2009年8月25日付け草案) HTML 5 differences from HTML 4 いつものとおり、変更点の翻訳も更新しましたので、そちらを参考にしていただければ幸いです。 HTML 5 ― HTML 4 からの変更点 2009 年 4 月 23 日版からの変更点 マイクロデータとWAI-ARIA 変更点のうち、特に注目しているのが「マイクロデータ (Microdata)」の追加と、WAI-ARIAの組み込みが始まったことです。 マイクロデータは、情報を機械可読が可能なかたちで要素内に埋め込むための仕組みです。こういった関連はセマンティックWeb的な側面での注目がありましたが、HTML5ではドラッグ＆ドロップ機能と組み合わせることで、構造化されたデータのコピー＆ペーストも可能
HTML 5のレイアウト要素
はじめに HTML 5は興味深い仕様です。この仕様は計画的に生まれたものではありません。W3CはHTML 4.1をHTMLの決定版として表明していました。そのため、HTML 5に対する要望の多くは、主にWeb Hypertext Application Technology Working Group（WHATWG）などのHTMLユーザーコミュニティから出てきました。WHATWGからの圧力が強かったため、数年前にHTML 5のワーキンググループが編成されることになりました。それ以来、HTML 5ワーキンググループは少々ごまかしのある仕様を採用して、それをW3C的な表現で書き直すというプロセスを（そのプロセスに付随する駆け引きとともに）ゆっくり進めてきました。 2009年4月23日、HTML 5ワーキンググループはこの仕様の最新ドラフトをリリースしました。全体的に見て、このリリースは前回のリ
HTML5の進化、Web標準の進化はメガトレンドになる
HTML5が登場することによってWebはどう変わるのでしょうか？ いま見えているのは、ハイパーリンクによってつながったドキュメントを閲覧する、という原初のWebの姿から、アプリケーションを実行するプラットフォームへと進化する、という道筋です。 この道筋を改めて確認したのが、8月21日に僕の古巣＠ITに掲載された記事「ネイティブアプリ級のHTML 5にグーグルが期待すること」です。これは、HTML5とその先をグーグルがどう考えているのか？ について僕がインタビューして記事にしたものです（実は僕が＠ITを離れてから初めて寄稿した記事です）。 Webアプリはネイティブアプリと同等になる このインタビューではグーグルの及川氏が、Webアプリケーションでネイティブアプリケーションと同等のものを目指す、と明言しています。 現在のWebアプリケーションでは、GMailのようなメールクライアント、Goog
IEが有るから助かってるって思えるかもしれないお話
何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、 「IEなんて・・・（自重」、「IEさえ・・・（自重」、「ちょ、IEおま・・・（自重」 とか、思うっすよね。 ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。 そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。 ぇーまぁそんな訳で、明日からIEが一切なくなったとして。 「3番目のグローバルナビだけちょっと指定変えてもらえる？」 と、言われて、 『class追加するのやだなぁ』 ってのが、 「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」 って言われてしまったり。 「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」 と、言われて、 『最初のh3だけclass追加しないとい
HTML5タグリファレンス - HTML5.JP
W3C HTML5 の「第4章 HTMLの要素 (4 The elements of HTML)」とそれに関連する項目をもとに、HTML5 の HTML タグリファレンスをご用意しました。主に HTML5 の仕様の和訳となります。 正確性を求める場合は、最新の原文を参照してください。また、もし本サイトのリファレンスが、最新の仕様と異なる部分がありましたら、ご指摘頂けると幸いです。 コンテントモデル HTML5 の要素は、コンテントモデルと呼ばれるグループに分類されます。このコンテントモデルは、その要素の中に入れても良いものを定義します。HTML5 をマークアップするには、このコンテントモデルを意識しなければいけません。まず最初に、コンテントモデルを理解しましょう。 グローバル属性 すべての要素で共通に使える属性をグローバル属性と呼びます。class 属性や id 属性など、これまでによく使
W3C，マークアップ言語「XHTML 2」を「HTML 5」に統合へ
Web関連技術の標準化団体World Wide Web Consortium（W3C）は米国時間2009年7月2日，マークアップ言語HTMLをXMLで再定義した言語「XHTML 2」について，策定担当ワーキング・グループ（WG）の憲章（行動指針）「XHTML 2 Working Group charter」の適用を2009年末で打ち切ると発表した。同憲章を更新せず，HTML担当の「HTML WG」に投入するリソースを増やすことで「HTML 5」仕様の策定作業を加速させ，HTML開発の方向性を明確化する考え。 W3CはXHTMLをHTMLのXMLシリアライゼーション（XML形式への変換）と見なしている。HTML 5仕様にXMLシリアライゼーションを含め，引き続きHTML WGで検討していく。現在HTML 5仕様でこのXMLシリアライゼーションは「XHTML 5」と呼んでいるが，今後HTML
【レポート】5分で把握するHTML5 - Google Developer Dayセッションリポート (1) HTML5仕様の概要 | エンタープライズ | マイコミジャーナル
Google I/Oで大きく取り上げられ、一躍注目の技術に躍り出たHTML5。Google Developer Day 2009でも、「HTML5により拓かれる次世代Web」という田村健人氏によるセッションは大盛況で、椅子が足りずに床に座り込んで聴講する人がかなりの数に上った。 筆者も同セッションに参加し、HTML5の新機能に関する簡潔でまとまった知識を得ることができた。本稿では田村氏のセッション内容を元に、HTML5の全体像をコンパクトにお伝えしよう。 HTML5とは? グーグル ソフトウェア エンジニアの田村健人氏 HTML5は、言うまでもなくHTMLの最新バージョンである。現行のバージョンであるHTML4も、決して小さな仕様ではなかったにもかかわらず、そこにWebアプリケーション向けの機能が大幅に強化された。 あまりに仕様が巨大すぎるため、現在の規格は以下の4つに分けられている。 H
HTML5 で試しに Web ページを組んでみた (改訂版) - VERSIONFIVE
先日のGoogle I/Oで大きく取り上げられたように、最近HTML5のニュースが増えていて注目度が上がっているようです。canvas要素やvideo要素、オフラインキャッシュのような、アプリケーション開発におけるHTML5が主に注目されているようですが、Safari 4のウェルカムページがHTML5で描かれていたり、国内でもlivedoorのラボが積極的に採用したりと事例も増えていますね。 そこで、約半年前に作ってみたサンプルのコードを見直して修正してみました。参考にしたのは以下のページです。 HTML 5 (W3C Working Draft 23 April 2009) HTML 5 (Editor’s Draft 13 June 2009) HTML 5 ― HTML 4 からの変更点 (Working Draft 23 April 2009) web:g HTML5 コードのアウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
で、実際のところHTML5でどのくらいのアプリが実装できるのか実験してみた
Amazon.co.jp: HTML & XHTML 第5版: Chuck Musciano (著), Bill Kennedy (著), 原隆文 (翻訳): 本
IT戦記