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

無料でCreative Cloudを使い倒せ(11):にわかに熱いアドビの周辺テクノロジ〜PhoneGap 3とTopcoatを押えよう! (2/2)

[岡本紳吾,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


「無料でCreative Cloudを使い倒せ」バックナンバー
前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。