UIの見た目は、CSSコンポーネントによって定義されています。UIのCSSコンポーネントです。UIのデフォルトの見た目を変更するには、このCSSコンポーネントをカスタマイズして下さい。UIのCSSコンポーネントは、SassやLessのような独自のCSSメタ言語ではなく、標準化されている文法を持つcssnextによって記述されているのでCSSさえわかっていれば誰でもカスタマイズすることができます。このページでは、CSSコンポーネントのカスタマイズ方法について紹介します。セットアップCSSコンポーネントのソースコードは、複数のCSSファイルによって構成されています。これらのCSSファイルは、ビルドすることで一つのCSSファイル(onsen-css-components.css)にすることができます。ここではまずビルドするためのセットアップの手順を紹介します。UIのパッケージをインストールします。initを実行してパッケージファイルを作成して下さい。次にonsenuiパッケージをインストールします。UIのバージョンに合わせて下さい。バージョンを指定する場合onsenuiパッケージがnode_modulesディレクトリにインストールされるので、パッケージのcss-componentsディレクトリに移動します。node_modules/onsenui/css-components-src次にyarnを使って依存するパッケージをインストールします。yarnをインストールしていない場合は、yarnのインストール手順を参照して下さい。--pure-lockfile無事依存するパッケージを解決できたら、次のコマンドを実行してプレビュワーを起動して下さい。serveを実行して下さい。./build/onsen-css-components.csshttp://localhost:4321/をウェブブラウザで開くとCSSコンポーネントのプレビュー用のUIが表示されます。Address):4321/を開いて下さい。serveコマンドを実行している状態でCSSファイルを編集すると、CSSファイルが自動的にビルドされ、プレビューに新しくビルドされたCSSがインジェクトされて即座に反映されます。開発者がCSSコンポーネントをカスタマイズする場合には、この状態でコンポーネントの見た目を確認しつつ、個別のCSSファイルを編集していくことになります。Componentsを構成するCSSファイルなどが収められています。プレビューを起動した状態で、試しにSwtichコンポーネントのCSSファイル(src/components/switch.css)を編集してみましょう。serveを実行しているコマンドラインでは次のようなメッセージが表示され、CSSが自動的にビルドされプレビューにも反映されます。./build/onsen-css-components.cssもしCSSの文法が間違っている場合にはコマンドライン上にエラーが表示されます。カスタマイズしたCSSコンポーネントを自身のプロジェクトで利用する場合には、./build/onsen-css-components.cssのファイルを自身のプロジェクトのフォルダ内にコピーして利用して下さい。Variables)が定義されています。...この変数の定義を変更することで、CSSコンポーネントで利用する色を変更できます。Design用のコンポーネントで利用している変数は、変数名にmaterialプレフィクスがついています。iOS用のコンポーネントで利用している変数には、プレフィクスは付きません。CSSコンポーネントのソースを見る人は、CSSのクラス名が醜くでたらめな命名規則によって記述されているように見えるかもしれません。src/components/switch.cssを見てみましょう。このCSSファイルに記述されているSwitchコンポーネントのクラス名には、--や__によって区切られた冗長に見えるクラス名を使っていることがわかります。UIのCSSコンポーネントは設計を堅牢にするために、かつ高速なCSSセレクタの記述をするために、設計規約と命名規則にBEMとMindBEMdingを採用しています。Modifierの三つの構成要素によって記述されます。Blockは、ある独立するグループの境界を宣言します。ElementはあるBlockの配下の要素を表現します。ModifierやBlockやElementを修飾するのに用います。次のSwitchコンポーネントを例に説明します。</div></label>まずいちばん外側の要素では、クラス属性にswitchが宣言されています。その下にはswitch__inputやswitch__toggleやswitch__handleが配下の要素のクラス属性で宣言されているのがわかります。ここでは、switchがBlockで、switch__inputやswitch__toggleやswitch__handleがElementを表現しています。MindBEMdingでは、Block名とElement名の区切りには__を用います。この設計規約について詳しく知りたい場合は、BEMとMindBEMdingの解説を参照して下さい。個別のCSSコンポーネントのプレビューは、CSS内に埋め込まれたアノテーションに基づいて生成されています。</label>*/アノテーションはCSSのコメント内部にYAMLで埋め込まれています。CSSコンポーネントのプレビューで用いるHTMLを変更したり、プレビューを増やしたい場合にはアノテーションを編集したり新たに埋め込むことができます。serveを実行している状態であれば、このアノテーションの変更も即座にプレビューUIに反映されます。パターンのカスタマイズPatternsページでは、幾つかのCSSコンポーネントを組み合わせた画面の表示を確認することができます。テーマをカスタマイズする際にこのページを見ながら調整すると便利です。ここではこのパターンのカスタマイズ方法について説明します。パターンとして表示されるHTMLは、css-components/patterns.yamlファイル内に記述されています。class="toolbar__center">Title</div>...Patternsページで表示されるパターンのHTMLを修正したい場合には、このpatterns.yamlを編集して下さい。プレビューを起動しているときにこのpatterns.yamlを編集すると、CSSファイルに変更を加えたときと同様に自動的に反映されます。UIのデフォルトのテーマをカスタマイズするのではなく、別のテーマを追加する方法を説明します。src/(任意の単語)-onsen-css-components.cssというファイルを追加して下さい。url('./components/index.css');さらにsrc/yet-another-theme.cssファイルを作成します。内容はsrc/theme.cssファイルからコピーしてください。serveでプレビューを起動してビルドが完了すると、次のように表示されます。buildディレクトリにyet-another-onsen-css-components.cssがビルドされていることがわかります。./build/yet-another-onsen-css-components.cssプレビュー画面でも追加したテーマを選択できるようになります。yet-anotherテーマが無事ビルドできることを確認できれば、あとは先程作成したsrc/yet-another-theme.cssを開いてCSS変数を編集することで追加したテーマの色をカスタマイズすることができます。UIのコンポーネントにクロスプラットフォーム性とカスタマイズ性を与える独自のHTML属性です。modifierはCSSクラスによって定義されています。UIでは、modifierを作成してコンポーネントに適用することでコンポーネントのスタイルをカスタマイズすることができます。いくつかのコンポーネントはすぐに使えるプリセットmodifierを持っています。以下のボタン群はmodifierを使うことによりそれぞれ別の見た目になっています。動的にmodifierを変更するには、modifier属性をJavaScriptで変更してください。Design</ons-button>より詳しい情報については、このブログ記事(英語)をご覧ください。UIのコンポーネントは、アプリが動作しているプラットフォームに応じて自動的にスタイルが変化します。Tools)でiOSとAndroidのビューを切り替えることで簡単にテストできます。URLに?platform=iosや?platform=androidをクエリ文字列として加えることでもテストできます。オートスタイルは、ons.platform.isAndroid()がtrueの時にmodifier="material"をコンポーネントに付加します。オートスタイルは、onsenui.jsの読み込み直後(つまり、アプリの初期化の直前)にons.disableAutoStyling()を実行することで無効にできます。オートスタイルをより細かく制御できるように、いくつかのツールが提供されています。プラットフォームユーティリティons.platformオブジェクトを使うと、ons.platform.isIOS()やons.platform.isWebView()などのメソッドが利用できます。ons.platform.select('android')でプラットフォームをAndroidに固定すると、全てのプラットフォームでマテリアルデザインのコンポーネントを強制的に表示することができます。このメソッドはアプリが初期化される直前(つまりonsenui.jsを読み込んだ直後)に呼び出す必要があります。条件要素ons-ifという名前の条件要素を使うと、プラットフォームや画面の向きに応じて表示するコンテンツを変えることができます。ReactバインディングとVueバインディングでは<ons-if>コンポーネントは利用できませんので、ons.platform.isIOS()などをご利用ください。</ons-if>これを使うと、例えば、Androidにだけons-fabを表示したり、iOSにだけボタンを表示したりすることができます。modifierが付加されている時のみ表示されます。material以外のmodifierでも同様のことができます。UIのルーティングコンポーネント(ナビゲーター、スプリッター、タブバー等)やダイアログには、いくつかのビルトインアニメーションが用意されています。自分でカスタムアニメーションを作ることもできます。ビルトインアニメーションを拡張したり、改造したりすることもできます。UIのコアコードに深入りする必要があり、比較的複雑なため注意してください。UIはAnimitという小さなアニメーションライブラリに依存しています。AnimitはモバイルブラウザでのCSSトランジションを制御するライブラリです。アクセスすることができます。アニメーションを再生Animitは要素のstyleプロパティを操作するので、以前のスタイルを失ってしまわないようにするためにsaveStyle()とrestoreStyle()の2つのメソッドを提供しています。'linear'})メソッドはアニメーションのキューにトランジションを追加します。アニメーションを再生すると、まずキューの先頭のトランジションが適用され、その後キューの残りのトランジションが適用されていきます。上述のサンプルコードでは、新しいページを右から左に向かってビュー内に移動させています。0)という位置に移動しているのはそのためです。wait(...)メソッドはトランジション間のディレイ(遅延)を入れるのに利用できます。})メソッドについてですが、これは必要に応じてコールバック関数を呼び出すのに利用できます。el2]).saveStyle()...のように、animitオブジェクトにHTML要素の配列を渡すことも可能です。animation3);メソッドが利用できますので、活用してください。UIが提供しているアニメータークラスを拡張することで一から作成することができます。UIの各コンポーネントはNavigatorAnimatorとAlertDialogAnimator、DialogAnimator、PopoverAnimator、ModalAnimator、TabbarAnimator、SplitterAnimatorのようなアニメーターインターフェースを公開(expose)しています。これらを拡張・実装することでアニメーターを作成することができます。UIのリポジトリにプルリクエストを送ってみたい場合には、この方法でアニメーターを実装するのが最も理想的です。詳しくは、各コンポーネントの既存のアニメーターのソースコードをご覧ください。(ES6)を利用するのが推奨されますが、特にこだわる必要はありません。ES5でのサンプルコードについてはこちらをご覧ください。アニメーターを拡張する新しいアニメーターを作成する方法には、既存のアニメーターを拡張して挙動の一部または全部を修正するという方法もあります。既存のアニメーターの見た目やタイミングを少し修正したいだけならこちらの方法の方が簡単です。完全に新しいアニメーターを作る場合でも、こちらの方法の方が簡単です。既存のアニメーターを拡張するには、既存のアニメーターのソースコードのどれかを1つ選んで一通り目を通し、プロパティとメソッドを確認することがまず必要です。アニメーターの具体的な仕様についてですが、どのアニメーターも、新しいアニメーターを返すextend({...})クラスメソッドを提供しています。各コンポーネントの既存のアニメーターはons.elements.Navigator.animatorsやons.elements.AlertDialog.animatorsなどの形で公開(expose)されています。これらのオブジェクトはコンポーネントに登録済みの全てのアニメーターを含んでおり、以下のように拡張できます。customAnimator);上記のサンプルコードでは、pushアニメーションを上書きしています。popアニメーションは既存のものがそのまま使用されます。ここで、timingとdelayプロパティはpushアニメーションとpopのアニメーションの両方に影響しています。いくつかのアニメーターはbackgroundMaskのような追加プロパティを持っています。使用可能な追加プロパティを確認するには、拡張したいアニメーターのソースコードを確認してください。'customAnimationName'})のように、カスタムアニメーションを登録時のアニメーション名だけで簡単に参照できるようになります。animation="customAnimationName">のように、カスタムアニメーションをナビゲーターのデフォルトのアニメーションにするというようなことも可能です。これは他のコンポーネントについても同様です。subscribing!。