jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説

jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説

Posted at December 12,2011 12:22 AM
Tag:[jQueryMobile, Theme]

jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。

ThemeRoller
ThemeRoller

こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します(2012/01/11頃まで)。

jQuery Mobile

このエントリーで紹介する情報は2011年12月のものです。

1.ThemeRollerへのアクセス方法と全体レイアウト

jQuery Mobileのトップページにある「Themes」をクリック。

jQuery Mobile

ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。

ウェルカムメッセージ

冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べることができます。デフォルトでは3画面表示されています。

ThemeRoller

左ペインのタブの一番右側にある「+」をクリックすれば、プレビュー画面を増やすことができます。タブの「Global」はすべてのプレビュー画面、「A」~「C」はそれぞれのプレビュー画面の設定に対応しています。

左ペイン

2.カラーピッカーの使い方

右上のカラーピッカーはドラッグすることができます。

カラーピッカー

プレビュー画面の背景部分にドラッグすると、

プレビュー画面

このように反映されます。

プレビュー画面

カラーピッカーのドラッグは設定項目に対しても有効です。適用部分には枠線が表示されます。

設定項目

適用した色は右側の保存領域に追加されていきます。最大で5つまでみたいです。

設定項目

Adobe Kulerとも連携しています。「Adobe Kuler」をクリックすると、

Adobe Kuler

Adobe Kulerのカラーピッカーに切り替わります。これもドラッグ可能です。左側のプルダウンを使えば、表示テーマの切り替えや検索が行えます。

Adobe Kulerのカラーピッカー

手動で入力する場合は、次のようなカラーピッカーが表示されます。

カラーピッカー

3.Inspectorの使い方

Inspectorを「ON」にします。

Inspector

プレビュー画面にマウスをポイントすると設定範囲が枠線で表示されます。

プレビュー画面

さらにクリックすると、設定に必要な左ペインの項目が自動的に表示されます。

左ペイン

4.設定項目

左ペインの設定項目をスクリーンショットでご覧ください。InspectorのON/OFFによって項目が異なります。

Inspector OFF
Inspector OFF

Inspector ON
Inspector ON

5.テーマのダウンロード

テーマをダウンロードするには「Download Theme」をクリック。

Download Theme

適当な名称を表示されたダイアログの右上に設定して「Download ZIP」をクリック。これでjQuery Mobileのテーマ部分をダウンロードできます。jQueryやjQuery Mobile本体は含まれませんので注意してください。

Download ZIP

ダイアログに表示されているマークアップを使えばテーマを読み込みますが、link要素やscript要素は2011年12月現在でやや古い(1.0rc2などになっている)ので適宜修正してください。

6.テーマのインポート

ダウンロードしたテーマをインポートするには「Import」をクリック。

Import

表示されたテキストフィールドに、圧縮していないCSSファイル(.min.cssではなく.cssの方)の内容をペーストして「Import」をクリックすれば元のデザインをインポートできます。

インポート

7.テーマのシェア

作成したテーマをシェアするには「Share」をクリック。

Share

表示されたURLでシェアすることができます。この機能を利用すれば作成したテーマをサーバに保存することもできますが、ヘルプの説明によると保存期間は30日なので、大事なテーマはダウンロードした方がよいでしょう。

シェア

不明な点は左ペイン上部にある「Help」をご覧ください。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)