Create a custom theme with the Mendix UI Framework

Size: px

Start display at page:

Download "Create a custom theme with the Mendix UI Framework"

はなしんまつ
5 years ago
Views:

1 Create a custom theme with the Mendix UI Framework Mendix UI Framework を使ってテーマをカスタマイズする Mendix バージョン開発者製作日修正日 5 Erik Heddema 11 19, : , :29 この章では Mendix UI Framework を使ったテーマのカスタマイズ方法を説明します以下のチュートリアルでは例として Amazon のウェブサイトを使用しますこの章では以下の内容を学習しますアプリの新規作成方法 Scout と Mendix UI Framework のセットアップ方法カスタマイズ変数の変更方法 Amazon に基づくテーマのカスタマイズ方法目次 1 Preparation 準備 Create a new App in the Mendix Business Modeler... 2 Mendix Business Modeler でアプリを新規作成する Configure Scout Scout を設定する Configure your text editor テキストエディタを設定する Create custom theme テーマをカスタマイズする color-primary を変更しトップバーとボタンを修正しますセカンダリ背景色を変更しますサイドバーとナビゲーションバーの色を変更する Business Modeler でロゴを変更します Related content 関連するコンテンツ Create a custom theme with the Mendix UI Framework 1

1 Preparation 準備学習内容に進む前に以下の作業を完了してください最新の Mendix Business Modeler 5.18.

2 1 Preparation 準備学習内容に進む前に以下の作業を完了してください最新の Mendix Business Modeler 以上をダウンロードする 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

3 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

4 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

$Input Folder で styles/sass フォルダーを選択します入力パスは C:\Mendix Projects\Mendix-App\theme\styles\sass となるはずです$

5 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$ Input フォルダーと Output フォルダーを選択したら左サイドバー内のプロジェクト名の隣にあるプレイを押すことができます

6 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.$

7 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

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

9 トップバーとメインボタンの背景色を変更するには 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

scss ファイルに施された変更を検出し CSS ファイルをコンパイルします Saas を使用しない場合は単純にこれらの CSS

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

11 スクリーンショットのとおりトップバーとメインボタンの背景色が変わりました 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:

12 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

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

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

Sidebar_Full_Responsive レイアウトに移動しこのイメージを差し替えます差し替える画像内に amazon という見出しが入っているので caption

15 これで変数の基礎知識とテーマの構造を理解していただけたでしょうか次の節では 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

16 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

Sharing the Development Database

Sharing the Development Database 開発データベースを共有する目次 1 Prerequisites 準備... 2 2 Type of database データベースのタイプ... 2 3 Select the preferred database 希望のデータベースを選択する... 2 4 Start the database viewer データベースビューワーを起動する... 3 5 Execute queries クエリを実行する...