斉藤祐也の海外WEBテク定点観測＜Issue.12: 2014/03/01-2014/03/31＞

今月の定点観測はWeb Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化などを紹介します。

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

Web Componentsに関するパネルディスカッション

原題: EdgeConf 3: Components

3月21日にロンドンにて開催されたEDGE Conferenceにて議論されたWeb Components。このカンファレンスでの議論そのものも非常に興味深いものですが、このカンファレンスをきっかけに多くの議論がブログなどで展開されました。Web開発の未来を担うとすら表されるWeb Componentsがその未来へと着実に歩みを進めるためにどんな障害があるのでしょうか。様々な領域で活躍するエキスパートたちの意見を以下に関連リンクとしてまとめましたので、興味がある方はぜひそれぞれ一読を。

関連リンク:

• A Detailed Introduction To Custom Elements – Smashing Coding
• Web Components Best Practices – WebComponents.org
• Web Components and the Three Unsexy Pillars – Aerotwist
• The Web’s Declarative, Composable Future.
• Notes on accessibility of Web Components – Bruce Lawson’s personal site
• The Golden Path
• Notes from the edge – Adactio

Shadow DOM – Acko.net

Steven Wittens氏により書かれたこの記事のタイトルはShadow DOMですが、あのShadow DOMではなく、DOMに関する問題点へ指摘と解決策の提言です。React.jsのようにDOMらしいものを生成しDOMを制御するアプローチがあったり、Angular.jsのようにHTMLによく似たシンタックスでDOMへのアプローチを隠蔽するアプローチがあったりと、DOMから離れれば離れるほどWebそのものがよいものになったように思えてくる。氏の狙いは非常に的確なものだと言えると思いますが、以下に関連リンクとして紹介しているCSS TricksのChris Coyer氏による反論も併せて読んでおくと良いでしょう。

関連リンク: Hatin’ on Web Tech by CSS-Tricks

WAI-ARIAがWebのアクセシビリティを拡張する – W3C Blog

原題: WAI-ARIA Expands Web Accessibility

Accessible Rich Internet Applications 1.0 (WAI-ARIA)、そして関連する仕様であるWAI-ARIA 1.0 User Agent Implementation GuideがW3C Recommendationとなりました。つまり、WAI-ARIAはWeb標準となったことを意味します。広範囲に及ぶ、実装だけではなく、テスト、そしてバグ修正を行い、多くのモダンブラウザですでにサポートされ、モバイル・ブラウザにおけるサポートも広がってきています。またHTMLだけではなく、EPub 3.0やSVG 2などの仕様にもWAI-ARIAを適応し、より広範囲でのアクセシビリティを提供していくそうです。

関連リンク:

• We Make the Web. Let’s Make It Accessible. – The Changelog
• What is WAI-ARIA, what does it do for me, and what not? | Marco’s accessibility blog

Browsiness – Adactio

本連載、Issue. 11にて紹介したJeremy Keith氏による「Webに課せられたある1つの矛盾」の考察に対する追記に当たる記事といえるでしょうか。記事はAndroidとiOSの違いについての考察から始まり、ネイティブとWebの差に話が及ぶ。その段になってKeith氏はWebとは何かという根源的な疑問に対し、氏がどのように考えているかについて語っていきます。
氏は次の文で記事を締めくくります。 『分裂として捉えるのを辞め、多様性として捉え始めるべきだ。』
氏の言葉通り、WebとはHTMLやCSS、JavaScriptで書かれたものだけを意味するものではないでしょう。

関連リンク: Why don’t designers take Android seriously? : Cennydd Bowles

Web標準化に貢献するために必要なこと – Anne’s Blog

原題: Contributing to standards

Anne van Kesteren氏はWeb標準化に貢献するためには、Web標準がコミュニティによって作られていることに気がつくことが大切なステップだとし、そのコミュニティでコミュニケーションに利用されているミディアムを追いかけることを次のステップとしています。もちろん貢献しようとしている標準そのものに詳しい必要もありますが、それらを取り巻く環境にまず慣れることが活動の第一歩だとしています。

