デバイスに応じた画面の表示が変わるようにブレークポイントを設定する方法

# 目次
1. はじめに
1. ブレークポイントの設定方法
1. まとめ

# はじめに
Kony Mobility Platformでは、
WebブラウザやiOS,Androidを問わず、すべてのマルチデバイスでアプリ開発ができることが強みです。

同じプラットフォームで開発をしていると、
各デバイスでの画面表示が崩れてしまうことがありますが、
ブレークポイント機能を利用すれば、
各デバイスでどのように見せたいかを画面幅に応じて設定することができます。

マルチデバイスでの開発をする際にとっても役に立つ機能ですので、
今回は具体的な手順を紹介していきます⭐️

# ブレークポイントの設定方法

## 1. ベースとなるフォームの作成
まずはWebブラウザで表示するベースとなる画面レイアウトを作成していきます。

Responsive Web / Desktopデバイスに、
新しいフォームを作成し適当なレイアウトを作成していきましょう。

今回はこのように作成しました。
真ん中にメイン部分、
右上にメニューボタン、
画面下部にボタンが表示されている一般的な画面です。

![スクリーンショット 0004-09-01 14.56.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/97e5d544-a989-60fb-87a8-634c76fce1d5.png)

ここで一度ビルドしてみましょう。

↓Webブラウザでの表示
![web.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b2c975ce-f632-893d-4411-a87d8ea32ffc.png)

各要素が綺麗に整列しており、特に問題はなさそうですね。

では、画面を横に狭めてみるとどうなるでしょうか？
![ezgif-4-a73ce433ac.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4ca35baa-ef93-62fc-1c9c-4cfa68035428.gif)

画面を狭めると、
右上メニューの表示が崩れ、
画面下部のボタンに見切れが発生してしまっていますね💦

このままでもWebブラウザでは問題ありませんが、
TabletやMobileで表示する場合、うまく動かない等不具合が発生する場合があります。

次の手順で、各デバイスに対応できるよう、
ブレークポイントを設定していきましょう👇


## 2. ブレークポイント値の設定

作成したフォームを選択した状態で、
PROPERTIES->Lookを見てみると「Break Points」という項目があると思います。

フォーム作成直後は、デフォルト値が設定されているため
ブレークポイントの設定値を変更したい場合は、
直接値を編集するか、「Add New」をクリックして新しい値を登録してください。
![ezgif-4-a177c95b34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cfb54491-c4b5-df92-9221-2d1e3b1474ea.gif)

今回は、以下の3つの値をセットしました。  
・デスクトップ - 1200 PX
・タブレット - 1024 PX
・モバイル - 640 PX

値を保存すると、
ワークスペース内の上部にブレークポイントに設定した値に赤い矢印が表示されます。  
※赤矢印が見えない場合は、拡大をすると見えるようになります。
![ezgif-4-392c922b40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e93746ee-a0ef-f394-54c5-3409c351cd36.gif)

これでブレークポイントの値の設定ができました😊

## 3. デバイス毎のレイアウト変更

既にWebブラウザで表示する場合（1200px）のレイアウトは完成しているので、
TabletとMobileで表示する場合のレイアウトを作っていきます。

### Tabletサイズの作成
まずはTabletから作っていきましょう。

ワークスペースの上部にある
「Breakpoint Forking」のスイッチをONにしたら、
640px~1024pxの間をクリックして、Breakpointの値を1024pxに設定しましょう。


