Addy Osmani は Twitter のフォロワー数 10 万人を誇るフロントエンド界隈の有名人で、 Google の Staff Engineer です。JavaScript デザインパターンの執筆者としてご存知の方も多いかもしれません。TodoMVC や Web Starter Kit、Yeoman、Material Design Lite といったオープンソースプロジェクトに携わってきました。そんな彼は、数多くの開発に役立つツールを使い分けることでも有名で、Totally Tooling Tips というビデオシリーズも公開しています。

今回はそんな彼が普段使っているツール類についてインタビューしましたのでご紹介します。ぜひみなさんの開発環境の参考にして下さい。

OS / Hardware は何を使っていますか？

El Capitan の Mac をメインで使ってます。最近は、週の半分 Windows も使っています。Microsoft Surface Pro 3 の Windows 10 です。
ブラウザはすべてのチャンネルの Chrome、Firefox の Stable と Nightly、Opera も Stable と Next、Safari と WebKit Nightly を使っています。Mac の VM には Windows 7、8.1、10 を入れて、なるべく多くのバージョンの IE と Edge を試せるようにしています。

Mac で使っているツール類を教えてもらえますか？

Alfred

Alfred は欲しい物をすぐに探せるプロダクティビティツールです。ショートカットを設定することでアプリケーションのコントロールができたりします。プラグインに巨大なエコシステムがあって、例えば Zeno Rocha のプロジェクト alfred-workflows で便利なプラグインを多数ダウンロードすることができます。
SublimeText のプラグインはもちろん、Package Managers では、npm、bower、gulp などのパッケージやプラグイン、CanIUse など、手先の操作でいろんなものを検索して利用することができます。他にも Colors で色のプレビューをしたり、Dash のドキュメントを検索したりといったこともできます。

Spotlight / Flashlight

Alfred の代替として最近注目しているのが Spotlight です。Spotlight は Mac 標準の検索ツールで、Yosemite で Apple が大幅な機能追加をしたことで、Alfred の基本的な機能と同程度であれば、これで十分使えます。Flashlight というアプリを使えば、Spotlight にプラグインアーキテクチャを持ち込むことができるので、ウェブサイト内を検索をしたり、ノートを取ったり、リマインダーを設定したりといったことが Spotlight 内でできるようになります。

BetterTouchTool

BetterTouchTool は Mac 用のトラックパッドで、ジェスチャーをカスタマイズできるツールです。例えば 2 本指で横にスワイプするジェスチャーで Chrome のような特定のアプリを起動するといった用途に使うことができます。Yosemite のデフォルト設定よりもパワフルなのが特徴です。

Spectacle

最近はウィンドウ管理も重要になってきています。小さな画面を有効に活用するためには、画面をうまく分けたいですよね。そんな時に使えるのが Spectacle です。キーボードショートカットと組み合わせて使うことが多いのですが、みんなが使いたいようなオプションは大体揃っています。画面の左右半分に表示したいとか、そんな場面に便利です。

Sip

私はデザインすることもあるのですが、アプリやデモ、プレゼンテーションなどで適切なカラーパレットを使う必要があります。システムワイドで使えるカラーパレットツールとして使っているのが Sip です。最後に使った色のセットを覚えておいてくれるところが便利です。また、設定項目がたくさんあって、どんな色の組み合わせをデフォルトにしたいのかを選ぶことができます。今となっては Chrome 本体の DevTools が Color Picker 機能を提供しているので、以前と比べて使う機会は減りましたが、それでも便利なツールです。

Sketch + Framer.js

プロトタイピングとデザインをするのに使っているのは、Bohemian Coding の Sketch です。複数アートボード、ベクター、SVG 出力、グリッドなどのサポートが充実しているため、Framer.js と合わせて愛用しています。Framer.js は CoffeeScript に似たハイレベル言語を使ってモーションプロトタイプが作れるツールです。実はこれ、Google のデザイナーの間でもすごく人気で、広く使われています。例えばこの Material Design Contacts のサンプルアプリを見てみると、ただのプロトタイプにも関わらず、ブラウザでスクロールの動作を試すことができます。Framer.js がコピーペーストできるコードを生成してくれるわけではありませんが、デザイナーはこれをデベロッパーに渡すことで、最終的なコードを書いてもらうことができます。

