こんにちは。今回はFlutterFlowでSNSアプリを作ってみたいと思います。FlutterFlowはノーコード・ローコードでかなり複雑なネイティブアプリを作れる強力なアプリ開発ツールです。以下の記事もご参考まで。ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？Adaloとの違いも合わせて解説FlutterFlowは、ゼロから作る「スクラッチ開発」と比較するとかなり簡単に短期間で作れますが、それでも他のノーコードツールと比較すると難易度は高く、学習期間も長くかかります。今回は、初学者向けにFlutterFlowのアプリの作り方を書いていきたいと思います。このページではざっくりとした流れを解説しつつ、詳細は最後に動画でも説明してますので、細かい点は動画の方もみてみてください。FlutterFlowとFirebaseの初期設定まずはFlutterFlowとFirebaseの初期設定が必要です。その辺はこちらを参考にしてみてください。https://citrusapp.jp/posts/flutterflow-simple-apphttps://citrusapp.jp/posts/nocode-flutterflow-build-signupホーム画面の追加ホーム画面を追加します。ホーム画面はSNSの一覧画面っぽいのがいいのですが、ゼロから作るのも面倒なのでテンプレートから選んでみます。結構素敵なテンプレートが多い印象なので、これらを使ってカスタマイズするのがいいと思います。データベースのコレクションの登録まずはデータベースにコレクションを追加しましょう。記事を投稿する画面を作りたいので記事データを入れておく「Collection」というデータを作ります。（ユーザーデータを格納するUsersというCollectionは初期化するときに自動生成しておきましょう）ListViewを追加するListViewはその名の通りリストなので、この中に入れたものを繰り返し表示することができます。テンプレートには不要な項目もあるので削除し、そしてメインのコンテンツをListViewの中に入れましょう。ListViewにBackEndQueryを設定する。ListViewの右側のパネルの左から3番目のアイコンをクリックすると「Add BackEnd Query」というものが現れます。これはデータベースからデータをとってくる命令を作れるところですね。今回は、Query Collectionを選択し、Collectionをcontentsにし、そしてQueryTypeをList of DocumentにすればOKです。画像やタイトルを設定するデータベースからcontentsのリストを取ってこれたので、今度はその値を画像やタイトルに設定します。↑上記画像のように、Imageを選択し、Image TypeをNetworkにし、Pathのところからcontents Documentのpost_urlを選択します。次はタイトルですね。↑上記画像のように、タイトルにしたいTextを選択して、「Text」の領域からcontents Documentのtitleを選択しましょう。これでシンプルな一覧画面の設定は完了です。次回は登録機能も作っていきたいと思います。Youtube動画で確認したい方はこちら%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FZL2Zqgd0KwE%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この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。※ノーコードの開発事例については以下もご覧ください。【ノーコード事例】アプリ開発の成功事例16選！ツールの選び方も説明！アプリ・Webサービスの開発の無料相談はこちらAdalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。