KonyでSkinの背景タイプを設定する方法（Single Color, Two Step Gradient, Image, Multi Step Gradient）

#目次
1. はじめに
2. 実装方法
3. デモ
4. まとめ

#はじめに
Kony VisualizerではWidgetの`Properties`にあるタブ：`Skin`の`BackGround`を指定することで
Widgetの外観の背景を設定することができます。
今回はKonyでSkinの背景タイプを設定する方法を4つご紹介したいと思います。

*  Single Color：単一色
*  Two Step Gradient：2段階グラデーション
*  Image：画像
*  Multi Step Gradient：マルチステップグラデーション

#実装方法
####**事前準備**
**画面の作成**
このような画面を作成してみました。
`FlexContaner`を1つ（ `flxBase`)を用意します。
Width,Heightは100%となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4e6ae574-db70-184c-53fa-06749ae80080.png)

---

####**①Single Color：単一色**
Single Colorとは、単一色を適用します。

**Single Colorの確認**
FlexContainer:`flxBase`をクリックします。
右にある `Properties` > `Skin`をクリックします。
タブが `Normal`になっていることを確認します。
`BackGround` > `Type` が**Single Color**になっていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/33eedaf3-cd40-e9bd-4f24-1c0e0eebc345.png)

**Single Colorの設定**
単一色の設定を行います。
今回は青色(`#3369E8`)を設定します。
`BackGround` > `Color` の右隣をクリックします。
カラーパレットが開きます。
色の設定は様々な方法で設定することができます。
1. 縦長のカラーバーと左の正四角形のカラーパレットをドラッグ
2. RGB値
3. HSB値
4. テキストボックスに16進数を入力

今回は`4. テキストボックスに16進数を入力`で設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/de18caa8-9aea-57d6-11db-46b1a334257a.png)

**色の不透明度の設定**
色を設定したにも関わらず、画面上ではまだ白いままです。
`BackGround` > `Opacity`にあるテキストボックスに**100**と入力します。

**設定完了**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8e838bcb-b793-d279-35e4-47f0d52a2911.png)

**SkinのNameの設定(任意）**
色を設定したことで新しいSkinとして作成されました。
Nameは適宜、変更してください。
今回は`sknFlxSingleColor`とつけています。

---

####**②Two Step Gradient：２段階グラデーション**
Two Step Gradientとは、2つの色を適用します。

**Two Step Gradientの確認**
FlexContainer:`flxBase`をクリックします。
右にある `Properties` > `Skin`をクリックします。
タブが `Normal`になっていることを確認します。
`BackGround` > `Type` をクリックし、**Two Step Gradient**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5828337e-cbd7-684d-2617-cce1ecc1ddf8.png)

**Two-Step Gradient Editorを開く**
2段階の設定を行います。
今回は水色(`#43CBFF`)と紫色（`#9708CC`)を設定します。
`BackGround` > `Type` の下にある横長のカラーバーをクリックします。
Two-Step Gradient Editorが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0a9ab1b0-2e6e-071e-3dc6-eb5167ef4658.png)

**色の設定**
2段階の色の設定を行います。
今回は水色(`#43CBFF`)と紫色（`#9708CC`)を設定します。
上にある横長のカラーバーにある小さな四角をクリックします。
小さな四角の上にある矢印部分が黒になっていることを確認します。
`Color`の右隣にある四角をクリックし、色の設定を行います。
`Opacity`の設定を行うことも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f82596cf-11d7-c7d1-bb31-143d6526bdff.png)

設定後はこのような感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1de67876-ed92-3d19-595d-2b10ddf3e9b0.png)

**Angleの設定**
下にある`Angle`をクリックしてください。
`Angle`には**vertical gradient**と**vertical split**があります。

**vertical gradient**：グラデーションを垂直に表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1201b439-c2d1-393b-55d5-a83d1d9d573e.png)
**vertical split**：垂直に分割された状態で表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e0a3fca4-c2b4-750c-2cf8-b6e9ab4fc916.png)

今回は`vertical gradient`を選択します。

**設定完了**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f62f78ea-c85c-4023-b981-7e4c65580006.png)

---

####**③Image：画像**
Imageは背景として画像を設定することができます。画像はSkinが適用されているWidgetのサイズに合わせて拡大されます。

**Imageの確認**
Form:`frmMain`をクリックします。
右にある `Properties` > `Skin`をクリックします。
`BackGround` > `Type` をクリックし、**Image**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9b1cc84f-8239-68a4-1a96-2a822d8862f5.png)

