ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

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

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

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

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

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

新レスポンシブについて

新レスポンシブの特徴

①開発スピードと使いやすさ

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

②パフォーマンス

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

③より柔軟なデザインに対応

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

新レスポンシブの注意点

①従来のエンジンと比べて異なるので、習得に時間がかかる場合がある

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

②新レスポンシブに変換する際にバックアップをとった方が良い(バックアップを取る機能がある)

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

③ 新レスポンシブエンジンに対応してないプラグインがある

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

補足

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

blog.nocodelab.jp

旧 twitter clone 記事のコンテンツ紹介

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

blog.nocodelab.jp

新レスポンシブ版について

前提条件

  • Bubble の無料アカウントを登録済み。ログインしておいてください。
  • Bubble を初めて触る人向け

目的

  • Bubble を最初に触る人向けに簡単な機能や新レスポンシブの使い方を紹介する
  • 既存のアプリを新レスポンシブ化したい人に使い方を紹介する

作成方針

  • Bubble の操作方法については丁寧に説明する。
  • デザインについてはそれっぽく作れれば OK。
  • DB 設計、ワークフローについては操作方法を丁寧に説明する。
  • セキュリティは今回は考えない。
  • ユーザー登録やログインに関しては最低限とする。

コンテンツ一覧

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

※記事公開により、順次追加されていきます。