Introduction to Service Worker: How to use Service Worker - HTML5 Rocks

2015/01/06 164 users

Your browser may not support the functionality in this article. リッチなオフライン体験、定期的なバックグラウンド同期、プッシュ通知など、これまでネイティブアプリを必要としていた機能が Web にもやってきます。そして、それらの機能が提供される基盤技術が Service Worker なのです。 Service Worker とは Se... 続きを読む

<picture>まわり雑感 その1 - fragmentary

2014/10/31 38 users fragmentary picture ネイティブサポート

2014-10-31 <picture>まわり雑感 その1 HTML Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Ro... 続きを読む

High Performance Animations - HTML5 Rocks

2014/10/04 75 users

Your browser may not support the functionality in this article. 単刀直入に本題に入りましょう。モダンブラウザは4つの項目を手軽にアニメーションすることができます。位置（position）、大きさ（scale）、回転（rotation）、透明度（opacity）です。もし、それ以外のものをアニメーションするなら、それはご自分の頑張り次第... 続きを読む

レスポンシブイメージのネイティブサポート - HTML5 Rocks

2014/09/30 130 users ネイティブサポート レスポンシブイメージ

Your browser may not support the functionality in this article. <picture> 要素とは <picture> 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込み... 続きを読む

XMLHttpRequest2 に関する新しいヒント - HTML5 Rocks

2014/08/30 32 users

Your browser may not support the functionality in this article. はじめに XMLHttpRequest は、HTML5 の世界であまり知られていない優れたオブジェクトの 1 つです。厳密に言うと、XHR2 は HTML5 ではありません。XHR2 は、ブラウザ ベンダーがコア プラットフォームに対して加えている段階的な改良の一部です。... 続きを読む

JavaScript Promises: There and back again - HTML5 Rocks

2014/07/31 212 users JavaScript Promises

Your browser may not support the functionality in this article. レディース・アンド・ジェントルマン！ Web 開発の歴史に残る瞬間です。 [ドラムロール] JavaScript で Promise がサポートされました！ [打ち上げ花火、きらびやかな紙吹雪、そして群衆の歓声] おそらく、ここで読者の反応は以下のいずれかでしょう。 なぜ... 続きを読む

