＠IT
アジャイル/DevOps
HTML5 + UX
デザインハック
にわかに熱いアドビの周辺テクノロジ～PhoneGap 3と...

にわかに熱いアドビの周辺テクノロジ～PhoneGap 3とTopcoatを押えよう！：無料でCreative Cloudを使い倒せ（11）（2/2 ページ）

» 2013年08月28日 16時30分公開

[岡本紳吾，hatte.Inc]

前のページへ 1|2 　　　　　　

アドビが開発するUIフレームワーク「Topcoat」

　さて、PhoneGapでアプリケーションが作れるようになったが、デザイン側はどうすればいいだろうか？これまではjQuery Mobileなどを利用して、UIの構築を行うことが多かった。jQuery Mobileがあれば、基本的なUIを統一感あるデザインで構築することができるので、生産性を大幅に向上できた。しかし、最近のレスポンシブWebデザインの流れや、デスクトップアプリとモバイルアプリで同じコードを使い回したいといった要件に合わせるには、それなりの工夫が必要だった。

　アドビは、これらの問題を解決できるUIフレームワークを独自に開発している。それがTopcoatだ。Topcoatは、他のUIフレームワークと同じく、JavaScriptで動きがコントロールされ、見た目はCSSで変えることができる。jQuery MobileなどでもテーマをCSSで作ることができたが、Topcoatもまた、テーマファイルをCSSで作ることができる。

　Topcoatの特徴は、これまで親しまれてきたフレームワークの使いやすさはそのままに、処理速度の向上が図られるなど、技術面の成熟はもちろんだが、モックアップやワイヤフレーム作成時にTopcoatのデザインを利用できるPSDファイルが提供されていたり、現状考えられ得るさまざまなシチュエーションに対応できる、膨大なアイコンセットが提供されていたり、デザイン面のサポートが充実している点だ。UIフレームワークを開発者だけのものにせず、デザイナー側にも解放していこうという、いかにもアドビらしい取り組みがなされている。

PSDファイルの中身。これは全部ではなくてごく一部だ

アイコンセットはこのようになっている。もちろんこれも一部に過ぎない

　PSDファイルは、Topcoatのダウンロードページではなく、GitHubからダウンロードできるようになっている（https://github.com/topcoat/design）。同様にアイコンのセットもGitHubでダウンロードできる（https://github.com/topcoat/icons）。

　Topcoatは現在、バージョン0.6.0が配布中だ。公式Webサイトからダウンロードするだけですぐに利用できる。また、コードは豊富なサンプルからコピー＆ペーストするだけで実装可能だ。

Topcoatの公式Webサイト（http://topcoat.io/）、GitHub（https://github.com/topcoat）

　また、アドビが開発している一部のアプリケーションのUIに、Topcoatが採用されている点も見逃せない。すでに皆さんはこのUIに触れている可能性も十分に考えられるのだ。筆者もTopcoatのデザインを見たとき「あれ、これはどこかで見たことがあるな」と既視感を覚えたのだが、それは勘違いではなかった。

　同社がリリースしているEdgeファミリのうち、Edge Code CC、Edge Reflow CCには、このTopcoatが採用されている。もちろんEdge Code CCのルーツともいえる「Brackets」も、TopcoatのUIを採用しているのだ。

　「デスクトップアプリケーションでも利用されているUIが、手軽にWebアプリケーションでも利用できる、かつモバイルにも適用可能である」というのは、なかなか興味深い。Edge CodeやReflowは、HTMLベースで開発されているので、こういった手法が取られたのだろうと考えられるが、アドビがTopcoatに賭ける思いの強さが垣間見えるというものだ。

Edge Reflow CCはTopcoatのDarkテーマが利用されている

Edge Code CCではLightテーマだ

　アドビは、これからリリースする製品にも、TopcoatのUIを採用してくると思われる。そのため、Topcoat自体の開発もかなりハイペースで行われるのではないかと筆者は予想している。

　デスクトップアプリケーションでも通用するUIフレームワークのTopcoat、そして完全ともいえるレベルで刷新されたPhoneGap 3、最新のWebアプリ開発のツールがすぐ手に入って利用できる状態になっている。後は、あなた自身がコードを書いたり、アイデアをデザインする番だ。

岡本紳吾（おかもとしんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto