前回の続き

Responsiveタブをクリックし、設定をしていきます。

• 各要素をクリックすると、エディタ画面が出てきます。
• ここの各項目を解説してきます。

①【Fixed width】

• ここにチェックを入れると画面幅が変わってもデフォルトのサイズを維持し続けます。
• つまりデフォルトのサイズが最小幅であり最大幅になります。

②【Current minimum width】

• 「Fixed width」のチェックを外すと、この項目が出てきます。
• ここでは要素の最小幅を設定できます。

③【Apply a max width】

• 「Fixed width」のチェックを外すと、この項目が出てきます。
• ここにチェックを入れると要素の最大幅を設定できます。

④【Fixed margin】

• 「左詰め、中央、右詰め」のいずれかを選択できます。
• 「左（または右）詰め」を選択すると、画面幅が変わっても左（または右）の余白を維持します。
• ここでポイントなのは“親要素との余白”に対して適用されるという点です。
• 「中央」を選択した場合は、左右両方の余白が縮小（拡大）されていきます。
• （この中央にした場合のアルゴリズムがまだあまり分かっていません）

Fixed marginに関しては、動画で実際の動きを見てもらいながらあらためて解説します。

⑤【Add hiding rule (Hide when parent width)】

• 「Fixed width」のチェックを外すと出てきます。
• 親要素（例えばグループ）の幅が指定した数字以下（以上）になると、
• その要素を隠す設定ができます。
• この設定によって隠された要素は、ページ内でのスペースがなくなります。
• 尚、どこのグループにも属していない要素の親要素はindex（デフォルト名）になります。

⑥【Collapse margins when container width】

• 「Fixed width」のチェックを外すと出てきます。
• 要素の幅が指定した数字以下になると、左右の余白を削除します。

• 画面を縮小した時、例えばスマホの画面で、
• 画像やテキスト、ボタンなどの要素を横幅いっぱいに表示したい時に利用したりします。

⑦【Wrap to previous line if the page is stretched】

• チェックを入れると、画面幅が拡大した時に複数行の文章を前の行に折り返して表示できます。

⑧【Keep element proportions】

• image要素の「Fixed width」のチェックを外すと出てきます。
• ここにチェックを入れると、幅に対して高さの比率を維持したまま画像が縮小（拡大）していきます。

• 画面中央に配置されている「グループ大(背景:赤)」の中に
• 「グループ小（背景:黄）」と「子要素」を配置し、「グループ小」の中に「孫要素」を配置しました。

「各要素のレスポンシブの設定」

• グループ大→「Fixed width」にチェックし、「Fixed margin」を中央に設定
• グループ小→「Fixed width」にチェックし、「Fixed margin」を右詰めに設定
• 子要素→「Fixed width」にチェックし、「Fixed margin」を左詰めに設定
• 孫要素→「Fixed width」にチェックし、「Fixed margin」を左詰めに設定

上記のレスポンシブ設定の結果を動画でお見せします。

• グループ大（背景:赤）

• 画面幅が「グループ大（背景:赤）」のサイズ以下になるまでは、左右の空白が均等に縮小されています。
• ちなみに、ページのbodyを設定するときに編集をした「index」が親要素になっています。

• グループ小（背景:黄）

• 親要素の「グループ大（背景:赤）」に対して右側の余白を維持しています。
• そのため、要素の左側が切れています。

• 子要素（背景:青）

• 親要素の「グループ大（背景:赤）」に対して左側の余白を維持しています。

• 孫要素（背景:緑）

• 親要素の「グループ小（背景:黄）」に対して左側の余白を維持しています。
• そのため、要素の右側が切れてます。

• 今の段階では、全ての要素に「Fixed width」のチェックを入っていますが、
• 「グループ小（背景:黄）」と「孫要素（背景:緑）」の「Fixed width」を外し、
• 「Current minimum width」を10％に設定した場合の動画でお見せします。

• グループ小（背景:黄）

• 親要素の「グループ大（背景:赤）」に対して右側の余白を維持しているのは同じですが、
• 最小幅を10％（49px）に設定したため、要素が縮小されて「グループ大（背景:赤）」の中に収まっています。

• 孫要素（背景:緑）

• 親要素の「グループ小（背景:黄）」に対して左側の余白を維持しているのは同じですが、
• 最小幅を10％（12px）に設定したため、要素の幅が12pxまで縮小した後、
• 左側の余白を維持するため右側にズレていっています。

• ページのサイズが変わると、余白より先に要素が縮小（拡大）する。
• 要素が最小幅（最大幅）になっていると余白が縮小（拡大）する。

この辺りのことがわかってくるかと思います。

ここまでノーコードでも最も優れていると思われるバベルの解説を３回に分けてやってきましたが、本格的なアプリケーションを作るとなると、
使わないかなというのが結論です。

コードや開発の設定の記録ができないため、
保守性も低いというのもそうですが、
「技術者がいないか学習する時間とれないため、漠然とノーコードに魅力を感じているのではないか」とも思います。

バベルの導入をするときにしっかりした技術者がいるのかどうか、
そしてリリースされたサービスが2年以上更新され続けて存在するというケースがあるのかも疑わしいと感じます。

ときどきノーコードを耳にするので、
ちょっとサービスを作ってみて改めてそう感じました。

まだノーコードは道半ばではないかと思いますが、

機械学習も実は数年前からデファクトスタンダードとしては完成してるので、
比較的近い将来、「エンジニアのコードがDB設計とビジネスロジックからインターフェースとして使えるレベルのものくらいまでは自動生成される」というところまでは行くのではないかと感じます。

カニ。