【初心者向け】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
00:02はいそれでは始めたいと思います今日は
00:05フラッターフローでネイティブアプリを
00:08作ってみたいと思いますでその深いところ
00:12までやらないですけどちょっとちょっと
00:13だけ作ってみるみたいなところをちょっと
00:15やってみたいなと思います
00:17まずフラッターフロートはとかも簡単に
00:19だけ説明したいと思いますフラッター
00:21フローもノーコードのツールの一つで
00:23ネイティブアプリを作れるノーコード
00:25ツールですデータベース側データベースは
00:28ファイアベスト接続されていましてで
00:31大きい特徴とした行動出力できる基本的に
00:34このフラッターというものがあるんですね
00:36もともとフラッターっていう
00:39ネイティブアプリを作るための
00:40プログラミング言語があって
00:42フレームワークと言えばいいですかね
00:44フレームワークがあってそれの
00:47ローコード版がフラッタフローですでなの
00:49でノーコードで作ったものをコードを出力
00:52できるのでその続きをフラッターで開発し
00:55たりもできなくはないということらしいの
00:58でそういうところが素晴らしいようです
00:59はいで他の濃厚度ツールとの違いを
01:02ちょっと僕の主観でちょっと話してみると
01:05バブルとの違いはバブルはやっぱりWeb
01:08アプリWEBサイトのすごいツール強力な
01:12ツールだと思ってるんですけどこっちは
01:14やっぱりネイティブアプリのツールですね
01:15はいでアダルトの違いは
01:21アダムはネイティブアプリを簡単に作れる
01:23とても強力なツールで僕は大好きですけど
01:26できることが圧倒的にフラットフローの方
01:29が多そうだと思ってますで
01:33反面めちゃめちゃ学習コストは変わるかな
01:35とで時間もかかりそうな感じですアダルの
01:39感覚で言うとあたろうの勉強量1とした
01:42場合にフラッタフロー5くらい感じかな
01:45作る時間も5倍くらいかかるんじゃないか
01:49なって思ってもっとかかるすげえ簡単に
01:51これできるんでそれと比較するとやっぱり
01:53ちょっと多いかなって思ったりします
01:54バブルと比べるとどっちかっていうと
01:56バブルは僕はそこまでやり込んでないので
01:59比較のしようがないですが僕の感覚で言う
02:01とフラッターフローがちょっと難しいん
02:03じゃないかなと思ったり人によるかもしれ
02:05ないですねで思ったりしてますはいそんな
02:08感じでですねじゃあちょっとまずやってみ
02:09ないとわからないやってみたいなと思い
02:11ますはい
02:13まずフラッターフローに入るとクリエイト
02:15ニューっていうところから新しく作って
02:17いきたいと思いますじゃあプランクの
02:19アプリを作ってアップ
02:25適当な名前作ってやっていきたいと思い
02:26ます
02:28はいそうするとこんな感じで出てきて
02:30セットアップファイアベースみたいな感じ
02:32になってNEXTSTEPでファイア
02:35ベースのプロジェクトIDを入れて
02:36くださいとやはりファイアベースと連携
02:38するのにとにかくファイアベース
02:40なんとかしろよという感じみたいなんです
02:43ねでですのでfirebaseの方に行き
02:46たいなと思います
02:52ファイアベースに行くとこんな感じで
02:54ファイヤーベースのプロジェクトから
02:55新しく作りますはいでレッツスタート
02:58withname名前入れてくださいと
03:00アップ9とか名前入れてコンティニューと
03:04するとここでアナリティクス使いますか
03:07みたいな話なんでアナリティクスを使い
03:09ませんよと行きます
03:12ともちろん使う時は使っていいんですけど
03:14今回もとりあえず動けばいいので
03:16とりあえず動くっていうのやってみたいと
03:18思います
03:24はいでコンティニューですねはい
03:28でこんな感じで前アップ級が来ましたとで
03:32ここで何個かやらなきゃいけないことが
03:34あってまずはどこかなまずこのユーザー&
03:39パーミッションですねプロジェクト
03:40オーバービューのところのユーザーアンド
03:42パーミッションズってところやりまして
03:44ですね
03:45ここでメンバーを追加してあげる必要が
03:48あるんですね
03:50これの情報どこに書いてるかっていうと
03:53ちょっと戻ってこのアドファイアベースの
03:55このドキュメンテーションみたいなところ
03:57を見てみるとですね
03:58リンクが貼ってあってクリックすると
04:00ファイルセットアップなどのルールがこれ
04:03めっちゃ書いてあってこれちゃんと読めば
04:04できるようになってるんですがちゃんと
04:06読むのちょっと大変なので僕が簡単に
04:08かいつまんでるとですねここの
04:10ファイブレスフラッターベスト
04:12IOっていうユーザーを追加してください
04:14と書いてるのでアドメンバーで追加して
04:16ロールはエディターだそうですはい追加し
04:19ました
04:20とアドメンバーしました
04:23はいこれでOKですねさらにこれだけじゃ
04:25ダメでその
04:28ロールをサービスアカウントユーザーと
04:31クラウドファンクションアドミンってやつ
04:32を
04:33追加してあげなきゃいけないです
04:40で
04:41何も考えずにやっちゃいましたこの
04:44アドバンスとパーミッションセッグって
04:45いうところをクリックするとこんな画面に
04:47来ましたその中にさっき追加したFire
04:49ベースフラッターフロってやつがいるので
04:51こいつの編集ボタンを押しますはいこんな
04:54感じですねそうするとここでアドアナザー
04:58ロールアナザーロールのところにさっきの
05:00この人とこの人を追加しましたちゃう
05:03クラウドファンクションアドミンを
05:06追加しようとするとどうなるかというと
05:08ここで検索するとクラウドファンクション
05:11アドミンこれですとこれを選択しますあと
05:14アナザーロールで
05:16サービスアカウントユーザーですね
05:21サービスアカウントユーザー
05:28ないですねあれないな
05:32台ですねちょっと一旦保留にしましょうか
05:36このクラウドファンクションアドビンが
05:38ない時は前あってその時はクラウド
05:42ファンクションAPIのをこの
05:45GoogleCLUBの方でnableに
05:47してなきゃいけないっていうのがあったの
05:48でそこはちょっとNMにするとこれが
05:51見つかることがありますはいというのを
05:53知ってたんですがこれがないのが
05:56わかんないのでもう1回検索してみよう
05:59サービスアカウント
06:06いないですねちょっとこれはこういう風に
06:08しましょうはい一旦これでセーブします
06:10ちょっと後でこれで動かなくなったら戻っ
06:12てきましょうはい
06:15っていう感じでここで
06:17設定しました
06:21次にですねいくつか設定していきたいと
06:23思いますここの
06:26オーセンティフィケーションを
06:28オーセンティケーション
06:29オーセンティケーションですね大須
06:31認証ですね例えばログインとかサイン
06:33アップとかの
06:34認証の話です
06:35認証の機能を使うのでヘッドスターティっ
06:37て
06:39認証が使える状態にしましょうはいこんな
06:41画面に来ましたでサインイン
06:43プロバイダーズ例えばメールアドレスで
06:45サインしたりSNSでログインしたりとは
06:47よくありますよねで今回はEメールと
06:49パスワードをnavorにしておき
06:51ましょう
06:53はいこんな感じですでどんどんいきますよ
06:56次に
07:00ビルドのところ行きまして
07:05次はfirebaseデータベースですね
07:07データベースファイアベースの
07:08データベース
07:12クリエイトデータベース
07:15データベースを作ります
07:17はいでここでプロダクションモードと
07:20テストモードプロダクションと本番環境
07:22ですよねなので本番にリリースするときは
07:25こっち使えばいいと思うんですけど最初は
07:27テストモードで全然いいでしょうはいで
07:29ここでそのストレージがどこにあるか
07:32エリアがあるのか例えばヨーロッパとか
07:34です
07:35とかなんか書いてありますけど日本にいる
07:38人は日本のやつが東京とか大阪とかが東京
07:42大阪とかあるんで近い方を選べばいいん
07:45じゃないでしょうか
07:55はいこんな画面になりましたはいこれで
07:57作られたって感じですねはい
08:00こんな感じで大丈夫かと思います
08:05ルールのところでなんかここがフォルツに
08:06なってたりifの後がホルスになってたり
08:08すると
08:09ダメだからtruにしなきゃいけないとか
08:12があるかもしれないのでもしそういう方は
08:14そういう風に変えてみてくださいちょっと
08:16調べるとなんか出てくると思うんでもし
08:19ハマったらそこ見てみてくださいという
08:22感じですねじゃあファイアスとやりました
08:24次は
08:26ストレージですねストレージストレージ
08:29このビルドの中のストレージというところ
08:31に行ってこれも同じようにGetSTAR
08:33ってテストモードで始めますストレージが
08:36ないとデータを置くところが使えないので
08:38これも有効にしておきましょう
08:51ちょっと長いのでもうちょっとお待ち
08:53ください
08:55はいこんな感じで出来ましたとでも同じ
08:57ように何か
08:58ルールズのところで何か制約があったら
09:00変えてあげるのがいいんじゃないでしょう
09:02かとなんか大丈夫そうな感じするのでこの
09:04まま進めますはいでそうするとですね
09:07オーセンティブケーションと
09:09オーセンティケーションとファイアベース
09:10データベースとストレージの設定ができた
09:12ので次はプロジェクトの
09:14IDを取りますプロジェクトセッティング
09:16のところからプロジェクトIDがこれです
09:18ねプロジェクトIDプロジェクトオーバー
09:21ビューのプロジェクトセッティングの
09:22プロジェクトIDですねはいこれをコピー
09:24して
09:25いよいよようやくフラッターフローの画面
09:28に戻って5スプロジェクトIDに入れて
09:31Connect
09:33しましたここでオートジェネレート
09:35コンフィグファイルなんか設定ファイルを
09:37自動的にジェネレートしてるみたいに言う
09:39のでこれちょっとやってみましょう
09:40チャンネル登録
09:43これが押し忘れて動かなかったりもするの
09:46で僕は何回も何でもかかないんだろう
09:49みたいなのがありましたいろんな人に教え
09:51てもらって覚えましたという感じで結構
09:53ハマるポイントが多いので最初
09:56戸惑うと思いますはいであとこの
09:59nable
10:03にしますとクリエイトユーザー
10:06コレクションユーザーコレクションを作り
10:08ますかってそうするとオートマティック
10:11から意味アートがユーザーズコレクション
10:132ファイアベスト4ログインユーザー
10:16仲間にユーザーズのコレクションを
10:17データベースのコレクションを作って
10:19あげるよみたいなこと言ってるんでオンに
10:20しますはいセレクトイニシャルページこれ
10:24でもオンにしなくては多分作る自分でその
10:26後でも全然できますはい次にセレクト
10:29イニシャルページエントリーページとログ
10:31インページエントリーページは
10:34一番最初に来るページでログインページは
10:37ログインしてる人が一番最初に来るページ
10:38だと思いますはいエントリーページは多分
10:41サインアップページみたいなページだと
10:43思うんでそれをこの時点で選んで作れって
10:47言ってるんですけどこれ後からでも大丈夫
10:49だと思います思うんですがまあせっかく
10:52なんで作っちゃいましょう
10:53大須ってところが認証系の画面が
10:57いろいろあります色のテンプレートがある
10:59のでそれを選びましょうって感じなんです
11:01けどなんか黒くなってますよねこれなんか
11:04ネットワークが遅いのか
11:06画像が出てきてないだけな気が
11:09しますねで私はサインアップページを
11:13欲しいんですがどれがいいかな
11:17ラインナップ
11:20じゃあこれにしましょうか
11:23ヘッド
11:26スタート多分この辺のやつがいい気がする
11:29んだけど前使ったのこの辺だった気がする
11:31んだけどなんかこう絵が見えないから
11:33わかんないな
11:39これにしましょうかねこれ
11:41usemySFレジスターってやつし
11:43ましょうこれはサインアップクリエイト
11:47にログインページ
11:50ログイン
11:53ページはホームだと思うんで
12:01何でもいいかなんじゃ
12:03リストみたいなページを購入しましょうか
12:05Twitterみたいなやつをちょっと
12:06選べてみましょうかTwitterえっと
12:08インスタみたいなやつを選んでみましょう
12:14こんな感じですねはいスタートメニュー
12:17はいできました
12:22こんな感じで
12:24作りましたはいじゃあここでようやく
12:27始まりますね
12:29で
12:31まずまずそうだなここからこの3本線の
12:36ところをクリックするとここにサイン
12:38アップとホームとか出てくるんでホーム
12:39クリックするとこのホームの画面サイン
12:42アップのページが出るサインアップこんな
12:43感じですはいこの辺をやっていきたいん
12:46ですがまずちょっと気になるので
12:48この辺のですねバグこの
12:51虫マークはバグですね
12:53文字通りバグなんですけどエラーが発見出
12:55てますまだ何もしてないのにエラーが
12:57こんなに出るのはちょっとすごいやり
12:58にくいですけどちょっとクリックしてみ
13:00ましょうクリックしてみるとまずここで
13:02WhenusingFacebookログ
13:04インUSマスクプロバイダ
13:05Facebookupnameどうのこう
13:07のって書いてますFacebookログ
13:09イン入れるんだったらFacebookの
13:10何か設定しなきゃいけないよって怒られて
13:11ますとはいえ私たちはFacebook
13:14ログイン今やるつもりないんでメール
13:16アドレスログインだけあればいいのでなん
13:18ですけどテンプレートに自動的にこれが
13:19ついてるからいけないっぽいですねで
13:21こいつを消してあげ
13:24ユーザーソーシャルプラット消してあげ
13:26ましょうこの行もいらない消してあげ
13:28ましょうはいなんかバグの数が減りました
13:31ねはいいいでしょう次に
13:34ウィ
13:36ジェットコンフィグレーションマックスラインズマットピー
13:371forパスワードフィール何言ってん
13:39のっていきなり思うんですけどこれですね
13:42MAXライン最大業はmustB1個じゃ
13:45なきゃいけないよ4パスワードフィールド
13:47これですねパスワードフィールドの最大限
13:49は1件じゃなきゃいけない何のことっても
13:51最初思って絶対思うと思うんですけどここ
13:54にMAXラインズこれが
13:56複数行入力できるのが1行なのかみたいな
13:58ところを設定するところがあるんですね
14:00MAXラインこれを1って打てということ
14:03言ってます
14:04そうするとバグが5件から要件減りました
14:06あとはマックスライズマスクこっちも一緒
14:09かこれも同じようにマックス内の1にする
14:14とまた番号1個減りましたねはいじゃあ次
14:17行きましょうプロパティオーバーライド
14:19ですストリングプロパティ
14:21ノットプロパーリーセット
14:24インデックスストリングプロパーティー
14:32ザーネームを入れようとしてるのは
14:44テキストが出るような状態にしたら戻り
14:48ましたとはい次ウィ
14:49ジェットコンフィグレーションこれなんか
14:50いっぱいあって本当にこれ最初テンション
14:51下がるというか心が折れると思うんですが
14:53トグルアイコンリグワイヤーズいつ
14:56バリュー2セットフロントファーストあ
15:01これこれトグルアイコンなんですねトグル
15:03アイコンですとトグルアイコンなんです
15:05けど
15:07トグルアイコンってこのデータベースと
15:09連携してオンオフは切り替わるものだと
15:11思うんですが
15:16今はそのデータベースの設定とかできて
15:18ないのでエラーになっちゃいますなんで
15:20ちょっとこれ一回
15:21削除しときますかとりあえず削除しとけば
15:23エラにならないので
15:24最後1個
15:27トグルアイコンリクワイヤーこれどこだ
15:34下の方にもあったこれも消しておき
15:37ましょう後でまた必要になったらつけて
15:38あげればいいのではいという感じでですね
15:41バグが消えました
15:46ファイアストアルールズのデプロイア
15:49ストーンルールがデプロイされてないこれ
15:51デプロイしなきゃいけないんですねデプロ
15:53行ってデプロイの説明ちょっと難しいんで
15:56割愛しますが
15:57ファイアストアのルールとして
16:00ネットでプロイドってなってる時にあり
16:01ますそういう時にはデプロイしてあげると
16:03ですねサーバーに反映して今作ってるもの
16:05の情報が
16:06デプロイされると
16:12はいという感じでオールグリーンになり
16:14ましたねはいこんな感じでバグがない状態
16:16になりましたはいここからいろいろ作って
16:18いきたいなと思いますはいまずちょっと
16:22動かしてみたいですよねまずこのこんな
16:25感じかっていうとまずこの目のマーク
16:27プレビューアップをしてみると一旦動き
16:29始めます
16:30とはいでこれは実際に本当に動いてるわけ
16:33じゃなくて見た目だけ確認してる状態に
16:34なりますこんな風に中入れてみたりできる
16:37んですけどログインとかをクリエイト
16:39アカウントとかをしても画面が遷移はする
16:41んですが何もならないという感じです
16:45ただこんな見た目なのかっていうのだけ
16:47ちょっと確認することができますそうじゃ
16:49なくてちゃんとログインできるか確認し
16:52たい場合はここのボタンを押します
16:54そうすると別のタブでこんな風に
16:59なって実際に動作確認をできるんですけど
17:02も
17:04thistakedtoslee
17:06minute23分かかりますよって言わ
17:07れてますと3分ちょっと
17:10待つのは結構
17:11精神的しんどいですよねっていうのが
17:13ちょっと最大の
17:14弱点かなと思ってるんですが
17:16これしょうがないですねこれだけの
17:18クオリティのパワフルなツールなのでその
17:21くらい時間かかってもいいんじゃないかと
17:23いう風に解釈しましょうはいというところ
17:26でこれは一旦置いておいてですねそんな
17:2823分待ってられないのでとりあえず作る
17:30のを進めていきたいと思います
17:33まずサインアップをするために
17:38Eメールとパスワードとパスワードの確認
17:40を入れてクリエイトアカウントしていき
17:43ますとでクリエイトアカウントのところに
17:45ですねまずこの右側のところ
17:51ここを見てみましょうこの矢印これが
17:53アクションですねアクション何か動作させ
17:55るって言うところです
17:58これを見るとですねオンタップオース
18:01クリエイトアカウント
18:03オースクリエイターアカウントデフォルト
18:05で設定されてますねさすがテンプレート
18:07いろんなこともやってくれてます
18:08クリエイトアカウントでEメールと
18:12EメールフィールドEメールアドレスと
18:16Eメールアドレスパスワードパソコン
18:17ファームクリエイトユーザードキュメント
18:19がオンみたいな感じもこれこのままその
18:21まま使えるので特に問題ないと思います
18:23はいだけどこのアクション一つだと
18:26クリエイトアカウントした瞬間に
18:27クリエイトアカウントしただけで次の
18:30ページに遷移とかができないのでそれを
18:33追加しましょうこのオープンなところを
18:35押すとですねアクションがいろいろこんな
18:38感じですね例えばこんな条件付けたりして
18:41こんな感じでですね
18:44なんとなくイメージわかりますかねこんな
18:46感じでどんどんどんどん例えばある条件が
18:50あって条件がTRUEだったらこっちの
18:52アクションやってそうじゃなかったら
18:53こっちのアクションやってその時に
18:55条件がこうだったらどうやるみたいな
18:57こんな風にアクションをどんどんどんどん
18:59つないでいくことができるというのは
19:00面白いところですねはい1回消します
19:09はいで今はまず1個目にさっき言った
19:12EメールとかEメールアドレスとか
19:14パスワードとかの
19:17定義だけやってます
19:19はいここにプラスボタンでアドアクション
19:21からですね
19:24ナビゲート
19:28ホームみたいなのをやるとホームに遷移し
19:32ますよはいタップした時のイベントがそう
19:34ですはいクローズ
19:48はいそれではですねやってみましょう今
19:52ちょっと今飛ばしちゃいましたこのボタン
19:55を押してですねビルドしましたで23分
19:57かかりますかかった後の状態に今なって
20:00おりますはいそうするとこんな状態になり
20:02ましたこれからGetSTAR始め
20:06ましょう例えばテストでちゃんと行く
20:09ランプ
20:10.comみたいな適当なメールアドレスを
20:12入れて
20:12123456とか適当な
20:15メールアドレスとパスワードを入れて
20:17クリエイトアカウントしますそうすると
20:21はいこのホームのページに遷移されました
20:24ログインされたようですじゃあ
20:27ユーザーが作られたかどうかをちょっと
20:30確認してみたいと思いますえーとですね
20:34こちらのデータベースのところ
20:36データベースここかなはいここでこう
20:38いろいろタブがありますが一番左のところ
20:40にユーザーコレクションがあります
20:42ユーザーズってありますねこれが
20:45この今フラットフォローのプロジェクトで
20:48持ってるコレクションですこれはファイア
20:51ベースと連携されていますはいマネージ
20:54コンテトってのクリックすると
21:04くるくるしてますが少々お待ちください
21:07はいこんな感じでですねさっき入力が
21:10ちょっと小さくて見にくいですがテスト
21:1201とイグザンプルドットコムっていう
21:13さっき入力した
21:15Eメールが
21:16Eメールのユーザーが登録されています
21:17はい
21:19でちょっと戻りまして
21:21ここのユーザーズっていうのがこのさっき
21:24のEメールディスプレイネームとかそう
21:26いうことURLとかありますけどこれは
21:29フラクタルフローが自動的に作ってくれて
21:31いるやつですねはいでさらにさっきこの
21:37画面でユーザーが登録されているところを
21:39見ましたが実際にFireベースの中身を
21:42見てみるのが一番いいかなと思う
21:43firebaseに戻りますワイヤベース
21:45の方に行きまして
21:51データベースのところにもユーザーズの中
21:53にひとつなく謎の文字列ですけどこれが
21:56IDになってると思うんですねユーザーの
21:58中に1つデータがあってその中に
22:00クリエイティタイムが
22:032月に24日の今の時間が出てますね今の
22:07時間はいでえっとメールアドレスはさっき
22:10のメールアドレスこの
22:12微妙になって文字列がユニークID
22:14F5ベースが作ってくれたIDになります
22:17はいこんな感じでデータが作られている
22:19ことが分かりました
22:23ではですね
22:25ではこのホーム画面の方に行きましょうと
22:28ホーム画面に
22:32データを作っていきたいなと思いますで
22:34ここに表示するためのまずデータベースを
22:38作っていきたいですデータベースと行く
22:40かっていうのと今ユーザーズってのがあっ
22:42たんですがこれ以外にもう1個追加し
22:45ましょう+ボタンからじゃあ記事の投稿
22:48するのでポスつっていうのをクリエイトし
22:50ますはい
22:57この例えばプロダクツとか選べるんです
23:01けどchooseテンプレート
23:02コレクションよくあるデータベースの構造
23:04はなんかこの用意してくれるらしいんです
23:05ね例えば
23:07プロダクツとかでやるとプロダクツだっ
23:09たら普通に名前とかディスクリプションと
23:10か
23:11プライスとかあるでしょみたいなこと言っ
23:13てくれるですね
23:14すごくありがたいですねはいですが今回は
23:18ゼロから作りましょう
23:21オフィスで作って
23:24フロムスクラッチから作ります例えば
23:26タイトルですね
23:29文字なのでストリングにしますで他には
23:32テスクリプションと
23:35説明ですね
23:37スクリーン
23:39これも文字でいいでしょうと
23:42であとは
23:45イメージですね
23:46イメージフォト
23:47あとは
23:51フォトパスってのがあるんでフォトパスの
23:52方にしましょうはい
23:56一旦こんな感じでいいかな
23:59あとは
24:06何だっけユーザー
24:09誰が作ったか知りたいなクリエイターを
24:11やりましょうドキュメントリファレンス
24:13リファレンスで参照ですね他の
24:15データベースコレクションとつなげる時
24:17ですしますこんな感じです
24:21でこんな感じで作ってもいいと思うんです
24:24がそうじゃなくてですね
24:30例えば作る時に
24:32タップするみたいな
24:34伊豆サブコレクションというのもあります
24:35これを使うとどうなるかというとその親を
24:38決められてユーザーズに紐付いてる投稿
24:41みたいな感じにすることができますそう
24:43するとどうなるかって言うと
24:46ユーザーズの下にポストがあるっていう
24:49状態になってそこでスクラッチで作ると
24:51いう感じになるので誰の何々っていうの
24:55こういう階層構造にするかそれともそう
24:58じゃなくて別のものにしてこちらから
25:00リファレンスでつなぐかみたいなことが
25:02選べるようですでちょっとこれまだ
25:05使い分けを私は正直わかっておりませんと
25:07いう感じなんですが
25:11何個か見た動画でこういう時には
25:14ユーザーズの下にサブコレクションで
25:17投稿データ入れることの方が多いように
25:19感じましたということでそっちを真似して
25:22みますはい保湿っていうのにして親を
25:25ユーザーにしてクリエイトしてみましょう
25:26このやり方でちょっとやってみたいと思い
25:28ますフロムラッチでちょっと同じことです
25:32がタイトル
25:35この辺まで僕も勉強中なので
25:39皆さんこっちの方がいいよっていうのが
25:41あったらぜひ教えてください
25:49あと何ですかねタイトルでスクリプション
25:524と
25:58一旦大丈夫かな一旦これにしておき
26:01ましょうかはいで後で足りなくなったら
26:03追加しましょうこんな感じですね
26:10やりましたこっちの方でこれテンプレート
26:12の構造どうなってるかっていうと
26:15ちょっとこの構造を説明するのが最初
26:18難しいんですけどちょっと1回ちょっと
26:21その説明するのも大変なのでまずそうです
26:25ね
26:27ここのここですねこのソーシャルフィー
26:30ドっていうのがあって
26:33ソーシャルフィードの中にユーザーポスト
26:36があってユーザーポストが
26:41何個もある状態になってますね
26:44よく見ていくと
26:45わかるんですけど本当は繰り返し項目なの
26:47にデザイン上2個わざわざ作ってるって
26:50感じなので2個目のこのユーザーポストっ
26:52てやつを1回デリート単純にしましょう
26:54はい
26:57この状態からちょっと作っていきたいなと
27:00思います
27:12これが
27:14繰り返しなのでまずリスト
27:17項目にしなきゃいけないですという感じな
27:19んでこのソーシャルフィールドのところに
27:21リストビューっていう
27:23リストですねちょっとアダルとかで言う
27:24リストと同じなんですねリストビューって
27:26のが出てきますでここにこのソーシャル
27:30フィーユーザーポストをコントロールXで
27:33切り取って
27:34リストビューの中にコントロールしてあげ
27:36て中に入れてあげましょうはいこれで
27:38リストビューが繰り返し
27:40項目になりました
27:43こんな感じですねはいじゃあこの
27:45リストビューが
27:48繰り返しコメントのリストビューにデータ
27:50を入れてみましょう
27:53リストビューにアドバックエンドというか
27:55ここにありますこのここですねハード
27:57バックエンドクエリでクエリコレクション
28:00から
28:04投稿データを取ってきますとでビュー
28:06ソースで
28:16コレクションのポストでビューソースで
28:19fromバリアブルー
28:22変数から持ってきます何の変数から持って
28:25きますかとなると
28:29この
28:35違うごめんなさい全部表示すればいいです
28:37ね一旦忘れてくださいもう1回行きますね
28:401回キャンセルはいはいアドバンのクエリ
28:42ですでクエリコレクションでクエリの情報
28:45を
28:46投稿ポストのクエリの情報持ってきますで
28:49バリューソースでクエリオールサブ
28:51コレクションズ全部持ってきますよという
28:53感じでクエリのタイプはリストですよと
28:57リストで多分シングルドキュメントっての
28:59は1個のドキュメントを取ってくると
29:01ドキュメントって言ってるのは
29:02データベースの一つ一つの
29:05項目だけですけど
29:06項目でデータって言えばいいですかデータ
29:09なんですけどそれが
29:10複数あるのでリストですよという感じです
29:12はい特にフィルターとかオーダリング
29:16順番に並び替えですねとか絞り込みは今は
29:18ちょっと一旦なしでこれコンファームして
29:20みましょう
29:21はいそうするとここにデータベースが取っ
29:24てきた用マークみたいなクエリ
29:25コレクションマークが表示されましたその
29:28状態でここのサークルにこの
29:32イメージとかクリックしましょう
29:34イメージは
29:35イメージはここにパス
29:39セットフロンバリオングルってあるので
29:41変数から取ってきましょうそうすると
29:43さっきデータベースの設定したことによっ
29:45てデータベース設定データベースから取得
29:48してくる設定をしたことによってポスト
29:51ドキュメントというのが出てきますポスト
29:52ドキュメントからフォト写真を撮ってき
29:55ますはいこれで表示されるようになりまし
29:57た
29:58であとはここにテキストがあるのでこれを
30:03ちょっとタイトルにしましょうかセット
30:05フロンバリアブルで
30:07ホストドキュメントのタイトルこんな感じ
30:10ですねはいいかがでしょうか
30:17で
30:17[音楽]
30:21こんな感じでじゃあ次に
30:23ここですね
30:25ここはこの
30:31投稿を書いたユーザーの写真とユーザーの
30:34名前を撮ってきたいですよねそうしたい
30:37場合どうするかって言うと
30:39ポストドキュメントの音じゃないですね
30:42ポストドキュメントの
30:47リファレンスの人の
30:50画像を出したいんですけどそれがちょっと
30:52取れないですよこれだとパレート
30:54リファレンスの人になっちゃうんで
30:56画像の情報がないとどうしたらいいかと
30:58いうとここのじゃあこの
31:00これのですね
31:10これユーザーインフォっていうところここ
31:12がユーザーインフレちょうどここがいいと
31:14思いますこのユーザインフォのところに
31:16データベースの設定をしてあげましょう
31:17この
31:20バックエンドクエリーで
31:23ドキュメント
31:25ドキュメントフロムリファレンス
31:27リファレンス
31:28参照からドキュメント持っていきましょう
31:29じゃあ何のドキュメントですかユーザー
31:31ですでこれが
31:36オーセンティフィケーションのユーザー
31:38リファレンス
31:39オーセンティブ
31:41ユーザーオーセンティケーティっていうの
31:43は認証してるユーザーなのでログインし
31:44てるユーザーアダルトで言うとログイン
31:46ユーザーですねにそこのユーザー
31:48リファレンスユーザー情報の参照があり
31:50ますよでこれをしますそうすると
31:56ここの
31:58行1行の中にユーザー情報はもう取ってき
32:02てる状態ですねその状態でこちらの
32:08画像を撮ってこようとした場合に画像に
32:10ユーザードキュメントってのがさっきは実
32:13はなかったんですけどこれが表示される
32:14ようになりましたそこでフォトURLを
32:17クリックしますはいじゃあこちらも同じ
32:21ようにですねセットフロムバリアブル変数
32:23から設定するってところで
32:27ユーザードキュメントの
32:30ディスプレイニングにしましょうかはい
32:37こんな感じですねはい
32:42これで表示されるようになるはずですが
32:50されないかなと思いますそれだとちょっと
32:52困るのでデータを入れてみたいと思います
32:55はいえっとこちらですねさっきの5ベース
32:59データベース5ベースデータベースの
33:00ところにユーザー情報はこんな感じで
33:04EメールとIDとクリエイトタイムが自動
33:06的に作られた分と
33:08Eメールだけ入ってる状態ですとでここに
33:10さっき我々が
33:12想定したようなユーザーの図の下にポスト
33:15が入っているというようなタイトルの
33:18ディスクリプションのフォトがあるという
33:19同じような構成同じようなじゃない全く
33:21同じ構成で
33:23データを作ってあげることでうまく動く
33:26ようになりますまずユーザーのところに
33:28足りない情報としてユーザーのところには
33:32もともとここにフォトのURLと
33:34ディスプレイネームがあるのでそれを
33:36ちょっと同じの追加してあげましょうアド
33:39フィールドから
33:41ディスプレイ
33:44打ち間違えると全然ダメになっちゃうので
33:46同じように作ってください
33:48ディスプレイネームで
33:50テスト太郎っていう名前にしてみますはい
33:55でさらにここにですねもう一個追加して
33:58何でしたっけフォトURLでしたとURL
34:02ここをやってみましょう
34:06そしてバリュー設定していきたいですこの
34:09valuっていうのはフォトのURLなの
34:10で
34:11まさにフォトのURLタブで開きますが
34:16はいストレージのところにはデータ置き場
34:19には何もない状態ですここでアップロード
34:21ファイルとかで
34:23例えば人の画像とかを置きます
34:27とそのURLを作ってあげればいいです
34:30ちょっとついでなので他の食べ物の画像と
34:34かもちょっと置いてみます
34:43はいじゃあこんな感じで置いといて後で
34:46使いますこの今作ったこのURLはこれか
34:50なこのアップロードして言われるこれなの
34:53でこの
34:54URLをコピーして
34:59さっきのところにここのフォトURLの
35:01ところにバリューのところにこれですね
35:03httphttpsなんとかってこれを
35:06貼り付けますとはいこれでここにURLが
35:08登録できたと思いますはいまずこれで
35:11ユーザーズの設定ができました
35:12ディスプレイネームとURF4とURLを
35:14設定しました次にこちらのユーザーの下に
35:19階層としてポストを入れてるのでこれも
35:21入れてみたいと思います
35:23ユーザーズの下の階層にここですねこの
35:26ここの階層に
35:29スタートコレクション
35:31をコレクション入れますこれでポストです
35:33ねコレクションIDPostを入れますで
35:36ドキュメントIDこれは自動的に設定さ
35:38れるのでオートIDってやると勝手になん
35:40か変なID作ってくれますこれはこんな
35:42もんだと思った方がいいと思いますじゃあ
35:44次フィールド何でしたっけえっとタイトル
35:47ディスクリプションポートタイトルここに
35:51タイトルが例えばピザ
35:53って書いてアドフィールド
35:57ディスクリプション
35:59膝最高って書いてアドフィールドで
36:04フォト
36:07フォトみたいな感じにしてこれは
36:09ストリングでいいかなでここにさっきの
36:15ピザピザURLをですねこれを
36:21貼ります
36:22こんな感じもう一個くらいいきましょう
36:27コレクションでもう1回個室で今度も
36:32オートでタイトル
36:36何だっけなんか何の画像あげたっけ
36:45お肉か
36:48です
37:01ディスクリプションこんな感じかなで
37:07ここにさっきの貼り付けた
37:10URLをここに置きますはいこんな感じで
37:14できましたあれなんか階層違うからもしか
37:17してなんか間違ったかな
37:24間違ったかもしれないのでちょっと確認し
37:25ます
37:26ユーザーズのこのユーザーズの中に
37:33こういうユーザー情報ポストの中に1つ
37:35あってあ
37:41これが間違いですねこいつ間違いだ
37:44これデリートドキュメントします
37:55もう1回やりますすいません
38:00ですねここにオートIDでタイトルピザ
38:13ここに
38:14音で
38:16膝のことは
38:22膝のことを言われるを入れます
38:46お肉のURLはこれです
38:51はいこんな感じでポストの中に2つ並び
38:54ましたねピザとお肉こういう感じですね
38:56はいはいOKですこの状態でちょっと
39:00動かしてみるとさっきはこれをもう1回
39:03リロードしてみると
39:19では次にもう一つwelcomeなんとか
39:22ここをウェルカムを日本語でようこそに
39:27ようこそようこそ
39:30これをまるまるさんみたいな感じにし
39:32ましょうなので
39:35〇〇さんみたいにするためにはセット
39:36フロムバリアブルで
39:39オーセンティケイトユーザーログインして
39:41ユーザーですねその人の
39:43ディスプレイネームを表示しますなんです
39:46けどこれを何とか3みたいにしたいので
39:49セットフローバリウムからこれをちょっと
39:51やめて今みたいな感じで取れるんですけど
39:53そうじゃなくてコンバインテキスト
39:55コンバイン
39:57くっつけるですねコンバインなのでアド
39:59テキストするテキストとかに何個もできる
40:00となんでこっちの方はこのTマークから
40:04フロントバリアブルでセットして
40:07オーセンティケーユーザーのディスプレイ
40:09ネームにしてあげてこっちを3ってやると
40:12例えば太郎さんみたいな感じになるという
40:15感じでこんな感じにしてみましたこれで
40:18ちょっと動かしてみましょう
40:20インスタントリロード
40:37こんな感じでいかがでしょうかここまで
40:39来るだけで結構時間思ったりかかっちゃっ
40:41たなと思うんですが最初のファイヤー
40:44ベースの設定とかがまず重いのでなんか
40:46ちょっと
40:47つきにくいなっていう印象があるかなと
40:51思いますが
40:52やってみるとものすごいいろんなことが
40:55できるのでちょっとノーコードとは言え
40:57ないくらい
40:58素晴らしい機能が
41:00盛りだくさんなのかなと思っていますただ
41:02私自身もまだまだ勉強中なのでいろんな
41:05こうやった方がもっといいよみたいのが
41:07あったらどんどん教えていただければと
41:09思います今日はここまでにしたいと思い
41:11ますありがとうございました
Browse More Related Video
5.0 / 5 (0 votes)
