Skinの概要と使い方のご紹介

# 目次
1. はじめに
1. Skinとは
1. 作成方法
1. 注意点
1. まとめ

# はじめに
今回は、Visualizerで文字の色などを定義する
Skinの機能について紹介します！

Konyで開発を行うにあたり、
必ずと言っていいほど使う機能ですので、
しっかりと学んでいきましょう！


# Skinとは
## 概要
Skinとは、Visualizerでボタンやラベルなどの**Widgetのビジュアルを決めるための機能**となります。

一度Skinを定義すると、
次同じレイアウトを適用したいWidgetに対して対象のSkinを割り当てることで、
全く同じレイアウトを作ることができます。

例えば、全体の画面共通でボタンの色を青色にしたい場合、
青色のSkinを作成し、全てのボタンWidgetに割り当てると
画面全体でボタンの見た目を同じにすることができます。

## Skinで設定できる内容

Skinを使ってどんなものが設定できるか簡単に説明します。

SkinではWidgetの色、透明度、フォント、枠線、影などを設定することができます。

またクリック動作があるWidget等では、
Widgetが押下された時やホバーされた時のSkinも指定することができます。

以下に設定可能な状態の一覧を説明します。
||詳細|状態|
|---|---|-|
|Normal|ユーザーによって操作されていないときの通常の状態を指します。|![スクリーンショット 0004-07-29 9.55.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7a17b93a-e28e-38fb-ad47-abec9ae8e410.png)|
|Focus|Widgetが押下された時の状態を指します。|![おすす.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ae9c1d61-5913-3704-6e17-ab48f3171ec5.gif)|
|Hover Skin|カーソルをWidget上に置いたときの状態を指します。<br> ※Webブラウザのみ対応|![ezgif-4-d5ac05e214.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1b4d4d6e-54a6-d28f-5c8c-1730ea9c1cbc.gif)|
|Blocked UI	|非アクティブになっている状態を指します。<br>（例）サインインボタンは、ユーザ名とパスワードのフィールドが空であるため、背景が薄く表示され、現在利用できないことを示します。|![スクリーンショット 0004-07-29 9.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1934eb07-1374-c67d-cd40-829fab4a373d.png)|

※Normal以外は、一部のWidgetのみで利用可能です。

実際によく使うのは、Normal、Focus、Hover Skinとなります。


それでは、実際に作り方を見ていきましょう！

# 作成方法

下記の2つの画面で、
共通した青い角丸のボタンがあると思います。

Skin機能を使って、これらの同じレイアウトのボタンを作ってきましょう！

|画面1|画面2|
|--|--|
|![スクリーンショット 0004-07-28 19.10.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fc915070-7c38-2c9a-4d30-2d670d335c64.png)|![スクリーンショット 0004-07-28 18.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f3193fa1-d443-b9d3-1318-641ab5dfbbc2.png)|

## Skinを作る
まずはFormにボタンWidgetを配置します。

ボタンWidgetは、デフォルトで青色・四角のボタンとなっています。
![スクリーンショット 0004-07-28 18.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/af4939cb-23ef-92ab-b247-77f1b36b5753.png)

配置したボタンWidgetを選択した状態で、
右サイドメニューのPROPERTIES->Skinタブをクリックします。

Skinタブでは、Widgetの色や透明度を決めるOpacity、フォントの設定など、
レイアウトに関する設定を行うことができます。
![スクリーンショット 0004-07-28 18.37.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2d4b7f24-a2a9-d93a-1394-f385056863be.png)

今回、色はそのままなので、Colorの設定はスキップします。
ボタンの色を変えたい場合は、Colorのプロパティで希望の色に変更することができます。

角丸のボタンを作るので、
Borderのプロパティを変更していきます。

Borderの設定を以下のように変更してください。
![スクリーンショット 0004-07-29 11.15.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/df24bbe5-2340-aa8a-ae7a-ed40113a35c4.png)

