ChromeDevTools – HTML5Experts.jp

斉藤祐也の海外WEBテク定点観測＜Issue.2 2013/07/20-2013/08/02＞

斉藤祐也 — Sun, 04 Aug 2013 22:00:17 +0000

二週に一度、月曜日にお届けする海外のWeb開発に関する最新ニュースを厳選。今回は、開発リーダーであるPamela FoxによるBackbone.jsを使ったアプリケーションガイド記事をはじめ、21本のニュースを紹介。HTML5 Experts.jpのエキスパートの皆さんの協力を得て、キュレータは私、斉藤祐也がお届けします！

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

実践! Backboje.jsを使ったアプリケーションガイド – pamela fox’s blog

原題: A Guide to Writing Backbone Apps at Coursera

オンライン学習サービスを提供しているCourseraでBackbone.jsを使ったアプリケーションをどのように構築したのか、開発リーダーであるPamela Foxによる紹介。
Backbone.jsのモデルやコレクション、ビューなどの設計はもちろんアーキテクチャ、APIについても細かく紹介されている。ハウツー記事は多くあるが、実際の設計、実装について紹介されることは稀なので参考になる点が多い。さらに記事中からもリンクがあるが、Courseraで利用しているJSのライブラリ/ツール集まで公開しているのであわせてぜひ。

CSSプリプロセッサ、Sassの次期バージョンの変更ポイント – The David Walsh Blog

原題: Looking Into the Future of Sass

CSSプリプロセッサの中でも人気のあるSass、そのSassの次バージョン、あるいはそれ以降で実装される予定の機能について紹介。
リファレンスセレクタである&が大幅に改良されていたり、if()、リストのオペレーション、@forループの改良など、細かい部分までしっかりと改善がされていく印象だ。どの機能もあくまでも実装予定という段階ではあるので、実際のところが気になる方はぜひSassのオフィシャルレポジトリをのぞいてみるといいでしょう。

新しくなったPageSpeed Insights – Google Developlers

原題: PageSpeed Insights

ウェブサイトのパフォーマンス計測においての総合チェックツールとして長らく我々デベロッパから利用されているGoogle PageSpeed Insightがリニューアル。
モバイルとデスクトップ両方でチェッカーを使えるようになっていたり、改良ポイントが非常に見やすくなっていたり、チェックポイントも増えていたりしている。
ドキュメントもアップデートされているので、再度一読してほしい。

JavaScriptのスタイルガイドを詳しくガイド – ②ality

原題: A meta style guide for JavaScript

現在、JavaScriptのスタイルガイドは多く公開されているが、この記事ではそれらのスタイルガイドに含まれるガイドライン達の裏側にある理由についてまで紹介している。
どのスタイルガイドがいいか、という話ではなくどういう理由でガイドラインが存在するのかを知ることで自分やチームにとってよい選択ができるようになる。このレベルの詳細さでガイドラインについて紹介されている記事は稀なので、リファレンスとしていつでも参照できるようにしておくといいだろう。

海外トレンドコラム

オブジェクト指向プログラミングがすべての問題を解決できない理由 – HTML5 Hub

原題: OOP is Not Your Hammer

JavaScriptにおいても大切なコンセプトであるオブジェクト指向のプログラミングアプローチはもちろん、すべての問題を解決できるわけではない。記事ではシンプルな例を元にオブジェクト指向が苦手な問題を提示し、解決策としてイベント駆動のアプローチ、そしてアスペクト指向プログラミングのアプローチを紹介している。

Handlebars.jsの裏側を知ろう – Nettuts+

原題: Handlebars.js – a Behind the Scenes Look

JavaScriptのテンプレートとして、シンプルでありながらも強力であり、高速なツールとして知られるHandlebars.jsについて、裏側で実際にどんな処理を行っているかについてを詳しく解説。

モバイルブラウザではDataURIは画像を読み込むよりも6倍時間がかかる – Mobify

原題: On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

HTTPリクエストを減らすためのテクニックとして利用されるDataURIがモバイルブラウザにおいて、イメージデータを表示するよりもData URIを表示するほうが6倍ほど遅くなるそう。記事では最終的にはきちんとキャッシュする前提でCSSスプライトを利用する方がパフォーマンスにプラスになると結んでいる。

