Kony(web) でブレークポイントを設定する方法

### 目次
1. はじめに 
2. 実装方法 
3. 注意 
4. まとめ 

### はじめに
アプリケーションをブラウザで開いているときに、ブラウザのウィンドウがリサイズされると、大きなレイアウトのコンテンツは自動的にリサイズされません。レスポンシブWebを使えば、デスクトップWebアプリケーションを様々なレイアウトに合わせてデザインし、グリッチのないブラウジング体験を提供することができます。それでは、Konyでブレイクポイントを設定してレスポンシブWebデザインについて学んでいきましょう。

今回は以下のように、幅を狭めると幅の大きさによって、
レイアウトが変わるように設定していきたいと思います！
 ![image023.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ea392add-eb4d-e733-ef23-2c147fd1b463.gif)


### 実装方法
#### 1.Projectの作成 
新規プロジェクトの場合は、3つのデフォルト値を使用するか、**Add New**ボタンを使ってブレークポイントを追加することができます。

- Desktop - 1200px
- Tablet - 1024px
- Mobile – 640px
![image001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/545dde4a-efa2-cac7-3e1c-fb892bfa162d.png)

 

#### 2. Breakpoint Forking を有効にする
有効にすることで、ブレークポイントごとのレイアウトを作成することができるようになります。

![image002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c6d7ac6c-0edd-f0bb-0a04-2ac343deae6a.png)


#### 3. デモを作成 （break point: 1200px）
画像の赤枠の部分で1024px~1200pxの間をクリックして、breakpoint を　1200px　に設定する。
（※visualizerのウィンドウサイズが小さいと、目盛が表示されないため注意してください）
 
![image003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a4677827-4707-c15f-b877-6ab2f35731e3.png)


”flxWrapper"　という名前のFlexContainerを新規に作成し、その幅と高さを "100%"に変更してから、flexContainerタブをクリックして、"Flow Horizontal"を選択します。
 ![image004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b2ac7369-749a-37f7-5944-4205fdcb791f.png)
![image005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/27c0839d-8585-4b57-e3da-18372b01d3bb.png)

 


**flxBlock1**というFlexContainerを作成し、ブロック名を表示するLabelウィジェットを作成、そのLabelのlookタブで**Center X: 50%**と**Content Align: center**を設定します。
 
![image006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a1a2f77c-73b1-65f8-7786-d1046a8e61a1.png)


lookタブで **width: 20%** と **height: 190dp**、 **Left: 34dp** と **Top: 184dp** を設定し、Skinタブにある **color: #ccdae9**　と　**opacity: 100%** を設定します。
 
 ![image007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a8680bee-0d9b-51bb-3b1f-974d1ec8f293.png)
![image008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ef739374-c71d-f68e-f69b-886173783824.png)


作成したブロックを元に3つのブロックを複製して、名前を変更します。
 
![image009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cfa747ae-dc63-ea8a-8204-53e5dc499b87.png)
![image010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/94064450-06f7-5c25-9658-732bc038303c.png)

 

#### 4. デモを作成 （break point: 1024px）
画像の赤枠の部分で640px~1024pxの間をクリックしてbreakpoint　を 1024px　に設定します。
 ![image003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/576237e4-db90-e107-67de-7809ef30027f.png)


flxWrapper　を右クリック => **Fit to Parent**　を選択します
 ![image011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/991fe93b-cbb9-9d01-da26-133bbe160623.png)



**flxWrapper**の**FlexContainer**タブをクリックし、**Free Form**を選択します。
 
![image014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fc4081a3-ac21-8ac1-8720-66f1fc3b2c4b.png)



あなたがしたいレイアウトに応じて4つのブロックを移動してください、今回は2行になるようにブロックを配置しています。各ウィジェットの設定を、1024px用に調整してください。
 
 ![image015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f379281f-424b-356f-8cb7-691af1656ff4.png)



#### 5. デモを作成 （break point: 640px） 
画像の赤枠の部分で0px~640pxの間をクリックしてbreakpoint を640pxに設定します
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4f299e41-c837-9790-0626-ff9e986dcfb1.png)

flxWrapperを右クリック => **Fit to Parent**を選択します
 ![image011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dbdf459c-60ab-58f7-a745-23a303403545.png)


**flexWrapper**をクリックし、**FlexContainer**タブを選択。
**LayoutType**を**Flow Vertical**に設定します。
 ![image019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/76339df4-41ce-cf17-4f21-a4c29766a95d.png)



flxBlock を**Width: 90%**、**Center X: 50%**に設定します。
背景色やlabelウィジェットも640px用に設定を調整してください。
 ![image020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/edda4e90-6cb2-3a63-b357-b9483f81da7a.png)
![image021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/df448185-e0e5-3368-2aad-68d5f2083fb5.png)
![image022.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7bdefdc8-6bf0-f79e-15c8-419767ccec69.png)


#### 6. デモ
 ![image023.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ea392add-eb4d-e733-ef23-2c147fd1b463.gif)




### 注意
formでは、ブレークポイントを作成するたびに、そのブレークポイントに合わせてレイアウトを再構成する必要があります。
特定のブレークポイントのレイアウトしか作成していないと、データが表示されなかったり、余分な表示などでレイアウトが崩れるといったエラーが発生することがあります。
以下の例では、**flxVlock5**という名前のFlexContainerを追加し、1200pxのブレークポイントでのみ設定しました。(640px,1024pxでは設定無し)
結果はこのようになります。
![スクリーンショット 2021-02-15 14.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6d019233-622e-1c70-240a-c1355393c59c.png)


![block5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b897311d-4f58-c23d-e2c1-e889ace63404.gif)


flxVlock5で作成したブロックのみ、幅を狭めた時にレイアウトが崩れてしまっていることがわかると思います。

### まとめ
今回はレスポンシブWebのブレークポイントの使い方をご紹介しました。
この記事が皆様のお役に立てることを願っています。本記事をご覧いただきありがとうございました！:star:

参考: https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Default.htm#Responsive_Design_8_2.htm