目次

はじめに
お題1
お題2
お題3

はじめに

Exercise1では、デザインデータを元によく使うWidgetを使って画面を作成していきました。

今回の演習問題では、
あるWidgetを使って一覧画面を作っていきましょう！

アプリでよく登場する一覧画面ですので、
作成方法をしっかりと学んでいきましょう。

お題1

早速お題です！
デザインチームから一覧画面のデザインが届きました。
デザインに沿って画面を作成してください。

一覧のデザインを作成するにはどのWidgetを使えば良いでしょうか？
既存のQiita記事や、Konyの公式ドキュメントを参考にしながら解いてみましょう！

制限時間：90分

完成イメージ

（"Freepik.com"このカバーはFreepik.comのリソースを使用してデザインされています。）

素材

画像
画像とアイコンはこちらからダウンロードして使用してください。

画像	ロゴ	進む	戻る

カラーコード
画面で使用されいる色については、
カラーコードをご参考ください。

フォント

デザインに使用されているNotoSansフォントはデフォルトに入っていないフォントです。
外部フォントのインポート方法は、こちらを参考にして作成してください。
※Exercise1でインポート済みの方はスキップしていただいて大丈夫です。
▶︎Kony Visualizerに外部フォントを取り込む
それぞれのフォントサイズ・カラーを記載しています。
※以下はpxで表記していますが、モバイルの場合Visualizerでpx指定をすると、
想定より小さめに表示されるため、文字サイズは参考程度にご覧ください。

Visualizerでの実装時、フォントサイズは%指定とし、
デザインファイルと同様のフォントサイズになるよう調整をしてください。

No	フォント・サイズ	文字色	背景色
1	NotoSansJP Bold 14px	FFFFFF	-
2	NotoSansJP Bold 12px	050C1E	-
3	NotoSansJP Bold 24px	050C1E	-
4	NotoSansJP Medium 12px	858A9B	-
5	NotoSansJP Regular 12px	050C1E	-

お題1の解説

お題1は完成しましたか？
下記のリンクに解説を書いていますので、できた方からチェックしていきましょう

▶︎お題1解説

お題2

続いて、今度は一覧に表示するデータをMasterDateで固定値を指定する方法ではなく、
実際にAPIからデータを取得して表示することを想定し、
ロジック上にダミーデータを用意して、Javascriptで一覧表示させるロジックを書いてみましょう。

表示するデータは、下記の完成イメージを参考にしてください。

ロジックは、
フォームのContollerにJavascriptで書いていくことができます。

制限時間：90分

完成イメージ

（"Freepik.com"このカバーはFreepik.comのリソースを使用してデザインされています。）

素材

画像
画像とアイコンはこちらからダウンロードして使用してください。

pork_ramen.png	thai_ramen.png

お題2の解説

お題1は完成しましたか？
下記のリンクに解説を書いていますので、できた方からチェックしていきましょう

▶︎お題2解説

お題3

一覧の各項目をタップしたら、その商品の詳細画面に遷移するよう、
Javascriptでデータの受け渡しロジックを作成してください。

詳細画面は、Exercise1で作成した画面を表示するようにしましょう。
各一覧の項目をタップし、その対象データの詳細画面に遷移するよう実装してください。
詳細画面では、一覧画面には表示されていない
各項目に応じた詳細データも表示するようにしてください。

ロジックについては、フォームのControllerに書くことができます。

制限時間：120分

完成イメージ

各一覧の項目に応じた詳細データを表示できていれば、
表示するデータの内容は完成イメージの通りでなくてもOKです。

お題3の解説

お題1は完成しましたか？
下記のリンクに解説を書いていますので、できた方からチェックしていきましょう

▶︎お題3解説

答え

３問全て解けましたか？
今回の演習問題のサンプルプロジェクト貼っておきますので、
うまくいかなかった方は参考にして繰り返し復習するようにしましょう！

▶︎Exercise2_サンプルプロジェクト

【プロジェクトを開く時の注意点】
上記のサンプルプロジェクトを開く時は、
リポジトリをクローンして、Visualizerを開くようにしてください。
（zipファイルをダウンロードしてもVisualizerでプロジェクトを開くことができないため。）

次の記事

次は多言語対応のi18n機能について学んでいきましょう！
▶︎i18nを使って多言語対応をしてみよう

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

最後に一言

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