ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。Chatbot の運用実験は終了しました。ご協力いただいたみなさん、ありがとうございました。

【TYOITETU】旧レスポンシブから新レスポンシブへの移行

皆さん初めましてこの度記事を書かせてもらうTYOITETUを運営している佐藤と申します。

blog.nocodelab.jp

今現在旧レスポンシブで作ったアプリを新レスポンシブに対応させている最中という方も多いのではないでしょうか?まさにTYOITETUもそうです。 この度その過程を実例を交えながら説明することが出来れば皆さんのヒントに少しでもなるのではないかと記事を書いてみました! また6月30日からBubbleでは新レスポンシブがデフォルト仕様になったということで時期的にもまさにタイムリーだと思ってます。

それでは早速新レスポンシブ対応させていきましょう。 TYOITETUのほぼ全てのページで使っているReusable elementのHeaderを例に見ていきます。

1.構造を確認する

Headerを新レスポンシブに切り替える前にどのような構成になっているか一度確認しておきます。

Elements treeから大体の構造を把握しておきます
そして「Pick an element」をクリックし、このHeaderの中でどれだけのReusable elementが使われているかも確認しておきます。

水色で囲ったセクションにReusable elementがまとまっています

TYOITETUのヘッダーはざっくりと以下のような構成になっていて

  • Header
    • PC用ヘッダー部
    • スマホ用ヘッダー部
    • ブランク(PC用とスマホ用の高さ差分調整用Group)

その中でReusable elementは合計6つ使用していることが確認できました。

2.Headerのクローンを作ろう

旧レスポンシブから新レスポンシブに切り替える際は左上の「Upgrade responsive [beta]」をクリックすることで行えます。

その時「Copy this element to retain a legacy backup」にチェックを入れておくと新レスポンシブへ切り替わると同時に旧レスポンシブのコピーも作成されるのですが、この機能は使わずに「Add new reusable element」から複製しそれを新レスポンシブに移行させます。

はやる気持ちをおさえて「UPGRADE」はまだ我慢です

理由としては、思わぬ不具合のもととなる新旧のレスポンシブが混合している状態を極力避けるためです。 特に今回のように複数の画面で使われるHeaderの場合全ページのHeaderのみが新レスポンシブへ移行され新旧のレスポンシブが混合した状態になりやすいので、それぞれのページごとに新レスポンシブ対応できるよう元のHeaderは触らずに「Add new reusable element」から作成したクローンを新レスポンシブ対応します。

そのReusable elementの参照箇所が少ない場合や、その要素の全ての親ページがすでに新レスポンシブに切り替わっている場合はAdd new reusable elementでクローンを作成せずにそのまま「Copy this element to retain a legacy backup」にチェックを入れてやるといいかと思います。*1

ではHeaderをクローンして、新しく作成した方のHeaderで「Upgrade responsive [beta]」を押して新レスポンシブに切り替えましょう。 その際「Copy this element to retain a legacy backup」のチェックは外しておきます。 また「Restructure element to match existing responsive behavior*2」については今回は使用しません。

切り替わったらまずはHeaderの大元のContainer layoutをFixedからColumnに変更します。 すると重なっていたヘッダー要素が縦に並びました。

PC用(上)とスマホ用(下)

2-1.スマホ版の対応

先にスマホ版ヘッダーから直していきます。中の要素は横並びにさせたいのでContainer layoutをRowにします。 間違って途中Columnを経由してしまったこともあって並び順がおかしくなってしまいました。これを一つずつ直していきます。

まずはログインユーザーのアイコンからです。これは現在一番左にきているReusable elementがそうですが本来は右端の位置です。 このユーザーアイコンも別のReusable elementから使用されているため、一旦Add new reusable elementからクローンを作成してから新レスポンシブに切り替えます。

新ユーザーアイコンを右端に設置し旧ユーザーアイコンを削除したのですが旧ユーザーアイコンのあった位置に不自然な余白ができています。 これは旧アイコンをGroupで包むような構造にしていたためで、内側の旧アイコンだけを削除したため包んでいた方のGroupが残っていました。不要になったこのGroupも削除します。 このように旧レスポンシブ仕様のために色々と工夫したGroupが動作の妨げになる場合が多いのでこまめにチェックすることをお勧めします。 本当に要らないものかどうかを調べるにはElement inspectorを使います。その要素のウィンドウの右上にあるiアイコンを押せば表示されるので、そこから参照されているWorkflowやConditionalが分かります。 *3