**画像の設定**
画像の設定を行います。
今回はこちらの画像を使用します。
![sample_fujisan.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/82f0a287-ec48-97b6-b064-638998f977c1.jpeg)


画像の取り込み方は以下になります。
左上のタブが`Assets`になっていることを確認し、`Media` > `Common`の右側にあるボタンをクリックしてください。
`Import Images`で該当画像を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3846f78f-c6a3-213c-b503-7dbae7b61bf3.png)

Imageの右隣にある`Choose`をクリックします。
`Background Image`が開きます。
`Default`の右（Valueの下）をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b19f826e-c857-ef16-99f5-2f8430ad0b3b.png)

`Select Image`が開くので、先ほどの画像を選択し、`OK`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/096fc7ae-6e0b-2d5c-e60f-119f9afc4816.png)

`OK`をクリックすると`Background Image`に戻るので、該当の画像の名前が入っていることを確認し、`OK`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ff254475-9147-e370-5586-b716c9ab15d4.png)

**設定完了**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c5f12ab8-668e-77bb-0d6c-912283db0c75.png)

---
####**④Multi Step Gradient：マルチステップグラデーション**
Multi Step Gradientとは、2色以上の色を設定することができます。
背景の何パーセントを占めるか設定することもできます。
また各色の不透明度や色の向きを変更することもできます。

**Multi Step Gradientの確認**
FlexContainer:`flxBase`をクリックします。
右にある `Properties` > `Skin`をクリックします。
タブが `Normal`になっていることを確認します。
`BackGround` > `Type` をクリックし、**Multi Step Gradient**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d7478d50-06b2-75e7-ae1a-8913fe819bfe.png)

**Multi-Step Gradient Editorを開く**
`BackGround` > `Type` の下にある横長のカラーバーをクリックします。
Multi-Step Gradient Editorが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2a5b5576-68c0-3c69-3a63-2e4b185fafd2.png)

**色の設定**
今回は３色を設定したいと思います。
使う色はピンク色(`#fa8bff`)と水色（`#2bd2ff`)と緑色（`#2bff88`)です。
3色の設定を行います。

色の設定については②Two Step Gradient：２段階グラデーションを参照していただければと思います。
Two Step Gradient Editorと異なる点は以下になります。
 
* Location(色の位置)を設定できます。
* Opacity(不透明度）を設定できます。
* 色の追加・削除ができます。
* ４方向(to top ↑, to right→, to bottom ↓, to left ←, Custom)からのAngleを設定することができます。

**Location(色の位置)の設定**
以下の方法でLocation(色の位置)を設定することができます。

* 上にある横長のカラーバーにある小さな四角をドラッグ
* Locationのテキストボックスに値を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/46df2321-d818-c663-d3b7-6ed5b9b0458c.png)

**Opacity(不透明度）の設定**
以下の方法でOpacity(不透明度）を設定することができます。

* Opacityのテキストボックスの右にある矢印を押すと不透明度バーをドラッグ
* Opacityのテキストボックスに値を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a3e91cf1-6f12-09e0-eb6d-02d90b1abb2c.png)

**色の追加・削除**
**色の追加**
上にある横長のカラーバーをクリック

**色の削除**
上にある横長のカラーバーにある小さな四角を選択し、`Delete`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ae12aed9-132f-92d7-95a9-b30532fa4445.png)

**Angleの設定**
下にある`Angle`をクリックしてください。
`Angle`には**To top ↑**と**To right→**と**To bottom ↓**と**To left ←**と**Custom**があります。

| Angle | 説明 | 
| ------- |  ------- |
| To top ↑ |下から上へ | 
| To right→ | 左から右へ |
| To bottom→ | 上から下へ |
| To left ← | 右から左へ |
|Custom | 指定した角度に、360度の軸に沿って一番下の色を配置します。<br>たとえば、角度を225度とした場合、一番下にある色を180度と270度の間の半分の位置に配置します。|

**設定完了**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bd9dbfd0-f71b-ebed-a0f0-96217b9041c7.png)

#デモ
`Image`と`Multi Step Gradient`を組み合わせてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f05a0da7-e997-f734-b7a0-7537b6526f75.png)
このようにSkinの背景タイプの組み合わせ次第で、いろいろな表示ができます！

#まとめ
今回は、KonyでSkinの背景タイプを設定する方法を説明しました。
Konyでしたら、GUIで簡単にskinの背景タイプを設定することが可能です:sparkles:
ぜひ試してみてください:wave:

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