前回はReactアプリにGoogle認証を組み込む方法を試しました。
今回はそのコードを使いながら、さらに
Google Drive APIを使って任意のデータをログインしているユーザーのGoogle Driveに保存することに挑戦してみました。
完全にブラウザのみで動作するReactアプリケーションなので、バックエンドサーバは不要です。Netlifyなど静的サイトのホスティングサービスを使ってデプロイすることが可能です。
- Google Drive内の所定のフォルダからファイル一覧を表示。
- ファイル名がクリックされるとその内容（テキストデータ）を表示。
- テキストを入力・編集して保存ボタンを押し、ファイル名を入力するとGoogle Driveにテキストデータを保存。
ということを行っています。
２つのContextプロバイダー
認証状態とアプリケーション固有の状態を分けて2つのContextプロバイダーで別々に共有するようにします。
import React from 'react';
import { FileList } from './FileList';
import { FileContent } from './FileContent';
import { AuthProvider } from './auth-state';
import { AppStateProvider } from './app-state';
import { Header } from './Header';
import './App.css';
function App() {
return (
<AuthProvider>
<AppStateProvider>
<div className="App">
<Header />
<FileList />
<FileContent />
</div>
</AppStateProvider>
</AuthProvider>
);
}
export default App;
Google Drive APIの有効化とAPI Keyの作成
下のドキュメントにしたがってGoogle Drive APIを有効化し、API Keyを作成しておいてください。
https://developers.google.com/drive/api/v3/quickstart/js
Google DriveへのCRUD処理
次にGoogle Driveにアクセスする処理を「google-api.js」に記述します。
google-api.js
---
---
前回作成した認証関係の関数に加えて、
| getFiles | ファイル一覧取得 |
| getFileContent | ファイル内容取得 |
| uploadFile | ファイル保存 |
| deleteFile | ファイル削除 |
などの関数をエクスポートしています。
アップロード処理がなかなか動かず苦労しましたが、最終的には下のサイトの情報にしたがってMultipart形式でPOST（更新のときはPATCH）リクエストを送ることで解決しました。
またファイルの内容を取得する方法も最初は分からず試行錯誤しました。こちらは下のURLにGETリクエストを送ることでダウンロード出来ました。
https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&source=downloadUrl
もちろんリクエストヘッダーにはGoogle認証で得られたアクセストークンを付加する必要があります。
ファイルの保存先フォルダは現状では APP_FOLDER という定数で定義していますが、これはユーザーが任意のフォルダ名を指定出来るようにした方が便利ですね。
以上、今回のサンプルを作成してみて、バックエンドサーバ無しでもブラウザ上のJavaScriptだけでかなり柔軟にGoogle Driveへのデータ保存が出来るということが分かりました。
単純なテキストではなく例えばJSONを保存すれば、ある意味簡易的なデータベースとしても使えるかも知れませんね。何よりアプリの開発者側で保存先のデータベースやストレージを用意する必要が無いのが魅力的です。
今回作成したアプリケーションのソースコードは
こちらにあります。