CSSアニメーションで60FPSを実現するテクニック – Jeremy Kahn’s Dev Blog

原題: 60 FPS or Bust: Dynamically Prerendering CSS Animations

CSSのアニメーションのパフォーマンスについて、長きに渡り研究を重ねて来たJeremy Kahnがたどり着いた一つの解答。CSSプリレンダリングと名付けた手法について詳しく解説。

Backbone.jsアプリをセキュアにするための実装例 – Danial Khosravi’s Blog

原題: Advanced Security In Backbone Application

Backbone.jsを使ったシングルページアプリケーションにおけるセキュリティについて。クライアントサイドでアプリケーションのほとんどをやってしまう場合に知っておきたい大事なこと。

いまさら聞けない!? HTTPSがどうやって安全を確保しているのか

原題: How HTTPS Secures Connections: What Every Web Dev Should Know

HTTPSを使ったコネクションが一体どのようにして安全を確保しているのか。内容が内容だけに少々難しいが、非常によくまとめられている。完璧に知ってなければならない、ということはないが知っておいて損はないのでぜひ。

UXアンチパターン – 90 Percent Of Everything

原題: The slippery slope

UXの中でも特にメールでの通知やサインアップなどについてのアンチパターンについてのプレゼンテーションのまとめ。アンチパターンは見た目上の成長につながるかもしれないが、ブランドを生み出すことを阻害する。

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

60分Angular.js基礎講習 – Dan Wahlin

原題: AngularJS Fundamentals In 60-ish Minutes

フロントエンドのMV*ライブラリとして今では多くの実装例があるAngular.jsの基礎を60分で紹介していく動画。
これからAngular.jsを学ぼうという場合にはぜひ。
スライドはこちらから(PDF)。

Ember.jsを無料で学べるコース – Tuts+

原題: Let’s Learn Ember

Angular.jsを紹介したら、Ember.jsについても言及しておかないと。ということで、Tuts+からEmber.jsについて学べるコースがこちら。
動画自体は14本あるが、それぞれがきちんとカリキュラムに沿って分割されているだけで、合計すれば60分ほど。

詳解: Adobe発UIライブラリ、TopCoat – Adobe TV

原題: Getting Shellacked with TopCoat

Adobe発のオープンソースUIライブラリであるTopCoatについての紹介動画。TopCoatの使い方や、実例やそもそもプロジェクトがどんな問題を解決しようしているのかについて紹介。

オブジェクト指向JavaScriptガイド – Object Playground

原題: Object Playground: The Definitive Guide to Object-Oriented JavaScript

JavaScriptに限らないがオブジェクト指向プログラミングはなかなかコンセプトが理解しづらいものだが、この30分ほどの動画ではオブジェクトを車に例えることなく、継承の概念やプロトタイプなどについて分かりやすく解説。ページ下にあるオブジェクトグラフ生成ツールも非常によくできているのでぜひ、試してみてほしい。

一歩先行く“コード”

JointJS – JavaScript diagramming library.

JavaScriptを使ってダイアグラムを生成するという非常に意欲的なツール。
マウスオーバーで情報を表示したり、ダイアグラムをドラッグできたりもできるのでこちらのサンプルから試してみてほしい。

eslint – Nicolas Zakas

JSLintとJSHintと同じ種類のツールであるESLintはCSSLintの開発メンバーの1人でもあるNicolas Zakasの新しいプロジェクト。開始されたばかりなので、不安定な状態ではあるが、開発スピードはものすごく早いので近くアルファ版あるいはベータ版もリリースされるだろう。

VerbalExpressions – jehna

サーバでもクライアントでも利用できるJavaScript(現在は他言語にもポートされている)の正規表現ツール。
jQueryのようなFluent風のAPIで普通の言葉のように正規表現を利用できるようにしている。

leapjs – leapmotion

白石編集長主催のWeb先端技術味見部でもさっそく取り扱われたLeapMotionをJavaScriptでプログラムできるフレームワーク。例も多く含まれているので、LeapMotionが届いた方はぜひ試してみてほしい。

jspm.io

クライアントサイドのJavaScriptが複雑化、巨大化傾向にある中、パッケージマネジメントをどうするのかが求められている昨今で、ES6から利用できるようになるかもしれないシンタックスを使ってモジュールを利用できるようにする解決がこちら。

