Ignite UI テーマの使用
開発者は、アプリケーションの見栄えをよくし、デスクトップ、タブレット、モバイルデバイスなど、あらゆる種類のデバイスで動作させなければなりません。最新の Web アプリケーションは、レスポンシブかつ、タッチに対応している必要がありますが、実現するためには、アプリケーションにおいて多くの設定を CSS/SASS/LESS に対して行う必要がります。開発者として、CSS に習熟していない場合は、アプリケーションで使用するために学習を要します。Ignite UI では、アプリケーションで使用できるさまざまなテーマを提供し、また、Ignite UI テーマ ジェネレーターを提供しているため、アプリケーションで必要なテーマを作成することができます。
提供されているテーマに加えて、Ignite UI Bootstrap テーマジェネレータを使用して、独自のテーマを作成することができます。詳細については、「Ignite UI Bootstrap テーマ ジェネレーターの使用」を参照してください。
提供されているテーマ
- Infragistics テーマ
- Metro テーマ
- iOS テーマ
- Default bootstrap テーマ
- Superhero bootstrap テーマ
- Yeti bootstrap テーマ
- Flatly bootstrap テーマ
プロジェクトのセット アップ
こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)
ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。
- npm install
- npm start
コマンドを実行することで全ての依存する項目がインストールされます。npm start コマンドを実行することで Angular アプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行されます。
アプリケーションは現在、Ignite UI Metro テーマを使用しています。index.html ファイルを開き、行番号 9 から 10、または head セクションで CSS 参照を探すと下記のように Ignite UI CDN からテーマを参照していることを確認できます。
<link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/structure/infragistics.css" rel="stylesheet" />テーマを使用する際、テーマの参照以外に、Infragistics.css への参照が必要になります。
手順 1: iOS テーマへの変更
テーマの参照を切り替えることで、既存の Ignite UI テーマを簡単に変更できます。テーマを Metro テーマから iOS テーマに変更するには、index.html ファイルにおいて infragitics.css の参照を残しつつ、下記のようにテーマの参照を head セクションで変更します。
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/ios/infragistics.theme.css" rel="stylesheet" />アプリケーションを実行すると全てのコントロールが iOS テーマを使用していることを確認できます。グリッドやボタンのデザインが変更されていることを確認してください。
手順 2: Default Bootstrap テーマへの変更
Ignite UI は Default Bootstrap テーマを提供します。テーマをBootstrap テーマに変更するには、index.html において infragitics.css の参照を残し、テーマ参照を変更します。
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/bootstrap/infragistics.theme.css" rel="stylesheet" />アプリケーションを実行すると全てのコントロールが default basic bootstrap テーマを使用していることを確認できます。グリッドやボタンのデザインが変更されていることを確認してください。
手順 3: 独自の Bootstrap テーマを使用
Ignite UI は、独自に Bootstrap をベースとしたテーマを作成する方法を提供します。これは variables.less ファイルを Ignite UI Bootstrap テーマ ジェネレータにアップロードすることでその値を使用したテーマをダウンロードすることができます。LESS の組み合わせや、コンパイルされた CSSや画像が含まれており、アプリケーションで使用できます。
詳細については、「Ignite UI Bootstrap テーマ ジェネレーターの使用」を参照してください。Ignite UI Bootstrap テーマ ジェネレータは 2 種類のシナリオをサポートしています。
- 既存の Ignite UI テーマのカスタマイズ
- variables.less ファイルを使用した新規テーマの作成
手順 2 では、Ignite UI によって提供されているテーマを使用しています。独自の Bootstrap テーマを使用するには、次の手順に従います。このレッスンでは、Bootstrap ベースのテーマがプロジェクトに追加されているため、これらを実行する必要はありません。
- 独自の variables.less ファイルを作成するか、Bootswatch で用意されているテーマを利用。テーマを選択し、variables.less ファイルをダウンロード
- variables.less ファイルを Ignite UI テーマ ジェネレーター にアップロード
- テーマをダウンロードし、解凍
- テーマをプロジェクトに保存
プロジェクトには、Ignite UI テーマ ビルダーによって生成されたテーマを含む CSS フォルダが含まれています。このテーマを使用するには、index.html の head セクションにテーマと Bootstrap の参照を追加します。また、Metro テーマを削除したのち、下記のコードを ./css/strcuture/infragistics.css への参照が行われている行の前に追加します。
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/themes/infragistics.theme.css" rel="stylesheet" type="text/css" />アプリケーションを実行し、作成したテーマが適用されていることを確認してください。
結びに
Ignite UI for jQueryで提供されているテーマに加えて、独自のテーマまたは、jQueryUI テーマ ローラーを使用することができます。詳細については、「Ignite UI のスタイル設定とテーマ設定」を参照してください。
Ignite UI はモダン Web 開発で利用可能なデザインをサポートしており、Web アプリケーションを素早く構築できます。