Dr.Cleaner

たくさんのアプリを立ち上げていると、メモリ不足が問題になることがあります。TrendMicro が提供している無料の Dr.Cleaner を使えば、メモリとディスクの使用量を最適化してくれます。

Mou

ブログポストを書く時、Markdown アプリの Mou を使っています。Mou はシンプルな UI で、片側にソース、もう片側にプレビューを表示します。コードのハイライト機能もあります。HTML、PDF へのエクスポートにも対応していて、Tumblr にもポストできます。私はこれでポストを Google Drive や Dropbox に保存しています。もちろん GitHub Flavored Markdown にも対応しています。

ImageOptim

開発者ならフル解像度の画像を受け取るケースが多いと思います。ビルドプロセスでデバイスに合わせた解像度の最適化ができるのがもちろん良いのですが、ちょっとだけ試したい場合もありますよね。そういった時に使うのが ImageOptim です。PNGOut や PNGCrush、OptiPNG など、最新のツールもサポートしています。

Chrome Extension は何を使っていますか？

SnappySnippet

SnappySnippet は DOM から直接 CSS や HTML を抜き出すことができる拡張機能です。例えばあるページにとても素敵なボタンがあって、それがどうやって作られているのか知りたいと思ったとします。そんな時にこれを使って DOM ノードを選択すると、再現するのに必要な CSS と HTML を抜き出してくれる、というわけです。また、JSBin のような別サーバーへの送信機能もサポートされています。

DOMListener

TodoMVC のテストに DOMListener が大活躍しています。これは DOM の変更点を監視、ブラウズ、フィルタすることができる拡張機能です。DevTools の Timeline  で変更点を監視するのによく似ていますが、DOMListener では同じことを DOM の変更に対して行うことができます。例えばシングルページアプリケーションで 新しい UI ピースを挿入したり、新しいビューを差し込んだりした場合、どんな DOM コンテントが追加されたのか、スタイルやテキストコンテントが追加されたのか、確認したり、フィルターすることもできます。これによりデバッグが非常に簡単になります。問題が発見できたら、DevTools に戻ってくる、というワークフローはとても便利です。

The Great Suspender

これはある意味私の生活を変えた拡張機能です。Chrome チームが消費メモリーの最適化に取り組んでいることはご存知と思います。作業は順調に進んでいるようですが、そうしている間にも、私のようにタブを大量に使う人間にとっては、これらのタブを消す必要があります。そこで役立つのが The Great Suspender です。
これはタブを一定時間後に自動的に一時停止することで、Chrome のメモリや GPU のフットプリントを削減してくれるツールです。例えば 50 個のタブが開いていたとしても、実際に同時に使うのは 2 〜 3 個です。この拡張機能はそういったタブを軽量のプレースホルダーページに置き換え、Chrome が表示する必要のないページを見せないことでメモリーの消費を抑えてくれるものです。そしてバッテリーにも優しい。使い続けたいタブに戻ると、リロードするリンクが表示され、その URL に戻ることができます。
この拡張機能に何より感謝しているのは、そういったタブに自分が滅多に戻らないということを教えてくれたことです。ページを開いても、実際に自分がそこに戻ることは非常に少ないということに気付かせてくれました。

Page Ruler

Page Ruler は Polymer チームの同僚がおすすめしてくれた拡張機能です。あるページを開いていて、何かのサイズを測りたい場合は、クリックしてエリアを選択するだけ。画面下部にバーが表示されて、幅や高さ、上下左右位置といった様々なサイズ情報を教えてくれます。もちろんガイドを表示するかも選ぶことができます。


全二回のインタビューの前編として、今回はツール編をお届けしました。後編は開発環境編として、エディタやプラグイン、シェルについてのインタビューをお届けします。


Posted by Eiji Kitamura - Developer Relations Team