目次
- はじめに
- お題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解説
答え
３問全て解けましたか？
今回の演習問題のサンプルプロジェクト貼っておきますので、
うまくいかなかった方は参考にして繰り返し復習するようにしましょう！
【プロジェクトを開く時の注意点】
上記のサンプルプロジェクトを開く時は、
リポジトリをクローンして、Visualizerを開くようにしてください。
（zipファイルをダウンロードしてもVisualizerでプロジェクトを開くことができないため。）
次の記事
次は多言語対応のi18n機能について学んでいきましょう！
▶︎i18nを使って多言語対応をしてみよう
記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406
最後に一言
より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！