目次-全章
12.1 flexboxとは
第11章までで、簡易版Twitterの機能が完成しました。
しかしブラウザの幅を狭めると表示が崩れたり、一覧とページング要素の間に余計な余白が発生したりしています。
これらを整理し、スマートフォンでもPCでも綺麗なレイアウトにするため、bubbleのレスポンシブ機能を利用します。
bubbleのレスポンシブ機能
レスポンシブの設定
bubbleでは、エレメントそれぞれに対し、最小値と最大値を設定することで自動的に横幅が決定することができます。
例えばログインページのログインボタンの「Make this element fixed-width」のチェックを外し、以下のように設定します。
Minimum width(% of current width) が 30 なので、横幅500pxを 500px × 0.3 = 150pxまで縮小する設定です。
Maximum width(% of current width)が100なので、横幅500pxを100% = 500pxまで広げる設定となります。
このように、各エレメントについて設定していくことで、画面幅に応じて横幅を変更することが可能です。ただし、高さについてはこのような設定が利用できません。
新レスポンシブエンジン
そこで数年前に開始されたのが新レスポンシブエンジンです。新レスポンシブエンジンはflexboxというデザイン要素（CSS）を利用しており、縦横ともに要素や最小・最大値に応じて自動的にレイアウトされる仕組みです。
flexboxとは
CSSのflex boxをご存じの方は読み飛ばしていただいて問題ありません。
flexboxとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。
以下のようなboxがそれぞれ存在した場合、左詰めにしたり、親boxの中で均等の幅にしたり、子要素の幅に合わせて親要素の幅を狭めたり、といった指定が簡単にできます。
もとの配置
左詰め配置
均等幅の配置
親要素を子要素に合わせる
これらは横位置だけでなく、縦位置に対しても可能です。
上に詰める、上下に配置し要素間に余白を持たせる、縦位置中央に配置する、などの例です。
また、子要素の横幅合計が親要素をはみ出した場合、自動的に折り返すことができます（設定によっては折り返しを禁止することもできますが、bubbleでは基本的に折り返しが適用されます）。
子要素がすべて横幅100pxで固定、親要素の横幅の最大値が300pxだったとします。子要素が4つ存在するので、子要素の横幅合計は400pxとなり、親要素の横幅を超えています。この場合、4つめの子要素は自動的に次の行に折り返されます。
この性質を利用して、PCなど横幅が広いデバイスでは要素を横並びに、スマートフォンなど横幅が狭いデバイスでは要素を縦並びにすることができます。ウェブサイトのグローバルナビゲーション（メニュー）でよく利用されています。
12.2 ヘッダーのレスポンシブ対応
第12章では、レスポンシブエンジンを利用して、画面のレスポンシブ対応を行っていきます。
第12章では、便宜上アプリをコピーしてレスポンシブを行っていますが、チュートリアルではアプリをコピーする必要はありません。
レスポンシブエンジンを適用する
レスポンシブエンジンを適用するには、Design > Responsive タブをクリックします。
ビジュアルエディタでHeaderを開き、Responsiveタブをクリックします。
ヘッダー全体をレスポンシブ化する
Headerのプロパティエディタを確認すると、今までと異なった構成になっています。
Appearanceはあまり変わりませんが、Layoutという新しいタブが存在します。このLayoutタブでエレメントの幅やflexboxの並び方などを設定していきます。
固定幅で構築したページやエレメントは、基本的に固定幅のままとなっています。HeaderのプロパティエディタのLayoutは以下のようになっています。
Container layoutがFixedになっています。ヘッダーではアプリケーション名やメニューリンクを横並びにしたいので、Rowを選択します。なお、Columnを選択すると縦並びになります。Align to parentを選択すると、親要素に対して子要素をどの位置にするか相対的に指定することになります。
Container layoutをRowに変更したことで、内部の要素が上寄せ、左詰めになったと思います。ここで、各エレメント間の余白を設定するには、Apply gap spacing between elementsにチェックを入れ、数字を入力します。もともとエレメント間の余白は24pxに設定していたので24pxにします。
flexboxの子要素は親要素の幅を超えると折り返しが自動で発生します。Row gapは折り返しが発生したときに縦位置の余白を指定するものです。
Headerのサイズですが、基本的に最小値を320pxとします。スマートフォン対応では最小値を320pxと考えてほぼ問題ありません。最近のスマートフォンでは横幅が375pxのものが多いですが、古い機種や小さめの機種にも対応するため320pxとします。
Min widthに320と入力しておきます。Max widthを空にしておくと、画面幅いっぱいまでエレメントを表示することになります。ヘッダーのオレンジ色の部分は画面幅いっぱいに表示すべき要素なので、Max widthは指定しません。
高さは、最小値にもともと設定していた100pxとします。
ヘッダーのpaddingを設定する
paddingとは、エレメント内部に設定する余白です。例えば20pxのpaddingを設定した場合、20pxを含めてエレメントの横幅と考えます。
ヘッダーでは、左に28px、上に16px、下に12pxの余白を設定していたので、paddingも同じように設定します。
ここまで設定したところで、コピーしたReusable elementのHeader_copyと見た目が一緒になっていることが確認できたでしょうか。
内部のエレメントの設定
次に、内部のエレメントの横幅の設定も変更しておきましょう。
アプリケーション名 AppNameでは、Min widhtが設定されていますが、Fit width to contentにチェックを入れます。AppNameは固定文字ですが、動的にテキストが変更になる場合、チェックを入れておくとテキスト幅に合わせて横幅を変更することができます。
Min heightを小さい値 10pxなどに変更し、Vertical AlignをMiddleにします。すると、エレメントの高さは文字が表示できる最小の高さになり、親エレメントの縦位置中央に設置されます。レスポンシブエンジンを利用する場合は、StyleのCenter the text verticallyを設定しなくても、縦位置中央に設定することができます。
この性質を利用して、Min widthを260px、Max widthを320pxにします。
ビジュアルエディタのResponsiveをクリックすると横幅に応じた外観を確認できます。スマートフォンの外観を確認するには320pxをクリックします。
先ほど、App Nameを最小値260px、最大値320pxにしましたが、タイムラインの文字を合わせると320pxを超えてしまうため、親エレメントの幅を超える要素は折り返して表示されます。
このようにして、横並びの設定でも折り返しを発生させたい場合は、最小値を調整して隣のエレメントが折り返されるようにします。
メニュー要素の余白を統一する
HeaderのColumn gapの設定により各エレメント間の余白は統一しましたが、タイムラインとマイページでは文字の長さが異なるので余白がバラバラに見えます。そのため、メニューリンクの各エレメントは横幅を小さい値に設定し、Fit contentにチェックを入れることで文字数に応じた横幅にします。高さもAppNameと同様に小さい値を設定しておき、最小の高さになるように設定します。
Linkエレメントは文字幅に合った横幅になり、エレメント間の余白が揃ったことが確認できます。
12.3 ログインページのレスポンシブ対応
レスポンシブエンジンを適用する
ページレイアウトをRowにし、Container alignmentをcenterにすると、Group Loginが横位置中央に配置されます。
ページのサイズについては、全てのページで以下のように設定します。
Width for UI builderについてはビジュアルエディタ上の横幅なので、あまり気にする必要はありません。基本的なPCの横幅程度にしておけば問題ないですが、Preset page widthでFull widthを選択すると1200になりますので、このままにします。
Min widthはスマートフォンの最小サイズ320にしておきます。
画面高さはエレメントの高さに合わせて自動的に調整されるので、Min heightを600くらいにしておけば問題ないです。
メインのエレメントをレスポンシブ対応する
loginページのメイン要素、Group Loginのlayoutは内部エレメントが縦に並んでいるので、Columnにします。Vertical alignmentはcenteredにしておきます。
横幅が固定幅になっているので、スマートフォンで表示したときに画面横幅より少し小さくなるようにMin widthは280px、Max widthは500pxとします。ただし、横幅は最大値まで広がってしまうので、PaddingのLeft、Rightに20pxを設定します。
今後、基本的にMax widthは固定幅で作成したサイズとしていきます。
エレメント間の余白は32pxだったので、layoutの「Apply gap spacing between elements」にチェックを入れ、Row gap(px)を32にします。
Min heightは100pxにしておきます。内部エレメントは100px以上あるので、高さは内部エレメントに合わせて調整されます。
内部のエレメントをレスポンシブ対応する
内部のエレメントについては、親エレメントに合わせてサイズを設定できます。
例えばPage Titleに対して、横幅を100%にします。こうすると自動的に親エレメントGroup Loginに対して100%の横幅になります。
Group Login内部のButton Loginについても同じように設定します。
Group Email、Group Passwordのグループは、Container layoutをColumnにし、Apply gap spacing between elementsにチェックを入れ、Row gapは16pxにします。
このように、エレメントが縦並びだとしてもエレメントの余白が異なる場合はGroup Emailのようにグループを作成してエレメントを内包しておくと便利です。
Group Emailの内部エレメントは横幅100%としておきます。
リンクの横幅を自動にする
Link ResetPassword、Link Signupについては、横幅を文字幅に合わせるため、Fit width to contentにチェックを入れます。横幅は実際のサイズより小さめに設定しておきます。
これでloginページのレスポンシブ対応は終わりです。
新規登録ページについても同じようなデザインなので、同様に設定しましょう。
Responsiveを確認する
Design > Responsiveをクリックして、横幅を色々と変更して確認します。
320pxで確認すると、Group Loginが画面いっぱいに表示されず、左右に余白ができていることが確認できます。
画像の赤枠部分をドラッグして、横幅を好きなサイズに変更できます。自由に変更して、表示が崩れないか確認しましょう。
12.4 タイムラインページのレスポンシブ対応
レスポンシブエンジンを適用する
homeページにレスポンシブエンジンを適用し、Container layoutはHeader、Bodyを縦に並べるため、Columnを選択します。
ヘッダーは画面幅いっぱいに表示するため、横幅を100%にします。
Bodyをレスポンシブ対応する
Body内部のGroup UserとTimeLineを横に並べるため、Container layoutはRowにします。Padding Left / Rightに20pxを設定しておきます。Apply gap spacing between elementsにチェックを入れ、column gap を34にします。
Group Userとその内部をレスポンシブ対応する
Group Userは画像とGroup UserInfoを横並びにするため、Container layoutをRow、Apply gap spacing between elements にチェックを入れColumn gapを20とします。横幅はもともと228pxですが、スマートフォンで表示したとき横幅いっぱいになるようにMax Widthを280pxにしておきます。
Group UserInfoはエレメントを縦並びにするため、Container layoutはColumnにし、Apply gap spacing between elements にチェックを入れColumn Capを8にします。横幅はMake this element fixed-widthのチェックを外しておきます。こうすると、Group Userの内部で、ユーザー画像とColumn Gapを除いたサイズまで自動で横幅を広げてくれます。
Group UserInfo内部のTextエレメントやLinkエレメントの横幅も同様に、Make this element fixed-widthのチェックを外します。
Fit height to contentにチェックがついていることを確認します。
TimeLineのレスポンシブ対応をする
TimeLineはスマートフォンのとき、Group Userの下に回り込み、横幅いっぱいに表示されるようにします。
投稿用のエレメントをグループ化する
事前に、Tweet、Save Tweet、PictureUploaderをGroup TweetEditというグループに入れておきます。3つのエレメントを選択した状態で右クリックし、Group element in a Column containerをクリックします。
3つのエレメントがGroupで囲まれますので、名称をGroup TweetEditに変更します。
TimeLineのレスポンシブ対応をする
TimeLineの各エレメントは縦に並ぶのでContainer layoutはColumn、Apply gap spacing between elementsにチェックを入れ、Apply gap spacing between elementsにチェックを入れ、Row gapは20とします。Min widthは280px、Min heightは100pxにします。
Group TweetEditのレスポンシブ対応をする
エレメントを縦並びにするため、Container layoutはColumn、Apply gap spacing between elementsにチェックを入れRow gapは10、Min widthは280px、Min heightは100pxにします。
内部のTweet、Picture Uploader、Save Tweetは横幅100%に設定します。
一覧表示をレスポンシブ対応する
Repeating Groupの横幅を280px〜にしておきます。また、このRepeating GroupのCell’s Container layoutはcolumnに設定します。
Group Tweetの内部エレメントTweet、Text CreatorName、Link Creator、Tweet Imageを選択し、Group elements in a Column containerでグループを作成します。（3章で既に設定してあります。）
このグループをGroup TweetDataという名称にします。
次にGroup TweetのContainer layoutをRow、Apply gap spacing between elementsにチェックを入れColumn gapを28にします。
横幅は100%、高さは小さめの100pxでFit height to contentにチェックを入れ、Paddingを設定します。
ユーザー画像をレスポンシブ対応する
Creator Imageのサイズを40px〜100pxとなるように設定します。画像やShapeは「Keep element aspect ratio fixed」にチェックを入れるとアスペクト比（縦横比）を保ったまま縮小されます。
投稿表示欄をレスポンシブ対応する
投稿表示欄Group TweetDataのサイズを以下のように設定します。すると、Creator Imageの横にGroup TweetDataが回り込むことが確認できます。
内部のText CreatorNameは横幅100%にし、高さはFit height to contentにチェックを入れます。これで、Group TweetDataの横幅いっぱいにユーザー名を表示します。ユーザー名が横幅より長かった場合でも、改行して高さは自動的に変化します。
Link Creatorは固定テキストのため、リンク幅が文字幅に一致するようFit width to contentにチェックを入れます。
TweetのサイズもText CreatorNameと同じように設定します。
Tweet ImageもKeep element aspect ratio fixedにチェックを入れます。
RepeatingGroup Tweetの高さを可変にする
Min heightを100pxにし、Fit height to contentにチェックをいれます。こうするとRepeatingGroupの高さがエレメントに合わせて自動で変化し、ページングとの間の余白がなくなります。
ページングをレスポンシブ対応する
ページングの数字は横並びなので、Container layoutをRowにします。Column gapを設定するとスマートフォンの時に横幅が入りきらないことがあるので、Container alignmentをSpace betweenにします。こうすると横幅に余裕がある場合、エレメントの間に余白が作成され、余裕がない場合は余白がなくなります。
横幅は280px〜とします。
RG Pagingの横幅は、280 – ( 22 × 2 ) = 236px に設定します。最大値の280pxから、Icon Prev、Icon Nextの横幅を引き算したサイズです。
内部のText Numberの横幅を30〜44pxにします。Text Numberの横幅が、RG Pagingに入りきるサイズです。
最後に、Icon Prev、Icon NextはVertical alignmentをcentered（高さ中央）にしておきます。
Responsiveタブで確認する
ここまで設定できたら、Responsiveタブで320px表示して確認します。エレメントが横幅からはみ出ていた場合は調整してください。
12.5 マイページのレスポンシブ対応
レスポンシブエンジンを適用する
mypageページにレスポンシブエンジンを適用し、Container layoutはHeader、Bodyを縦に並べるため、Columnを選択します。Row gapはhomeと同様に34pxを設定します。
基本的にページの設定はどのページも同じにします。
Headerの設定もHomeと同じです。
Bodyの設定も同じようにします。
ユーザー情報のレスポンシブ化
Group Userはエレメントが横並びなのでContainer layoutをRow、Column gapを20 、横幅を100%にします。
エレメントが入りきらなくなったので、User Imageを調整します。
Button Edit / Button Logoutの横幅も調整します。
Group UserInfoは、縦・横にエレメントが並んでいるため、まずユーザー名と投稿数をグループに入れます。次にフォロー数、フォロワー数、退会するリンクをグループに入れます。
それぞれ、Group UserText、Group UserLinkというグループに入れた状態です。
Group UserInfoの設定は以下の通りです。
Group UserTextを以下の通り設定します。Group UserLinkも設定内容は同じです。
内部のText、Linkエレメントは横幅100%、高さ Fit height to contentにチェックを入れます。
「退会する」リンクのみ、横幅が文字幅と同じになるようにします。
タブ要素のレスポンシブ化
タブを内包するGroup Tabは、Container layoutをRow、横幅を320〜600pxにします。横位置中央に表示されるようHorizontal alignmentをCenterにします。
各タブはスマートフォンでも入りきるように320pxの1/3幅を最小値としますが、BodyにPaddingが左右20pxずつ設定されているため、280pxの1/3幅とします。割り切れないので90pxとすれば問題ありません。
TimeLineをレスポンシブにする
TimeLineのレスポンシブについては、タイムラインページのレスポンシブ対応を参考に同じように設定しましょう。
このとき、homeのタイムラインで追加してあった投稿の画像も表示できるようにImageエレメントを追加しておきましょう。
また、TimeLineのCollapse when hiddenにはチェックを入れてください。チェックを入れないと、非表示のときもエレメントの高さ分が余白として表示されます。
Follow Userのレスポンシブ対応をする
Follow UserもTimeLineと同じような設定をしていきます。こちらもCollapse when hiddenにチェックを入れます。横幅やgapなどのサイズはTimeLineと同じです。
ユーザー情報を縦並びにするために、グループでまとめます。
RG FollowUserはContainer layoutをColumn、横幅100%とします。
Group FollowUserはContainer layoutをRow、横幅100%にします。
TimeLineのGroup Tweetエレメントと同様に、Paddingも設定しておきます。
やはり横幅がはみ出すため、フォローユーザーの画像サイズやボタンのサイズを調整していきます。
ユーザー画像のサイズを80〜100pxにします。
フォローボタン、フォロー解除ボタンは同じ設定にします。このボタンはどちらかしか表示されないため、Collapse when hiddenにチェックを入れておくと、ユーザー情報の横幅を広く利用できます。
先ほど作成したユーザー情報をまとめたグループGroup FollowUserInfoの設定は以下の通りです。最大値を設定していないため、ユーザー画像、フォローボタンを除いた横幅まで自動的に広がります。
内部のユーザー名、投稿数、フォロー数、フォロワー数の横幅を100%、Fit height to contentにチェックを設定します。
プロフィールを見るリンクのみ、Fit width to contentにチェックを入れておきます。
Follow Userのページングをレスポンシブにする
ページング要素はTimeLineのページングと同様の設定を行ってください。
Popupをレスポンシブ対応する
ビジュアルエディタで非表示になっているPopupを表示し、Container layoutをColumnにします。
スマートフォンのとき横幅より少し小さくなるようにMin widthを300px、Max widthはもともとの設定値にします。Row gapは16pxにしておきます。
また、余白を持たせたいので、Padding Top / Bottomに70、Left / Rightに20を設定します。
ここで、2つのボタン間の余白が気になるため、グループで内包します。ボタンのグループをGroup Buttonsとします。
Row gap、横幅などは以下を参考にしてください。ポップアップの横幅よりさらに少し狭くなるようにします。
ポップアップ内部のエレメントを中央寄せにし、横幅を260〜500pxで揃えます。
設定が完了すると以下のような外観になります。
最後に、Resoinsiveタブで横幅を変えながら確認してください。
12.6 ユーザーの一覧ページのレスポンシブ対応
レスポンシブエンジンを適用する
usersページにレスポンシブエンジンを適用し、Container layoutはHeader、Bodyを縦に並べるため、Columnを選択します。Row gapはhomeと同様に34pxを設定します。
Header、Bodyのレスポンシブ対応
usersページのHeader、Bodyの設定は、mypageとほぼ同じです。そのためここでは説明を割愛します。マイページのレスポンシブ対応を確認して、同じように設定してください。
Search Bodyのレスポンシブ対応
Search Body本体も、Bodyと同様にContainer layoutをColumn、Row gapを40、Padding Left / Rightを20pxにします。
Grourp Searchの横幅を最大600pxとし、親要素の中央に配置します。
このように最小値を設定しなかった場合、画面に入りきる最大サイズに自動で設定されます。スマートフォンなどで画面幅いっぱいに表示したいエレメントは最小値を設定しなくてもかまいません。
ここでは、上下にPaddingを設定しています。
検索ボックスとボタンのサイズはどちらももともとのサイズが最大値になるように設定します。
グループUserlistおよび内部は、他のページのフォローユーザー一覧と同様に設定します。
12.7 メールアドレス認証・送信ページのレスポンシブ対応
レスポンシブエンジンを適用する
email_authenticationページにレスポンシブエンジンを適用し、Container layoutはRowを選択します。
送信ページ（Group Auth）のレスポンシブ適用
Group AuthはContainer layoutをColumn、Row gapに32px、Collapse when hiddenにチェック、Vertical alignmentをMiddle、Padding Left / RIghtに20を設定します。横幅は280〜500pxにします。
Page Title、Group Email、Button Sendは横幅100%に設定します。
Group EmailはContainer layoutをColumn、Row gapを16にします。
Group Emailの内部エレメントの横幅も100%にします。
Link Loginのみ、横幅を小さく設定し、Fit width to contentを設定します。
Responsiveタブで確認する
Responsiveタブで横幅320pxにすると以下のように表示されます。
※Group AuthDone要素のCollapse when hiddenにチェックを入れてから確認してください。
12.8 メールアドレス認証・完了ページのレスポンシブ対応
完了ページ（Group AuthDone）のレスポンシブ適用
Group AuthDoneはContainer layoutをColumn、Row gapに32px、Collapse when hiddenにチェック、Vertical alignmentをMiddle、Padding Left / RIghtに20を設定します。横幅は280〜500pxにします。
内部エレメントのPage TItle、Text Auth Doneは横幅を100%に設定します。
Link Loginは横幅を小さくし、Fit width to contentを設定します。
Responsiveタブで確認する
Responsiveタブを横幅320pxで確認すると、以下のように表示されます。
12.9 パスワードリセット・送信ページのレスポンシブ対応
Responsiveエンジンを適用する
password_resetページもResponsiveエンジンを適用し、email_authenticationやloginと同様の設定をします。
送信ページ（Group SendEmail）のレスポンシブ適用
Group SendEmailのContainer layoutはColumn、Row gapは32、Collapse when hiddenにチェック、Vertical alignmentはmiddle、Padding Left / Rightに20を設定します。
Group SendEmailの内部エレメント、Page TItleの横幅を100%にします。
Group EmailはContainer layoutをColumn、Row gapを16、横幅を100%にします。高さを小さい値（50px）にし、Fit height to contentにチェックを入れておきます。
内部エレメントの横幅は100%にします。
Button Sendの横幅を100%にします。
Link Loginは横幅を100pxにし、Fit width to contentにチェックを入れます。
Responsiveタブで確認する
Responsiveタブを横幅320pxで確認すると、以下のように表示されます。
※Group SentEmailのCollapse when hiddenにチェックを入れておいてください。
12.10 パスワードリセット・完了ページのレスポンシブ対応
送信ページ（Group SendEmail）のレスポンシブ適用
Group SendEmailのContainer layoutはColumn、Row gapは32、Collapse when hiddenにチェック、Vertical alignmentはmiddle、Padding Left / Rightに20を設定します。
Group SentEmailの内部エレメントは横幅100%にします。
Link Loginのみ、横幅100pxにしてFit width to contentにチェックを入れます。
Responsiveタブで確認する
Responsiveタブを横幅320pxで確認すると、以下のように表示されます。
12.11 パスワード再設定ページのレスポンシブ対応
レスポンシブエンジンを適用する
reset_pwページは、レスポンシブエンジンを適用し、loginページなどヘッダーがないページと同様に設定します。
メインのエレメントをレスポンシブ対応する
Group ResetPwのContainer layoutはColumn、Row gapは32、Collapse when hiddenにチェック、Vertical alignmentはmiddle、Padding Left / Rightに20を設定します。
Group ReserPwの内部エレメントは横幅100%に設定します。Page Title、Button ResetPwの設定は以下の通りです。
Group Password、Group PasswordConfirmはContainer layoutをColumn、Row gapを16、横幅を100%にします。
それぞれのGroupの内部エレメントは横幅を100%にします。
Responsiveタブで確認する
Responsiveタブを横幅320pxで確認すると、以下のように表示されます。
12.12 退会ページのレスポンシブ対応
レスポンシブエンジンを適用する
withdrawalページは、homeなどヘッダーがあるページと同様に設定します。
Headerをレスポンシブ対応する
Headerは横幅いっぱいに表示させたいので、Widthを100％にします。
Bodyをレスポンシブ対応する
BodyのContainer layoutはColumn、Horizontal alignmentはcenter、横幅は320〜526px、Min heightは100pxにしFit height to contentにチェック、Padding Left / Rightに20を設定します。
Group WithdrawalのContainer layoutはColumn、Row gapは32、Collapse when hiddenにチェック、Horizontal alignmentはCenter、横幅を100%にします。
2つのボタンが縦に並んでしまっているので、グループで内包します。
作成したグループ Group Buttonsの設定は以下のようにします。
Group Withdrawalに戻り、Min heightを100px、Fit height to contentにチェックを入れます。内部エレメントの高さに合わせて、高さが変更されます。
Group Withdrawal内部のTextエレメントは横幅100%に設定します。
Group Withdrawal Confirmも同様に設定します。
内部のTextエレメントは横幅100%にします。
Linkエレメントは横幅100px、Fit width to contentにチェックを入れ、文字幅と同じ横幅にします。
Responsiveタブで確認する
Responsiveタブを横幅320pxで確認すると、以下のように表示されます。
12.13 最後に
第12章では、bubbleの新しいレスポンシブエンジンについて学びました。
flexboxの概念は最初は分かりづらいかもしれませんが、幅や高さを自動で変更してくれる柔軟なbox（箱）と考えてください。慣れてくると非常に便利で、現在ではスマートフォン対応している実際のウェブサイトのほとんどでflexboxが利用されています。
最初のうちは一つずつ設定してはResponsiveタブに移動し、どのように表示されるかを確認しながら設定していきましょう。
以上でチュートリアルのアプリケーションの作成が完了しました。
アプリケーションをプレビューするURLにスマートフォンやタブレットからアクセスして、アプリケーションを確認してみましょう。
レスポンシブ対応をする際にコピーされたページや、デフォルトで用意されていたReusable elementsなど不要なものは、ゴミ箱アイコンをクリックして削除して構いません。
アプリケーションの構築に慣れてきたら、以下のような順番でアプリケーションを構築できるようになるとより開発速度が上がります。
- データベースの設計をする
- 画面レイアウトを構築しながら、エレメントにデータを設定する
- ワークフローを構築する
- 同じようなレイアウトのページは、既存のページをクローンする
特に業務システムでは画面一覧と詳細ページといった組み合わせが多く存在します。このとき、全てのページレイアウトを作成してからデータの設定やワークフローの設定を行うと同じような設定を何度も行うことになります。同じレイアウトのページが複数存在するときは、1つ作成してからクローンして内容を変更した方が効率的に構築できます。
ぜひ試してみてください。
コメント