斉藤祐也の海外WEBテク定点観測＜Issue.8: 2013/11/01-2013/11/30＞

今月の定点観測は、モバイル開発で考慮したいオフラインファースト構想について、レスポンシブウェブデザインに対する別視点、コンポーネントレベルでのプログレッシブ・エンハンスメントのアプローチなど合計20件の記事や動画などを紹介します。

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

Offline First!

モバイル・ファーストをさらに一歩進め、”不安定なインターネット接続”や”バッテリー”というモバイルならではの問題を解決に導くためのオフライン・ファーストというアプローチが注目を浴び始めている。
そのタイミングで議論のスタートポイントとなるべく作られたのがこのサイト。
まだ具体的な活動は始まっていないようですが、これから多くの議論が期待されるトピックなので目が離せません。

関連リンク:

• Say Hello to Offline First / HoodieチームによるOffline First!構想のイントロダクション
• Offline Support is Valuable, and You Can’t Add it Later – Aanand Prasad / Aanand Prasad氏による”オフラインサポートが何故重要なのか”についての記事
• “Offline First” – Unstoppable Robot Ninja / Ethan Marcotte氏によるオフラインサポートは技術だけの課題ではなく、UXにおいても課題であるという意見

レスポンシブウェブデザインはスクリーンサイズに依存しすぎていないか – Luke Wroblewski

原題: Responsive Web Design: Relying Too Much on Screen Size

レスポンシブウェブデザインにおけるゴールに世にあふれている様々なデバイスにデザインを適応させることがあげられると思います。この記事でLuke Wroblewski氏は、その適応に向けた指標となっているスクリーンサイズはデザインを決定づけるのに十分な変数にはなりえないと指摘しています。
スクリーンサイズのみでは、ユーザとそのデバイスとの距離を知ることは難しいですし、640pxの幅を持つスクリーンだからといって、それがGoogle Glassから見ているかを知ることも難しいでしょう。
Wroblewski氏は、スクリーンサイズに適応することが無意味であるわけではないが、考慮するべき指標ではないかと結んでいます。

関連リンク:

• Responsive design, screens, and shearing layers — Unstoppable Robot Ninja / Ethan Marcotte氏による上記の記事への反論
• On Using Browser Viewports to Understand Screens – LukeW / Luke Wroblewsk氏によるEthan Marcotte氏の記事への返答
• Of viewports and screens, input modes and event handlers – QuirksBlog / Peter-Paul Koch氏による上記2名の主張の技術的な考証

ブラウザではなく、コンポーネントごとにブラウザ対応を行うアプローチの紹介 – Filament Group

原題: Grade components, not browsers

ブラウザやバージョンによる機能の違いを吸収するためのアプローチを行うのにブラウザやバージョンにグレードを設定し、そのグレードごとの対応を行うアプローチが多く採用されています。Filament GroupのScott Jehl氏は、ブラウザにグレードをつけるのではなく、サイトを構成するコンポーネントにグレードを設けて、それごとにどのように機能を拡張していくかを定義していくアプローチを提案しています。
Jehl氏は、コンポーネントごとにグレードを設けることで、ドキュメントしやすく、もっとも最適な体験を各ブラウザ、デバイスに提供するというゴールを達成しやすいとしています。

関連リンク:

• Scope Components, Not Pages – Brad Frost Web / Brad Frost氏による、上記記事のアプローチを拡張し、ウェブデザインの制作にかかる工数もページ単位ではなく、コンポーネント単位で行う利点の解説

なぜJavaScriptにスタイルガイドが必要なのか? – Harrison Shoff

原題: Why does JavaScript need a style guide?

Airbnbが公開しているJavaScriptのスタイルガイドのIssueに寄せられた、”なぜJavaScriptにスタイルガイドが必要なのか”に対する、AirbnbチームメンバーであるHarrison Shof氏による素晴らしい回答。
この回答を導いた質問も素晴らしく、”もしピカソが絵の書き方を学ぶ際、我々がどのように書くべきかを示唆したとしたら、キュービズムは存在したのか?”、というものです。
これに対してShof氏は、チームとして、または大きなコードベースをメンテナンスする上では、どんなスタイルであろうと一貫性を持つことが重要であるとしながらも、個人でサイドプロジェクトを行う際にはもちろん無視しても構わないとしています。

Asm.jsに関して – Acko.net

原題: On Asm.js

Asm.jsを利用することでJavaScriptでもネイティブに限りなく近いパフォーマンスを得ることができます。実際にそのデモは目を見張るほどのパフォーマンスを出しています。Steven Wittens氏は、Asm.jsを含むLLVMのような”JavaScriptのふり”をする存在の登場はJavaScriptそのものにプラスにならないとしています。

関連リンク:　On “On Asm.js” / Dave Herman氏による上記記事への反論

海外トレンドコラム

リモート・デバッグのAPIを統一するための構想

原題: RemoteDebug, an initiative to unify remote debugging across browsers.

モバイル向けのウェブサービスを制作するにあたり課題であり、現在多くの革新が起こっている分野の一つであるリモート・デバッグについて、ブラウザごとに異なるデバッグ用APIを作るのではなく、共通化することができないか、という目的を体現するための構想。
ビジョンそのものも素晴らしいですが、実際に公開されているブリッジとなるツールの紹介もあるので実利的でもあります。

クロス・モバイルデバイスのテストを手助けするツールたち – HTML5 Rocks

原題: Synchronized Cross-device Mobile Testing

