Exercise1_答えと解説

答え

今回の答えになるサンプルプロジェクトを以下に添付しておきます。
そっくりそのままにする必要はありませんが、
スキンの設定や各要素の配置方法など参考にしましょう！

▶︎お題1の答えサンプル

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

画面の作成方法について、
今回のポイントを交えながら説明していきます！

上手くいかなかった人も、上手にできた人も目を通すようにしてくださいね

★お題1の解説　

1. FlexContainerを設置

まず、今回のデザインでは
・ヘッダー
・画像
・商品説明 等
が上から下に縦並びで配置されているため、
各要素を入れるためにまず大きい箱を用意しましょう。

Form内にFlexContainerを設置します。
（今回は、ID名はflxMainとします。）

次に右メニューのFlexContainerタブを選択し、
Layout Type : Flow to Vertical（垂直）を選択します。

画面いっぱいになるよう、幅と高さを100%に設定しましょう。

こうすることで、以降この中にWidgetを入れていくと、
上から下の順に要素が並ぶようになります！

①開発のポイント
要素を水平または垂直に並べ替えたい時は、FlexContainerを使おう！

1. 要素をFlexContainerに入れる
2. Layout Typeを、Horizontal（水平）またはVertical（垂直）に設定
   参考：FlexContainer Widget（公式ドキュメント）

2.ヘッダー部分の作成

土台となる画面のベースができたので、この中にヘッダー部分を作成していきます！

先ほど1で作成したFlexContainer（以降、flxMain）の中に、
ヘッダーの要素を入れるためのFlexContainer（ID名：flxHeader）を追加します。
デザインでは、戻るアイコンが左端、ヘッダータイトルが画面中央に配置されているため、
今回はLayout Typeは、Free FormのままでOKです。

ヘッダーの箱ができました。

Widgetの追加

上記で作成したflxHeaderの箱の中に、
ImageとLabelのWidgetを追加します。

Widgetを追加したら、WidgetID名をわかりやすい名前に変更してください。
今回は、lblHeaderName,imgReturnと命名しました。

②開発のポイント
Widgetを追加したら、WidgetID名をわかりやすい名前に変更しておくようにしましょう。
例）メールアドレス入力のテキストボックスなら、txtMailなど
※Widget名の略を頭につけるのが一般的です。

Widgetのテキストをロジックで変更する場合などに、
対象Widgetが探しやすくなり開発の効率がアップします。

画像の設定

画像の設定を行います。
Image　Widgetの右メニューからImage->SourceのEditをクリックします。

画像を選択するポップアップが表示されるため、
Importボタンをクリックし、まず今回使う画像を追加しておきましょう。

追加できたら、今回使う画像を選択しOKボタンをクリックしたら画像の変更は完了です。

ラベル設定

テキスト変更

Label Widgetを選択し、右メニューのLook->Textを変更します。
デフォルトの文字が設定されているため、
今回表示する「クーポン詳細」を入力すれば、テキストの変更ができます。

フォント変更

また今回は、フォントがデフォルトで入っているものではないため、
フォントのインポートをする必要があります。

まずは、こちらからフォントをダウンロード。
https://fonts.google.com/noto/specimen/Noto+Sans

Visualizerでは、.ttf拡張子のみをサポートしておりますので、
ttfに変換をしておきましょう。

VisualizerでAssets->Fontsを右クリックし、「Import Fonts」をクリック。

ダウンロードしてきた「NotoSans」フォントを選択したら、フォントのインポートが完了となります。

インポートが完了したら、フォントを選択できるようになります。
lblHeaderNameを選択した状態で、
今回のデザインに沿って、SkinタブのFontsを以下のように変更しましょう。

③開発のポイント
デフォルトにないフォントを使う場合は、
外部からダウンロード後Visualizerでインポートすることで利用可能となります。
詳しい設定方法は、以下もご参照ください。
▶︎Kony Visualizerに外部フォントを取り込む

スキン設定

ここで画面全体を見ると、同様の文字色・サイズのものがいくつかあると思います👀

今回の仕様をみると、1,2,5の文字が同じフォント・サイズ・色ですね！
色やフォントが同じもので共通して使用できるものは、
Skin名を設定するようにしましょう！

④開発のポイント
アプリ内で同様の色を使う場合は、
対象のものに対してSkin名をつけておきましょう。

Skin名をつけておくことで、
途中で仕様変更があった場合に、対象skinの設定を変えるだけで
他の画面で利用されている対象Widgetの色を一気に変更することができる
というメリットがあります🌈

例）
全画面で、文字の色を赤から青に仕様変更してほしいとお客様から依頼あった場合、、
（実装）Skin名：sknLblTitleのColorを赤から青にする
（結果）sknLblTitleのskinをあてているWidget全ての青に変更される

最初にskinを設定しておくと、
後々仕様変更があった際など、変更がとっても楽です。

