Style Constants機能を使ってみたらアプリのデザイン管理が楽になった

# 目次
1. はじめに
1. Style Constantsの概要
1. Style Constantsの使用方法
1. 最後に


# はじめに
以下の記事でもご紹介したように、
2022年12月5日にV9.5がリリースされ新しい機能がたくさん追加されました。

https://qiita.com/Kony_Team/items/a1f906b68283fc75a077



今回はそのうち、
Style Constantsという機能を実際に使いながら使用方法をご紹介していきます。

# Style Constantsの概要

Style Constantsとは、色とフォントのスタイルを作成することができる機能になります。

スタイル定数機能を使用すると、
一度作成した色とフォントのスタイルをプロジェクト全体のスキンで使用することができます。

これにより、これまでよりも簡単にアプリ全体のイメージカラーを簡単に管理することができます。


# Style Constantsの使用方法

それでは早速実装してみましょう！

まずは、一般的なWebサイトを想定してデザイン大枠をこのように作成しました。　　
![スクリーンショット 0005-02-27 11.55.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d051441e-3aa5-5af5-9925-3401cb40315e.png)

ここから、Style Constantsを使ってアプリのデザインを作っていきます。

## 前提条件

まず作成していく前にアプリのイメージカラーとフォントを決めておきましょう。


・配色
|ベースカラー|メインカラー|アクセントカラー|
|--|--|--|
|`#EEE5E9`|`#003E75`|`#CF5C36`|

・フォント
|フォントサイズ|使用用途|
|--|--|
|300%|ヘッダー|
|150%|タイトル|
|120%|本文等|

※フォントはHelvetica、色は黒で作成  

上記の配色・フォントに沿って早速アプリのデザインを作っていきます！

## スタイルの作成
まず、Style Constantsはどこで定義できるかというと、
左メニューの「Themes」タブで定義することができます。

Themesメニューの一番上に「Style Constants」が表示されており、
メニューを開くと、ColorとFontが表示されるのでそれぞれ設定していきます。

![スクリーンショット 0005-02-27 14.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0f679601-f9df-537a-3e13-b0d83ff38ee1.png)

### Colorのスタイル作成
Colorメニューを右クリックし「Add New」をクリックします。

![スクリーンショット 0005-02-27 14.26.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e7890645-6d82-75b1-2cee-4c863cc68ec8.png)

新しいスタイルが作成されるので、名前を変更します。
ベースカラー、メインカラー、アクセントカラーを定義するので、今回はこのように作成しました。
誰が見てもどんな用途のカラーかわかるようにわかりやすい名前をつけておくと、管理が楽になります👍

![スクリーンショット 0005-02-27 14.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9e354c51-f389-be9b-7d40-3016c03da45b.png)　　

あとは右メニューのPROPERTIES->Styleのタブで
それぞれの色を決めたらスタイルの作成は完了です！  
![スクリーンショット 0005-02-27 14.30.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/22e40eea-cede-a677-42e3-dd381b50bc7c.png)



### Fontのスタイル作成

次にフォントのスタイルを作成していきます。
Colorのスタイルを作成した時と同様、Fontメニューを右クリックし「Add New」をクリックします。
![スクリーンショット 0005-02-27 14.27.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ff586d04-464b-fe85-b428-856fa26ac01e.png)