[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET

2014/07/16 437 users yoheiMune YoheiM レンダリング net 概要

こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのよう... 続きを読む

HTML Imports: ウェブのための #include - HTML5 Rocks

2014/05/20 121 users INCLUDE HTML Imports ウェブ

Your browser may not support the functionality in this article. なぜ imports が必要なのか？ ウェブ上で様々なリソースを読み込みたいとします。JavaScript であれば <script src>、CSS なら <link rel="stylesheet">、画像なら <img>、動画なら <video>、音声なら <aud... 続きを読む

「HTML5 Rocksの翻訳ハンズオン」html5j英語部イベントレポート | HTML5Experts.jp

2014/04/25 20 users リソース API 翻訳 多言語 HTML5Experts.jp

HTML5 Rocksは、開発者向けのHTML5周辺技術に関するリソースを公開しているサイトです。Googleによって運営されており、記事が多言語に対応しているものもあります。 html5j英語部の今回のイベントでは、いくつか記事をピックアップし、グループに分けて翻訳を行いました。 今回翻訳対象としてピックアップした記事： User Timing API: Understanding your W... 続きを読む

Supercharging your Gruntfile: How to squeeze the most out of your build configuration. - HTML5 Rocks

2014/02/13 43 users

Published: February 13th, 2014 Updated: February 13th, 2014 Comments: 0 Introduction If the Grunt world is new to you, an ideal place to start is Chris Coyier’s excellent article “Grunt for People Who... 続きを読む

Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks

2014/01/29 139 users

Your browser may not support the functionality in this article. はじめに HTML5 という言葉が聞かれるようになって最も大きな変化の一つがブラウザでのストレージ環境の充実です。従来であれば Cookie (もしくはプラグインで利用可能になった保存領域) 以外になかったストレージに、豊富な選択肢が用意されるようになりました。 最もポピ... 続きを読む

Gmail スケールの効率的メモリ管理 - HTML5 Rocks

2013/12/12 270 users Gmail スケール メモリ管理 ガベージコレクション メモリ

Your browser may not support the functionality in this article. はじめに JavaScriptはガベージコレクションによる自動メモリ管理の機能を備えますが、アプリケーションが効率的なメモリ管理を全くせずに済むわけではありません。それどころか、JavaScriptで書かれたアプリケーションは、メモリリークやメモリの肥大化等、ネイティブア... 続きを読む

Case Study: Inside World Wide Maze - HTML5 Rocks

2013/06/06 81 users Case Study

サポートされているブラウザ: Opera 未対応 IE 未対応 Safari 未対応 Firefox 対応済み Chrome 対応済み ご使用のブラウザは、この記事で使用している機能の一部に対応していない可能性があります。 Your browser appears to support the functionality in this article. World Wide Maze はスマート... 続きを読む

JavaScript でのローカル ファイルの読み込み - HTML5 Rocks

2013/04/24 186 users ファイル JavaScript

サポートされているブラウザ: Opera 対応済み IE 対応済み Safari 対応済み Firefox 対応済み Chrome 対応済み ご使用のブラウザは、この記事で使用している機能の一部に対応していない可能性があります。 Your browser appears to support the functionality in this article. はじめに HTML5 では、File... 続きを読む

CSS Masking - HTML5 Rocks

2013/04/04 66 users

Supported browsers: Opera unsupported IE unsupported Safari supported Firefox supported Chrome supported Your browser may not support all of the functionality in this article. Your browser appears to ... 続きを読む

HTML's new template tag: standardizing client-side templating - HTML5 Rocks

2013/02/26 41 users

Supported browsers: Opera unsupported IE unsupported Safari unsupported Firefox unsupported Chrome supported Your browser may not support all of the functionality in this article. Your browser appears... 続きを読む

WebKitのbackgroundショートハンドのバグがフィックスされるかもしれない | Dress Cording

2013/02/21 42 users ショートハンド WebKit Dress Cording

2/1のHTML5 Rocksのブログによると、WebKitのbackgroundショートハンド・プロパティの挙動が修正され、バージョンの移行が完了次第、モバイル版Webkitのbackground-sizeのショートハンドがW3Cの仕様に準拠し、Firefox、Opera、IE9~と同じ挙動になるとのことです。 いったいどんなバグがあって、どのように修正されるのでしょうか？ ある日突然表示が崩れ... 続きを読む

A Tale of Two Clocks - Scheduling Web Audio with Precision - HTML5 Rocks

2013/02/06 45 users

サポートされているブラウザ: Opera 未対応 IE 未対応 Safari 未対応 Firefox 未対応 Chrome 対応済み ご使用のブラウザは、この記事で使用している機能の一部に対応していない可能性があります。 Your browser appears to support the functionality in this article. はじめに Webのプラットフォームを使ってオ... 続きを読む

Performance Tips for JavaScript in V8 - HTML5 Rocks

2012/10/11 58 users

Supported browsers: Opera supported IE supported Safari supported Firefox supported Chrome supported Your browser may not support all of the functionality in this article. Your browser appears to supp... 続きを読む

ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks

2012/04/16 1331 users 最新ウェブブラウザ 内部構造 ブラウザ

このタイプのボトムアップ パーサーは「シフト - 還元パーサー（shift-reduce parser）」と呼ばれます。入力が右側にシフトされ（ポインタが最初は入力の先頭を指し、右側に移動していくイメージ）、段階的に構文ルールに還元されるためです。 パーサーの自動生成 独自のパーサーを生成できるツールがあり、「パーサー ジェネレータ」と呼ばれています。言語の文法（語彙と構文ルール）を指定すると、作... 続きを読む

HTML5 Rocks - Writing Augmented Reality Applications using JSARToolKit

2012/03/05 20 users

Supported browsers: Opera supported Internet Explorer unsupported Safari unsupported Firefox unsupported Chrome supported Your browser may not support all of the functionality in this article. Your br... 続きを読む

iOS5なのにposition:fixed;が効かない時に確認すること | Culture27

2011/10/28 44 users fixed iOS position ゴー Culture27

なんだかんだでFirefoxメインで制作しているわけですが、とあるページでposition:fixed;が効いてないみたいだよ？と@e_luckさんに教えてもらいまして、、、でちょっと調べてみて気づいたことです。 HTML5 Rocks - Improving the Performance of your HTML5 Appの「The magic CSS bullet」で紹介されていた下記のコー... 続きを読む

How Browsers Work - Behind the Scenes of Modern Web Browsers — Translation of "How Browsers Work" v0.1 documentation

2011/08/28 130 users Translation of Apa 原文 ライセンス 翻訳

この翻訳について¶ この文章は HTML5 Rocks で公開されている How Browsers Work: Behind the Scenes of Modern Web Browsers を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく, 文章は Creative Commons Attribution 3.0 License , サンプルコードは Apa... 続きを読む

「HTML5 Rocks」だけじゃない、ブラウザ各社のHTML5チュートリアルを集めました － Publickey

2010/06/28 396 users Publickey モジラ ペンタ マイクロソフト オペラ

Webブラウザを提供する主なベンダ、グーグル、マイクロソフト、モジラ、オペラ、アップルらは、HTML5への対応を急ぐと同時に、相次いでHTML5の魅力や内容をデベロッパー向けに紹介するサイトを開設しています。この記事では、それらをまとめて紹介することにしましょう。 グーグルの「HTML5 Rocks」 グーグルは6月22日に開発者向けにHTML5を紹介し、学習するためのWebサイト「HTML5 R... 続きを読む

GoogleがHTML5の実験場を公開、学習からコードの実行まで 【増田(maskin)真樹】 : TechWave

2010/06/23 338 users maskin TechWave masaki_masuda

2010年06月23日08:13 カテゴリニュース GoogleがHTML5の実験場を公開、学習からコードの実行まで 【増田(maskin)真樹】 maskin(masaki_masuda) Share 米Googleは現地時間の6月22日、HTML5開発を支援するサイト「HTML5 Rocks」を公開した。 サイトではHTML5開発の各種情報のほか、チュートリアル、そしてサイト上でHTML5関連... 続きを読む