Onsen UIをカスタマイズするOnsen Theme Rollerの紹介
Onsen UIを使えばハイブリッドアプリやスマートフォン向けWebサイトに おいてリッチで高速な描画ができるUIを手に入れることができます。しかし多機能かつ多彩な表現を可能にすればするほど、ちょっとしたカスタマイズもしづらくなってしまいます。
それを防ぐのに使えるのがテーマ機能です。色をがらっと変えることで印象が大きく変わります。Onsen UIではOnsen Theme Rollerを用意しており、それを使うことで各UIコンポーネントのカスタマイズを簡単に行えるようになっています。今回はOnsen Theme Rollerの使い方を紹介します。
Onsen Theme Rollerの使い方
まずOnsen Theme Rollerを開きます。
見て分かる通り、各UIコンポーネントが並んでいます。スイッチやレンジ、ナビゲーションバーといったUIコンポーネントに加えて、リストに入ったスイッチ、各種リスト、ポップオーバー、アラートなど60種類以上のコンポーネントが登録されています。
これらで例えばスイッチのデザインを変えようと思った場合、横にあるチェックボックスをつけます。
そうすると左側にあるカラーリストでスイッチに関係する部分（Border ColorとSwitch Highlight Color）だ けが明るくなり、他はグレーアウトします。
これでどの設定が、どのUIコンポーネントに関わってくるのかが分かりやすくなります。思いもしないところが変更されてしまったり、逆にどこを変更すれば反映されるのか分からないといった事態にならなくなるでしょう。
カラースキーマを選ぶ
自分で一からカラー設定を変更していく他、予め作成されているカラースキーマからまとめてカラーリングを変更することもできます。
例えばこの中から好きなものを選び、クリックします。そうすると一気に全体のカラーリングが変更されたのが分かるはずです。
全体の色合いをここから選択し、その後細かな調整を行っていくことも可能です。
パターンでチェック
そして個々の細かなUIコンポーネントだけでなく、実際にアプリ風に使ってみた時の見え方を確認できるのがパターンです。
パターンのタブに切り替えると、ショップ詳細やプロフィール、タイムライン、スケジュールなど様々なアプリで良くある画面をOnsen UI（かつ設定しているテーマ）で表現したらどう見えるのかをチェックできます。こうやってアプリ風に見せることでこれから開発するアプリのイメージがわきやすくなりますし、Onsen UIの表現力の高さもお分かりいただけるかと思います。
コンポーネントを探す
そしてさらに右上にあるFind Componentをクリックすると、表示部分におけるUIコンポーネント名を知ることができます。
さらにそのコンポーネントをクリックすると、該当コンポーネントがHTML/CSSにどのように記述すれば良いのかも確認ができるようになっています。
作成が終わったらダウンロード
テーマの作成が終わったら Download Theme ボタンをクリックしてZipファイルをダウンロードします。解凍すると次のようなファイル構成になっています。
ファイルはOnsen UIのスタイルシート（ミニファイ版含む）とStylus用のファイル一式になっています。ここからさらに細かくカスタマイズしても良いですし、そのままプロジェクトに取り込んでも良いでしょう。ファイルのライセンスはApache Licenseとなっています。
いかがでしょうか。背景色をグレーベースにしたり、薄いピンクなどにするだけで印象は大きく変わってきます。フラットUIは情報構造設計を優先するのでデザイン上の差がなかなか出しづらいかも知れません。しかしカラーリングを変えるだけで随分違って見えるものでしょう。
Onsen Theme Rollerはビジュアル的に確認しながら作業が進められます。様々なアプリUIのパターンを見ながら最適なテーマカラーを作成してください。
