もっと
FlutterでUint8Listを使用し、Back4appを利用してバックエンドに永続化する方法

12min
はじめに
デジタルシステムでは、ファイルはしばしばバイトのシーケンスとして表現され、DartはUint8Listを使用してバイトデータを効率的に処理する方法を提供します。Uint8Listは、符号なし8ビット整数の固定長リストであり、各数値は0から255の範囲です。この構造は、メモリ効率が重要な画像やファイルなどのバイナリデータを扱うのに便利です。
このチュートリアルでは、FlutterでのUint8Listの扱い方、ファイルをバイトリストに変換する方法、Parse SDKを使用してBack4appのバックエンドにデータを永続化する方法を説明します。
前提条件
始める前に、以下のものを用意してください:
Back4appアカウント。Back4app.comで無料アカウントにサインアップしてください。
ローカルマシンにFlutter開発環境をセットアップしてください。まだセットアップしていない場合は、Flutterインストールガイドを参照してください。
Dart、Flutterウィジェット、バックエンドサービスのためのBack4appの基本的な知識。
ステップ1 – Back4appバックエンドの設定
Back4appプロジェクトを作成する: あなたのBack4appアカウントにログインし、新しいプロジェクトを作成します。
Parseクラスを作成する: このチュートリアルでは、バイナリデータを保存するために「FileStorage」というParseクラスを作成します:
filename (String): ファイルの名前。
fileData (File): ファイルのバイナリデータ。
Back4appの資格情報を取得する: プロジェクト設定に移動して、FlutterアプリをBack4appに接続するために必要なアプリケーションIDとクライアントキーを取得します。
ステップ2 – Flutterプロジェクトの設定
新しいFlutterプロジェクトを作成する: ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します:
Bash
flutter create uint8list_example
flutter create uint8list_example
﻿
依存関係を追加する: pubspec.yamlを開き、次の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
﻿
次のコマンドを実行します flutter pub get これらの依存関係をインストールします。
アプリでParseを初期化する: lib/main.dart, Parse SDKを初期化します:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Uint8ListExample(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Uint8ListExample(),
    );
  }
}
﻿
次の部分を置き換えます 'YOUR_BACK4APP_APP_ID' と 'YOUR_BACK4APP_CLIENT_KEY' を実際のBack4appの資格情報に置き換えます。
ステップ 3 – Uint8List を Flutter で使用する
ファイルの選択と読み取り: デバイスからファイルを選択し、それを Uint8List に変換するには、file_picker パッケージを使用します。
Dart
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
﻿
このコードは、ユーザーがファイルを選択し、ファイルを Uint8List, として読み取り、ファイル名と保存ボタンを表示します。
ステップ 4 – Uint8List を Back4app に保存する
ファイルをBack4appに保存するために、ParseFileオブジェクトを使用します。これにより、画像や文書などのバイナリデータをアップロードできます。
ファイルをBack4appに保存する: _saveToBackendメソッドを更新して、選択したファイルをBack4appに永続化します:
Dart
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
﻿
このメソッドは、ParseFileを使用して、ファイルをバイナリデータとしてBack4appにアップロードします。成功した場合、確認メッセージが表示されます。
ステップ5 – アプリの実行
アプリを実行する using flutter run. ファイルを選択するボタンが表示され、選択後にバックエンドに保存するオプションが表示されるはずです。
Back4appでデータを確認するには、Back4appダッシュボードにログインし、FileStorageクラスを確認します。ファイルが名前と共に保存されているのが見えるはずです。
バイナリデータを保存するためのベストプラクティス
バイナリデータやUint8Listを扱う際のベストプラクティスは以下の通りです:
使用する: Back4appのParseFileは、画像、動画、ドキュメントなどのバイナリデータを効率的に保存および取得する方法です。
大きなファイルをParseオブジェクトに直接保存しない: ファイルが大きい場合は、AWS S3などのストレージサービスを使用し、ファイル自体ではなくファイルのURLをParseオブジェクトに保存することを検討してください。
圧縮と最適化: 大きな画像やファイルの場合、パフォーマンスを向上させるために、アップロードする前にファイルを圧縮することを検討してください。
結論
このチュートリアルでは、Uint8ListをFlutterで扱い、ファイルをバイトリストに変換し、Parse SDKを使用してBack4appにこのデータを永続化する方法を説明しました。Uint8Listは、Dartでバイトデータを効率的に扱う方法を提供し、画像のアップロード、ドキュメントの保存などのファイル操作に適しています。これをBack4appと統合することで、クラウドでバイナリデータを簡単に保存および管理できます。
詳細については、FlutterのドキュメントとBack4appのドキュメントをご覧ください。コーディングを楽しんでください!
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterのバックエンドとしてBack4appを使用したパターンマッチングの理解
FlutterでBack4appからのバックエンドデータを使用したドロップダウンメニューの作成