スマートフォンアプリを作ってみたいと思ったことはありませんか？
特に Android アプリは、Google アカウントとの親和性が高く、データ保存先として Google Drive を活用することで便利なサービスを作ることができます。
本記事では、Flutter をフロントエンドに採用し、Google アカウントでログインして、データを Google Drive に保存するシンプルな Android アプリ を「1から最後まで」わかりやすく解説します。
開発環境の準備から、実際のソースコード例までを順を追って説明するので、初心者の方でもアプリ開発の流れをイメージできる内容です。
Flutter は Google が提供するクロスプラットフォーム開発フレームワークです。
1つのコードで Android / iOS 両対応 のアプリを作成できるのが大きな特徴です。
Dart というプログラミング言語を使い、ウィジェットを組み合わせて UI を作成します。
本記事で Flutter を選ぶ理由は以下の3つです。
アプリを作るためには、まず環境を整える必要があります。
アプリで Google Drive を操作するには、まず Google アカウントでのログイン が必要です。
Flutter では google_sign_in パッケージを利用します。
dependencies:
flutter:
sdk: flutter
google_sign_in: ^6.1.5
http: ^0.13.6
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: GoogleLoginPage(),
);
}
}
class GoogleLoginPage extends StatefulWidget {
@override
_GoogleLoginPageState createState() => _GoogleLoginPageState();
}
class _GoogleLoginPageState extends State<GoogleLoginPage> {
final GoogleSignIn _googleSignIn = GoogleSignIn(
scopes: ['email', 'https://www.googleapis.com/auth/drive.file'],
);
GoogleSignInAccount? _user;
Future<void> _login() async {
try {
final user = await _googleSignIn.signIn();
setState(() {
_user = user;
});
} catch (error) {
print("ログイン失敗: $error");
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Google Drive アプリ")),
body: Center(
child: _user == null
? ElevatedButton(
onPressed: _login,
child: Text("Googleアカウントでログイン"),
)
: Text("ログイン成功: ${_user!.email}"),
),
);
}
}
このコードで、Google アカウントにログインできるようになります。
ログイン後、次は Google Drive にファイルを保存してみましょう。
import 'dart:convert';
import 'package:http/http.dart' as http;
Future<void> uploadToDrive(String text, GoogleSignInAccount user) async {
final authHeaders = await user.authHeaders;
final httpClient = http.Client();
final response = await httpClient.post(
Uri.parse("https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart"),
headers: {
...authHeaders,
"Content-Type": "multipart/related; boundary=foo_bar_baz",
},
body: """
--foo_bar_baz
Content-Type: application/json; charset=UTF-8
{"name": "sample.txt"}
--foo_bar_baz
Content-Type: text/plain
$text
--foo_bar_baz--
""",
);
print("保存結果: ${response.body}");
}
この関数に "Hello Drive!" のような文字列を渡すと、Google Drive 上に sample.txt が保存されます。
実際のUIはシンプルですが、これで 「Googleアカウント連携 + Google Drive保存」 が完成します。
今回のサンプルをベースに、以下のように発展させることが可能です。
本記事では、Flutter を使って Android アプリを開発し、Google アカウントでログインして Google Drive にデータを保存する流れを解説しました。
手順をまとめると以下の通りです。
google_sign_in を使ってログイン処理を実装これで、シンプルながらも「Google アカウントを使ったデータ保存アプリ」が完成しました。
Flutter の強みはこのように Google サービスと簡単に連携できる点 にあります。
今回のサンプルを基礎に、自分のアイデアを加えてアプリを拡張してみてください。