海外で話題の“ツール”

less2stylus – Andrey Popp

CSSプリプロセッサであるLESSをStylusに転換するコマンドラインツール。
Twitter BootstrapなどのようなLESSを利用したツールなどもStylusに変換できる。

Native HTML Widgets/Forms – Cody Lindley

ツールと呼ぶにはややシンプルすぎるきらいがあるが、HTML5にて定義されている追加されたフォーム属性を一覧化し、各ブラウザでどのようなUIになるのかを簡単にチェックできるページ。

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

斉藤祐也の海外WEBテク定点観測＜Issue.1-2013/07/05-2013/07/19＞

斉藤祐也 — Sun, 21 Jul 2013 20:00:29 +0000

連載：海外WEBテク最新動向 (1)

「斉藤祐也の海外WEBテク定点観測」では、二週に一度、月曜日にお届けする海外のWeb開発に関する最新ニュースを厳選。 HTML5 Experts.jpのエキスパートの皆さんの協力を得て、キュレーターは斉藤祐也がお届けします!

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

なぜ、プログレッシブ・エンハンスメントは「まだ」重要なのか？ – JakeArchibald.com

原題: Progressive enhancement is still important

現在のWeb開発をJavaScriptなしに行うのはかなり難しいだろう。
この記事でJake Archibald氏は今だからこそ、プログレシッブ・エンハンスメントが重要であると以下の3つのポイントから主張している。

古いブラウザにおけるテストの工数を減らすことができる
テストそのものの工数も減らすことができる
パフォーマンス視点で利点が多い

エスカレーターは通電しなければ階段として利用できるように、ウェブ開発においてもJavaScriptなしに最低限の動作を保証することの利点は大きい。

60FPSでモバイルWebアプリをつくるために知っておきたいこと – Aerotwist

原題: Making a 60fps Mobile App

Webページは早くロードされるだけではなく、早く実行される必要がある。という言葉を残したのはこの記事の筆者であるPaul Lewis氏。その氏がモバイルWebアプリでも「早く実行」できるように実践した諸々を余さず共有。
氏がこれまでにも何度か言及したきた6つの主要なアドバイス、例えばcanvasを256px以上にしてハードウェアアクセラレータを有効にする、効率的、にかつ計画的に-webkit-transform: translateZ(0)を使ってコンポジションレイヤーを作成するなどを元に実際に実装を行い、その上で得た教訓も共有している。

なぜモバイルWebアプリは遅いのか？ – Sealed Abstract

原題: Why mobile web apps are slow

モバイルWebアプリには、パフォーマンスという超えなければならない大きな壁がある。この（3000文字を超える）記事ではなぜモバイルWebアプリはネイティブアプリにパフォーマンスという点で勝負にならないのか、JavaScriptのパフォーマンスはこの数年間はパフォーマンスがよくなっていない理由など、ソフトウェア、ハードウェアなど広い視野で、細かい調査に基づくデータを使って解説。きちんと問題を直視し理解することが問題解決への大切な第一歩。

この記事のように強い主張があると様々な反論が試みられるのが常だが、数ある中でもCodename Oneによる『Why Mobile Web Is Slow?』が特に秀逸なので、こちらもあわせて読んでおきたい。

Web Componentsを使って次世代のウィジェットを作る方法 – Tech.Pro

原題: Building Next Generation Widgets with Web Components

我らが編集長である白石さんも熱視線を送るWeb Components、そしてそのWeb Componentsをモダンブラウザ上で現在でも利用できるようにする Polymer。この記事は、その組み合わせを実際に使って、動作するデモを作っていくチュートリアル。

新しい仕様は「まだ使えないから」と思ってしまいがちだが、使えない今だからこそ、開発者の醍醐味が多く残っているとも言える。実際に記事ではスニペットも多く記載されているので、30分もあれば、すっかり動作するデモを作成し終えられると思うので、ぜひチャレンジしてほしい。

KSS-nodeでスタイルガイドを自動生成する方法 – shoogle designs’ blog

原題: Automate the generation of your style guides with KSS-node

