jQuery Mobileを使用したモバイルアプリの設計/開発者向けカスタムテーマ

以前のjQuery Mobileチュートリアルでは、基礎となるフレームワークの多くと最初のWebサイトの設定方法について紹介しました。 JSライブラリは軽量で、学習が難しいという点ではピックアップが簡単です。ファイルには汎用のCSSスタイルシートも含まれているので、レイアウト内の要素をさらにカスタマイズできます。.

この2番目のセグメントでは、このjQuery Mobileテーマのアイデアをさらに深く掘り下げてみたいと思います。デザイン業界全体がjQMによって革命を起こし、モバイルテンプレートをゼロから構築するプロセスが大幅に改善されました。 jQuery Mobileは単なるスクリプトライブラリではなく、効率的なモバイルテンプレートを構築して作成するための完全な基盤となるフレームワークです。.

デフォルトのスタイルシートの内容

どのタイプのCSSコードがデフォルトファイルに含まれているのかを明確にすることから始めます。 jQM 1.0のスタイルシートは2つの主なセグメントに分割されました - 構造そして テーマ.

構造体コードは、ほとんど無視できるものです。これは、マージン、パディング、高さ/幅、フォントのバリエーション、および他の多くのブラウザのデフォルトを設定するために使用されます。内部テーマはA-Eから分割され、それぞれがデザインのさまざまな視覚効果を制御します。これには背景色、グラデーション、ドロップシャドウなどが含まれます。.

これらの内部テーマ要素はそれぞれ、次のように表すこともできます。見本. モバイルテンプレートを作成するとき、あなたは一般的に単一のテーマに固執するでしょう。しかし、ほとんどすべてのシナリオで、異なる配色でデザインを改良することができます。デフォルトのスタイルシートにはスウォッチA〜Eしか含まれていませんが、スウォッチF〜Zを作成してテーマライブラリにさらに21の選択肢を追加することができます。これらの用語をもう一度明確にするために テーマ 最大26種類の異なるCSSファイルを1つのCSSファイルとして扱うことができます。見本ラベルA-Z.

スタイルを切り替える

スウォッチを指定しない場合、jQuery MobileはデフォルトでスウォッチAを使います。あなたがまだjQuery Mobileのドキュメントが多くの内部関数のためにHTML5データ属性を利用していることに気づいていなかったなら。その1つに、data-theme属性を介してスウォッチを変更することが含まれています。以下の私のコード例をチェックして、私が何を意味するのかを確かめてください。.

  デフォルトのjQMページ
 
  ここにいくつかの内部コンテンツがあります.

ルートページdivにdata-theme属性を配置したことに注目してください。これは、新しいスウォッチカラーが、ヘッダー領域とコンテンツ領域の両方を含む内部のすべてに影響を与えることを意味します。私はさらに含めることができます data-theme = "c" 私のページの残りからその内容だけを変更するためにヘッダーdivに.

スウォッチの構成要素

単一のレイアウト内にこれらの異なるスウォッチを実装する方法はかなり簡単なはずです。それでは、ここでjQM CSSコードを見てみましょう。その結果、色見本の個々のコンポーネントを分類できます。自分のCDNでホストされている最新のjQuery Mobile 1.4.5 CSSファイルを調べてください。.

各スウォッチが個別のコメントで区切られており、各内部クラスが適切な文字で終わっていることに注意する必要があります。例えば .ui-bar-a そして .ui-body-a デフォルトでヘッダー/フッターバーとコンテンツ領域に適用されます。ほとんどのプロパティは、フォントとリンクの色、背景のグラデーション、およびその他の細かい部分のリセットを実装しています。私は単に含まれています ui-bar-a どの要素をターゲットにしているかを把握するためのコード.

/ * A --------------------------------------------------- ---------------------------------------------- * / .ui -bar-a ボーダー：1ピクセルソリッド＃2A2A2A。背景：＃111111。色：#ffffff;フォントの太さ：太字。 text-shadow：0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px＃000000; background-image：-webkit-gradient（線形、左上、左下、（＃3c3c3c）から（＃111）まで）。 / * Saf4 +、Chrome * / background-image：-webkit-linear-gradient（＃3c3c3c、＃111）; / * Chrome 10+、Saf5.1 + * / background-image：-moz-linear-gradient（＃3c3c3c、＃111）; / * FF3.6 * / background-image：-ms-linear-gradient（＃3c3c3c、＃111）; / * IE10 * / background-image：-o-linear-gradient（＃3c3c3c、＃111）; / * Opera 11.10以降* / background-image：linear-gradient（＃3c3c3c、＃111）; .ui-bar-a、.ui-bar-a入力、.ui-bar-a選択、.ui-bar-aテキストエリア、.ui-bar-aボタンfont-family：Helvetica、Arial、sans-セリフ; .ui-bar-a .ui-link-inherit color：#fff;。  .ui-bar-a .ui-link color：＃7cc4e7 / * a-bar-link-color * /;フォントの太さ：太字。  .ui-bar-a .ui-link：hover color：＃2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link：アクティブ色：＃2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link：visited color：＃2489CE / * a-bar-link-visited * /;