ユーザーアイコンの位置はヘッダーの右側に寄せておきたいのでここでテクニックの1つとして余白用のグループを間に挟んでみましょう

間に挟んだGroupのContainer layoutをColumnやRowにし、「Make this element fixed-width」と「Fit width to content(後述)」のチェックを外すと横に伸びて隙間を埋める要素になってくれます。 これでアイコンをHeaderの右端に寄せることができました。

大分綺麗になりましたがスマホ版Headerの上下左右の余白が気になります。これも調整をしていきましょう。 はじめに子要素のVertical alignmentで上下中どこに寄せるか決めておきます。TYOITETUでは全て中央に寄せておきます

その後、親要素との余白は親のPadding、子要素同士の余白は子要素のMarginや親要素のApply gap spacing between elementsで設定します。 とりあえず親要素の左右のPaddingを設定しました。右端の2種類アイコンについてはどちらか一方のみが表示されるようにしたいのでMarginは特に設定していません。

未ログイン時表示
ログイン時表示

Responsiveモードで動きを確認してみましょう。下の方にある「User logged in(toggle)」をポチポチすれば表示が切り替わるはずです。 ですが何の変化もありませんでした…

右端に表示されるはずのアイコンがない…

こういう時は横幅が固定されていたり、最小・最大幅がされてしまっている可能性がありますのでそれを確認してみます。

親Groupの最小幅が1200pxとなっていたことが原因でした。これを0pxに修正してアイコンが表示されない(画面外に出てしまう)問題の解決です。 旧レスポンシブから新レスポンシブに移行させると全てのGroupのContainer layoutがFixedに設定されるためこのようなことが頻発します。あせらずにwidthの設定を確認してみましょう。

アイコンが表示されるようになりました

先ほどの「User logged in(toggle)」を押してみるとアイコンは切り替わりましたが青いアイコンが非表示になったぶんのスペースがそのまま残っていますね。

そんな時には「Collapse when hidden」です。 新レスポンシブでは親要素がFixed以外の時、全ての子要素に「Collapse when hidden」が設定できるようになりましたのでこれにチェックを入れてやります。 この項目にチェックが入っているとその要素が非表示の時にできるスペースを詰めることができます。 他の項目の位置をずらしたくない場合は「Collapse when hidden」のチェックを外しておくといいでしょう。

だいぶよくなりました

最後にハンバーガーメニューとTYOITETUのロゴの位置も修正します。

ハンバーガーメニューにはReusable elementが使われているため、いっそ新レスポンシブで1から作り直しちゃいます。 Container layoutをColumnにしてLinkとTextを詰め込み、アイコンがクリックされたらGroupFocusが表示されるようにしました。 利用規約にはTopにマージンを設定してあります。

古いハンバーガーは削除し新しく作成したものに入れ替えます。適当においても2クリックで位置を調整できるのが楽でいいですよね。

Before
After

2-2.PC版の対応

PC版のHeaderもContainer layoutをRowに変更します。

Before
After
スマホ版の時よりもだいぶ崩れてしまいました。

ロゴ部分が横に並んだせいでかなりのスペースを圧迫しているのでまずこれを修正します。 「掲示板からちょいっとお手伝い」と「TYOITETU」をShiftを押しながらクリックしてこの二つを選択状態にし、右クリックから「Group elements in an Align-to-parent container」を選択します。

「Align-to-parent」は親要素を9分割した中から子要素をどこに寄せるか設定できるものです。複数の子要素で同じ位置を指定すれば重ねて表示させることもできたりします。 「掲示板からちょいっとお手伝い」は左上に、「TYOITETU」は右下に配置します。

この二つを包むGroupのサイズ・位置を調整すればロゴの対応は完了です。

続いてヘッダーの右側部分を調整していきます。 ここでもReusable elementは使われているので必要に応じてそれぞれ新レスポンシブのものに置き換えます。

