ソーシャルメディアアプリは世界中で非常に人気がありますが、特にInstagramはその独自のビジュアル重視のプラットフォームで一世を風靡しました。そのスリークでユーザーフレンドリーなデザインは、多くの開発者にインスピレーションを与えています。
しかし、Instagramのようなアプリをゼロから作成するのは、時間も労力も必要な大規模なプロジェクトであることは明らかです。
ここで、ノーコードの「FlutterFlow（フラッターフロー）」が登場します。この強力なノーコードプラットフォームを使えば、インスタグラムに似たアプリを短時間で作成することが可能です。FlutterFlowの準備済みテンプレートを活用すれば、インスタグラム風のアプリを一瞬で作り出すことができます。
この記事では、FlutterFlowのテンプレートを用いて、どのようにして手軽かつスピーディにインスタグラム風のアプリを開発することができるのか、書いていきたいと思います。
そもそもFlutterFlow（フラッターフロー）とは？
FlutterFlow（フラッターフロー）とはネイティブアプリを開発できるノーコード（ローコード）ツールです。
コーディング無しで短期間でアプリを作れる上に、ノーコードとは思えない拡張性があり、さらに部分的にプログラミング（ローコード）することも可能なため、かなり複雑な機能も実装することができる非常に強力なツールです。
FlutterFlow の作成者によると、「これにより、開発者、起業家、組織は「10 倍速く」アプリを構築できます。」と話されています。10倍ってすごいですよね。。
詳しくはこちらをご覧ください。
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？
FlutterFlowのインスタグラム風テンプレート「FlutterFlowgram」
まずはFlutterFlowのマーケットプレイス行ってみましょう。
その検索窓から「instagram」などで検索するとすぐに以下のようなテンプレートが見つかるはずです。
これを選択すると、以下のような画面がでます。ここでView Liveを押すと試しに動かしてみることができます。
そしてClone Projectを押すことでこのアプリを自分のアプリとして使うことができます。
FlutterFlowgramのテンプレートの挙動はこんな感じ
さて、クローンしてfirebaseのIDを設定するなど多少準備するだけでこのアプリが使えるようになります。
実際の画面は以下のような感じです。
まず、会員登録の画面があります。
登録が済むと、以下のようなインスタっぽいホーム画面が現れます。
各投稿者が上げた記事・画像が並んでいます。ほとんどインスタですね。
ハートボタンでいいねしたり、お気に入り登録するのも当然できます。
プロフィールページからフォローもできますし、投稿数、フォロワー数、フォロー数もみれます。
検索ボタンから他の画像の検索も可能。
以下のような下から上がってくるようなUIも実現できています。
画面上部の登録ボタンから、以下のように画像の投稿ができます。
以下の例では画像の下にLearn moreという文字でボタンを表示させて、クリックしたらそのサイトに飛ばすように設定もできます。
記事の細かい設定ですね。場所やタグ付け、投稿のcountを表示するか、コメントを表示するかなどの設定もできるようですね。
もちろんマイページ機能もあり、プロフィール変更も可能です。
以下のように相手にフォローされている場合は「フォローバック」ボタンに変わり、フォローバックができます。
さらに、Messageボタンを押すと、相手とダイレクトメッセージでのチャットが可能です。
いかがでしょう？ものすごく高機能だと思いませんか？
これをもしゼロからスクラッチでプログラミングして作るとなると莫大な期間とお金がかかります。
それがこの一瞬で手に入る... 恐ろしい破壊力ですね。
FlutterFlow（フラッターフロー）のテンプレートでインスタグラムクローンの作成：まとめ
今日はFlutterFlowのテンプレートを使ってインスタグラムクローンアプリを見てみました。
いかがでしたでしょうか？
とても無料で手に入れたとは思えない高機能なアプリですよね。
もちろんテンプレートなのでバグもあったり多少のカスタマイズは必要になってきますが、それでも大半の機能は完成されていてものすごくクオリティの高い非常に有用なテンプレートだと思いました。
FlutterFlowはこのようにMarketPlace（まだベータ版だそうですが）さまざまなテンプレートが用意されているというのも魅力の一つですね。
ぜひ試してみてくださいね。
Youtube動画でFlutterFlowのインスタテンプレートについて確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。