![ezgif-4-def9b2c8fc (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2b80a874-8076-1759-18f5-a361e5deb506.gif)

<font color=blue>**Breakpoint ForkingのスイッチをONにすることで、
各ブレークポイントのレイアウトを個別に設定できる状態となります。**</font>

スイッチをONにしたら、
レイアウトを変更したいブレークポイント値にカーソルを合わせて、
レイアウトを変更していきましょう！

:::note
デバイス毎のレイアウトを変更したい時の手順
**①Breakpoint ForkingのスイッチをONにする**
**②変更したいブレークポイント値をクリックし、編集する**

反対に、Breakpoint Forking機能をOFFにしている場合、
2の手順でブレークポイント値を設定したとしても、
デバイス毎のレイアウトは共通の表示となります。

**各画面幅でレイアウトを分けずに、共通の表示にしたい項目がある場合は、
スイッチをOFFにするのを忘れないようにしましょうね**:zap:

:::

では実際にレイアウトを変更していきます。

右上のマイメニューの表示を修正していきましょう。
タブレット表示の場合、
「マイメニュー」の表示が改行されるように編集します。
![スクリーンショット 0004-09-01 15.34.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/06cffbaf-0f11-0238-ea13-26456636ccc1.png)

「Breakpoint Forking」のスイッチをON、
Breakpointの値を1024pxに設定にしたら、
「マイメニュー」のLabelのTextを`マイ\nメニュー`に変更しましょう。

![ezgif-4-58736807bf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4780adca-4124-6ba5-ddb7-44786edbf8cf.gif)

変更できたらビルドしてみましょう。
![ezgif-4-6da8c66cda.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7ac1c085-3692-9fb4-bb6a-be6865725697.gif)

画面幅を狭めても、
おかしな箇所で改行が発生せず、設定した通りの箇所で改行できていますね！

同じ要領で、モバイル表示の場合のレイアウト作成を行っていきましょう。

### Mobileサイズの作成
先ほどと同じ手順で、
「Breakpoint Forking」のスイッチをONにしたら、
今回はモバイルなので、
0px~640pxの間をクリックして、Breakpointの値を640pxに設定しましょう。
![ezgif-4-a741bf3754.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0ca1ffd6-3f36-88c9-9b43-a3afe2b5d623.gif)

モバイルサイズの場合は、下記のような表示となるよう設定していきます。
①右上メニューは、アイコン表示のみ
②ボタンは横並びではなく、縦並びとなるよう表示

まず①から設定していきます！
アイコンのみを表示するため、
LabelのVisibleをOnからOffに設定し、アイコンをセンター寄りに設定しました。

:::note warn
※特定のデバイスで、特定の要素を非表示にしたい場合、
<font color = red>Label Widgetそのものを削除しないようにしてください。</font>
Widgetを削除してしまうと、存在が消えてしまうためすべてのデバイスで表示されなくなってしまいます。
:::
![ezgif-4-f335a3be6e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/97b02e0a-84f3-1883-fa45-81b8b64caec1.gif)



次に②の設定です。
2つのボタンを囲っているFlexContainerのLayout Typeを「Vertical（縦並び）」に変更後、
それぞれのボタンの表示を微調整しましょう。

![ezgif-4-8ab44bc424.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a0b8bd46-3a1f-af97-6900-71666927e696.gif)

設定が完了したら、
早速動作確認をしていきましょう！

![ezgif-4-c19dfa5b17.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5328dd2f-beac-1e0f-818d-ae5799ac116d.gif)


画面幅を狭めてみると、
タブレットサイズの場合、マイメニューの文字が改行され、
モバイルサイズの場合、
マイメニューの表示がアイコンのみ、ボタンの位置が縦並びに表示されているのがわかると思います！

検証ツールでデバイスを変更し、
それぞれの表示も確認してみましょう。

|Web|Tablet|Mobile|
|--|--|--|
|![webbrow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/161c9790-a4bd-00bb-6e6a-784996c85cb3.png)|![tablre.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/02d5bec4-9be0-95fa-fa8a-3633e596abe2.png)|![iphone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7de17d40-c0ee-98b3-efd8-d57bef4f0369.png)|

どのデバイスサイズでも要素の見切れや
画面崩れなく表示できるようになりましたね！😉🎉


## （補足）こんなのもできるよ
今回紹介したのは、
・テキストの修正
・文字の表示/非表示
・要素の配置変更
ですが、他にも色の変更等も可能です！

試しに、モバイルサイズのみヘッダーの色をオレンジに変更してみると。。

![ezgif-4-0110574929.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d86e8805-7157-01ca-0444-f794ff853dc5.gif)

モバイルサイズの時だけ、
ヘッダーの色が変わっていますね！

最初は使い方に戸惑いますが、
慣れると簡単でとっても使える機能なので、
是非活用してみてくださいね！


# まとめ

最後にまとめです！
デバイス毎にレイアウトを変更したい場合は、
以下の手順で行っていきましょう:shamrock:

**ブレークポイントの設定手順**
1. Breakpointsの値を設定
1. 「Breakpoint Forking」のスイッチをON
1. ワークスペース上部のゲージをクリックし、Breakpointを設定
1. レイアウトの変更（要素の配置変更、テキストの変更等）を行う

また、
共通でレイアウトを適用したい箇所を変更する場合は、
「Breakpoint Forking」のスイッチをOFFにするのを忘れないようにしましょうね！

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

# 参考
[Design a Responsive Web App](https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Responsive_Design_8_2.htm)