そうして置き換えを進めていると不可解な動きをするReusable elementに出てきました。 現象としてはAlign to parentの上下左右どの位置に配置しようとしても真ん中に表示されてしまうというものです。

これは通知の数を表示するために作成した「badge_number_outline」というものですが、構造自体はいたってシンプルでText要素が一つあるだけです。

原因は「badge_number_outline」を配置した時に「Fit width(height) to content」のチェックを入れていなかったことによるものでした。 それによってReusable elementの透明な部分が親グループいっぱいに広がってしまい、中身の「赤い丸」が微動だにしなくなるというちょっとした罠(?)にはまっていました。 なので「Fit width(height) to content」にチェックを入れて親グループのサイズを調整してやれば、思った通りに「吹き出しの右上に通知を重ねて表示」させることができるようになりました。

これらは書き込みアイコン以外はユーザーログインの有無で表示/非表示が切り替わるので「Collapse when hidden」にチェックを入れます。

右側に余白ができましたのでスマホ版と同じくGroupを使って右に寄せます。 さらにこのGroupを複数使えば等間隔の余白を設定することができます。(新レスポンシブめちゃ便利!!)

仕上げに全体の子要素のVertical alignmentを中央に設定するとかなり整いました。 あとの細かな微調整はMargin・Paddingを駆使してお好みでといったかんじでしょうか。

3.動作確認

最後にtest_pageというページを作成し、新Headerを配置してPreviewから動作の確認を行います。 今回はページを新しく作りますが、既存ページを新レスポンシブに切り替える際も ・シンプルな構造のページの場合は直接そのページを新レスポンシブにする ・複雑な構造のページの場合は「Add a new page」から作成したクローンを新レスポンシブにする など臨機応変に対応してみてください、あまりに複雑な構造のページはいっそ1から新しく作り直したほうが早いなんてこともあります。

では、Add a new pageからtest_pageを作成します。

このページを新レスポンシブに切り替えてContainer layoutをColumnにしたら新Headerを配置し、Previewを起動します。

Conditionalから画面幅を参照してPC/スマホのヘッダーを切り替えるように設定してあるので画面を縮めると途中でスマホ用のヘッダーに切り替わります。OKですね。

これで完了かと思いきやこのヘッダー、縮みはしますが伸びません。画面サイズが大きくなると右側に意図しない余白ができてしまいます。

実はHeaderにmax widthが指定されているためでした。

このmax widthを削除して空にしてやることで無事1200px以上でも隙間なく表示できるようになります。

この高さと幅の最大/最小の初期値についてはReusable elementから設定できます。 これは新レスポンシブへ切り替える際に自動で設定されていますのでご注意ください。

Reusable element のUI builderから設定できる「Min width」「Max width」「Min height」「Max height」はあくまでページに置いた時の初期値ですので、既にページに配置されているものとは連動しません。 また、「Width for UI builer」はUI builder上で表示されるサイズを指定できるだけなので、実施のページ上での動作には一切影響しません。

あとはこれらの作業をひたすら繰り返して少しずつ新レスポンシブへの移行を進めていきましょう。

4.最後に

今回は「旧レスポンシブから新レスポンシブへの移行」について実例を交えてご紹介しました。 この記事が少しでも皆さんの助けになれば幸いです。

5.脚注

*1:虫眼鏡アイコンをクリックすると検索窓が出現するのでそこから調べることができます。

Headerをクローンせずに新レスポンシブへ移行してしまうと27ページ全てで対応が必要になります

*2:「旧レスポンシブ動作に(可能な限り)一致するように要素を再構築する」という機能です。 注意点として元のレイアウトによってはBoxやRowといったGroupが自動的に生成され、複雑なレイアウトだった場合さらに複雑になることが多々あります。 必ずしも完璧に再現できるというわけではないので、よっぽど急ぎでもなければこの機能は使わない方が無難でしょう。 ちなみにvisible on page loadやHiding rule、Conditionalなどはこのチェックを入れなくても新レスポンシブに引き継がれます。

Box_ というGroupが自動で生成されました

*3:

どこかから参照されている場合、Events・Actions・Other elementsに「〜 is clicked」など使用されている箇所が表示され、それをクリックすると対象の箇所へジャンプできます。