斉藤祐也の海外WEBテク定点観測＜Issue.11: 2014/02/01-2014/02/28＞
今月の定点観測は、Webが持つある1つの矛盾についての考察、TLSのパフォーマンス最適化Tips、jQueryの未来に対する提言などを紹介します。
注目ニュースピックアップ
Webに課せられたある1つの矛盾についての考察 – Adactio
原題: Continuum
常に進化を続けるWebと、常に停滞しているWebは表裏一体の存在です。その矛盾が存在する理由はブラウザです。新しいCSS、新しいJavaScriptの仕様が、すべてのブラウザで利用できるということはもちろんありません。
Jeremy Keith氏は、この記事でWebが進化をするために、その矛盾の存在は欠かすことができないとしています。その上で、改めてWebサイトがすべてのブラウザでまったく同じ見た目や動作をする必要性がないこと、そしてクライアントや上司がそれを望むというのであれば、そうではないと説明することが開発者の責務であるとしています。
関連リンク:
- This is the web platform – Tales of a Developer Advocate / Keith氏の記事本文からリンクされているPaul Kinlan氏の記事
- Platformed. — Unstoppable Robot Ninja / Ethan Marcotte氏の反応
- River — Stuff & Nonsense, And All That Malarkey / Andrew Clarke氏の反応
TLSはまだ早くならないのか? – Ilya Grigorik
原題: Is TLS Fast Yet?
HTTPSなど、セキュリティを要求される通信のためのプロトコルであるTLSには、パフォーマンス的な懸念があるとされてきました。ページのタイトルにある、「TLSはまだ早くならないのか?」という質問に対して、GoogleのIlya Grigorik氏がこのページで解答します。
その答えはページの一番始めにある一言に集約されています。
『TLSにはたった1つだけパフォーマンスの問題がある: それは十分に利用されてるとは言えない点だ。それ以外の問題は最適化できる』
- GitHub: igrigorik/istlsfastyet.com
jQueryの未来 – Belly Card Engineering
原題: The Future of jQuery
前回、本連載でも紹介したYou Might Not Need jQuery以来、jQueryについての様々な議論が始まりました。この記事はそれらの議論の中でも短く分かりやすい議論をしています。
jQueryがどんな問題を解決しようとしているのか、その解決が現在のブラウザ環境でも必要なのか。jQueryがもたらしたシンプルで理解しやすいシンタックス、抽象化がどこに向かって行くのか。記事の著者であるDave Arel氏はそれらを踏まえて、jQueryが向かうべき未来は現在実装されているよりも、さらにモジュール依存関係の管理を強化していくべきだとしています。
関連リンク:
- jquery_usage.js / Dave Arel氏が考える未来のjQueryのモジュラーアプローチについての素案とそれについての議論
- jQuery’s browser bug workarounds / jQueryのメンバーによるjQueryが回避しているバグのリスト
レスポンシブ・グリッドレイアウトの作り方
原題: Grid
Adam Kaplan氏によってGridと名付けられたこのページでは、レスポンシブ・デザインを念頭においたグリッドレイアウトを作成するために必要な多くの基本を丁寧に解説しています。
ViewportのMetaタグやCSSのBox Modelなどのレスポンシブなレイアウトを制作する上で、ベースとなる部分から最終的な実装例までしっかりとサポートしています。HTML、CSSの初学者はもちろん、コーディングにチャレンジしたいデザイナにもぴったりな内容になっています。
海外トレンドコラム
ECMAScript 6でBackbone.js TodoMVCアプリを書き換える – TasteJS
原題: Rewriting A WebApp With ECMAScript 6
この記事ではAddy Osmani氏を中心にECMAScript 6を使って、Backbone.jsで作ったTodoMVCアプリケーションを書き換えていくステップを詳細に紹介しています。記事ではTraceurというES6をES5コンパティブルに変換するコンパイラとES6 Module Loader Polyfillを利用して実装しています。
新しいCSS Shapeのシンタックスについて – Web Platform Team Blog
原題: New CSS Shapes Syntax
CSS Shapesのスペックが、先日Last Callへと移行しました。その際に変更になったシンタックスについて、この記事で細かく紹介しています。CSS Shapesが実装されているブラウザは決して多いとは言えませんが、サポートしているブラウザで見られるデモも用意されているので興味があればぜひ。
CSS Aliases
Tab Atkins氏による、CSS Aliasesというスペックのエディタ・ドラフト。
CSS Aliasesは、CSSプリプロセッサに慣れた方にとって、Mixinsとして知られる機能に似たスペックです。まだまだドラフト段階ですが、シンタックスに使われている記号など、参考にできる点もあるのでぜひ。
ローディング・インジゲータがどう心理的に作用するのか？ – Mercury Intermedia
原題: The Psychology of Waiting, Loading Animations, and Facebook
パフォーマンス改善は今では欠かすことができないトピックとなっていますが、その中でも忘れがちな『早い』と思わせる心理学について。この記事ではFlipboardのRaphael Schaad氏のTweetである、ローディング・インジゲータのデザインによってユーザがどのように反応するかについて深耕しています。
touchイベントのデフォルトアクションの抑止について – QuirksBlog
原題: Preventing the touch events’ default action
JavaScriptのイベントハンドラはreturn falseとするか、preventDefault()を実行するかでイベントが持つデフォルトのアクションを抑止することができます。Peter-Paul Koch氏はこの記事で、その挙動がtouchイベントでどのようになっているかについてまとめています。
関連リンク:
- Preventing the touch default / touchイベントの抑止についてのブラウザ間でのテスト結果表。
CSSソースマップのサポート、ネットワーク解析などFirefox開発者ツールの最新実装について – Mozilla Hacks
原題: CSS source map support, network performance analysis & more – Firefox Developer Tools Episode 29
Google Chromeの開発者ツールに追いつく日も確実に近づいているFireFoxの開発者ツール。そのツールの最新情報まとめ。 この両者の非常に健康的な争いは我々開発者にとっても利点が多く、最近では用途に応じてFireFoxの開発者ツールを使い機会も増えて来たという方も多いことでしょう。
英語という壁をStack Overflowはどう乗り越えるのか? – Stack Exchange
原題: Can’t We All be Reasonable and Speak English?
開発者にとって欠かすことができないQAサイトの1つであるStack Overflowが、ポルトガル語版をローンチしました。Stack Overflowのゴールは開発者の知見をできる限り多く、そしてそれらを1カ所にまとめることですが、そのゴールと今回の他言語対応には若干の矛盾があります。StackExchangeのJay Hanlon氏は、この記事でなぜ他言語化が必要なのかの理由について、しっかりと説明しています。すばらしいサービスを作る裏側をかいま見られます。
Facebook Paperアプリのジェスチャー地獄 – Scott Hurff
原題: Facebook Paper’s gestural hell
1月末にリリースされたFacebookのPaperはリリースしてすぐに『使いやすい、革新的なインターフェイス』の存在が話題になりました。その『インターフェイス』の使い勝手に関する考察がこちら。この記事では主に親指で無理なく操作できる領域には制限があり、Paperはその制限を飛び越えてしまっているため、使いやすさにつながっていないとしています。
関連リンク:
- Six UX Lessons Learned from the New Facebook App, Paper | UserTesting.com / こちらはユーザテストサービスを提供している会社からPaperのユーザテストの結果から得た6つのUXレッスンについてまとめています。
Firefox OSのUIを作る過程で学んだアクセシビリティについて知っておきたいこと – Marco’s accessibility blog
原題: Some do’s and dont’s we gathered from making the Firefox OS UI more accessible
Firefox OSのUIを作る過程で学んだアクセシビリティについての注意点。ご存知の方も多いでしょうが、Gaiaというコードネームで知られるFirefox OSのUIにはHTML5が利用されているため、記事で紹介されている点は通常のWebのインターフェイスの構築の際にも役に立つでしょう。
より滑らかなUXのためにJavaScriptのコンパイルを並列処理化 – Chromium Blog
原題: Compiling in the background for a smoother user experience
Google ChromeチームのゴールはChromeを最も早いブラウザにすること。そのプロセスの中、V8の最適化は欠かすことができない要素の1つです。この記事ではその最適化の中でも画期的と言えるJavaScriptのコンパイルの並列処理化について紹介しています。
クローズアップ“ビデオ/スライド/ツール”
パフォーマンスを考慮したデザインについて – Lara Swanson
原題: Design for Performance
EtsyのモバイルWebチームのエンジニア・マネージャを勤めるLara Swanson氏によるパフォーマンスを考慮したデザインについてのスライド。
スライドの序盤にある”Web performance is user experience”という言葉が内容を一言で表しています。
JavaScriptのAPIデザイン原則 – Ariya Hidayat
原題: JavaScript API Design Principles
昨年11月に開催された第五回目となるYUI Confにて、Ariya Hidayat氏が発表したJavaScriptのAPIデザインについて。ライブラリ・コードを書く人はもちろん、そうでない方も、CSSプリプロセッサのMixinなどを書く人にもおすすめの内容です。
関連リンク: API Design Principles – Qt Project / QtプロジェクトのAPIデザイン原則
実際にNode.jsをプロダクションで使ってみてわかったこと – Great British Node Conf – Paul Serby
原題: Secrets of a Node Team
Clockというイギリスの制作会社のCTOを勤めるPaul Serby氏による、Node.jsを使った実際のプロジェクトから学んだことに関するまとめ。実体験を通じた地に足の着いたアドバイスが多く、失敗談も回避策もまとまっているので参考になります。
Chrome開発者ツールの拡張機能ギャラリー — Google Developers
原題: DevTools Extensions Gallery
Google Chromeの開発者ツールそのものだけでも非常に高機能なツールですが、このページで紹介されているのはその開発者ツールを拡張するツール群。Backbone DebuggerやAngular Batarang、そしてEmber InspectorなどMV*系のJavaScriptライブラリでの開発を補助するツールなど、現時点で18のツールが紹介されています。
httpbin(1): HTTP Client Testing Service
HTTPにまつわるライブラリなどのテストをするのは何かと面倒なことが多いですが、このツールでは様々なHTTPのリクエストを送り、レスポンスを確認できます。HTTPSの通信も可能だそう。
- GitHub: kennethreitz/httpbin
ES6 Fiddle
ECMAScript 6で定義される予定となっている新しい仕様を実際に書いてその場で結果を見られるツール。いくつか例もあるので、気軽に試してみたいという方も、まだ先だからと思っている方も、体験してみるとよいでしょう。
★次回の「斉藤祐也の海外WEBテク定点観測」は2014年4月1日にお届け予定です。★
