【初心者向け】FlutterFlowでネイティブアプリを作ってみよう。
Summary
TLDRこのビデオスクリプトでは、FlutterFlowというノーコードツールを使ってネイティブアプリ開発を体験する方法が紹介されています。FlutterFlowはFirebaseと連携し、データベースやストレージを活用してユーザー認証やデータ管理が可能にします。スクリプトでは、プロジェクトの設定からユーザー登録、データベースの操作、そしてアプリのUI作成までをステップバイステップで解説しており、初心者でも理解しやすい内容になっています。また、FlutterFlowの他のツールとの違いや学習コストについても触れられています。
Takeaways
- 🔧 フラッターフローはネイティブアプリをノーコードで作成できるツールです。
- 🗂 フラッターフローはファイアベースと連携してデータベースを利用できます。
- 📜 フラッターフローはフラッターのローコード版であり、ノーコードで作ったものをコードとして出力可能です。
- 🆚 バブルとアダロとの比較で、フラッターフローはネイティブアプリ作成に特化しています。
- 📊 ファイアベースとの連携設定では、プロジェクトIDの入力やユーザーとパーミッションの追加が必要です。
- 🔒 認証機能を使うためには、ファイアベースでサインインプロバイダーの設定を行います。
- 💾 ファイアベースのデータベースとストレージの設定を行い、テストモードで開始することが推奨されます。
- 🔄 フラッターフローでのデータベースクエリの設定により、ユーザー投稿の繰り返し表示が可能です。
- 🖼 画像やテキストのデータバインディングを設定して、ユーザーデータを表示します。
- 📋 サブコレクションを利用して、ユーザーと投稿データを関連付けることができます。
- 🔄 繰り返し項目のリストビューを設定して、投稿データを表示します。
- 📡 データベースからユーザー情報を取得し、ユーザーのプロフィール画像や名前を表示します。
- 🔍 データベースの階層構造を確認し、必要なフィールドを追加してデータを整理します。
- 🖥 フラッターフローのビルドプロセスでは、実際の動作確認に時間がかかることがあります。
- 🚀 アカウント作成やログイン機能を実装して、ユーザーインタラクションを設定します。
- 🔧 クエリ設定を行い、データベースから必要な情報を取得して表示します。
- 🔄 リストビューのデータバインディングを行い、動的なデータ表示を実現します。
- 📈 デプロイの手順を実行して、ファイアストアのルールをサーバーに反映します。
- 🏁 フラッターフローを使ったアプリ作成の初歩的なステップを学び、複雑な設定に挑戦します。
Q & A
フラッターフロートはどのようなツールですか?
-フラッターフロートはノーコードのツールで、ネイティブアプリを作り上げるためのフレームワークです。
なぜフラッターフロートは他のノーコードツールと比べて学習コストが高いと感じられるのですか?
-フラッターフロートは機能が豊富で強力な反面、設定やカスタマイズが複雑で、他のツールに比べて学習コストが高く感じられる可能性があります。
Firebaseとの連携にはどのようなステップが必要ですか?
-Firebaseとの連携には、プロジェクトIDの設定、ユーザー&パーミッションの追加、サービスアカウントの設定などが必要です。
サインアップページを作成する際、どのような情報を入力する必要がありますか?
-サインアップページを作成する際には、Eメールアドレス、パスワード、パスワードの確認などの情報が必要です。
エラーが発生した際に、どのように対処するべきですか?
-エラーが発生した場合は、エラーメッセージを確認し、必要に応じて設定を調整または削除することで対処することができます。
データベースのルール設定で何が問題となることがありますか?
-データベースのルール設定で問題となることとしては、if文の後がfalseになってしまっていることや、trueに設定する必要がある箇所があります。
ユーザーコレクションとは何ですか?
-ユーザーコレクションは、Firebaseで管理されるユーザーアカウントに関する情報を格納するデータ構造です。
投稿データを表示するためには、どのような手順が必要ですか?
-投稿データを表示するためには、リストビューを使用し、データベースから投稿データを取得し、各フィールドを適切に設定する必要があります。
ユーザーが投稿した内容をデータベースに保存する際にはどうすれば良いですか?
-ユーザーが投稿した内容をデータベースに保存する際には、ユーザー情報と投稿内容を適切な形式でデータベースに記録する必要があります。
ウェルカムメッセージにユーザーの名前を表示するにはどうすれば良いですか?
-ウェルカムメッセージにユーザーの名前を表示するには、認証情報からユーザーのディスプレイネームを取得し、メッセージに組み込む必要があります。
フラッターフロートでアプリを開発する際の利点とは何ですか?
-フラッターフロートでアプリを開発する利点としては、ノーコードで開発が可能な他、機能が豊富でカスタマイズ性が高いことが挙げられます。
Outlines
😀 フラッターフローの紹介とアプリ作成の意気込み
この段落では、ビデオ制作者がFlutter Flowというノーコードツールを使ってネイティブアプリを作成する意気込みを述べています。Flutter FlowはFirebaseと連携し、データベース接続が可能な特徴があると紹介されています。また、Flutter Flowはもともと存在するFlutterフレームワークのローコード版であり、ノーコードで開発したものをコードに変換できるという利点を強調しています。
🤔 他のツールとの違いとFlutter Flowの難しさ
ビデオ制作者は他のノーコードツールと比べ、Flutter Flowがネイティブアプリ開発に特化している点と、学習コストや開発時間が他のツールに比べて多くなる可能性について考察しています。特にBubbleやAdapptに比べ、Flutter Flowは機能豊富であるが、それ만큼複雑であることを示唆しています。
🛠 Firebaseとの連携とプロジェクトの初期設定
この段落では、Firebaseと連携するための設定手順が説明されています。Firebaseプロジェクトの作成、ユーザーの追加、サービスアカウントの設定、そしてFirebaseのルールの設定などが詳述されています。また、エラーの発生や解決方法についても触れられており、Firebaseの設定がFlutter Flowでのアプリ開発に不可欠であることが理解できます。
🔧 Flutter Flowでのユーザー登録機能の実装
ビデオ制作者はFlutter Flowでユーザー登録機能を実装するプロセスを紹介しています。エラーのトラブルシューティング、フィールドの設定、アクションの追加など、ユーザー登録ページを作成する手順が詳細に説明されています。また、実際に動作確認するために必要な手順も触れられています。
🔄 Firebaseでユーザーデータの確認と投稿データの作成
この段落では、Firebaseのユーザーコレクションを確認し、ユーザーが正しく登録されているかを検証するプロセスが説明されています。その後、投稿データを作成し、データベースに保存する方法についても詳述されています。データの階層構造や、ユーザー情報と投稿内容の関連付け方針が議論されています。
📝 Flutter Flowでソーシャルフィードを作成
ビデオ制作者はFlutter Flowでソーシャルフィードを作成する方法を紹介しています。リストビューの設定、データの表示方法、ユーザーポストの繰り返し表示など、UIの構成要素とデータの取得方法が詳細に説明されています。
🖼️ ユーザー情報の表示とデータのアップロード
この段落では、ユーザー情報の表示と画像データのアップロード方法について説明されています。ユーザードキュメントから画像と名前を取得し、UIに表示する方法が詳述されています。また、画像のアップロード先であるストレージの設定や、URLの取得方法についても触れられています。
👋 ウェルカムメッセージのカスタマイズ
ビデオ制作者は、ウェルカムメッセージをユーザー名に合わせてカスタマイズする方法を紹介しています。変数とテキストの組み合わせ方、ユーザー認証情報の取得方法などが詳細に説明されています。
🙏 制作者自身の学習状況と今後の展望
最後の段落では、ビデオ制作者が自身の学習状況について語り、Flutter Flowの機能の豊富さに触れています。また、今後の展望として、より良い方法やアプローチが見つかれば共有してほしいという要望を述べています。
Mindmap
Keywords
💡フラッターフロート
💡ノーコードツール
💡Firebase
💡ユーザーコレクション
💡サインアップページ
💡データベースルール
💡ストレージ
💡認証
💡サブコレクション
💡デプロイ
Highlights
Flutter Flowを使用してネイティブアプリの開発を始めることが可能で、初心者向けに簡単に説明されています。
Flutter Flowはノーコードツールであり、Firebaseと連携してデータベースを利用することが特徴です。
Flutter FlowはFlutterフレームワークのローコード版であり、開発を続けるためにコードを出力できる機能があります。
他のノーコードツールとの違いとして、BubbleはWebアプリ向けで、Adapptはネイティブアプリ向けの強力なツールであることが比較されています。
Flutter FlowはAdapptよりも学習コストが高く、開発時間が長くなる可能性があることが触れられています。
Firebaseとの連携を設定するために、プロジェクトIDの入力やユーザーパーミッションの設定が必要なステップが紹介されています。
認証機能を使用するために、メールアドレスとパスワードのサインインプロバイダーを設定する方法が説明されています。
Firebaseのデータベースを作成し、ルールの設定を行う手順が紹介されています。
Flutter Flowでユーザーコレクションを作成し、データベースとの連携を確認する方法が説明されています。
エラーの発生と解決方法が詳細に触れられており、Flutter Flowのデバッグプロセスが理解しやすく説明されています。
ユーザーアクションを定義し、アプリのナビゲーションを制御する方法が紹介されています。
Flutter Flowでサインアップページを作成し、ユーザー登録機能を実装する方法が詳細に説明されています。
データベースから取得した情報を使って、ユーザーインターフェースに表示する方法が紹介されています。
ユーザー情報の参照とサブコレクションの使用が、階層構造のデータ管理に使われていることが触れられています。
Flutter FlowのUI設計で繰り返し項目を扱う方法が、リストビューを使用して説明されています。
ユーザーインターフェースに表示されるデータの動的な更新方法が、変数とクエリの活用で紹介されています。
ウェルカムメッセージのカスタマイズ方法が、ユーザーのディスプレイネームを活用して説明されています。
Flutter Flowの使用感や学習曲線、開発者の視点からのアプリ開発の難しさと魅力が語られています。
Transcripts
はいそれでは始めたいと思います今日は
フラッターフローでネイティブアプリを
作ってみたいと思いますでその深いところ
までやらないですけどちょっとちょっと
だけ作ってみるみたいなところをちょっと
やってみたいなと思います
まずフラッターフロートはとかも簡単に
だけ説明したいと思いますフラッター
フローもノーコードのツールの一つで
ネイティブアプリを作れるノーコード
ツールですデータベース側データベースは
ファイアベスト接続されていましてで
大きい特徴とした行動出力できる基本的に
このフラッターというものがあるんですね
もともとフラッターっていう
ネイティブアプリを作るための
プログラミング言語があって
フレームワークと言えばいいですかね
フレームワークがあってそれの
ローコード版がフラッタフローですでなの
でノーコードで作ったものをコードを出力
できるのでその続きをフラッターで開発し
たりもできなくはないということらしいの
でそういうところが素晴らしいようです
はいで他の濃厚度ツールとの違いを
ちょっと僕の主観でちょっと話してみると
バブルとの違いはバブルはやっぱりWeb
アプリWEBサイトのすごいツール強力な
ツールだと思ってるんですけどこっちは
やっぱりネイティブアプリのツールですね
はいでアダルトの違いは
アダムはネイティブアプリを簡単に作れる
とても強力なツールで僕は大好きですけど
できることが圧倒的にフラットフローの方
が多そうだと思ってますで
反面めちゃめちゃ学習コストは変わるかな
とで時間もかかりそうな感じですアダルの
感覚で言うとあたろうの勉強量1とした
場合にフラッタフロー5くらい感じかな
作る時間も5倍くらいかかるんじゃないか
なって思ってもっとかかるすげえ簡単に
これできるんでそれと比較するとやっぱり
ちょっと多いかなって思ったりします
バブルと比べるとどっちかっていうと
バブルは僕はそこまでやり込んでないので
比較のしようがないですが僕の感覚で言う
とフラッターフローがちょっと難しいん
じゃないかなと思ったり人によるかもしれ
ないですねで思ったりしてますはいそんな
感じでですねじゃあちょっとまずやってみ
ないとわからないやってみたいなと思い
ますはい
まずフラッターフローに入るとクリエイト
ニューっていうところから新しく作って
いきたいと思いますじゃあプランクの
アプリを作ってアップ
適当な名前作ってやっていきたいと思い
ます
はいそうするとこんな感じで出てきて
セットアップファイアベースみたいな感じ
になってNEXTSTEPでファイア
ベースのプロジェクトIDを入れて
くださいとやはりファイアベースと連携
するのにとにかくファイアベース
なんとかしろよという感じみたいなんです
ねでですのでfirebaseの方に行き
たいなと思います
ファイアベースに行くとこんな感じで
ファイヤーベースのプロジェクトから
新しく作りますはいでレッツスタート
withname名前入れてくださいと
アップ9とか名前入れてコンティニューと
するとここでアナリティクス使いますか
みたいな話なんでアナリティクスを使い
ませんよと行きます
ともちろん使う時は使っていいんですけど
今回もとりあえず動けばいいので
とりあえず動くっていうのやってみたいと
思います
はいでコンティニューですねはい
でこんな感じで前アップ級が来ましたとで
ここで何個かやらなきゃいけないことが
あってまずはどこかなまずこのユーザー&
パーミッションですねプロジェクト
オーバービューのところのユーザーアンド
パーミッションズってところやりまして
ですね
ここでメンバーを追加してあげる必要が
あるんですね
これの情報どこに書いてるかっていうと
ちょっと戻ってこのアドファイアベースの
このドキュメンテーションみたいなところ
を見てみるとですね
リンクが貼ってあってクリックすると
ファイルセットアップなどのルールがこれ
めっちゃ書いてあってこれちゃんと読めば
できるようになってるんですがちゃんと
読むのちょっと大変なので僕が簡単に
かいつまんでるとですねここの
ファイブレスフラッターベスト
IOっていうユーザーを追加してください
と書いてるのでアドメンバーで追加して
ロールはエディターだそうですはい追加し
ました
とアドメンバーしました
はいこれでOKですねさらにこれだけじゃ
ダメでその
ロールをサービスアカウントユーザーと
クラウドファンクションアドミンってやつ
を
追加してあげなきゃいけないです
で
何も考えずにやっちゃいましたこの
アドバンスとパーミッションセッグって
いうところをクリックするとこんな画面に
来ましたその中にさっき追加したFire
ベースフラッターフロってやつがいるので
こいつの編集ボタンを押しますはいこんな
感じですねそうするとここでアドアナザー
ロールアナザーロールのところにさっきの
この人とこの人を追加しましたちゃう
クラウドファンクションアドミンを
追加しようとするとどうなるかというと
ここで検索するとクラウドファンクション
アドミンこれですとこれを選択しますあと
アナザーロールで
サービスアカウントユーザーですね
サービスアカウントユーザー
ないですねあれないな
台ですねちょっと一旦保留にしましょうか
このクラウドファンクションアドビンが
ない時は前あってその時はクラウド
ファンクションAPIのをこの
GoogleCLUBの方でnableに
してなきゃいけないっていうのがあったの
でそこはちょっとNMにするとこれが
見つかることがありますはいというのを
知ってたんですがこれがないのが
わかんないのでもう1回検索してみよう
サービスアカウント
いないですねちょっとこれはこういう風に
しましょうはい一旦これでセーブします
ちょっと後でこれで動かなくなったら戻っ
てきましょうはい
っていう感じでここで
設定しました
次にですねいくつか設定していきたいと
思いますここの
オーセンティフィケーションを
オーセンティケーション
オーセンティケーションですね大須
認証ですね例えばログインとかサイン
アップとかの
認証の話です
認証の機能を使うのでヘッドスターティっ
て
認証が使える状態にしましょうはいこんな
画面に来ましたでサインイン
プロバイダーズ例えばメールアドレスで
サインしたりSNSでログインしたりとは
よくありますよねで今回はEメールと
パスワードをnavorにしておき
ましょう
はいこんな感じですでどんどんいきますよ
次に
ビルドのところ行きまして
次はfirebaseデータベースですね
データベースファイアベースの
データベース
クリエイトデータベース
データベースを作ります
はいでここでプロダクションモードと
テストモードプロダクションと本番環境
ですよねなので本番にリリースするときは
こっち使えばいいと思うんですけど最初は
テストモードで全然いいでしょうはいで
ここでそのストレージがどこにあるか
エリアがあるのか例えばヨーロッパとか
です
とかなんか書いてありますけど日本にいる
人は日本のやつが東京とか大阪とかが東京
大阪とかあるんで近い方を選べばいいん
じゃないでしょうか
はいこんな画面になりましたはいこれで
作られたって感じですねはい
こんな感じで大丈夫かと思います
ルールのところでなんかここがフォルツに
なってたりifの後がホルスになってたり
すると
ダメだからtruにしなきゃいけないとか
があるかもしれないのでもしそういう方は
そういう風に変えてみてくださいちょっと
調べるとなんか出てくると思うんでもし
ハマったらそこ見てみてくださいという
感じですねじゃあファイアスとやりました
次は
ストレージですねストレージストレージ
このビルドの中のストレージというところ
に行ってこれも同じようにGetSTAR
ってテストモードで始めますストレージが
ないとデータを置くところが使えないので
これも有効にしておきましょう
ちょっと長いのでもうちょっとお待ち
ください
はいこんな感じで出来ましたとでも同じ
ように何か
ルールズのところで何か制約があったら
変えてあげるのがいいんじゃないでしょう
かとなんか大丈夫そうな感じするのでこの
まま進めますはいでそうするとですね
オーセンティブケーションと
オーセンティケーションとファイアベース
データベースとストレージの設定ができた
ので次はプロジェクトの
IDを取りますプロジェクトセッティング
のところからプロジェクトIDがこれです
ねプロジェクトIDプロジェクトオーバー
ビューのプロジェクトセッティングの
プロジェクトIDですねはいこれをコピー
して
いよいよようやくフラッターフローの画面
に戻って5スプロジェクトIDに入れて
Connect
しましたここでオートジェネレート
コンフィグファイルなんか設定ファイルを
自動的にジェネレートしてるみたいに言う
のでこれちょっとやってみましょう
チャンネル登録
これが押し忘れて動かなかったりもするの
で僕は何回も何でもかかないんだろう
みたいなのがありましたいろんな人に教え
てもらって覚えましたという感じで結構
ハマるポイントが多いので最初
戸惑うと思いますはいであとこの
nable
にしますとクリエイトユーザー
コレクションユーザーコレクションを作り
ますかってそうするとオートマティック
から意味アートがユーザーズコレクション
2ファイアベスト4ログインユーザー
仲間にユーザーズのコレクションを
データベースのコレクションを作って
あげるよみたいなこと言ってるんでオンに
しますはいセレクトイニシャルページこれ
でもオンにしなくては多分作る自分でその
後でも全然できますはい次にセレクト
イニシャルページエントリーページとログ
インページエントリーページは
一番最初に来るページでログインページは
ログインしてる人が一番最初に来るページ
だと思いますはいエントリーページは多分
サインアップページみたいなページだと
思うんでそれをこの時点で選んで作れって
言ってるんですけどこれ後からでも大丈夫
だと思います思うんですがまあせっかく
なんで作っちゃいましょう
大須ってところが認証系の画面が
いろいろあります色のテンプレートがある
のでそれを選びましょうって感じなんです
けどなんか黒くなってますよねこれなんか
ネットワークが遅いのか
画像が出てきてないだけな気が
しますねで私はサインアップページを
欲しいんですがどれがいいかな
ラインナップ
じゃあこれにしましょうか
ヘッド
スタート多分この辺のやつがいい気がする
んだけど前使ったのこの辺だった気がする
んだけどなんかこう絵が見えないから
わかんないな
これにしましょうかねこれ
usemySFレジスターってやつし
ましょうこれはサインアップクリエイト
にログインページ
ログイン
ページはホームだと思うんで
何でもいいかなんじゃ
リストみたいなページを購入しましょうか
Twitterみたいなやつをちょっと
選べてみましょうかTwitterえっと
インスタみたいなやつを選んでみましょう
こんな感じですねはいスタートメニュー
はいできました
こんな感じで
作りましたはいじゃあここでようやく
始まりますね
で
まずまずそうだなここからこの3本線の
ところをクリックするとここにサイン
アップとホームとか出てくるんでホーム
クリックするとこのホームの画面サイン
アップのページが出るサインアップこんな
感じですはいこの辺をやっていきたいん
ですがまずちょっと気になるので
この辺のですねバグこの
虫マークはバグですね
文字通りバグなんですけどエラーが発見出
てますまだ何もしてないのにエラーが
こんなに出るのはちょっとすごいやり
にくいですけどちょっとクリックしてみ
ましょうクリックしてみるとまずここで
WhenusingFacebookログ
インUSマスクプロバイダ
Facebookupnameどうのこう
のって書いてますFacebookログ
イン入れるんだったらFacebookの
何か設定しなきゃいけないよって怒られて
ますとはいえ私たちはFacebook
ログイン今やるつもりないんでメール
アドレスログインだけあればいいのでなん
ですけどテンプレートに自動的にこれが
ついてるからいけないっぽいですねで
こいつを消してあげ
ユーザーソーシャルプラット消してあげ
ましょうこの行もいらない消してあげ
ましょうはいなんかバグの数が減りました
ねはいいいでしょう次に
ウィ
ジェットコンフィグレーションマックスラインズマットピー
1forパスワードフィール何言ってん
のっていきなり思うんですけどこれですね
MAXライン最大業はmustB1個じゃ
なきゃいけないよ4パスワードフィールド
これですねパスワードフィールドの最大限
は1件じゃなきゃいけない何のことっても
最初思って絶対思うと思うんですけどここ
にMAXラインズこれが
複数行入力できるのが1行なのかみたいな
ところを設定するところがあるんですね
MAXラインこれを1って打てということ
言ってます
そうするとバグが5件から要件減りました
あとはマックスライズマスクこっちも一緒
かこれも同じようにマックス内の1にする
とまた番号1個減りましたねはいじゃあ次
行きましょうプロパティオーバーライド
ですストリングプロパティ
ノットプロパーリーセット
インデックスストリングプロパーティー
ザーネームを入れようとしてるのは
テキストが出るような状態にしたら戻り
ましたとはい次ウィ
ジェットコンフィグレーションこれなんか
いっぱいあって本当にこれ最初テンション
下がるというか心が折れると思うんですが
トグルアイコンリグワイヤーズいつ
バリュー2セットフロントファーストあ
これこれトグルアイコンなんですねトグル
アイコンですとトグルアイコンなんです
けど
トグルアイコンってこのデータベースと
連携してオンオフは切り替わるものだと
思うんですが
今はそのデータベースの設定とかできて
ないのでエラーになっちゃいますなんで
ちょっとこれ一回
削除しときますかとりあえず削除しとけば
エラにならないので
最後1個
トグルアイコンリクワイヤーこれどこだ
下の方にもあったこれも消しておき
ましょう後でまた必要になったらつけて
あげればいいのではいという感じでですね
バグが消えました
ファイアストアルールズのデプロイア
ストーンルールがデプロイされてないこれ
デプロイしなきゃいけないんですねデプロ
行ってデプロイの説明ちょっと難しいんで
割愛しますが
ファイアストアのルールとして
ネットでプロイドってなってる時にあり
ますそういう時にはデプロイしてあげると
ですねサーバーに反映して今作ってるもの
の情報が
デプロイされると
はいという感じでオールグリーンになり
ましたねはいこんな感じでバグがない状態
になりましたはいここからいろいろ作って
いきたいなと思いますはいまずちょっと
動かしてみたいですよねまずこのこんな
感じかっていうとまずこの目のマーク
プレビューアップをしてみると一旦動き
始めます
とはいでこれは実際に本当に動いてるわけ
じゃなくて見た目だけ確認してる状態に
なりますこんな風に中入れてみたりできる
んですけどログインとかをクリエイト
アカウントとかをしても画面が遷移はする
んですが何もならないという感じです
ただこんな見た目なのかっていうのだけ
ちょっと確認することができますそうじゃ
なくてちゃんとログインできるか確認し
たい場合はここのボタンを押します
そうすると別のタブでこんな風に
なって実際に動作確認をできるんですけど
も
thistakedtoslee
minute23分かかりますよって言わ
れてますと3分ちょっと
待つのは結構
精神的しんどいですよねっていうのが
ちょっと最大の
弱点かなと思ってるんですが
これしょうがないですねこれだけの
クオリティのパワフルなツールなのでその
くらい時間かかってもいいんじゃないかと
いう風に解釈しましょうはいというところ
でこれは一旦置いておいてですねそんな
23分待ってられないのでとりあえず作る
のを進めていきたいと思います
まずサインアップをするために
Eメールとパスワードとパスワードの確認
を入れてクリエイトアカウントしていき
ますとでクリエイトアカウントのところに
ですねまずこの右側のところ
ここを見てみましょうこの矢印これが
アクションですねアクション何か動作させ
るって言うところです
これを見るとですねオンタップオース
クリエイトアカウント
オースクリエイターアカウントデフォルト
で設定されてますねさすがテンプレート
いろんなこともやってくれてます
クリエイトアカウントでEメールと
EメールフィールドEメールアドレスと
Eメールアドレスパスワードパソコン
ファームクリエイトユーザードキュメント
がオンみたいな感じもこれこのままその
まま使えるので特に問題ないと思います
はいだけどこのアクション一つだと
クリエイトアカウントした瞬間に
クリエイトアカウントしただけで次の
ページに遷移とかができないのでそれを
追加しましょうこのオープンなところを
押すとですねアクションがいろいろこんな
感じですね例えばこんな条件付けたりして
こんな感じでですね
なんとなくイメージわかりますかねこんな
感じでどんどんどんどん例えばある条件が
あって条件がTRUEだったらこっちの
アクションやってそうじゃなかったら
こっちのアクションやってその時に
条件がこうだったらどうやるみたいな
こんな風にアクションをどんどんどんどん
つないでいくことができるというのは
面白いところですねはい1回消します
はいで今はまず1個目にさっき言った
EメールとかEメールアドレスとか
パスワードとかの
定義だけやってます
はいここにプラスボタンでアドアクション
からですね
ナビゲート
ホームみたいなのをやるとホームに遷移し
ますよはいタップした時のイベントがそう
ですはいクローズ
はいそれではですねやってみましょう今
ちょっと今飛ばしちゃいましたこのボタン
を押してですねビルドしましたで23分
かかりますかかった後の状態に今なって
おりますはいそうするとこんな状態になり
ましたこれからGetSTAR始め
ましょう例えばテストでちゃんと行く
ランプ
.comみたいな適当なメールアドレスを
入れて
123456とか適当な
メールアドレスとパスワードを入れて
クリエイトアカウントしますそうすると
はいこのホームのページに遷移されました
ログインされたようですじゃあ
ユーザーが作られたかどうかをちょっと
確認してみたいと思いますえーとですね
こちらのデータベースのところ
データベースここかなはいここでこう
いろいろタブがありますが一番左のところ
にユーザーコレクションがあります
ユーザーズってありますねこれが
この今フラットフォローのプロジェクトで
持ってるコレクションですこれはファイア
ベースと連携されていますはいマネージ
コンテトってのクリックすると
くるくるしてますが少々お待ちください
はいこんな感じでですねさっき入力が
ちょっと小さくて見にくいですがテスト
01とイグザンプルドットコムっていう
さっき入力した
Eメールが
Eメールのユーザーが登録されています
はい
でちょっと戻りまして
ここのユーザーズっていうのがこのさっき
のEメールディスプレイネームとかそう
いうことURLとかありますけどこれは
フラクタルフローが自動的に作ってくれて
いるやつですねはいでさらにさっきこの
画面でユーザーが登録されているところを
見ましたが実際にFireベースの中身を
見てみるのが一番いいかなと思う
firebaseに戻りますワイヤベース
の方に行きまして
データベースのところにもユーザーズの中
にひとつなく謎の文字列ですけどこれが
IDになってると思うんですねユーザーの
中に1つデータがあってその中に
クリエイティタイムが
2月に24日の今の時間が出てますね今の
時間はいでえっとメールアドレスはさっき
のメールアドレスこの
微妙になって文字列がユニークID
F5ベースが作ってくれたIDになります
はいこんな感じでデータが作られている
ことが分かりました
ではですね
ではこのホーム画面の方に行きましょうと
ホーム画面に
データを作っていきたいなと思いますで
ここに表示するためのまずデータベースを
作っていきたいですデータベースと行く
かっていうのと今ユーザーズってのがあっ
たんですがこれ以外にもう1個追加し
ましょう+ボタンからじゃあ記事の投稿
するのでポスつっていうのをクリエイトし
ますはい
この例えばプロダクツとか選べるんです
けどchooseテンプレート
コレクションよくあるデータベースの構造
はなんかこの用意してくれるらしいんです
ね例えば
プロダクツとかでやるとプロダクツだっ
たら普通に名前とかディスクリプションと
か
プライスとかあるでしょみたいなこと言っ
てくれるですね
すごくありがたいですねはいですが今回は
ゼロから作りましょう
オフィスで作って
フロムスクラッチから作ります例えば
タイトルですね
文字なのでストリングにしますで他には
テスクリプションと
説明ですね
スクリーン
これも文字でいいでしょうと
であとは
イメージですね
イメージフォト
あとは
フォトパスってのがあるんでフォトパスの
方にしましょうはい
一旦こんな感じでいいかな
あとは
何だっけユーザー
誰が作ったか知りたいなクリエイターを
やりましょうドキュメントリファレンス
リファレンスで参照ですね他の
データベースコレクションとつなげる時
ですしますこんな感じです
でこんな感じで作ってもいいと思うんです
がそうじゃなくてですね
例えば作る時に
タップするみたいな
伊豆サブコレクションというのもあります
これを使うとどうなるかというとその親を
決められてユーザーズに紐付いてる投稿
みたいな感じにすることができますそう
するとどうなるかって言うと
ユーザーズの下にポストがあるっていう
状態になってそこでスクラッチで作ると
いう感じになるので誰の何々っていうの
こういう階層構造にするかそれともそう
じゃなくて別のものにしてこちらから
リファレンスでつなぐかみたいなことが
選べるようですでちょっとこれまだ
使い分けを私は正直わかっておりませんと
いう感じなんですが
何個か見た動画でこういう時には
ユーザーズの下にサブコレクションで
投稿データ入れることの方が多いように
感じましたということでそっちを真似して
みますはい保湿っていうのにして親を
ユーザーにしてクリエイトしてみましょう
このやり方でちょっとやってみたいと思い
ますフロムラッチでちょっと同じことです
がタイトル
この辺まで僕も勉強中なので
皆さんこっちの方がいいよっていうのが
あったらぜひ教えてください
あと何ですかねタイトルでスクリプション
4と
一旦大丈夫かな一旦これにしておき
ましょうかはいで後で足りなくなったら
追加しましょうこんな感じですね
やりましたこっちの方でこれテンプレート
の構造どうなってるかっていうと
ちょっとこの構造を説明するのが最初
難しいんですけどちょっと1回ちょっと
その説明するのも大変なのでまずそうです
ね
ここのここですねこのソーシャルフィー
ドっていうのがあって
ソーシャルフィードの中にユーザーポスト
があってユーザーポストが
何個もある状態になってますね
よく見ていくと
わかるんですけど本当は繰り返し項目なの
にデザイン上2個わざわざ作ってるって
感じなので2個目のこのユーザーポストっ
てやつを1回デリート単純にしましょう
はい
この状態からちょっと作っていきたいなと
思います
これが
繰り返しなのでまずリスト
項目にしなきゃいけないですという感じな
んでこのソーシャルフィールドのところに
リストビューっていう
リストですねちょっとアダルとかで言う
リストと同じなんですねリストビューって
のが出てきますでここにこのソーシャル
フィーユーザーポストをコントロールXで
切り取って
リストビューの中にコントロールしてあげ
て中に入れてあげましょうはいこれで
リストビューが繰り返し
項目になりました
こんな感じですねはいじゃあこの
リストビューが
繰り返しコメントのリストビューにデータ
を入れてみましょう
リストビューにアドバックエンドというか
ここにありますこのここですねハード
バックエンドクエリでクエリコレクション
から
投稿データを取ってきますとでビュー
ソースで
コレクションのポストでビューソースで
fromバリアブルー
変数から持ってきます何の変数から持って
きますかとなると
この
違うごめんなさい全部表示すればいいです
ね一旦忘れてくださいもう1回行きますね
1回キャンセルはいはいアドバンのクエリ
ですでクエリコレクションでクエリの情報
を
投稿ポストのクエリの情報持ってきますで
バリューソースでクエリオールサブ
コレクションズ全部持ってきますよという
感じでクエリのタイプはリストですよと
リストで多分シングルドキュメントっての
は1個のドキュメントを取ってくると
ドキュメントって言ってるのは
データベースの一つ一つの
項目だけですけど
項目でデータって言えばいいですかデータ
なんですけどそれが
複数あるのでリストですよという感じです
はい特にフィルターとかオーダリング
順番に並び替えですねとか絞り込みは今は
ちょっと一旦なしでこれコンファームして
みましょう
はいそうするとここにデータベースが取っ
てきた用マークみたいなクエリ
コレクションマークが表示されましたその
状態でここのサークルにこの
イメージとかクリックしましょう
イメージは
イメージはここにパス
セットフロンバリオングルってあるので
変数から取ってきましょうそうすると
さっきデータベースの設定したことによっ
てデータベース設定データベースから取得
してくる設定をしたことによってポスト
ドキュメントというのが出てきますポスト
ドキュメントからフォト写真を撮ってき
ますはいこれで表示されるようになりまし
た
であとはここにテキストがあるのでこれを
ちょっとタイトルにしましょうかセット
フロンバリアブルで
ホストドキュメントのタイトルこんな感じ
ですねはいいかがでしょうか
で
[音楽]
こんな感じでじゃあ次に
ここですね
ここはこの
投稿を書いたユーザーの写真とユーザーの
名前を撮ってきたいですよねそうしたい
場合どうするかって言うと
ポストドキュメントの音じゃないですね
ポストドキュメントの
リファレンスの人の
画像を出したいんですけどそれがちょっと
取れないですよこれだとパレート
リファレンスの人になっちゃうんで
画像の情報がないとどうしたらいいかと
いうとここのじゃあこの
これのですね
これユーザーインフォっていうところここ
がユーザーインフレちょうどここがいいと
思いますこのユーザインフォのところに
データベースの設定をしてあげましょう
この
バックエンドクエリーで
ドキュメント
ドキュメントフロムリファレンス
リファレンス
参照からドキュメント持っていきましょう
じゃあ何のドキュメントですかユーザー
ですでこれが
オーセンティフィケーションのユーザー
リファレンス
オーセンティブ
ユーザーオーセンティケーティっていうの
は認証してるユーザーなのでログインし
てるユーザーアダルトで言うとログイン
ユーザーですねにそこのユーザー
リファレンスユーザー情報の参照があり
ますよでこれをしますそうすると
ここの
行1行の中にユーザー情報はもう取ってき
てる状態ですねその状態でこちらの
画像を撮ってこようとした場合に画像に
ユーザードキュメントってのがさっきは実
はなかったんですけどこれが表示される
ようになりましたそこでフォトURLを
クリックしますはいじゃあこちらも同じ
ようにですねセットフロムバリアブル変数
から設定するってところで
ユーザードキュメントの
ディスプレイニングにしましょうかはい
こんな感じですねはい
これで表示されるようになるはずですが
されないかなと思いますそれだとちょっと
困るのでデータを入れてみたいと思います
はいえっとこちらですねさっきの5ベース
データベース5ベースデータベースの
ところにユーザー情報はこんな感じで
EメールとIDとクリエイトタイムが自動
的に作られた分と
Eメールだけ入ってる状態ですとでここに
さっき我々が
想定したようなユーザーの図の下にポスト
が入っているというようなタイトルの
ディスクリプションのフォトがあるという
同じような構成同じようなじゃない全く
同じ構成で
データを作ってあげることでうまく動く
ようになりますまずユーザーのところに
足りない情報としてユーザーのところには
もともとここにフォトのURLと
ディスプレイネームがあるのでそれを
ちょっと同じの追加してあげましょうアド
フィールドから
ディスプレイ
打ち間違えると全然ダメになっちゃうので
同じように作ってください
ディスプレイネームで
テスト太郎っていう名前にしてみますはい
でさらにここにですねもう一個追加して
何でしたっけフォトURLでしたとURL
ここをやってみましょう
そしてバリュー設定していきたいですこの
valuっていうのはフォトのURLなの
で
まさにフォトのURLタブで開きますが
はいストレージのところにはデータ置き場
には何もない状態ですここでアップロード
ファイルとかで
例えば人の画像とかを置きます
とそのURLを作ってあげればいいです
ちょっとついでなので他の食べ物の画像と
かもちょっと置いてみます
はいじゃあこんな感じで置いといて後で
使いますこの今作ったこのURLはこれか
なこのアップロードして言われるこれなの
でこの
URLをコピーして
さっきのところにここのフォトURLの
ところにバリューのところにこれですね
httphttpsなんとかってこれを
貼り付けますとはいこれでここにURLが
登録できたと思いますはいまずこれで
ユーザーズの設定ができました
ディスプレイネームとURF4とURLを
設定しました次にこちらのユーザーの下に
階層としてポストを入れてるのでこれも
入れてみたいと思います
ユーザーズの下の階層にここですねこの
ここの階層に
スタートコレクション
をコレクション入れますこれでポストです
ねコレクションIDPostを入れますで
ドキュメントIDこれは自動的に設定さ
れるのでオートIDってやると勝手になん
か変なID作ってくれますこれはこんな
もんだと思った方がいいと思いますじゃあ
次フィールド何でしたっけえっとタイトル
ディスクリプションポートタイトルここに
タイトルが例えばピザ
って書いてアドフィールド
ディスクリプション
膝最高って書いてアドフィールドで
フォト
フォトみたいな感じにしてこれは
ストリングでいいかなでここにさっきの
ピザピザURLをですねこれを
貼ります
こんな感じもう一個くらいいきましょう
コレクションでもう1回個室で今度も
オートでタイトル
何だっけなんか何の画像あげたっけ
お肉か
です
ディスクリプションこんな感じかなで
ここにさっきの貼り付けた
URLをここに置きますはいこんな感じで
できましたあれなんか階層違うからもしか
してなんか間違ったかな
間違ったかもしれないのでちょっと確認し
ます
ユーザーズのこのユーザーズの中に
こういうユーザー情報ポストの中に1つ
あってあ
これが間違いですねこいつ間違いだ
これデリートドキュメントします
もう1回やりますすいません
ですねここにオートIDでタイトルピザ
ここに
音で
膝のことは
膝のことを言われるを入れます
お肉のURLはこれです
はいこんな感じでポストの中に2つ並び
ましたねピザとお肉こういう感じですね
はいはいOKですこの状態でちょっと
動かしてみるとさっきはこれをもう1回
リロードしてみると
では次にもう一つwelcomeなんとか
ここをウェルカムを日本語でようこそに
ようこそようこそ
これをまるまるさんみたいな感じにし
ましょうなので
〇〇さんみたいにするためにはセット
フロムバリアブルで
オーセンティケイトユーザーログインして
ユーザーですねその人の
ディスプレイネームを表示しますなんです
けどこれを何とか3みたいにしたいので
セットフローバリウムからこれをちょっと
やめて今みたいな感じで取れるんですけど
そうじゃなくてコンバインテキスト
コンバイン
くっつけるですねコンバインなのでアド
テキストするテキストとかに何個もできる
となんでこっちの方はこのTマークから
フロントバリアブルでセットして
オーセンティケーユーザーのディスプレイ
ネームにしてあげてこっちを3ってやると
例えば太郎さんみたいな感じになるという
感じでこんな感じにしてみましたこれで
ちょっと動かしてみましょう
インスタントリロード
こんな感じでいかがでしょうかここまで
来るだけで結構時間思ったりかかっちゃっ
たなと思うんですが最初のファイヤー
ベースの設定とかがまず重いのでなんか
ちょっと
つきにくいなっていう印象があるかなと
思いますが
やってみるとものすごいいろんなことが
できるのでちょっとノーコードとは言え
ないくらい
素晴らしい機能が
盛りだくさんなのかなと思っていますただ
私自身もまだまだ勉強中なのでいろんな
こうやった方がもっといいよみたいのが
あったらどんどん教えていただければと
思います今日はここまでにしたいと思い
ますありがとうございました
5.0 / 5 (0 votes)