[前提条件](#前提条件)で定義したフォントをスタイルに登録していきます。

今回はこのように作成しました。
![スクリーンショット 0005-02-27 14.37.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6b0342ce-f3ad-ccb0-6177-afba08330500.png)

それぞれPROPERTIES->Styleタブで、フォント・サイズを設定します。  
今回変更したのはフォントとサイズのみですが、
その他にも太さや透明度も変更可能です。
![スクリーンショット 0005-02-27 14.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1f6c4687-f757-d8c9-f78a-4b8ab0a454dd.png)

ColorとFontのスタイルをそれぞれ定義できたので、
フォームにスタイルを適用していきましょう！


## スタイルを適用

まずはヘッダーの色をメインカラーの色に変更したいので、
ヘッダーを選択した状態でPROPERTIES->Skinタブを開きます。

BackGroundのTypeのプルダウンをクリックすると、
「Styles」が表示されるので、適用したいスタイルを選択しましょう。

![スクリーンショット 0005-02-27 14.44.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e749a650-692d-663c-addf-445228ffef2a.png)

今回ヘッダーにはメインカラーを適用したいので、`corpColorMain`を選択します。
すると、メインカラーとして定義した`#003E75`の色が反映されました！
![スクリーンショット 0005-02-27 14.48.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/859504f0-9e36-0d93-fbe8-1c47b0254168.png)


次にヘッダーのフォントも決めていきます。
ヘッダーのラベルを選択した状態でPROPERTIES->Skinタブを開きます。

FontsのFont Familyを開くと、
「Styles」表示されるので、今回適用したい`font300`を設定しましょう。

![スクリーンショット 0005-02-27 14.52.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/42c5d8e3-7f76-e2a8-668e-e261bda6bd11.png)

すると、このように定義したフォントに変更されました！　　
![スクリーンショット 0005-02-27 14.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8530c9d4-b1dd-7b6c-6c85-323453f53e96.png)

その他のウィジェットもスタイルを使用してデザインを変更していきます。
![ezgif-4-05773e0f0f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dc69623c-1f1e-8c75-578e-0ae431313d8f.gif)

完成した画面がこちらです。  
![スクリーンショット 0005-02-27 15.07.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/11087107-fce1-1c62-43bd-fccb37fd8ca4.png)

ヘッダーとフッターの文字などは、現状黒で見ずらいですが、  
そのような場合もスタイル側のフォーマットを黒から白に変更するだけで、変更が完了します。　　

スタイル自体を変更すると、
同じスタイルを適用している全てのWidgetに対して一気に変更が適用されるので、
最初にスタイルを設定しておくとデザインの管理がとっても楽になると思います。

![ezgif-4-75c06f3455.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1bfaab76-57ba-e4ad-d56b-86c3b0cbf0ad.gif)

フォントスタイル変更後の画面はこちら。
![スクリーンショット 0005-02-27 15.07.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c4c67713-a514-a7d8-0ef7-5ace1bee95c0.png)

このように簡単にデザインのイメージを管理することができる機能なので、
ぜひ試してみてくださいね！


## スタイルのエクスポート・インポート
また、同じイメージカラーを使って別のアプリを作成したい場合は、
スタイルをエクスポートすることも可能です。

エクスポート・インポートしたい場合は、
ThemesタブのStyle Constantsを右クリックするとメニューが表示されます。
![スクリーンショット 0005-02-27 15.12.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b7771ca3-5f1e-3a68-01d2-50015ff09bc8.png)

これまでは、複数人で開発する場合、
PLはカラーコードを調べて開発者に伝えて、開発者はカラーコードをコピペして・・
という手間がありましたが、Style Constantsを使えば、
スタイルのファイルを共有してどのスタイルを使えば良いか伝えるだけで良いので、
やりとりもこれまでよりぐっとスムーズになると思います！

# 最後に

最後に、今回Style Constantsを使ってみて、
便利だなと思ったポイントをまとめて終わりたいと思います!

:::note
Style Constantsの便利なポイント
- 一度プロジェクトにスタイルを設定しておけば、使用すべき色がわかり開発者とのやりとりがスムーズになる
- Widgetにスタイルを適用しておけば、後で全体的にカラーを変更したいとなった場合でも一括で変更ができる
- 他プロジェクトでも同じイメージカラーを使いたい場合、
元のプロジェクトのスタイルをインポートするだけで統一感のある見た目を作成できる

:::


複数人で開発をしている人にはとっても便利な機能だと思うので、
是非使ってみてくださいね〜👋


# 参考
https://opensource.hcltechsw.com/volt-mx-docs/95/docs/documentation/VMX_release_notes.html#v9-servicepack-5-fixpack-4