twitter のような簡単な SNS を bubble で作ってみる（新レスポンシブ版）

みなさん、こんにちは！今回は、新しいシリーズ記事のご紹介です。

本シリーズでは、ノーコードラボで過去にご紹介した「 twitter のような簡単な SNS を bubble で作ってみる（入門者向け）」を、昨年11月にリリースされた新レスポンシブ機能に対応させた内容で、改めてご紹介していきたいと思います！

初めてBubbleを触る方にも、既にBubblerだけど新レスポンシブ機能は触ったことがないという方にも、できるだけ分かりやすく解説していきますので、是非ご参考いただければと思います。

まずは、Bubbleに新しく登場した「新レスポンシブエンジン」についてざっくりと紹介しますね。

新レスポンシブについて

正しくレイアウトする際に、従来はFixedしかありませんでしたが、新レスポンシブではColmun,Row,Align to parentが追加されより使いやすく簡単になりました。

bubble公式ドキュメントによると、新エンジンで作成されたページのレンダリングは、旧エンジンに比べて大幅に高速化されていて、ページの読み込みやサイズ変更時の要素の描画速度が大幅に改善されているようです。

旧レスポンシブでは不可能だったり、CSSを書く必要があったデザインにも新レスポンシブであれば対応できる可能性があります。

旧レスポンシブと比べてエディターの構成に違いがあります。しかし、今回のシリーズを通して新レスポンシブの使い方もマスターできるかと思います。

すでに旧レスポンシブでアプリを作成していて、新レスポンシブへ変換した時にデザインが崩れることがあります。念のためバックアップをとっておいた方が良いでしょう。バックアップのやり方についてはシリーズの中で紹介しています。

新レスポンシブに対応していない場合、旧レスポンシブのやり方でレイアウトを整える必要があります。

新レスポンシブについて知りたい方は、以下のURLの記事でより詳しく紹介しているのでご参考にしてください。

旧レスポンシブ版での twitter clone を作成する記事はすでに全て公開済みです。また、旧シリーズの方では、作り方を解説した動画コンテンツもあります。もし、そちらを見たい方という方は、以下URLの記事をご参考くださいね。