共通で使用する文字やボタンがある複数ある場合は、
skin名を必ず設定し同じものをあてるようにしましょう！

スキンの基本説明については、こちらの記事で紹介しています。
併せてチェックしてみてくださいね！

▶︎Skinの概要と使い方のご紹介

今回は、sknBlackBoldSとしました。
文字の色や大きさなどをSkin名に含めておくと、
管理がしやすく探すのが便利になります！

画像とタイトル文字が完成したので、
次に、各Widgetが同じ高さで配置されるよう修正します。

各Widgetを整列させる

ヘッダー部分の高さは、画面全体の5%くらいなので、
flxHeaderの右メニューのLookタブでHeightを5%に設定しておきましょう。

中に入っている要素を、同じ高さにするため、
各要素のLookタブで値を変更しましょう。

このような設定値になっていればOKです。

戻るアイコン	ヘッダータイトル

要素を中央寄り、右寄り等に配置したい場合は、
以下の部分をクリックするとワンクリックで配置の変更ができます。

便利な機能なので覚えておきましょう！

これで、ヘッダー部分が完成です。

以降は、画像の挿入や、FLexContainerの手順については省略し
ポイントのみを説明します。
サンプルプロジェクトや、これまでの説明を確認して進めてみてくださいね！

3. メインエリアの作成

ヘッダー下のメインエリアのレイアウトを作成します。

frmMainの中に、
商品紹介エリアを入れるためにFlexContainerを作成し、ID名：frmContentsとします。
またボタンを入れるためにFlexContainerを作成し、ID名：flxButtomとします。

このような構造になっていればOKです。
これまでの手順を参考に要素を追加していきましょう！

スキンの適用

「おいしいラーメン店 東京駅前店」と
「【期間限定】開店祝い記念クーポン」の文字が、
タイトルの「クーポン詳細」と同じフォント・サイズ・色になっていると思います。

LabelWidgetを配置したら、
Skinを先ほど作成した、sknBlackBoldSに変更しましょう。

すると、文字のフォントや色がタイトルと同じになったかと思います！

2のスキン設定で説明した通り、一度skinを設定すると
また同じ設定をする必要がないためとっても便利です。

今後よく使う機能ですので、是非活用してくださいね🎉

その他のスキンについては以下のように設定しています。
命名規則など参考にしてみてください！

No	フォント・サイズ	文字色	背景色	Skin名
1,2,5	NotoSansJP Bold 14px	050C1E	-	sknBlackBoldS
7	NotoSansJP Bold 14px	050C1E	2B90FF	sknBtnBlueNormal
3	NotoSansJP Bold 24px	050C1E	-	sknBlackBoldM
4	NotoSansJP Medium 12px	858A9B	-	sknGrayMediumSS
6	NotoSansJP Regular 14px	050C1E	-	sknBlackRegularS

以上、お題1の解答と説明でした！

★お題2の解説

お題2のボタンをタップした時に色を変更する方法について説明します。

開発のポイント⑤
まず前提としてButton Widgetをセットした際、
タップ時のSkinはデフォルトのものが自動でセットされます。

タップ時のSkinであるFocus Skinを編集しないままだと、見栄えが悪いため
Button Skinを使う場合は、タップ時のFocus Skinも忘れないよう設定しましょう。

早速Focus Skinの設定方法を説明します。

1. VisualizerでボタンWidgetを選択した状態で、右メニューのSkinタブを開きます。
   Normal、Focus、Blocked UI、Pressedと4つ並んでいる中の
   Normalがデフォルトで選択されていると思います。
   
   今回、タップ時の色は
   Normal Skinと同じ色で透明度80%に設定するため、
   Normal Skinをコピーしたものを透明度だけ変更して作成していきます。

2. まずNormalを開いた状態で、CopyボタンをクリックしSkinをコピーします。

3. 次にFocusを選択し、Pasteボタンをクリックしてください。
   すると、General->Nameの箇所にコピーされたSkinが作成されると思います。
   これでNormal Skinを複製することができました！
   

4. あとは、Opacity（透明度）を80%に設定し、
   Skin名をフォーカス時のスキンとわかるように名前を設定したら完了です！
   

以上、解答と説明でした！
最後に開発のポイントをまとめていますので、必ず覚えていきましょう⭐️

開発のポイント

今回の開発のポイントをまとめます！
どれも今後の開発において大切なことです。

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

まとめ

• ①画面内の各要素を整列させたい場合は、FlexContainerを使用する
• ②Widget名は、わかりやすいように必ず名前を変更する
• ③デフォルトにないフォントを使う場合は、インポートすることで利用可能となる
• ④アプリ内で共通で使用するデザイン（文字の色、サイズなど）は、Skinを設定する
• ⑤ボタンWigetを使う場合は、Focus Skinも設定する