カスタムスウォッチを作成しようとしているのであれば、テンプレートをオリジナルの1つから除外することをお勧めします。新しいCSSドキュメントでコードを書き始めると、プロセスはずっとスムーズになります。元のファイルを編集する手間はありません。きれいな状態で作業を始めることができます。しかし、あなたが注目したい重要な分野は次のとおりです。

ヘッダーバーとフッターバー
本文とページのテキスト
リストスタイル
ボタンの状態はデフォルト/ホバー/アクティブ
フォーム入力コントロール（追加）

新しいバーデザインのコーディング

先ほど見た同じCSSファイルから、すべてのスウォッチAコード（12〜150行目）を新しいファイルにコピー＆ペーストします。スウォッチ名Gを使ってこれらの新しいスタイルを実装することができます。今すぐコードをコピーした後に、それぞれのクラスインスタンスの名前を変更したいです。 -ある に -g, これが、jQuery Mobileがどのスタイルを使用するのかを認識する方法であるためです。.

私はもっと身近なiOSのグラデーションを模倣するためにヘッダーバーbgを再設計することから始めたいと思います。これは内だけで行うことができます .ui-bar-g セレクタ。背景とbackground-imageプロパティを編集してグラデーション効果を変えたいです。下記の私のコードと新しいグラデーションのデモ画面をチェックしてください。.

.ui-bar-g border：1ピクセルx 2d3033 / * a-bar-border * /;左ボーダー：0px。右ボーダー：0px。背景：＃6d83a1。色：#fff / * バー色 * /;フォントの太さ：太字。 text-shadow：0 / * バーシャドウx * / -1px / * バーシャドウy * / 1px / * バーシャドウ半径 * /＃3e4957。 background-image：-webkit-gradient（線形、0％0％、0％100％、from（＃b4bfce）、color-stop（0.5、＃899cb3）、color-stop（0.505、＃7e94b0）、から（＃へ） 6d83a1））;背景画像：-webkit-linear-gradient（上、＃b4bfce、＃899cb3 50％、＃7e94b0 52％、＃6d83a1）; / * Chrome 10+、Saf5.1 + * / background-image：-moz-linear-gradient（トップ、＃b4bfce、＃899cb3 50％、＃7e94b0 52％、＃6d83a1）; / * FF3.6 * / background-image：-ms-linear-gradient（上、＃b4bfce、＃899cb3 50％、＃7e94b0 52％、＃6d83a1）; / * IE10 * / background-image：-o-linear-gradient（上、＃b4bfce、＃899cb3 50％、＃7e94b0 52％、＃6d83a1）; / * Opera 11.10以降* / background-image：線形グラデーション（top、＃b4bfce、＃899cb3 50％、＃7e94b0 52％、＃6d83a1）;

私はほとんどのデフォルトiOSアプリケーションに見られる青い配色を使っています。私の背景は、CSS3グラデーションをレンダリングできないデバイスの場合、最初は無地の色に設定されています。それでは以下で、私は伝統的なアップルスタイルの光沢のある輝き効果を再現するために50％のマーカーの周りにカラーストップを使用しています。同じセレクターの中で、私はテキストの影をもっと微妙な色と範囲で少し修正しました。.

ボタンとテキスト効果

スウォッチをコーディングするときには、インターフェースのどの部分に注意が必要かを特に考慮することが重要です。ヘッダーバーはこの新しい背景で見栄えがしますが、最後に変更したいのは、iOSアプリのボタンスタイルに近いボタンスタイルに合わせます。.

