Chrome+HTML5 Conference「Webアプリの道も一歩から」講演資料を公開します - Hatena Developer Blog
2011年8月21日(日)に開催されたChrome+HTML5 Conferenceにて、id:nagayamaとid:nanto_viが講演を行ったので、その資料を公開します。「Webアプリの道も一歩から 〜はてなブックマークの場合〜」と題し、公式Chromeウェブアプリ はてなブックマークの開発フローや利用技術について解説しました。発表は2部構成で、ディレクターのid:nagayamaがはてなでのChromeウェブアプリの開発フローに関して、エンジニアのid:nanto_viがウェブアプリで活用しているHTML5関連技術に関して述べています。 Webアプリの道も一歩から 〜はてなブックマークの場合〜 View more presentations from nagayama Web アプリの道も一歩から 実装について by nanto_vi スクリプトの設計 表示内容と URL の切り
Dive Into HTML5
by Mark Pilgrim with contributions from the community Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards. We encourage you to buy the printed work — Mark Pilgrim’s artfully titled “HTML5: Up & Running” — published on paper by O’Reilly, under the Google Press imprint. Your kind and sincere feedback is always welcome, and this work
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
多数のブラウザでvideoタグに対応する·html5media MOONGIFT
html5mediaはjQuery/JavaScript製のオープンソース・ソフトウェア。HTML5を使って動画を流す場合に使われるのがvideoタグだ。現在主流になっているMPEG4にはライセンスコストがかかるので標準化が困難で、広まるのは難しい状況ではある。 Safariで実行した場合。videoタグのまま そんなvideoタグを使えばFlashを使わない、または使えないブラウザでも動画の閲覧が出来るようになる。だがIEをはじめとしてHTML5に対応していないとvideoタグが使えないので二重の開発を行う必要があるのは問題だ。そこで使ってみたいのがhtml5mediaだ。 html5mediaは多数のブラウザでvideoタグを使えるようにするライブラリだ。記述するのはvideoタグでよく、html5mediaを読み込むことでHTML5に対応していればそのままvideoタグを使い、対応し
HTML5 基礎知識 - web探検隊
HTML5を書くための基礎知識をメモHTML5の雛形XHTML5ではなくてHTML5のマークアップについて html> head> title>HTML5 基礎知識title> meta charset="UTF-8"> head> body> body> html> HTML5の新要素 文章構造に関するものsection汎用的なセクション。文章のアウトラインを構成する。articleセクションの一種で、Webページから独立したコンテンツを表す。asideセクションの一種で、外側のセクションに対する補足情報を表す。navセクションの一種で、外側のセクションに対するナビゲーションメニューを表す。footerセクションのフッター。headerセクションのヘッダー。hgroup複数の見出し(h1-h6)をまとめる。 外部コンテンツの埋込みfigureキャプションを伴うような内容のものを文章中に埋
HTML5と関連仕様、言語リファレンスが公開 | Web標準Blog | ミツエーリンクス
HTML WGより3月4日付で、新しいHTML5の草案を含めた6つの文書が公開されました。 HTML5 HTML Canvas 2D Context HTML Microdata HTML+RDFa HTML: The Markup Language HTML5 differences from HTML4 HTML5 differences from HTML4の日本語訳も、いつもの通り更新しています。 HTML5 における HTML4 からの変更点 変更点 昨年の草案からの変更点から、いくつか気になるものを挙げてみます。 ひとつは、会話文を表現するdialog要素が削除されました。専用のマークアップを用意する必要性や、表現力に乏しいといった懸念が寄せられたことによります。 また、figure要素とdetails要素について内容モデルの変更がありました。これらの要素はキャプションにlab
HTML5の機能をGearsを使って実現する·Gear5 MOONGIFT
HTML5はまだ一般的ではないが魅力的な機能に溢れている。Webブラウザ内でデータベースが使えたり、JavaScriptのバックグラウンド処理、位置情報を取得することだってできる。こうした機能は先進的なブラウザでは既に実装されはじめているが、まだまだシェアは低い。 Gearsを使ったローカルデータベース こうした状況が続くと開発者もおいそれとHTML5の導入には踏み切れない。そこで代替技術としてGearsを用いてみよう。 今回紹介するオープンソース・ソフトウェアはGear5、Gearsを使ったHTML5 API実装だ。 Gearsと言えばGoogleの開発したオフラインでも動作するWebアプリケーションを構築するソフトウェアだ。HTML5で実現されるWebブラウザデータベース同様、Gearsでもデータベースが利用できる。そのインタフェースを提供するのがGear5だ。 こちらはユニットテスト
[CSS]HTML 5用のブラウザのスタイルをリセットするスタイルシート
HTML 5用のブラウザのスタイルをリセットするスタイルシートをHTML5 Doctorから紹介します。 <textarea name="code" class="css" cols="60" rows="5"> /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl,
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」:phpspot開発日誌
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 2009年07月07日- Modernizr ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。 Google Ghrome の場合で対応を明示 Firefox 3 の場合で対応を明示 JavaScript では、次のように使えるようです。 if (Modernizr.cssgradients) { alert('対応'); } else { alert('未対応'); } cssgradients の他には以下のようなプロパティが利用可能。 Modernizr.ca
HTML5で実装される予定（だった）videoタグを旧ブラウザでも·video4all MOONGIFT
各ベンダーの意向が揃わず、HTML5での仕様策定が断念されたvideoタグではあるが、オンラインでの動画閲覧がこれだけ広まっているのであればやはり何らかの仕様が欲しいだろう。そんな企業の思惑を越えて動けるのが開発者だ。 Safari4の場合 videoタグはHTML5をサポートしたブラウザでしか動かないが、旧来のブラウザでも可能にするのがvideo4allだ。 今回紹介するオープンソース・ソフトウェアはvideo4all、多数のブラウザでvideoタグを利用可能にするJavaScriptだ。 video4allはvideoタグを各ブラウザの仕様に合わせて表示を変更するJavaScriptライブラリだ。対応するのはFirefox 3.0/2.0、IE6〜8、Opera、Safari2、Chromeとなっている。Safari4やFirefox3.5についてはvideoタグがそのまま使われる。
最新ブラウザのHTML5タグへの対応状況をまとめてみた - IT-Walker on hatena
ちょっとしたプログラムを書いて、各メジャーブラウザのHTML5タグへの対応状況を調べてみました。現時点でのHTML5仕様に含まれているタグが、ブラウザにUI要素として認識されるかどうかを調べただけです。これだけでは、HTML5の対応状況としては一部しか調べられませんが、一応の参考として。 間違いがありましたらご連絡ください。 具体的に行った調査方法は、記事の最後を参照してください。 IE8Chrome2Chrome3(Beta)Safari4Firefox3.5Opera10(Beta) div○○○○○○ section×××××× nav×○○○×× article×××××× aside×○○○×× h1○○○○○○ h2○○○○○○ h3○○○○○○ h4○○○○○○ h5○○○○○○ h6○○○○○○ hgroup×○○○×× header×○○○×× footer×○○○××
【レポート】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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 5の仕様が一覧できるクィックリファレンス
HTML5.JP - 次世代HTML標準 HTML5情報サイト