Exercise2（お題1）の解説


# ★お題1の解説　

Exercise1でFlexContainerの並べ替え方法については説明済みのため、
要素の配置などの詳細説明は割愛し、一覧表示部分の実装をメインに説明いたします。

## 1. フォームの作成
Formsを右クリックし新しいフォームを作成します。

![スクリーンショット 0004-08-02 16.54.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a130c328-7d09-87cb-5bca-93c84d3ad4bc.png)

フォームを作成したら、画面の名前をつけておきましょう。
今回は、frmCouponListと名前をつけました。

## 2. ヘッダーの作成

次にヘッダーを作成してきます。

ヘッダーは1から作成しても良いですが、
Exercise1で作成した画面（以下frmCouponDetail）
のヘッダーと配置が同じなので、
コピー&ペーストすると簡単にレイアウトを作成することができます。

frmCouponDetailのフォームからヘッダー部分をコピー
![スクリーンショット 0004-08-02 16.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/17dcaaa0-2a96-c291-a276-16f8544d9ef4.png)

作成した画面にペースト
![スクリーンショット 0004-08-02 16.34.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e37e330f-acc6-7a97-816d-bdee6d471a32.png)

ヘッダー部分はこれでほぼ完成です。

![スクリーンショット 0004-08-02 16.36.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f08772e9-1886-cf4c-7b8e-a5eeff9b3430.png)

デザインには下線があるので、
flxHeaderの中にもう一つFlexContainerを設置して、下線を作成してください。
（色の指定などは先述しているため、割愛いたします。）


## 3. 一覧部分の作成

次に一覧表示部分の作成です。

### 要素の配置
今回の画面のように、
同じ要素を繰り返して表示する場合には、
セグメントWidgetを使いましょう！

フォームにセグメントWidgetを配置します。
![スクリーンショット 0004-08-02 16.56.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9d1ea6bc-a839-b3ae-6837-9f1b2ebb35e3.png)


今回のデザインのように、
一覧の中の各項目を同じ幅、色、項目数で表示するには、
SegmentタブのRow Templateでテンプレートを作成していきます。

テンプレートを作成したい対象のセグメントWidgetを選択した状態で
下記のように、「Create New」をクリックしてください。
![スクリーンショット 0004-08-02 14.45.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2343d063-bd82-b018-3f76-4ce7d2d9dda2.png)

Templateタブに移動し、セグメントのテンプレートを修正する画面が開きます。
ここでは、セグメントの中に表示する**各項目の表示テンプレートを作成することができます。**

まずはテンプレートの名前を変更しましょう。
今回は、tmpSegmentと名前をつけました。
![スクリーンショット 0004-08-02 16.45.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8d792df7-c4d3-6569-4b63-778592677c44.png)

試しにテンプレート内にイメージWidgetを追加して、
今回作成している画面（frmCouponList）に戻ってみましょう。

すると、テンプレートで作成した画像が
セグメントの各項目に繰り返し表示がされているのが確認できるかと思います！
![スクリーンショット 0004-08-02 16.48.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6baf0d5d-6bb8-7f78-17f0-50a3883a1392.png)

:::note
開発のポイント①
一覧画面のように、同じ要素を繰り返し表示する場合は、
セグメントWidgetを使いましょう。

一度セグメントのテンプレートを作成し、
セグメントのRow Templateに指定すると同じ見た目で表示できるようになります:writing_hand_tone1:
:::

あとはデザインを見ながら、
Formで要素を配置していく時と同様に、表示するWidgetを配置していきます。


今回はこのように、
画像を左、商品の詳細を右に配置するように設定しました。  

![スクリーンショット 0004-08-02 16.59.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e8a99842-6361-f7a8-44c5-b6fe0098ded2.png)


### Skinの指定
文字のSkinを指定していきましょう。
今回、Exercise1で使用したSkinと重複したものがいくつかありますので、
重複しているものは同じSkinを使用するようにしましょう。

例えば、「10%OFF」の表示は、
frmCouponDetailのフォームの「10%OFF（最大）」の表示と
大きさ・フォントとなっていますので、同じSkinを指定してあげましょう。

