前回の記事でも紹介したように、Topcoat は CSS だけで記述された UI フレームワークです。CSS のみのため、任意の JavaScript フレームワークと安心して組み合わせられますし、VM　を必要としない分、モバイルデバイスでのパフォーマンスに有利な面もありそうです。

Topcoat はもともと PhoneGap 用に開発が始められたものなので、PhoneGap アプリをつくる機会があれば、是非試してみてください。

（PhoneGap アプリ開発を最初から勉強したい方には、こちらの連載がだんだんと充実してきてますのでおすすめです。企画レベルでは既に 16 話までできているという話なので、かなり充実したシリーズになりそうです）

ということで、CSS だけのコンポーネントがどんなつくりになっているのか、ちょっと興味を持った人のため、今回は Topcoat のアーキテクチャの紹介です。

Topcoat のバージョン 0.7 が公開されました。 （Topcoat 0.7@Github）

Topcoat は HTML アプリ用の UI コンポーネントです （開発チームはデザイン言語だと言っています）。全て CSS で記述されているのが特徴です。

使い方は、ダウンロードした Topcoat のパッケージ内の css, img, font フォルダから必要なものをプロジェクトにコピーしたら、以下のように CSS ファイルを HTML ページとリンクして、あとは、BUtton 等のタグにクラス定義を追加します。

< link rel="stylesheet" type="text/css"
  href="css/topcoat-mobile-light.min.css" >
...
< button class="topcoat-button"> Button </button>
< button class="topcoat-button" disabled> Button </button>

Topcoat を採用したアプリケーションの代表的な例としては、Edge Reflow や Brackets があります。といっても、これまで Topcoat はモバイルアプリ向けの機能を優先して開発されてきました。ようやくデスクトップ向けのコンポーネントも同じレベルまで引き上げられた、というのが今回のバージョンアップの目玉の 1 つとなっています。