サイトアイコン 【TechGrowUp】

Flutter開発入門31 FlutterでFirebase Storageを使う方法

Daichi Mizuno

はじめに

　Firebase Storageは、Google Cloud Storageを利用して、画像、動画、PDFファイルなどの大容量ファイルを効率的に保存できるサービスです。Flutterアプリケーションでユーザーが撮影した画像をクラウドに保存したり、クラウドからダウンロードしたりといった操作を簡単に実装できます。

　本記事では、FlutterアプリでFirebase Storageを使用して、画像などのファイルのアップロードとダウンロードを行う手順を解説します。Firebase Storageを利用することで、スケーラブルかつセキュアなファイル保存を簡単に実現できます。

Firebase Storageとは

　Firebase Storageは、アプリケーションがファイルを保存し、そこからデータを取得するためのクラウドベースのストレージサービスです。以下のような用途に便利です：

　Firebase Storageは、Firebase AuthenticationやFirestoreと連携して、ユーザーごとにファイルへのアクセスを制限することができるため、非常に柔軟なファイル管理が可能です。

前提条件

　Firebase AuthenticationをFlutterアプリに組み込むためには、以下が必要です：

　まだ完了していない方は以下の記事を参考にFirbeaseを導入してください。

Flutter開発入門29 FlutterFireを使ってFirebaseをFlutterにセットアップする方法
FlutterFireを使って、FlutterアプリにFirebaseをセットアップする方法を詳しく解説。Firebaseの認証、クラウド機能の導入をステップごとに説明します。
techgrowup.net
2024.09.22

ステップ1：Firebaseプロジェクトの作成

1.1 Firebaseコンソールでプロジェクトを作成

　まず、Firebaseコンソールで新しいプロジェクトを作成します。

  1. Firebaseコンソールにアクセスし、「プロジェクトを追加」をクリックします。
  2. プロジェクト名を入力し、Google Analyticsの設定を選択（必要に応じて）します。
  3. 「プロジェクトを作成」をクリックし、プロジェクトが作成されるのを待ちます。

1.2 Firebase Storageの有効化

　プロジェクトが作成されたら、Firebase Storageを有効にします。

  1. Firebaseコンソールのメニューから「Storage」を選択します。
  2. 「開始」をクリックし、デフォルトのルールを設定します。

ステップ2：Firebase Storageの基本操作を実装

2.1 Firebaseの初期化

　lib/main.dartファイルでFirebaseの初期化を行います。

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // FlutterFire CLIで生成されたファイルをインポート

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Storage Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FileUploadScreen(),
    );
  }
}

　これで、FirebaseがFlutterアプリに統合され、Firebase Storageを使えるようになりました。

2.2 ファイルのアップロード機能を実装

　次に、ファイル（例えば画像）をFirebase Storageにアップロードするコードを追加します。image_pickerパッケージを使用して画像を選択し、それをFirebase Storageにアップロードします。

　pubspec.yamlにimage_pickerとfirebase_storageを追加：

dependencies:
  firebase_storage: ^12.3.1
  image_picker: ^1.1.2

　アップロードコードの実装：

import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

class FileUploadScreen extends StatefulWidget {
  @override
  _FileUploadScreenState createState() => _FileUploadScreenState();
}

class _FileUploadScreenState extends State<FileUploadScreen> {
  final FirebaseStorage _storage = FirebaseStorage.instance;
  File? _imageFile;

  Future<void> _pickImage() async {
    final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }

  Future<void> _uploadFile() async {
    if (_imageFile == null) return;

    try {
      final fileName = DateTime.now().millisecondsSinceEpoch.toString();
      final ref = _storage.ref().child('uploads/$fileName.png');
      await ref.putFile(_imageFile!);
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('アップロードに成功しました')));
    } catch (e) {
      print('Upload failed: $e');
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('アップロードに失敗しました')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ファイルアップロード'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _imageFile == null
                ? Text('画像が選択されていません.')
                : Image.file(_imageFile!, height: 200),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('画像選択'),
            ),
            ElevatedButton(
              onPressed: _uploadFile,
              child: Text('画像アップロード'),
            ),
          ],
        ),
      ),
    );
  }
}

　このコードでは、ユーザーが画像を選択し、それをFirebase Storageにアップロードすることができます。

　上記のようにファイルを選択し、アップロードするとFirebase Storage上に保存されることが確認できました。

2.3 ファイルのダウンロード機能を実装

　次に、Firebase Storageにアップロードされたファイルをダウンロードして表示する方法を紹介します。

ダウンロードコードの実装：

Future<void> _downloadFile() async {
  try {
    final ref = _storage.ref().child('uploads/sample.png');
    final url = await ref.getDownloadURL();
    print('Download URL: $url');
  } catch (e) {
    print('Download failed: $e');
  }
}

　このコードでは、指定されたファイルのダウンロードURLを取得し、端末にダウンロードできるようにします。URLを使って、ファイルを画像として表示したり、他の用途に使用できます。

Firebase Storageのセキュリティルール

　ファイルアップロードやダウンロードに関しては、Firebase Storageのセキュリティルールも重要です。デフォルトでは公開されている場合があるので、ユーザーごとにアクセス制限を設定することをお勧めします。

例として、認証済みユーザーのみファイルの読み書きができるように設定するルールを紹介します。

Firebase Storageルール設定の例：

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

　この設定により、認証されたユーザーだけがファイルのアップロード・ダウンロードを行えるようになります。

まとめ

　Firebase StorageをFlutterアプリに統合することで、アプリ内でのファイル管理を簡単に実装することができます。ユーザーが撮影した画像や動画をアップロードしたり、保存されたファイルをクラウドからダウンロードする機能を追加することで、アプリの機能性を大幅に向上させることが可能です。

　今回紹介した手順に従い、Firebase Storageを使ってあなたのアプリにファイル管理機能を実装すれば、写真アルバム、動画共有、ドキュメントストレージなど、さまざまな用途に対応した高度な機能を提供できます。Firebase Storageの強みは、そのスケーラビリティやセキュリティ、そしてFlutterとの優れた統合性にあります。これにより、大規模なファイルの保存や管理を簡単かつ安全に行えるようになるため、開発者の負担を軽減し、アプリのパフォーマンスを向上させます。

　さらに、セキュリティルールをカスタマイズすれば、特定のユーザーだけがファイルにアクセスできるようにしたり、ユーザーごとにファイルの保存容量を制限するなど、柔軟なファイル管理が可能です。

モバイルバージョンを終了