|frmCouponDetail|frmCouponList|
|--|--|
|![スクリーンショット 0004-08-02 17.06.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0ab8bd89-6f63-c436-35e4-b03f2226b17b.png)|![スクリーンショット 0004-08-02 17.06.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/14d7cf99-daba-978f-9b07-6b01a01cb41f.png)|

その他も同様、
既にスキンがあるものは、既存のSkinを指定し、
ないものは新たに作成をしましょう。

今回使用したSkin一覧は以下の通りです。
新規で作成したSkinは青色で表示しています。

![スクリーンショット 0004-08-02 17.16.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/64dc62a3-91b9-64d1-a521-de1d66f549c9.png)

|No |フォント・サイズ |文字色  |背景色|Skin名|
|---|---|---|--|--|
|1|NotoSansJP Bold 14px|050C1E|-|sknBlackBoldS|
|2|NotoSansJP Bold 12px|050C1E|-|<font color = blue>sknBlackBoldSS</font>|
|3|NotoSansJP Bold 24px|050C1E|-|sknBlackBoldM|
|4|NotoSansJP Medium 12px|858A9B|-|sknGrayMediumSS|
|5|NotoSansJP Regular 12px|050C1E|-|<font color = blue>sknBlackRegularSS</font>|




### 矢印アイコンの指定
テンプレートを作成した後、フォームに戻ってみると、
各セグメントに重複した矢印が表示されていると思います。

![スクリーンショット 0004-08-02 17.22.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/521934e1-e8b0-2969-998c-9c37854068c0.png)

これはセグメントWidgetではデフォルトで矢印が表示されるため、
テンプレートで画像を指定すると、これらが重複して表示されてしまいます。

セグメントWidgeを選択した状態で
右メニューのSegmentタブを開き、Indicatorの値を
デフォルトの「Select」から「None」に変更しましょう。

![ezgif-1-1a24585212.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b9d65290-ec42-947e-29ad-56b9c4e3a067.gif)

デフォルトの矢印が消え、
テンプレートで指定した画像のみが表示されるようになりました🎉


### マスターデータの変更

フォームで表示されている一覧のデータをみると、
一部デザインのように表示されていない項目があるかと思います。

セグメントの中のデータを変更したい場合は、
セグメントを選択した状態で右メニューのSegmentタブを開き、
Master DataのEditをクリックして下さい。
![スクリーンショット 0004-08-02 16.09.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c2f6f800-7737-f2ff-163b-f906b0b33fde.png)

すると以下のような画面が開くので、
各項目の値をデザイン通りに変更すれば、データの変更も完了となります。
![ezgif-1-5e8f7b3add.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1d73738e-711c-41ed-d6a8-8d7401a1d074.gif)


:::note
開発のポイント②
セグメント内のデータを変更したい場合は、
Master Dataを編集することでデータの変更が可能です。
データの削除、追加などもここから行うことができます:eyes:
![スクリーンショット 0004-08-02 17.35.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/01553e42-b3c2-6d2d-bed1-a19bde492584.png)

:::

これで一覧画面の作成は終了です。

実際の完成イメージはこちらになります。

![ezgif-1-6501dd9edb.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6cb3edd0-a780-2d0a-b5e3-35979c4a3625.gif)


うまくできたでしょうか？
最後に開発のポイントをまとめていますので、必ず覚えていきましょう⭐️


# 開発のポイント
今回の開発のポイントをまとめます！

できた人もできなかった人も、以下を念頭に置いて
今後開発を進めてくださいね！

:::note
まとめ
**①同じ要素を繰り返し表示する場合はセグメントWidgetを使おう**  
**②セグメント内のデータを変更したい場合は、Master Dataを編集しよう**
:::

# 次のお題にいく
終わった方から次のお題2に取り組んでいきましょう:runner_tone4:

▶︎[Exercise2 モバイルでクーポン一覧画面を作ってみよう/お題2](https://qiita.com/Kony_Team/items/c1bf41da1df24d7608a5#%E3%81%8A%E9%A1%8C2)