斉藤 祐也

Webの矛盾についての考察、TLSのパフォーマンス最適化Tips、jQueryの未来に対する提言など海外WEBテク20本を一挙公開

斉藤祐也の海外WEBテク定点観測<Issue.11: 2014/02/01-2014/02/28>

今月の定点観測は、Webが持つある1つの矛盾についての考察、TLSのパフォーマンス最適化Tips、jQueryの未来に対する提言などを紹介します。

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

Webに課せられたある1つの矛盾についての考察 – Adactio

continuum-adactio

原題: Continuum

常に進化を続けるWebと、常に停滞しているWebは表裏一体の存在です。その矛盾が存在する理由はブラウザです。新しいCSS、新しいJavaScriptの仕様が、すべてのブラウザで利用できるということはもちろんありません。
Jeremy Keith氏は、この記事でWebが進化をするために、その矛盾の存在は欠かすことができないとしています。その上で、改めてWebサイトがすべてのブラウザでまったく同じ見た目や動作をする必要性がないこと、そしてクライアントや上司がそれを望むというのであれば、そうではないと説明することが開発者の責務であるとしています。

関連リンク:

TLSはまだ早くならないのか? – Ilya Grigorik

istlsfastyet

原題: Is TLS Fast Yet?

HTTPSなど、セキュリティを要求される通信のためのプロトコルであるTLSには、パフォーマンス的な懸念があるとされてきました。ページのタイトルにある、「TLSはまだ早くならないのか?」という質問に対して、GoogleのIlya Grigorik氏がこのページで解答します。
その答えはページの一番始めにある一言に集約されています。
『TLSにはたった1つだけパフォーマンスの問題がある: それは十分に利用されてるとは言えない点だ。それ以外の問題は最適化できる』

jQueryの未来 – Belly Card Engineering

thefutureofjquery-belly

原題: 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

原題: 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イベントでどのようになっているかについてまとめています。

関連リンク:

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はその制限を飛び越えてしまっているため、使いやすさにつながっていないとしています。

関連リンク:

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の通信も可能だそう。

ES6 Fiddle

ECMAScript 6で定義される予定となっている新しい仕様を実際に書いてその場で結果を見られるツール。いくつか例もあるので、気軽に試してみたいという方も、まだ先だからと思っている方も、体験してみるとよいでしょう。

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

週間PVランキング

新着記事

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js Polymer Progressive Web Apps React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket WebVR