モバイル開発における悩みの1つに非常に多くのデバイスで動作・表示確認を行う必要があることがあげられます。
Addy Osmani氏がその作業をサポートするツール、GhostLab、Adobe Edge Inspect CCなどを詳しく紹介しています。

npm registryをサポートするための寄付を募集しています – scalenpm.org

原題: Help scale the npm registry

Node.jsに関わるツールを利用する際、なくてはならない基本的なツールとなっているnpm。そのnpmregistryを支えるインフラは実はNodejitsuにより無料で提供されています。
ここ数ヶ月の間npm registryが不安定になる事象が起こり、その解決のための寄付を募っています。
現時点でゴールは達成(残21日)していますが、Node.jsを普段から利用しているなら寄付を検討してみてはいかがでしょうか。

pointer-events: noneを使ってスクロールを60FPSにする方法 – The CSS Ninja

原題: 60fps scrolling using pointer-events: none

CSSによるシャドウの描画はブラウザにとってやや不得意な操作であり、それが原因でスクロールパフォーマンスの低下につながることも多い。この記事では:hoverにつけられたシャドウによるパフォーマンス低下を防ぐ手法について紹介しています。

関連リンク: Malte Ubl氏によるGoogle+ポスト / Malte Ubl氏はRyan Seddon氏が紹介した方法はiframeではうまくいかないと指摘、この問題に関してはハックに頼らずブラウザ側で解決することが期待されるとしています。

WebGLを利用する場合に知っておきたいデバッグツールとプロファイルツール – Real-Time Rendering

原題: [WebGL Debugging and Profiling Tools

WebGLを使う際に知っておきたいデバッグツール、そしてパフォーマンスのプロファイルツール達の紹介。
Firefox 27に搭載されているFirefox WebGL Shader Editorの紹介を含む4つ(+アルファ)のツールについて紹介しています。

提案中のsrc-Nの最後の文について詳しく紹介 – Tab Completion

原題: Explaining The Last Clause of the src-n Grammar

Tab Atkins Jr氏が提案しているレスポンシブ・イメージへのアプローチであるRespImg Syntax、通称src-Nについて、これまでのsrcsetと比較して、このシンタックスがシンプルなのかについての解説をしています。

レスポンシブ・イメージについての今年の振り返り – HTML5 Doctor

原題: Responsive images – end of year report

今年多くの前進があったレスポンシブ・イメージに対する問題解決についてBruce Lawson氏がまとめています。
これまでの経緯を含めて今後に関する示唆を含む非常に有用な記事となっています。

関連リンク: レスポンシブ・イメージに関する各ブラウザベンダの現在の状況 / Mat Marquis氏によるまとめ

さらなるページロード速度改善を行うために知っておきたいこと- Steve Souders

原題: Prebrowsing

ページロード速度を最適化するためには、キャッシュをきちんとしてHTTPリクエストを可能な限り減らすことが大切ですが、この記事ではそのキャッシュの次に注視しておくべき、dns-prefetch、prefetch、prerenderなど新たに可能性が模索されているテクニックについてSteve Souders氏が解説。

リファクタリングをする際に覚えておきたいアプローチたち

原題: Refactoring Techniques

“リファクタリング:Rubyエディション“で紹介されていたリファクタリング手法のうち、Mark McDonnell氏がよく使う方法を抜き出して詳しく解説。コードサンプルはRubyのものになっているが、JavaScriptやその他の言語でも同じアプローチができるので非常に参考になります。

フルスタックJavaScriptアーキテクチャ指南 – Smashing Coding

原題: An Introduction To Full-Stack JavaScript

ウェブアプリの構築にアジャイルのような早い開発サイクルに適した選択としてフロントエンドはもちろん、サーバーサイドでもJavaScriptを採用するケースが増えてきています。
この記事ではそのアプローチでツールスタックを構築する際に知っておきたい様々なことを包括的に紹介しています。
もちろんすべてに対する回答ではありませんが、注目のアプローチではあるので要チェックです。

Color Template

ウェブデザインに限らずですが、色がユーザに与える影響は計り知れません。その大切な色に関して覚えておきたい基礎と応用について平易な用語を使って非常にわかりやすく解説しているサイト。リファレンスとしていつでも参照できるようにしておきたいサイトです。

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

レンダリング・パフォーマンスケーススタディ – Addy Osmani

原題: Rendering Performance Case Studies

Velocity Conf EUで発表されたAddy Osmani氏による、レンダリング・パフォーマンスに関する203ページに及ぶスライド。FlickrやPinterest、Google+などの実際のウェブサービスを対象にしたケーススタディとなっています。

Node.js Stream Playground – John Resig

Node.jsのstreamは説明を読んだだけで理解するのは難しいコンセプトではないでしょうか? 実際に手を動かしてみるのが理解への近道、ということで、John Resig氏が作成したブラウザ上でsteamについて学べるこのツールを試してみてください。
詳しい利用方法についてはこちらの記事を参考にしてください。

Level Me up Scotty! – Julian Gruber

nodeconf EUで発表されたJulian Gruber氏によるLevelDBを使ったリアルタイムチャットについてのビデオ。氏は15分の発表中に(ごく単純なものですが)実働するチャットシステムをライブコーディングをしています。 完成したソースコードはGitHubにて公開されています。

Pa11y

Nature Publishing Groupによりオープンソースされている、Pa11yは自動でアクセシビリティに関するレポートを収集し作成してくれるツール。

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