こんにちは。今回はノーコード（ローコード）のFlutterFlow（FlutterFlow）でX（Twitter:ツイッター）のようなSNSアプリを作ってみたいと思います。
ノーコード（ローコード）でもFlutterFlowはかなり複雑な機能も実装できるため、シンプルなものであればSNSアプリを作れてしまいます。
この記事では、まずFlutterFlowでの開発の大きな流れをざっくりと共有し、
その後具体的な作り方をYoutube動画で解説していきたいと思います。
TwitterクローンSNSアプリ、完成イメージはこんな感じ
SNSアプリの完成イメージ動画
こんな感じをゴールに作っていきます。
想定機能はこんな感じ。
ツイートの一覧
ツイートの投稿
ツイートの詳細
ツイートのリプライ
画像／動画の投稿
アカウント登録
ログイン
マイページ
いいね機能
プロフィールページ
フォロー／フォロー解除
ブロック
通知一覧
では実際に作る大まかな流れを動画で解説しています。
FlutterFlowでの開発の大きな流れ
まず最初にFlutterFlowで開発する際の大きな流れをざっと解説したいと思います。
1. プロジェクト作成／Firebaseの設定
まずはFlutterFlowのプロジェクトを作成し、firebaseの設定です。これによりFlutterFlowとfirebaseとが接続できるようになります。
以前は結構firebaseの設定が大変だったのですが、FlutterFlowが進化して簡単にfirebase接続ができるようになりました。
参考：【最新版2023.11】flutterflowから簡単にfirebaseが設定できるようになった！
2. データベースの設計／構築
次に、データベースを設計・構築していきます。
以下画像はユーザー情報を入れるusersコレクションや、コンテンツ情報を入れるcontentsの例です。（詳しくが動画参照）
3. UIの作成（画面の作成）
次はUI（ユーザーインターフェーズ）、簡単にいうと画面を作っていきます。
FlutterFlowでは豊富なテンプレートも用意されているため、テンプレートからも選択可能です。
FlutterFlowでは豊富なテンプレートを用意しています。例えば今回はログイン・サインアップページなどはゼロから作らずテンプレートから用意したりしています。
4. アクションの設定
例えばボタンを押した時の挙動などを定義していきます。以下のようにGUIで操作できるので簡単ですね。
第1回：プロジェクト作成からアカウント登録、ツイートの一覧・投稿まで
いよいよここからは実際の作り方を解説していきます。
こちらの第一回の動画では以下のように、FlutterFlowのプロジェクトの作成からfirebaseとの設定、ツイート投稿などの機能の実装を解説しています。
FlutterFlowのプロジェクト作成
firebaseの設定など
ツイートの一覧
ツイートの投稿
アカウント登録
ログイン
マイページ
第2回：いいね機能
第2回では、いいね機能の実装について解説をしています。
いいね機能
いいね解除機能
第3回：ユーザープロフィール、フォロー／フォロー解除
第3回では、プロフィールページの作成とフォロー／フォロー解除機能を解説しています。
プロフィールページの作成
フォロー機能
フォロー解除機能
第4回：画像／動画の投稿
第4回では、ツイート投稿する際に画像と動画の投稿機能も追加しています。
画像投稿
動画投稿
画像および動画の一覧表示
第5回：投稿詳細およびリプライ機能
第5回では投稿（ツイート）の詳細ページを作成し、そこにリプライをしてリプライ一覧を表示する機能を追加しています。
投稿詳細ページ
リプライ
リプライ一覧
第6回：フォローしている人の投稿一覧
第6回ではフォローした人の投稿だけが表示される投稿一覧を作ってみます。
フォローしている人の投稿一覧
第7回：ブロック機能
第7回ではユーザーのブロック機能を作ってみます。
ブロック機能
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。