HTML5Experts.jp

W3CのEME標準化、ServiceWorker解説、RespImgシンタックスはレスポンシブ画像問題など海外WEBテク20本を一挙公開

斉藤 祐也
連載： 海外WEBテク最新動向 (10)

斉藤祐也の海外WEBテク定点観測＜Issue.7: 2013/10/01-2013/10/31＞

今月の定点観測はW3CがEMEをなぜ標準化したのか、その動きに対する反対と賛成意見を紹介し、AppCacheが解決できなかったオフラインに対する問題を解決すべく立ち上がったServiceWorkerの解説、突如として現れたかに見えるレスポンシブ・イメージに対する解決であるRespImgなど、合計20件の記事や動画などを紹介します。

注目ニュースピックアップ

W3CによるEncrypted Media Extensionの標準化について

今年5月にEncrypted Media Extension(EME)という仕様がワーキング・ドラフトとなり公開されました。
この仕様はなぜW3Cによって標準化されるべきものだったのでしょうか。あるいはW3Cの勇み足だったのでしょうか。
この一ヶ月、MozillaのCTOであるBrendan Eichも氏の立場を明らかにしたりと多くの議論が展開されました。 10月の議論の火付けとなったと思われるAmelia Andersdotter氏の記事を含め、EMEに関する記事を集約したので参考にしてください:

ServiceWorkerとは何か

原題: ServiceWorkers Explained

多くのデバイスが常時接続を保証されない状態になりうる状況の中、オフライン・ファーストという視点での開発が急務になりがらもHTML5 Application Cacheには多くの問題があることが明らかになってきています。そんな中、このドキュメントには次世代の仕様として模索されているServiceWorkersに関する詳細について紹介されています。

RespImgシンタックスの提案

原題: Proposal for RespImg Syntax

Apple社のRetinaディスプレイを始めとする、高解像度のディスプレイと旧来の標準的なディスプレイが混在する中、また様々なサイズのデバイスが利用者の好みによって選択できる世の中で、これまで”レスポンシブ・イメージ”に対する唯一の答えが提案されてこなかったのが現状だ。このRespImageシンタックスはこの問題に対する新しい視点による解決案となるかも知れません。John Mellor氏によるこちらのメーリングリストへの投稿もあわせて読んでおくとよいでしょう。

拡張可能なWebへ – Domenic Denicola

原題: The Extensible Web

Webがこれまでと同じように数ヶ月、あるいは数年にもわたるメーリングリストを使った標準化のプロセスのままでよいのか。そんな疑問から始まった#extendthewebforwardというムーブメントの共同エディタであるDomenic Denicola氏によるJS Conf EU 2013での発表The Extensible Web: JavaScript All the Way Downに関する本人による詳細の解説。

CSSセレクタの命名規則に関する私見 – Adactio

原題: Classy values

複雑化、巨大化の一途を突き進む”ウェブサイト”の中でボトルネックになりつつあるCSSの存在。Nicole Sullivan氏によるOOCSS、Jonathan Snook氏によるSMACSS、そしてYandex社の提唱するBEMとこの問題に対する解決への提案は数多くあります。そんな中、米Yahoo!で働くThierry Koblentz氏によりSmashing Magazineに寄稿されたChallenging CSS Best Practices、そしてその記事に真っ向から反対を表明するBen Darlow氏によるCargo Cult CSS。今回紹介する記事は、その2つの意見を踏まえてのJeremy Keith氏によるまとめ。CSSアーキテクチャに興味がある方はこの3本の記事と合わせて、Heydon Pickering氏によるThe Problem With CSS Classesも要チェック。

Viewportに関するリサーチ報告: heightと@viewportについて – QuirksBlog

原題: Viewport research addendum: height and @viewport

今さらViewportの何を調べる必要があるのか。誰もがそう思っている最中、Peter-Paul Koch氏が改めてViewportの指定が実機でどのような作用をするのかをリサーチした結果がこちらです。
彼のリサーチにミスがあったこと、それを訂正するリサーチ、そして、初期調査の結果とあわせて読むと氏の一連のプロセスが見えてくるのでおすすめです。

海外トレンドコラム

ブラウザがどのように画像をリサイズするか知っていますか？ – Jason Summers

原題: How web browsers resize images

Jason Summers氏が本人が作成したResampleScopeというツールを使って、モダンブラウザが画像をどんなアルゴリズムでリサイズしているかについての調査の報告しています。ブラウザ間で異なるアルゴリズムを使っていることはもちろん、バージョン間でも、拡大、縮小時にも異なるアルゴリズムが利用されているらしいことがここから分かります。

Animation-Proxy: JavaScriptによるアニメーション操作への問題解決

原題: JavaScript-Driven Accelerated Animations

JavaScriptを使ってのアニメーションは非常に柔軟であり、強力ですが、弱点があります。それはJavaScriptが基本的に1つのスレッドしか持たないため、常にアニメーションとは別の処理と競合してしまう可能性があることです。
Animation Proxyは、その弱点に対する解決としてWeb Workerをプロキシのように扱いJavaScriptからCSSのプロパティを操作することを可能にする提案です。

Yeomanを使ってPolymerでウェブアプリを最速構築する – HTML5 Rocks

原題: Building Web Apps With Yeoman And Polymer: Scaffold your webapps with modern tooling