角丸のボタンが完成しましたか？
![スクリーンショット 0004-07-28 18.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/73a58a7b-eed3-c982-89e1-592d313ca633.png)

今回、ボタンの中のフォントも変えているので、
フォントも設定しておきましょう。
![スクリーンショット 0004-07-28 18.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ae69284b-aa2a-f794-525e-fb02e264ce74.png)

するとこのようなボタンが完成したかと思います！
![スクリーンショット 0004-07-28 18.46.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b7fe4ab8-cbc7-5756-3327-951f936709bc.png)

Skinが完成したら、Skinの名前をつけておきましょう。

:::note
Skin名には、分かりやすい名前を指定することをおすすめします。
例えば、画面上にタイトル用のラベルや詳細を記載するラベルがある場合、
それぞれ以下のように設定すると、
**別の画面でSkinを指定する場合にどのSkinを使えば良いか分かりやすくなります。**
例）
・タイトル： sknLblTitle
・詳細：　sknDescription

:::
名前の変更は、Nameプロパティで変更が可能です。
今回は、`sknBtnBlueNormal`としました。
![スクリーンショット 0004-07-28 18.48.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d3afad04-4073-9d43-90f7-a790b4d5ad5a.png)

これでSkinが完成しました！
別の画面でも同じSkinを使うため、Skinの適用方法を見ていきましょう。

## Skinの適用
Skinが完成したら、「Copy」のボタンをクリックします。
![スクリーンショット 0004-07-28 18.50.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dfad2210-d8db-e635-5c63-fea594c8876b.png)

別のフォームを開き、
同じSkinを適用したいWidgetを選択状態にしたら、
Skinタブで「Assign」ボタンをクリックしましょう。

![ezgif-2-98dc70e566.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c69a75ba-9699-192a-46cd-3f10efd32893.gif)

コピーしたSkinが対象のWidgetに割り当てられ、
先ほどの画面のボタンと全く同じ見た目に変化したと思います:relaxed:！

|適用前|適用後|
|--|---|
|![スクリーンショット 0004-07-28 18.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0b23eb2a-290d-910a-827c-37b1e6d2e1a6.png)|![スクリーンショット 0004-07-28 18.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bd30a037-12cb-6d74-b599-d5bd5b38d01e.png)|

このように、Skinを活用すると
すぐ簡単に同じ見た目を表現することができるので、ぜひ活用してみてくださいね！

## Skinの複製方法

似たようなSkinを作成したい時、
Skinの複製も行うことができます。

ボタンを押した時に、少し色が薄くなったように見せたい場合、
既存のSkinを複製してSkinを作る方法を説明します。

まずSkinタブのFocusタブを選択します。
ここでは、ボタンを押した時の見た目を決めることができます。

虫眼鏡ボタンをクリックし、複製元のSkinを指定します。
次に、「Duplicate」ボタンをクリックすると、Skinが複製されます。
![ezgif-4-f43318953c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5f3dc407-a064-2332-f9ae-fb0207b19a66.gif)

Skin名をNameで指定し、
Opacityを80%にしたら完成です！
![スクリーンショット 0004-07-29 11.12.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f7d500b5-4cdc-e642-6ac6-715a5fbf835a.png)

簡単ですね！

# Skin使用時の注意点
最後にSkinを使う時の注意点を紹介します。

Skinを使うことで同じ見た目を表現できてとっても便利ですが、
誤って意図しない変更をした場合、
<font color=red>Skinを適用しているWidget全てに対して変更が適用されてしまいます。</font>

既存Skinを変更する場合は、
影響範囲を把握した上で変更を加えるようにしましょうね💡

# まとめ
最後に今回のまとめです！

・**Skinは、Widgetの見た目を決める機能**
・**Skinを使うと画面全体で共通の見た目を作ることができる**
・**管理を楽にするために、Skinには分かりやすい名前をつける**
・**誤って意図しない変更をすると画面全体に適用されてしまうため注意する**

# 最後に一言
より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！


# 参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Customizing_the_Look_and_Feel_with_Skins.htm