こんにちは。今回はノーコード（ローコード）の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回：プロジェクト作成からアカウント登録、ツイートの一覧・投稿までいよいよここからは実際の作り方を解説していきます。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fd2tJ4Cy46Hw%3Fsi%3DxxBKDfTlLBnDFWwK%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eこちらの第一回の動画では以下のように、FlutterFlowのプロジェクトの作成からfirebaseとの設定、ツイート投稿などの機能の実装を解説しています。FlutterFlowのプロジェクト作成firebaseの設定などツイートの一覧ツイートの投稿アカウント登録ログインマイページ第2回：いいね機能%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FWY_YgaQkKcg%3Fsi%3DGjtEtU8G7GFecMQV%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E第2回では、いいね機能の実装について解説をしています。いいね機能いいね解除機能第3回：ユーザープロフィール、フォロー／フォロー解除%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fy_Y-AKKLBHM%3Fsi%3DbbKEL-Spq9j25T5L%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E第3回では、プロフィールページの作成とフォロー／フォロー解除機能を解説しています。プロフィールページの作成フォロー機能フォロー解除機能第4回：画像／動画の投稿%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FmelgSv5_meo%3Fsi%3DLe-0fHjF0lrQLp8S%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E第4回では、ツイート投稿する際に画像と動画の投稿機能も追加しています。画像投稿動画投稿画像および動画の一覧表示第5回：投稿詳細およびリプライ機能%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FK-mYl0rYilY%3Fsi%3D9AxJ023AmvyrIZz6%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E第5回では投稿（ツイート）の詳細ページを作成し、そこにリプライをしてリプライ一覧を表示する機能を追加しています。投稿詳細ページリプライリプライ一覧第6回：フォローしている人の投稿一覧%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FtWjSpvM_1mU%3Fsi%3D7nQnnVM-jkpKXg9q%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E第6回ではフォローした人の投稿だけが表示される投稿一覧を作ってみます。フォローしている人の投稿一覧第7回：ブロック機能%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F1xAOuLa_gs8%3Fsi%3D1kyGkU_nxlB4QcQ6%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E第7回ではユーザーのブロック機能を作ってみます。ブロック機能アプリ・Webサービスの開発の無料相談はこちらAdalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。