Create a custom theme
with the Mendix UI Framework
（Mendix UI Framework を使ってテーマをカスタマイズする） Mendix バージョン 開発者 製作日 修正日 5 Erik Heddema 11 19, 2015 08:33 11 30, 2015 10:29 この章では、Mendix UI Framework を使ったテーマのカスタマイズ方法を説明します。以下 のチュートリアルでは、例として Amazon のウェブサイトを使用します。 この章では以下の内容を学習します。 アプリの新規作成方法
ScoutとMendix UI Frameworkのセットアップ方法 カスタマイズ変数の変更方法
Amazonに基づくテーマのカスタマイズ方法
【目次】
1 Preparation（準備） ... 2
2 Create a new App in the Mendix Business Modeler ... 2
（Mendix Business Modeler でアプリを新規作成する） ... 2
3 Configure Scout（Scout を設定する） ... 4
4 Configure your text editor（テキスト・エディタを設定する） ... 7
5 Create custom theme（テーマをカスタマイズする）... 8
5.1 color-primary を変更し、トップバーとボタンを修正します。 ... 8
5.2 セカンダリ背景色を変更します。 ... 11
5.3 サイドバーとナビゲーションバーの色を変更する。 ... 12
5.4 Business Modeler でロゴを変更します。 ... 15
1 Preparation（準備）
学習内容に進む前に、以下の作業を完了してください。
最新のMendix Business Modeler（5.18.0 以上）をダウンロードする
Scoutをダウンロードする（または、別のコンパイラを使用する）
Sublime Textなど、任意のテキスト・エディタをダウンロードする
2 Create a new App in the Mendix Business Modeler
（Mendix Business Modeler でアプリを新規作成する）
この節では、New App 選択画面からアプリを新規作成し、テーマを選択します。1. Mendix Business Modeler を開きます。
2. Mendix Business Modeler の My Apps 画面から New App を選択して新規アプリを作 成します。
3 Configure Scout（Scout を設定する）
Windows 10 をご利用の場合は、以下のワークアラウンドを参照してください。ワークアラウ ンドについては、こちらをクリックしてください。
テーマに変更を加えるには、従来の CSS の代わりにSassの使用をおすすめします。Mendix UI Framework は Ruby に依存した Sass を使用していますが、Scout をインストールして自己完 結型の Ruby 環境で Sass を実行し、簡単かつ少ない手順ですべての Sass プロジェクトを管理 することができます。この方法ならば、ターミナルの使用について心配する必要はありません。 Sass とターミナルの知識があれば、もちろんターミナルを使用することも可能です。
1. 一番下の左スライドバー内のプラスボタンをクリックし、Scout で App Project Folder を開きます。
3. Choose をクリックし、Input および Output フォルダーを選択します。
4. Input Folder で styles/sass フォルダーを選択します。
5. Output Folder で styles/css フォルダーを選択します。
入力パスは、C:\Mendix Projects\Mendix-App\theme\styles\css となるはずです。
6. Input フォルダーと Output フォルダーを選択したら、左サイドバー内のプロジェクト名 の隣にあるプレイを押すことができます。これで Scout は、テーマをカスタマイズするた めに変更をコンパイルできるように設定されました。
4 Configure your text editor（テキスト・エディタを設定する）
1. 任意のテキスト・エディタで該当のアプリの Project Directory を開きます。 2. Theme フォルダーには、アプリを新規作成した際に選択したテーマが入っています。独 自の変更を行うには、theme\styles\custom フォルダーを使います。 3. _custom-variables.scss ファイルを開きます。このファイルには、基本色を簡単に変 更できるデフォルトの変数が入っています。変数とは、スタイルシート全体で使い回した い情報を保存する方法と考えてください。 Step 1 には、primary、success、danger などのデフォルト色が含まれています。 これらの色は、ボタン、見出し、リンク、テキストなどの要素に使用します。 Step 2 には、ナビゲーションバー、サイドバーおよびレイアウトで使う色と高さが 含まれています。 Step 3 には、デフォルトのレイアウトの字配りが含まれます。 また、これら 3 つのステップの下には、Typography、Forms、Buttons、Grids、Tabs、 Mobile などの見出しが入っています。5 Create custom theme（テーマをカスタマイズする）
このセクションでは、Amazon のウェブサイトを基に、テーマをカスタマイズしていきます。 まずは、_custom-variables.scss ファイルについて学習します。
トップバーとメインボタンの背景色を変更するには、theme\styles\custom に含まれる _custom-variables.scss ファイルの以下の行を修正します。 10 行目: $color-primary: #4280cb; なぜこの色を変更したいのでしょうか？この色がトップバーやメインボタン、またその他の CSS 要素に使われているかどうかは、どのように把握すればよいのでしょうか？たとえば、 _custom-variables.scss ファイルでcolor-primaryを検索すると、以下の 2 行がヒットし ます。 42 行目: $color-topbar-bg: $color-primary; 231 行目: $color-btn-bg-primary: $color-primary; 実 際 の custom-variables フ ァ イ ル を ご 覧 い た だ く と 、 さ ら に 多 く の CSS 要 素 が $color-primary 変数を使用していることがわかります。これらすべての要素が変更されます。 つまり、1 つの変数を変更することで、テーマ内の多数の要素を修正できます。これにより、 テーマのメンテナンス時間を大幅に削減することができます。
作成したアプリのcolor-primaryは青ですが、Amazon のメインカラーは濃い青: #232f3e です。次に 10 行目の$color-primaryを Amazon カラーの#232f3e に変更します。
color-primaryを変更してファイルを保存すると、以下の例のように、Scout に変更が表示さ れます。Scout は_custom-variables.scss ファイルに施された変更を検出し、CSS ファイル をコンパイルします。Saas を使用しない場合は、単純にこれらの CSS ファイルを使用するこ とも可能です。 これでアプリを再デプロイできるようになりました。ブラウザの表示は以下のように変わるは ずです。
スクリーンショットのとおり、トップバーとメインボタンの背景色が変わりました。
5.2
セカンダリ背景色を変更します。
カスタマイズしたアプリの背景はグレーですが、Amazon ウェブサイトの背景は白です。
custom-variables ファイル内の以下の行を編集することで、これを簡単に変更できます。
// Background color for specific pages like the dashboard also used as utility class
38 行目: $color-layout-bg-secondary: #EFF4F7; 変数: $color-layout-bg-secondary は、複数のページのテンプレートで使用されています。 たとえば、theme\styles\sass\pagetemplates\responsive\_page- dashboard.scss ファイルでは、すべてのダッシュボード・テンプレートのデフォルト背景色 として$color-layout-bg-secondary が使われています。この変数を使って、すべての背景 色を簡単に白に変更できます。 次に、38 行目の$color-layout-bg-secondary を変更し、背景色を#FFF に変更しましょ う。
5.3
サイドバーとナビゲーションバーの色を変更する。
先程と同様の方法で、サイドバーとナビゲーションバーを調節することができます。現在、ア プリはとても暗い状態なので、サイドバーの背景色を変更した方がいいでしょう。Amazon が ホームページで使用しているグレーの背景色を使うことができます。 // Sidebar 45 行目: $color-sidebar-bg: $color-inverse; $color-sidebar-bg: #f9f9f9;に変更してください。これで、$color-sidebar-bgを検索す ると、_custom-variables ファイルにナビゲーション部分が表示されます。ご覧の通り、ナビ ゲーションバーも背景色と同じ$color-sidebar-bg という変数になります。つまり、ここで 背景色を変更する必要はありません。それでは、アプリケーションを再度デプロイしてくださ い。以下のスクリーンショットのようになっているはずです。背景色は変わりましたが、ナビゲーション・テキストが白いため判読できません。練習として、 テキストの色、ホバリング時のテキストの色、アクティブ時のテキストの色、サブテキスト項 目の色を$color-inverse という変数を使って濃くします。通常、反対色はそのテーマで最も 濃い変数です。もちろん、ホバリング時の色を別の色に設定することも可能です。 // Text colors 396 行目: $color-navsidebar-text: $color-text-white-secondary; 397 行目: $color-navsidebar-text-hover: $color-text-white; 398 行目: $color-navsidebar-text-active: $color-text-white;
$color-navsidebar-text: $color-inverseに変更してください。また、ホバリング時とアク ティブ時の変数についても同様の操作を行ってください。
これで、変数の基礎知識とテーマの構造を理解していただけたでしょうか？次の節では、 Business Modeler でロゴの変更とテーマの細かい調節を行います。
5.4
Business Modeler でロゴを変更します。
ツールバーの「Company Name」を以下のロゴに差し替えます。Business Modeler で「Sidebar_Full_Responsive」レイアウトに移動し、このイメージを差し 替えます。差し替える画像内に「amazon」という見出しが入っているので、caption は空欄の ままにしてください。アプリケーションを再度デプロイします。輝かしい新ロゴが表示される はずです。
6 Related content（関連するコンテンツ）
3_2 はじめての一覧ページと詳細ページを作成する 3_3 一覧ページでデータをフィルターする 3_4 レイアウトとスニペット 3_5 ナビゲーション構成を設定する 3_6Koala を使って Mendix_UI_Framework をセットアップする 3_7Mendix_UI_Framewok をセットアップする Scout and Windows 10 Workaround Find the Root Cause of Runtime Errors Set Up Mendix UI Framework with Just CSS
This Japanese translation is provided for by Buildsystem Co. Ltd., based on Mendix copyrighted documentation and materials which can be found here as licensed under CC BY 4.0