Addy Osmani氏によるPolymerとYeomanを使ったウェブアプリの使い方指南。
Web Componentsはまだまだ実践で利用するには早すぎる存在ではあるかもしれませんが、試しておく価値のあるものです。Yeomanを使って事前の準備を素早く終わらせることができるので試してみてください。

IE11の開発者ツールを使ってガベージコレクションを減らす方法 – MSDN Blogs

原題: Reducing the pressure on the garbage collector by using the F12 developer bar of Internet Explorer 11

ウェブサイト制作におけるパフォーマンス解析といえば、Googleの開発ツールがよく知られていますが、Internet Explorer 11に搭載されているツールもまたかなり優れた機能を有するツールです。この記事ではWebGLを使ったサイトを実際にツールを使ってパフォーマンスのボトルネックの1つであるガベージコレクションを少なくする方法を紹介しています。

Translateプロパティはなぜアニメーションのパフォーマンスをよくするのか？

原題: Why is animating left paint more often than translateX?

アニメーションを高速化するために知っておきたいことの1つに、leftやtopなどのプロパティを操作するよりも、translateを利用するほうが高速であるというのがあります。それでは、それがなぜなのか。
簡単な解答は後者のほうがペイントプロセスが少ないからなのですが、この記事でより詳しく解説されている”なぜ”を知ることはより正確に最適化への道のりで役立つツールとなるでしょう。

“速さ”を演出するために知っておきたい4つのこと – Mobify

原題: A Beginner’s Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App

一般的なデスク/ラップトップマシンと比べ、どうしても非力なモバイルデバイスにおけるパフォーマンスの最適化手法の1つとして欠かすことができないのが、”速さ”の演出です。英語では”Perceived Performance”と呼ばれることが多いこの領域において知っておきたい4つのことを紹介しています。

知ってますか？ section要素の正しい使い方 – The Paciello Group Blog

原題: Using the HTML5 section element

section要素の正しい使い方はもしかするとHTML5がもたらした最大の頭痛の種かもしれません。そんなsectionの正しい使いどころをThe Paciello Groupでアクセシビリティエンジニアとして働くLéonie Watson氏が解説。

クローズアップ“ビデオ/スライド/ツール/デモ”

よりよいCSSを作る為にデザイナに知っておいてほしいこと – Harry Roberts / CSSconf.eu 2013

原題: Normalising designs for better quality CSS

Harry Roberts氏によるCSSconf EUでのデザイナとフロントエンド開発者、特にUIレイヤに責任を持つ人間との関係について。巨大なメディアを預かっていた彼ならでは視点が多いが、中大規模でスケーラブルに開発を行うことがある場面で必ず役に立つアドバイスばかり。

Appurifyを使って実機のモバイル端末でデバッグ、最適化、そしてテストをする

原題: Seamless Debugging, Optimization and Testing on Real Devices with Sencha and Appurify

モバイルウェブ開発で大きな課題となっている実際のデバイスを使ったデバッグ、テスト、パフォーマンス解析を解決しようとしているAppurifyというサービスをSenchaチームが実際に利用し紹介しています。

Mozilla Brickでウェブアプリを構築してみよう

原題: Building web apps, one brick at a time! (with Mozilla Brick)

MozillaからのWeb Componentsに対するアプローチであるMozilla Brickを使ったウェブアプリの作り方に関するスライドです。豊富なコード例もしっかりあり、ありがたいことに例は公開されています。Brickのロードマップもあるので興味がある方はぜひ。

asm.js: Webにネイティブの速度を

原題: asm.js: Native Speed on the Web

ネイティブ VS ブラウザの戦いに終止符を打つべくしてMozillaが開発しているasm.js。その存在そのものについてはもうご存知のことでしょうが、このスライドでは、そもそもなぜJavaScriptが”遅い”のか、そしてasm.jsが何を解決するのかについてのオーバービューがまとまっています。
本スライドとは無関係ですが、Felix Dahlke氏によるWhy asm.js is a big deal for game developersもあわせて読んでみてはいかがでしょうか。

Grunt Boilerplate – Mark McDonnell

好き嫌いはあれど、Gruntはウェブ開発におけるビルドプロセスで大きな役割を持ってきはじめています。もはやデファクトスタンダードともいえるくらいの存在でしょう。そんなGruntをこれから使う方にも、もうすっかり使いこなしている方にもおすすめのソースコード。
作者であるMark McDonnell氏による本ツールに関するこちらの記事も一読ください。

Snap.svg

SVGに関するデファクトスタンダードとなっているライブラリであるRaphaëlをゼロから、Raphaëlの作者であるDmitry Baranovskiy氏本人が作成し、公開したのがこのSnap.svg。モダンブラウザのみをターゲットとすることで、より小さなコードベースでありながら、より豊富な機能を搭載し、SVGのjQueryとなるべくしてオープンソース化しています。
Adobe社のWeb Platform Teamブログの記事も合わせて要チェック。

実践! ARIAを使ってフォーム入力をサポート

原題: Practical ARIA Examples

ARIA(Accessible Rich Internet Applications)を使ったアクセシブルなウェブサイトの制作は見方によっては時間の無駄に思えるかも知れません。しかし、Heydon Pickering氏によって作られたこのデモページを見れば、ARIAが非常に実利的な問題解決を行う手法でもあることがわかると思います。

★次回の「斉藤祐也の海外WEBテク定点観測」は12月6日にお届け予定です。★