テーマローラー概要

テーマローラーの概要

テーマローラー とは、jQuery Mobileのテーマで使われるスウォッチなどを作成するためのGUIツールです。

jQueryには元々 jQuery UI用のテーマローラー が存在します。これはそのMobile版といった位置づけなので、両者を判別するために本来こちらは「ThemeRoller for jQuery Mobile」のように呼ばれます。ただ、ここではjQuery Mobile用であることは明確なので、「テーマローラー」と表記してしまいます。

独自テーマ作成の流れ

テーマローラーは非常に直観的で分かりやすいと思いますが、一応簡単な流れを書いておきます。

1. テーマをつくる

テーマを自由にデザインします。左側のコントロールパネルで値を設定するか、右側のWYSIWYGで色をパレットからドラッグ&ドロップすることも出来ます。

また、InspectorをOnにすると、クリック位置に対応するコントロールパネルの設定箇所が開くようになります。

2. ダウンロードする

気に入ったテーマが作れたら、コントロールパネル上部の “Download Theme” をクリックしてファイルをダウンロードします。その際、テーマにはサイト名など分かりやすい名前をつけてください。

3. サイトに取り込む

ダウンロード時に表示されるダイアログには、ファイルの取り込み方も書いてあります。そこにあるように、jQuery MobileシステムCSSの前にリンクを置くようにしましょう。システム用CSSを代替するのではなく、あくまでスウォッチ部分を追加で記述しているので、間違えないようにしてください。

上記例の2行目のように、挿入してください。

4. テーマを修正する

後でテーマを修正したくなった場合、コントロールパネル上部の “Import” をクリックして既存のテーマを読み込みます。ファイルをアップロードするのではなく、スタイル定義をペーストする形になっています。ミニマイズされたコードでも読み込めるので、簡単にコピー&ペーストしてしまいましょう。

出来上がったテーマは、改めてダウンロードして入れ替えてやります。

5. 作業状態をシェアする

複数人でサイト構築をしている場合、テーマローラー上で作業を共有したい場合もあるでしょう。その場合、最初に作業中の誰かがコントロールパネル上部の “Share” をクリックして、共有用のURLを取得します。このURLにアクセスすることで、誰でも作業状況を共有することができます。

このURLは、最初に発行されてから30日間有効です。独りで作業しているような場合でも、作業を中断して後でまた再開したい場合などに、URLを保持しておくと良いでしょう(ただし、作業内容は30日経つと消えてしまいます。心配な場合は、一度ダウンロードして確実に保持しておくことをお勧めします)。