micomia株式会社の井上です。今回はUpload/Delete Dataについて解説していきます。初心者にもわかりやすく解説していくのでぜひご一読ください。%3Cbr%3E%3Cbr%3E%3Cbr%3E1. Upload/Delete DataとはUpload Dataとは、新しいデータを保存、Delete Dataはすでに存在するデータを削除する操作を指します。%3Cbr%3E%3Cbr%3E2. Upload Dataの使い方Upload/Save MediaとUpload/Save Fileがあり、Upload/Save Mediaは画像や動画、Upload/Save FileはPDFなどのファイルをアップロードできるものになっています。今回はUpload/Save Mediaを使用していきます。%3Cbr%3E%3Cbr%3EUpload TypeはFirebaseを選択します。目的によってはLocalでも大丈夫です。%3Cbr%3E%3Cbr%3E次にMedia Sourceを選択します。Cameraはカメラが起動します。Galleryは端末に入っている写真を選択できます。Either Camera or Galleryはカメラを起動するか端末に入っている写真を選択できます。私の体感としてはEither Camera or Galleryを使うことが多いです。Uploaded Mediaは異なる画面やWidgetでアップロードしているデータを表示させるものです。%3Cbr%3E%3Cbr%3E今回はEither Camera or Galleryを選択します。その下に表示されるAllow Photo/Allow Videoは、ONにすることでそれぞれアップロードできるようになります。アイコン画像など、ビデオはアップロードできない状態にしたい場合はAllow Videoをオフにしておくことをお勧めします。%3Cbr%3E%3Cbr%3Eまた、Media SourceをGalleryにするとAllow Multiple ImagesをONにできます。これをONにすることで複数枚の写真を選ぶことができます。%3Cbr%3E%3Cbr%3EShow Snack barをONにすると、アップロード中とアップロード完了時にSnack Barが表示されます。ただしこのSnack Barはカスタマイズできないので注意してください。%3Cbr%3E%3Cbr%3E次にResizeです。画像サイズと画質を設定することができます。これを設定することでサイズが大きすぎる画像などがアップロードされた際のUI崩れなどが起こりにくくなります。%3Cbr%3E%3Cbr%3Eこれら一通りの設定をした画像を表示させるには、ImageのPathから先ほどのUploaded Fileを選択することで可能です。%3Cbr%3E%3Cbr%3E%3Cbr%3E3. Delete Dataの使い方今回は、先ほどアップロードした画像を削除できるようにしたいので例として削除ボタンを設けます。%3Cbr%3E%3Cbr%3E先ほどと同じようにActionとしてDelete Dataを実装します。%3Cbr%3E%3Cbr%3EValueには先ほどアップロードした画像を設定します。%3Cbr%3E%3Cbr%3EDelete DataはUpload DataでFirebaseにアップロードされた画像を直接削除することになりますが、Firebaseにデータは残しておきたいのであれば、Clear Uploaded Dataを実装することでアプリ上では画像は削除されますがFirebaseにデータは残るようになります。%3Cbr%3E%3Cbr%3E%3Cbr%3E4. さいごに今回はUpload/Delete Dataについて解説していきました。画像のアップロードはプロフィール作成や投稿作成でも必須の機能になっているのでぜひ本記事を参考にして実装してみてください。本記事の内容を動画で観たい方は以下をご覧ください。%3Cbr%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FdqtT5hj3th4%3Fsi%3DXUeCqiSJcMKU9zED%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%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3E%3C%2Fiframe%3E%3Cbr%3E