.ui-btn-up-g border：1px solid＃375073;背景：＃4a6c9b。フォントの太さ：太字。色：#fff; text-shadow：0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * /＃40536d;ボックスシャドウ：なし。 -webkit-box-shadow：なし。 -moz-box-shadow：なし。 background-image：-webkit-gradient（線形、0％0％、0％100％、（＃89a0be）から、color-stop（0.5、＃5877a2）、color-stop（0.505、＃476999）から（＃まで） 4a6c9b））;背景画像：-webkit-linear-gradient（上、＃89a0be、＃5877a2 50％、＃476999 52％、＃4a6c9b）; / * Chrome 10+、Saf5.1 + * / background-image：-moz-linear-gradient（上、＃89a0be、＃5877a2 50％、＃476999 52％、＃4a6c9b）; / * FF3.6 * / background-image：-ms-linear-gradient（上、＃89a0be、＃5877a2 50％、＃476999 52％、＃4a6c9b）; / * IE10 * / background-image：-o-linear-gradient（上、＃89a0be、＃5877a2 50％、＃476999 52％、＃4a6c9b）; / * Opera 11.10以降* / background-image：線形グラデーション（top、＃89a0be、＃5877a2 50％、＃476999 52％、＃4a6c9b）; border-radius：4ピクセル。 -webkit-border-radius：4ピクセル。 -moz-border-radius：4ピクセル。  .ui-btn-up-g .ui-btn-inner、.ui-btn-hover-g .ui-btn-inner、.ui-btn-down-g .ui-btn-inner border-radius： 0; -webkit-border-radius：0; -moz-border-radius：0; .ui-btn-hover-g border：1px solid＃1b49a5;背景：＃2463de。フォントの太さ：太字。色：#fff; text-shadow：0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * /＃40536d;ボックスシャドウ：なし。 -webkit-box-shadow：なし。 -moz-box-shadow：なし。 background-image：-webkit-gradient（線形、0％0％、0％100％、（＃779be9）より）、カラーストップ（0.5、＃376fe0）、カラーストップ（0.505、＃2260dd）から（＃へ） 2463de））;背景画像：-webkit-linear-gradient（上、＃779be9、＃376fe0 50％、＃2260dd 52％、＃2463de）; / * Chrome 10+、Saf5.1 + * / background-image：-moz-linear-gradient（トップ、＃779be9、＃376fe0 50％、＃2260dd 52％、＃2463de）; / * FF3.6 * / background-image：-ms-linear-gradient（上、＃779be9、＃376fe0 50％、＃2260dd 52％、＃2463de）; / * IE10 * / background-image：-o-linear-gradient（トップ、＃779be9、＃376fe0 50％、＃2260dd 52％、＃2463de）; / * Opera 11.10以降* / background-image：線形グラデーション（上、＃779be9、＃376fe0 50％、＃2260dd 52％、＃2463de）; border-radius：4ピクセル。 -webkit-border-radius：4ピクセル。 -moz-border-radius：4ピクセル。

現在編集中のコード領域は、UIボタンクラス内にあります。考慮すべき3つの異なるモードがあります。 .ui-btn-up-g, .ui-btn-hover-g, そして .ui-btn-down-g. 私は主にボックスの影と線形グラデーションを編集することによって標準的な（btn-up）とホバー（btn-hover）効果に焦点を合わせています。また、丸みを帯びた角の効果を広げてボタンがより長方形に見えるようにしました.

このため、タイトルのクラスから内側のボーダー半径を削除する必要がありました。 .ui-btn-inner. このクラスは、ヘッダーバーの各アンカーリンク内のspan要素に添付されます。ボーダーの半径のプロパティをリセットしないと、ボタンの上にマウスを移動したときにデザインの小さな不具合に気付くでしょう。 jQuery Mobileのテーマでコーディングに時間をかけると、将来のプロジェクトのためにこれらのちょっとしたニュアンスを覚えるでしょう。.

ThemeRollerの紹介

コードを手で汚すのが好きなら、カスタム編集に固執することを強くお勧めします。より細かく制御できるだけでなく、すべての編集を自分で行った方がCSS内の問題をデバッグするのがはるかに簡単です。しかし多くのデザイナーにとって、このプロセスは面倒で、必要以上に時間がかかるでしょう。幸い、jQuery MobileチームはThemeRollerという名前でオンラインエディタをリリースしました。.

このページからあなたは最初の3つのA-Cスウォッチを編集するか、あなた自身のものを作成することさえできます。左側のサイドバーを見れば、これら3つの設定を切り替えることも、グローバルテーマオプションをすばやく変更することもできます。これらには、ボーダー半径、ボックスの影、デフォルトのページフォントなどのCSSプロパティが含まれます。上/下のバー、本文の内容、3つのボタンの状態など、以前と同じ領域のみ編集可能なプリセットスウォッチを選択していることに注目してください。.

しかし、私のお気に入りの機能はAdobe Kulerのスウォッチに直接アクセスすることです。あなたは実際にあなたのKulerアカウント内にいくつかの配色を作成してThemeRollerにインポートすることができます。インターフェースはドラッグアンドドロップ機能をサポートしているので、ほんの数分でいくつかの異なるアイデアを試すことが本当に簡単です。.

最終的には、jQMスウォッチを正しく構築するための絶対的な方法はありません。 CSSをハードコードすることを好むデザイナーもいれば、直感的なThemeRoller Webアプリを好むデザイナーもいます。クラス構造に従っている限り、どちらの方法でも同じ結果が得られます。.

役に立つリソース

jQueryのモバイルテーマ - ドキュメント
jQuery Mobileテーマの使用とカスタマイズ