斉藤祐也の海外WEBテク定点観測＜Issue.9: 2013/12/01-2013/12/31＞
今月の定点観測は、JavaScriptにおけるPromises実装について、CSSの変数(Custom Properties)、Quartz ComposerのプラグインOrigamiなど合計20件の記事や動画などを紹介します。
注目ニュースピックアップ
JavaScriptにおけるPromises実装について – HTML5 Rocks
原題: JavaScript Promises: There and back again
これまでJavaScriptの『限界』であるシングルスレッドを解決するために、コールバックやイベントを利用してきました。そのJavaScriptにもう1つ、Promisesと呼ばれる機能が追加されます。
Q.jsやwhenなどのようなライブラリを使ってすでにPromisesを利用している人も多いことでしょう。
現時点ではChrome CanaryとFirefox Nightlyにて一部の機能が利用でき、Polyfillも存在しています。
JavaScriptネイティブのPromisesはrsvp.jsのAPIとほぼ同じとなっているようです。
CSSの変数(Custom Properties)で遊んでみよう – That Emil
原題: Playing around with CSS variables – “custom properties”
CSSに変数を追加することは開発者から長期にわたって要求されてきました。CSSプリプロセッサがまだない時代からのこの要求に対し、様々な試みがされてきましたが、ついにFireFox Nightlyに「CSS Custom Properties for Cascading Variables Module」という仕様に則り実装されました。
Emil Björklund氏による記事はその実装に対しての実験を行っています。
詳しい仕様についてはCSS Working Groupのメンバーの1人であるTab Atkins Jr.氏が昨年2013年にCSS Dayにて発表した『Variables & Conditionals』にて詳しく解説しています。
またTab Atkins Jr.氏が2012年に提案したドラフトの頃からCSSに変数が必要であるか否かについての議論が途絶えたことはありません。
それら反論についても知っておくとよいので、以下に関連リンクとして紹介しておきます。
関連リンク:
Quartz Composerを使ってのプロトタイプ制作プラグイン: Origami — Julie Zhuo
原題: Introducing Origami for Quartz Composer
Webでもアプリケーションでもデザインに求められることが表層にある見た目だけではなくインタラクションなども含まれるようになって来ています。
Facebookではそのインタラクションを含むデザインを行うのにQuartz Composerを利用してプロトタイプを作成しているそうです。
Quartz ComposerはMac OS Xの開発環境の一部として提供されているビジュアルプログラミング言語で、元々はプロトタイプを行うためのツールとして提供されているわけではありません。
Origamiはそのやや取っ付きづらいQuartz Composerをよりプロトタイプツールとして使いやすくするパッチを提供するオープンソースツール群です。
この記事ではFacebookのプロダクトデザインディレクタであるJulie Zhuo氏がツールの紹介をしています。
関連リンク:
オフライン・ファーストでウェブアプリケーションをデザインする – A List Apart
原題: Designing Offline-First Web Apps
前回の本連載でもとりあげた、オフライン・ファーストというアプローチについての続報。
記事ではなぜオフライン・ファーストを重要視するべきなのか、オフライン・ファーストのアプローチを採用する上でどんな問題点があるのかについて詳細にわたり解説しています。
offlinefirst.orgを牽引するHoodieチームの一員である筆者のAlex Feyerke氏は以下のように述べています。
『オフライン状態のWebサイトやアプリケーションの利用に対する体験はよりよくならなければならないし、もっとがっかりさせないようにしなくてはならない。もちろんもっと便利である方がいい。接続されていない、マルチデバイスの世界についてのガイドやパターンのカタログ、レスポンシブウェブデザインが築いてきたようなUXがオフライン・ファーストを行うためにも必要だ。』
関連リンク:
- Offline First: Learning from native experiences — Dion Almaer
- ServiceWorker & the offline web – Tom Ashworth
ベンチマークに関する注意点について – Aerotwist
原題: Bad Benchmark, Right Result
Googleの中でもパフォーマンスに関するすばらしい記事を常に提供してくれるPaul Lewis氏によるベンチマークに関する注意点。
結論から言うと、現時点では3D Transformsを扱うために非常に便利なCSSMatrixを使うと結果的に（少なくとも）toString()を利用して処理するため、パフォーマンス観点ではあまりプラスにはなりません。
しかしこの記事ではその結論よりも、彼がどのようにAPIを使ってよりパフォーマンスを向上させているのか、そしてそれをどのようにベンチマークしているのか。JSPerfを使ったベンチマークにおける注意点なども含め、一連の流れについて着目していただければ。
海外トレンドコラム
ブラウザへの12個のパフォーマンス要望リスト – Performance Calendar
原題: Browser Wishlist 2013
2013年の年末にSteve Souders氏がまとめた12項目からなるブラウザへのパフォーマンス観点での要望リスト。
この時点で要望されるということは気をつけておく必要があるリストでもあるので、各項目をしっかりレビューしておくとよいでしょう。
Chromeの開発者ツールをFirefoxで使えるとしたら? — Kenneth Auchenberg
原題: What if you could use Chrome DevTools with Mozilla Firefox?
先月の本連載で紹介したremotedebug.orgの中心的人物であるKenneth Auchenberg氏によるFirefoxでChromeのDevToolsを利用する様のデモ。こうして実際に動作するものを見ると、remotedebug.orgが進めるBridgeという概念がいかに強力なものであるかが分かります。
アクセシビリティに合わせたコーディングをしよう – 24 ways
原題: Coding Towards Accessibility
アクセシビリティが重要であることはことさら今改めて伝えることではありませんが、どうしても難しいものというイメージがつきまとうものです。この記事ではそのアクセシビリティについて、習慣化しやすい実利的な手法について詳しく紹介しています。
Chrome開発者ツールを使って60FPSを実現するためのワークフロー – Wingify Engineering
原題: Getting 60 FPS using Chrome devtools
パフォーマンス改善はルールを覚えることより、ツールを使って実測しながら行うのが鉄則です。この記事ではそのツールの中でも最も優れた機能を有しているChrome DevToolsを使って一連の改善に関するワークフローを紹介しています。スクリーンショットも多く非常に分かりやすいです。
Position: fixedに関する最新情報 – QuirksBlog
原題: position: fixed update
モバイルWebサイトやアプリケーションの制作に携わったことがある人であれば、必ず遭遇する問題の1つであるposition: fixedにまつわるバグについての現状を、Peter-Paul Koch氏がまとめています。実際の動作を動画で表示しているので、ぜひ自分の目で確認してください。
MEANスタックをYeomanで素早く構築する方法
原題: Full-Stack JavaScript With MEAN And Yeoman
MongoDB、Express.js、Angular.js、Node.jsそれぞれの頭文字を取ってMEANスタックと呼ばれるフルスタックJavaScript開発フレームワークをYeomanを使って素早くセットアップする方法について紹介。
そもそものMEANスタックとは何かについても理由を含めてきちんと紹介してくれています。
JavaScriptでキネティクス・スクロールを実現するためには – don’t code today what you can’t debug tomorrow
原題: JavaScript Kinetic Scrolling
EsprimaやPhantomJSの制作者として知られるAriya Hidayat氏による、パート4(パート5もあるそう)にまで及ぶキネティクス・スクロールについてのJavaScript実装に関する記事。iOSに見られるような自然なスクロールを実現するために必要な事柄を分かりやすく解説しています。
WalmartにおけるNode.jsセットアップ
原題: Walmart Mobile node.js Setup
PayPal社がバックエンドをJavaからNode.jsに移行したという記事が話題になっていましたが、この記事はアメリカ最大のスーパーマッケットチェーンであるWalmartにおけるモバイルサイトでのNode.jsのセットアップについて触れられています。ブラックフライデーを乗り越えたWalmartのセットアップは今後のNode.jsの可能性を感じることができるすばらしいリソースになるはずです。
クローズアップ“ビデオ/スライド/ツール”
The Need for Speed – Guillermo Rauch at dot.js 2013
今ではWordpressを運営するAutomattic社に買収された、クラウドシェアリングサービスのCloudupのGuillermo Rauch氏による、シングルページアプリケーションにおけるパフォーマンス改善のティップス集ともいえるスライド。
Faster JavaScript web apps – Alex MacCaw at Fronteers 2013
こちらはAlex MacCaw氏による、シングルページアプリケーションにおけるパフォーマンス改善に関する発表の動画。よくあるボトルネックについて丁寧に解説しており、シングルページアプリケーションに限らず利用できます。
CSS module system in Google+ – Shubhie Panicker at CSSconf.eu 2013
Google+は、どのようにCSSをモジュラー化しているのか。2013年の9月に、CSSconf.euにてShubhie Panicker氏により発表されたプレゼンテーションの動画。
単純に1ファイルにまとめるだけでは無駄が多いCSSのこれからの課題がここにあると思っているので参考に。
関連リンク: Your CSS needs a dependency graph – Techwraith
Project Hubs: デザイン・プロジェクトをどう管理するべきか – 24 ways
原題: Project Hubs: A Home Base for Design Projects
プロジェクト管理のツールは多く存在しているが、デザインに関しては便利なツールが存在しません。そこでBrad Frost氏は、Project HubsというシンプルなHTMLベースのツールを作りました。この記事ではそのProject Hubsが解決しようとしている問題とその解決方法について紹介しています。
関連リンク: bradfrost/project-hub
Web Browser Compatibility Tables – Cody Lindley
1％以上のマーケットシェアを持つブラウザについてどの機能が実装されているのかを一覧できるWebツール。
類似のツールは多くありますが、幅広い機能とブラウザについて一覧できるので非常に便利です。
SpinKit – tobiasahlin
Ajaxでコンテンツを取得する際や、巨大なテーブルデータをソートするような場合によく利用するローディングをCSSアニメーションで実現し、例示しているGitHubのレポジトリ。
現時点で7種のローディングのデモをこちらから閲覧できます。
Poly Maker – Aerotwist
ポリゴンシェープを生成するPoly Makerというツールの紹介。
今となってはややローファイさを感じるポリゴンを美しいカラーで表現しているツール。ツールそのものもすばらしいがどう作るかについての紹介のほうが興味深いです。
★次回の「斉藤祐也の海外WEBテク定点観測」は2014年2月3日にお届け予定です。★