関連リンク: How to win friends and influence standards bodies – Domenic Denicola / Domenic Denicola氏がLXJS 2013にて発表した彼自身がどのように標準化団体にアプローチしたかについてのプレゼンテーション。

海外トレンドコラム

Picture要素に関するQ&A – An A List Apart

原題: [A Q&A on the Picture Element

Picture要素の復活に尽力したMarcos Caceres氏とYoav Weiss氏に対して、同じくResponsive Images Community Groupに所属しているMat Marquis氏がインタービュー。 Picture要素が以前のバージョンとどこが違うのか、それまでに登場したsrcsetやsrc-nという仕様や提案が現在のPicture要素にどのように影響しているのかなどについて詳しく解説しています。

Srcsetとsizes – ericportis.com

原題: Srcset and sizes

Picture要素の現行仕様はどうしてそのシンタックスを採用したのでしょうか? この記事ではその疑問に対して、具体的なソースコードを見ながら現行の仕様とほかのレスポンシブ画像に対する解決案を比較しています。srcsetに加えて新たに追加されたsizesという属性が重要な役割を担っているのが一目でわかります。

モバイル・ファーストはもう終わった、のか? – Forbes

原題: Mobile-First Is Dead, Says Google Display Ad Chief Neal Mohan

Googleのディスプレイ広告部門の副社長を務めるNeal Mohan氏によると、多くのユーザーはもはやモバイルだけにフォーカスをしているだけでは時代遅れになりつつあるとしています。消費者達は多くのデバイスを駆使して、利用シーンに合わせてタスクを完遂しているとしています。なんと約90%ものユーザーがあるデバイスで開始したタスクを別のデバイスで完了しているとしています。モバイル・ファーストはすでに過去の問題を解決しようとしているに過ぎないと氏は語り、今後はマルチデバイスの最適化にフォーカスを移していくべきだとしています。

若いデザイナー、デベロッパに対するアドバイス – Andy Budd

原題: My Advice to Young Designers and Developers

日本ではそうでもないと思いますが、大学を卒業するよりも業界の経験を積んでいる方が重宝される業界であるWeb業界において、大学に行く意味とはなんなのかをAndy Budd氏がアドバイス。

パフォーマンス最適化 #perfmatters

Paul Lewis氏のパフォーマンスチェックフロー – Aerotwist

原題: My Performance Audit Workflow

Googleの中でもパフォーマンスに注力しているPaul Lewis氏本人のパフォーマンスチェックのワークフローについて。氏はまずPageSpeed Insightsでサイト全体の状態を確認し、WebPageTestを使ってネットワーク周りのパフォーマンスを細かくチェック。それから、レンダリングに関わるパフォーマンスチェックを、このリストを参照しながら行っているそうです。このワークフローは手動で行うものがほとんどですが、自分が担当するプロダクトでは自動化できる部分は可能な限り自動化をしているとのこと。

ブラウザキャッシュは”とても”壊れている – JakeArchibald.com

原題: The browser cache is Vary broken

HTTPキャッシュはURLとHTTPメソッド(GETやPOSTなど)でコントロールするものですが、”Vary”ヘッダを利用してより細かく制限をすることができます。しかし、この”Vary”ヘッダは少々やっかいもので、IEでは”max-age”が無視され、Safariでは少々バグがあったりもします。この記事では具体的な例を見ながら”Vary”ヘッダの挙動について詳しく紹介しています。

CSSアニメーションとトランジションのパフォーマンスについて – Web Platform Team Blog

原題: CSS animations and transitions performance: looking inside the browser

ブラウザ内部がどのように動作しているのかを知ることで、CSSアニメーションやトランジションの記述をする前に、そのアニメーション/トランジションのパフォーマンスがよいものか、そうでないのかを知ることができます。この記事では特にGPUがどのようにパフォーマンスに作用するのか、そしてなぜ特定のプロパティをアニメートすることがパフォーマンスのボトルネックになるのかについて、詳しく解説しています。

WebKitのCSS JITコンパイラについて – Surfin’ Safari

原題: Little overview of WebKit’s CSS JIT Compiler

ブラウザはユーザーに対してよりよい体験を提供するために日々改善を行っています。この記事ではWebKitがCSSの解析にかかる時間をどう改善していくのかについて、JavaScriptの解析では当たり前のように利用されているJIT(Just In Time Compilers)をCSSのセレクタの解析に応用してみた結果について紹介しています。

jQueryはモバイルには大きすぎるのか? – Flippin’ Awesome

原題: Is jQuery Too Big For Mobile?

モバイルWebにおいて、パフォーマンスが特に重要なファクターであることはよく知られています。パフォーマンスの最適化に際し、デスクトップの時代には当たり前のように利用していたjQueryは、そのファイルサイズからモバイルでは利用されない傾向にあります。しかし、本当にjQueryはモバイルには大きすぎるのでしょうか?　この記事では実際のモバイル端末でjQueryを読み込み、どのくらいの時間がかかったのかを詳しく解析しています。また読み込みだけではなく、解析にかかる時間も加味した詳細なデータで疑問に答えてくれています。

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

スライド

Viewportとレスポンシブデザインの関係

原題: Viewports or: why responsive design works

Peter-Paul Koch氏がjQUery EUで発表したこのプレゼンテーションは氏の得意とする詳細なテストによるデータを使ったViewportから見たレスポンシブ・デザインに関する実利的なアドバイスについてです。氏はまずピクセルとはなにかから解説し、モバイルとデスクトップのViewportsの違い、JavaScriptやMetaタグによるViewportsの仕組みについて詳しく解説しています。

関連リンク: The Great Table / Peter-Paul Koch氏による本プレゼンテーションで発表したViewportに関連するコンセプトのモバイルブラウザ別の対応状況をまとめた表。

Flexboxを使って一歩上行くレイアウトを – Zoe Gillenwater

原題: Leveling Up with Flexbox

Smashing ConferenceにてZoe Gillenwater氏が発表したFlexible Box Layoutを使ったレイアウトテクニックに関するプレゼンテーション。
仕様として少々バタバタしていたFlexible Box Layoutですが、ようやく様々なブラウザで同じシンタックスが利用できるようにもなってきて、現実的なアプローチとして注目が集まってきています。氏はこのプレゼンテーションで様々なレイアウトテクニックを紹介しつつ、Flexible Box Layoutをサポートしていないブラウザに対するフォールバックについても紹介しています。

関連リンク: Leveling Up With Flexbox presentation at Smashing Conference

Guardian誌のレスポンシブデザイン対応について

原題: Responsive design at the Guardian

イギリスの新聞であるGuardianにて、クライアントサイドWebデベロッパとして働くMatt Andrews氏によるプレゼンテーション。数年前にレスポンシブデザインを採用したBoston Globe誌を始め、最近ではBBCもレスポンシブデザインを採用しています。ニュースサイトにおけるレスポンシブデザインはなかなかハードルが高い部分がありますが、そのいくつものハードルをGuardianではどのように超えていったのかについて詳しく紹介しています。

ツール

HTML5 Security Cheatsheet

HTML5に関連する技術を使ったセキュリティに関する注意点と、その回避についてのチートシート。

CSSynth

CSSアニメーションを実際に目視しながらカスタマイズできるエディタ。特定のアニメーションに限ったエディタではありますが、エディタが作り出すスムーズなアニメーションは見ていて飽きません。

CSS Filters Demo

上で紹介したCSSynthの作者による別プロジェクト。こちらはCSSのフィルタを使ったデモ。

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