巨大化、複雑化していくウェブサイト/アプリで密かにJavaScriptよりも手が付けられない状態に陥りやすいのがCSS。救世主として現れたプリプロセッサの存在より、私自身は重要視しているスタイルガイドというドキュメントの存在。
そのスタイルガイドの生成をCSSのコメントから自動で行なってくれるツールの1つであるKSS-nodeの紹介。KSS-nodeは、スタイルガイドの生みの親とも言われるGitHubのデザイナー、Kyle Neath氏が公開しているRuby製のKSSをNode.jsにポートしたバージョン。

海外トレンドコラム

Polymerよ、こんにちは: Google PolymerチームとのQ&A

原題: Hello Polymer: Q&A with Google’s Polymer team

Web Componentsを構成するAPI郡をデザインするために、モダンブラウザでWeb Componentsを利用できるようにするためのツールであるPolymer。
そのPolymerの開発者たち自らがQ&Aセッションを行ったイベントのサマリーがこの記事。イベントそのものも動画で見ることができるが、サマリーのみ読むだけでもPolymerの基礎について知ることができる。

ページロードにかかる時間以外の指標について – Caliper Blog

原題: We need more than page load times

ページロード速度の最適化が当たり前になりつつある昨今は、「何を基準にしてKPI化するか」という問題について、様々な回答が試みられている。この記事ではシングルページアプリケーションと呼ばれるような種類のアプローチを行った場合の計測ポイントについて紹介している。

Promises/A+に潜む落とし穴 – Sorella’s Basement

原題: Promises/A+ Considered Harmful

Promises/A+という名前を見かける機会はこの一年で増えてきているが、その仕様についての解説を行うとともに、一見非常にシンプルで便利に思えるPromises/A+には危険も多く潜んでいると警鐘を鳴らしている。

パフォーマンスへの影響、例外処理のハンドリングなどの落とし穴を紹介し、どのようなケースで利用するべきか、あるいはするべきでないかについても紹介している。

Backbone.jsのViewをFacebook作のReactで置き換える – Propeller Blog

原題: Moving From Backbone To React

やや驚きで迎えられたFacebookが公開したUIビルドライブラリReactを使ってBackbone.jsのViewをリプレースした経験を紹介している記事。結果として満足のいくものが得られたようなので、試してみる価値は十分にありそうだ。

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

Webパフォーマンス解析におけるウォーターフォールチャートのアンチパターン – Google Developers Live

原題: Waterfall AntiPatterns – Web Performance Analysis

Chrome開発ツールでも、WebPageTestのようなオンラインツールでも必ず見かけるリソースのネットワーク状況を示すウォーターフォールチャート。このチャートの読み取り方を知るだけでも多くのパフォーマンスに関する問題を解決できるのでぜひ覚えておきたい。

Chrome開発ツールを使って、JavaScriptのメモリリークを見つけよう – Gonzalo Ruiz de Villa

原題: Finding and debugging memory leaks in JavaScript with Chrome DevTools

JavaScriptにおけるメモリー管理についてのスライド。Chromeの開発ツールを使ってメモリリークをどう見つけ出すかについて詳しく解説している。
そもそもメモリとは、ガベージコレクションとは、そしてメモリリークとはなにかという基礎的な部分から丁寧に、わかりやすく解説してくれている。

一歩先行く“コード”

ES6 Module Loader polyfill

クライアントサイドのJavaScriptにおける大きな課題となっている、モジュール化。AMDやCommonJSのスタイルに基づいた解決はこれまでに幾つか提案され、プロダクションでも使われているが、このツールは、ECMAScript6の仕様として検討が進んでいるモジュール化を先取りして使えるようにする。まだプロダクションで使えるレベルではないが、今後に期待を込めて紹介。

Intern: A next-generation JavaScript testing stack

Internは次世代JavaScriptテスト・スタックの名に恥じない豊富な機能を備えたツール。後進だけあって、ブラウザでもNode.jsでも動作し、SauceLabsや Seleniumとの連携もお手のもの。Istanbulを使ったコード・カバレッジや、 TravisCIとの連動すらついてくるフルスタックのテストツール。

Spectacular

こちらも新進気鋭のJavaScriptのユニット・テストツール。Jasmineと似ている印象ながら、ユニット・テストと相性がよいCoffeeScriptでのテストを書くことを意識している(もちろんJavaScriptでも記述は可能)ツール。