Create a custom theme with the Mendix UI Framework

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 6 5.1 color-primary を変更し トップバーとボタンを修正します... 8 5.2 セカンダリ背景色を変更します... 11 5.3 サイドバーとナビゲーションバーの色を変更する... 12 5.4 Business Modeler でロゴを変更します... 15 Related content 関連するコンテンツ... 16 Create a custom theme with the Mendix UI Framework 1

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. アプリに適用する Mendix のテーマを選択します Create a custom theme with the Mendix UI Framework 2

4. これでアプリをデプロイ (F5) できるようになりました Create a custom theme with the Mendix UI Framework 3

3 Configure Scout Scout を設定する Windows 10 をご利用の場合は 以下のワークアラウンドを参照してください ワークアラウ ンドについては こちらをクリックしてください テーマに変更を加えるには 従来の CSS の代わりに Sass の使用をおすすめします Mendix UI Framework は Ruby に依存した Sass を使用していますが Scout をインストールして自己完 結型の Ruby 環境で Sass を実行し 簡単かつ少ない手順ですべての Sass プロジェクトを管理 することができます この方法ならば ターミナルの使用について心配する必要はありません Sass とターミナルの知識があれば もちろんターミナルを使用することも可能です 1. 一番下の左スライドバー内のプラスボタンをクリックし Scout で App Project Folder を開きます 2. 新規作成したアプリからのプロジェクト ディレクトリを選択します Create a custom theme with the Mendix UI Framework 4

3. Choose をクリックし Input および Output フォルダーを選択します 4. Input Folder で styles/sass フォルダーを選択します 入力パスは C:\Mendix Projects\Mendix-App\theme\styles\sass となるはずです Create a custom theme with the Mendix UI Framework 5

5. Output Folder で styles/css フォルダーを選択します 入力パスは C:\Mendix Projects\Mendix-App\theme\styles\css となるはずです 6. Input フォルダーと Output フォルダーを選択したら 左サイドバー内のプロジェクト名 の隣にあるプレイを押すことができます これで Scout は テーマをカスタマイズするた めに変更をコンパイルできるように設定されました Create a custom theme with the Mendix UI Framework 6

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 などの見出しが入っています Create a custom theme with the Mendix UI Framework 7

5 Create custom theme テーマをカスタマイズする このセクションでは Amazon のウェブサイトを基に テーマをカスタマイズしていきます まずは _custom-variables.scss ファイルについて学習します 5.1 color-primary を変更し トップバーとボタンを修正します Create a custom theme with the Mendix UI Framework 8

トップバーとメインボタンの背景色を変更するには 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 に変更します Create a custom theme with the Mendix UI Framework 9

color-primary を変更してファイルを保存すると 以下の例のように Scout に変更が表示されます Scout は _custom-variables.scss ファイルに施された変更を検出し CSS ファイルをコンパイルします Saas を使用しない場合は 単純にこれらの CSS ファイルを使用することも可能です これでアプリを再デプロイできるようになりました ブラウザの表示は以下のように変わるは ずです Create a custom theme with the Mendix UI Framework 10

スクリーンショットのとおり トップバーとメインボタンの背景色が変わりました 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\_pagedashboard.scss ファイルでは すべてのダッシュボード テンプレートのデフォルト背景色として $color-layout-bg-secondary が使われています この変数を使って すべての背景色を簡単に白に変更できます 次に 38 行目の $color-layout-bg-secondary を変更し 背景色を #FFF に変更しましょ う Create a custom theme with the Mendix UI Framework 11

5.3 サイドバーとナビゲーションバーの色を変更する 先程と同様の方法で サイドバーとナビゲーションバーを調節することができます 現在 ア プリはとても暗い状態なので サイドバーの背景色を変更した方がいいでしょう Amazon が ホームページで使用しているグレーの背景色を使うことができます // Sidebar 45 行目 : $color-sidebar-bg: $color-inverse; $color-sidebar-bg: #f9f9f9; に変更してください これで $color-sidebar-bg を検索すると _custom-variables ファイルにナビゲーション部分が表示されます ご覧の通り ナビゲーションバーも背景色と同じ $color-sidebar-bg という変数になります つまり ここで背景色を変更する必要はありません それでは アプリケーションを再度デプロイしてください 以下のスクリーンショットのようになっているはずです Create a custom theme with the Mendix UI Framework 12

背景色は変わりましたが ナビゲーション テキストが白いため判読できません 練習として テキストの色 ホバリング時のテキストの色 アクティブ時のテキストの色 サブテキスト項 目の色を$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; Create a custom theme with the Mendix UI Framework 13

$color-navsidebar-text: $color-inverse に変更してください また ホバリング時とアク ティブ時の変数についても同様の操作を行ってください Create a custom theme with the Mendix UI Framework 14

これで 変数の基礎知識とテーマの構造を理解していただけたでしょうか 次の 節では Business Modeler でロゴの変更とテーマの細かい調節を行います 5.4 Business Modeler でロゴを変更します ツールバーの Company Name を以下のロゴに差し替えます Business Modeler で Sidebar_Full_Responsive レイアウトに移動し このイメージを差し 替えます 差し替える画像内に amazon という見出しが入っているので caption は空欄の ままにしてください アプリケーションを再度デプロイします 輝かしい新ロゴが表示される はずです Create a custom theme with the Mendix UI Framework 15

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 Create a custom theme with the Mendix UI Framework 16