画像ファイルを使わずにデフォルトアイコンを使ってUIを作成してみた

# 目次
1. はじめに
1. 実装方法
1. アイコン一覧
1. 最後に


# はじめに
Irisのワークスペースの左下にあるDefault Libraryの中にはWidgetの一覧が並んでいますが、
もっと下にスクロールすると、すぐに使用できるボタンやチャート、アイコンのテンプレートが用意されています。

![ボタン例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/71ec2ebf-dcc9-2fa6-7383-38f68ace95d9.png)
![アイコン例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5be9e07e-3833-e9c5-4104-bcf170ca202b.png)


今回は、画像ファイルを使わずにDefault Libraryの中にあるアイコンを使って、
下記のような現在のステータスを表示するUIを作成してみたいと思います！

![ezgif-4-d2ce24bdc1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0522146a-e7c8-d89a-2146-a007447d5215.gif)

作りながら、使用方法も紹介するので是非参考にしてみてくださいね！
アイコンの使用方法のみ知りたい方は、[チェックアイコンの作成](#チェックアイコンの作成)で確認できます👀
またどんなアイコンがあるのか知りたい方は、[アイコン一覧](#アイコン一覧)をチェックしてみてくださいね！

# 実装方法
UIを作成する前にヘッダー部分の各要素を格納するためのFlexContainerを用意しましょう。
今回はこのように配置しました。
![スクリーンショット 0006-01-22 15.18.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/73f23e0f-a4aa-b150-7c02-a44075b78cc1.png)

では早速、ステータスバーを作成する方法を1つずつ紹介していきます！

## 二重丸の作成
それでは早速、入力画面の二重丸を作っていきましょう。
このUIはFlexContainerを2つ使うことで作成ができます。

まず1つめの外側のFlexContainerをこのように配置しました。
![スクリーンショット 0006-01-22 15.16.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e396a074-c82c-671e-a4d3-6b5eab16e780.png)

次にSkinタブを開いて、FlexContainerの見た目を変更します。
太い線で青色（#042b99）の丸い円を描きたいので、次のように各値を設定しましょう。

Style: Custom、Radius: 100pxにすることで正円を描くことができます。
![スクリーンショット_0006-01-22_15_17_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/79820398-a1b6-cfbc-9c83-8ba8588eeca9.png)

Skinが出来上がったら、確認画面でもこの見た目を使いたいので、
GeneralのNameでSkin名を変更するようにしておきましょう。
今回は`sknFlxBlueBorder`という名前にしました。
![スクリーンショット 0006-01-22 15.24.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b1bd326d-5cdc-87e2-942d-3a03ae0b396c.png)

では次に、中に入っている丸のUIを作成します。
先ほど配置したFlexContainerの中に、新たにFlexContainerを入れます。

外側のFlexContainerを選択した状態で、Widgetをドラックアンドドロップすると中にWidgetを配置することができます。
![ezgif-4-32b8e701a6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a9747021-3f78-92f0-7b9c-d8abf9e25d99.gif)

このようになればOKです。
![スクリーンショット_0006-01-22_15_25_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/30c80293-a87d-a31a-b754-bfffbf494866.png)

内側のFlexContainerのLookタブではこのように設定しました。
外側のFlexContainerよりも、幅と高さが小さくなるように設定しています。
![スクリーンショット 0006-01-22 15.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4e9f366b-dbfa-18b4-bd2b-35f6cf30c0f0.png)

次にSkinタブを開いて、青丸を作ります。
BackGroundを青色（#042b99）でOpacity（透明度）を100%にすることで青丸を作ることができます。
![スクリーンショット_0006-01-22_15_29_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c4baffa2-ed2b-2a7c-d348-6850b80a8441.png)

Skin名は、`sknFlxBlue`として設定しました。
![スクリーンショット 0006-01-22 15.39.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/114b9382-a442-3d8f-2349-0bc83e56e1c7.png)


これで二重丸を作成することができました！
次に真ん中にあるボーダーを作っていきましょう！

## ボーダーの作成
ボーダーを作る時もFlexContainerを使うことで実装が可能です。

FlexContainerを配置したら、Lookタブで次のように設定をします。
少し太めの線を描きたいので、Height: 5px、Width: 60%にしました。
![スクリーンショット 0006-01-22 15.35.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a26fc16a-5587-b024-4352-40354c53be6d.png)

次に、線の色を灰色（#c9c9c9）で表示したいので、Skinタブで設定していきます。
背景を灰色にするために、Color: #c9c9c9、Opacity: 100%と変更しました。

![スクリーンショット_0006-01-22_15_37_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2e2613c9-4b4d-ae3f-6ce6-18be029c126a.png)
Skin名： `sknFlxLineGray`

これでボーダーも完成しました！

## 丸の作成
灰色の丸も作成していきましょう。二重丸の作成できていれば簡単です。
[二重丸の作成](#二重丸の作成)と同様に、FlexContainerを配置します。

![スクリーンショット 0006-01-22 15.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f96b443d-9068-4244-c2df-b103317bbff9.png)

Skinタブで、背景の色を灰色（#c9c9c9）に変更し、
正円となるようBorderの値を変更すれば、灰色の丸の完成です。
![スクリーンショット_0006-01-22_15_46_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f00be5cc-a378-4eca-9447-784e7ed9d778.png)
Skin名： `sknFlxGray`

## チェックアイコンの作成
次に確認画面のチェックアイコンを作成していきましょう！
このUIは、FlexContainerとDefault Libraryのデフォルトアイコンを使うことで実装可能です。

まずFlexContainerをこのように配置しました。
![スクリーンショット 0006-01-22 15.49.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/551fe20e-8218-5434-35d4-dcf948721209.png)

背景を青色にしたいので、入力画面の[二重丸の作成](#二重丸の作成)の際に使用したSkinを流用します。
GeneralのName内にある検索アイコンをクリックして、`sknFlxBlue`を指定しましょう。
すると、青色背景の丸を作成することができました。

![スクリーンショット_0006-01-22_15_52_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f320f577-d5d1-91f2-574a-ce0aff7d7b12.png)

次に、青丸の中にチェックアイコンを入れていきます。
Default Libraryの検索ボックスで「Check」と入力すると、チェックアイコンがいくつか表示されます。
今回は一番左のアイコンを配置したいので、ドラックアンドドロップでFlexContainerの中に配置しましょう。

![ezgif-4-fc83607aaf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c3c73cb2-16a8-1d09-8275-bbf3753206cf.gif)

中央に配置したいので、Lookタブではこのように設定をしました。
![スクリーンショット 0006-01-22 15.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b6a787d6-8a97-7875-c9bd-6160d61dfb70.png)

デフォルトだとアイコンの色が灰色になっているため、Skinタブで色を変更していきます。

:::note
通常Image Widgetを使ってアイコン画像を配置すると、Iris上で画像自体の色を変更することはできませんが、
Default Libraryにあるデフォルトアイコンは、
Label Widgetで作成されているため、Skinタブで**色や形を自由に変更**することができます。
:::

アイコンの色や大きさは、SkinタブのFontsで変更することができます。
アイコンの色を白色、大きさをデフォルトよりも少し大きくしたかったので、
Color: #ffffff、Size: 180%に変更しました。

![スクリーンショット_0006-01-22_15_57_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cd98cdf3-6c1d-d921-98d7-a70abde398a8.png)
Skin名： `sknLblCheckWhite`

画像ファイルを使わずに、FlexContainerとLabelのみでチェックアイコンを作成することができました！
![スクリーンショット 0006-01-22 16.03.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8aa976c5-1676-2997-bd06-4d9c1b7805ad.png)

残りの青色の線と二重丸の実装は、作成したSkinを流用して作成することができます。

:::note
今回はチェックアイコンのみ紹介していますが、
Default Libraryには、チェック以外にもさまざまなデフォルトアイコンが用意されています。
デザインが統一されており、よく使われるアイコンが揃っているため、とても使いやすいです。
最後にアイコンの一覧を添付していますので、是非参考にしてみてください:relaxed:
:::

# アイコン一覧

Default Libraryに用意されているアイコンの一覧を紹介します。（Iris ver: 9.5.18）
使えるアイコンがないか参考にしてみてくださいね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/96058480-e953-acbc-6d2b-51bd1c9bcff7.png)
![スクリーンショット 0006-01-22 16.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3f1635b6-901c-0230-e79f-a201d9285def.png)
![スクリーンショット 0006-01-22 16.11.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7a85c37f-1d3b-e2a7-6a97-9b51cfad4a46.png)
![スクリーンショット 0006-01-22 16.11.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fdfd83fc-b5e7-a966-fe06-33464112d6b4.png)

# 最後に
デフォルトライブラリにあるアイコンを使ってUIを作成する方法をご紹介しました。
デザインツールがなくても、Iris上で自由に色や形を変更することができるため、
是非UI作成の際活用してみてくださいね！