Firebaseと連携して、Storageにファイルを保存する

Firebaseとの連携方法を解説します。
Firebaseと連携することで、Kurocoからアップロードした画像や動画ファイルを、FirebaseのStorageに格納し利用が可能です。

Firebaseのプロジェクト作成

Firebase公式サイトより、Firebaseのプロジェクトを作成します。
テスト開発は無料のSparkプランで対応が可能となりますので、本チュートリアルではSparkプランを利用します。必要に応じて有料プランに変更してください。

1. Firebase(Google Cloud Platform)の利用を申し込む

Firebase公式サイトにアクセスし、[使ってみる]をクリックします。

Image from Gyazo

2. プロジェクトを作成する

「firebaseへようこそ」の画面で[プロジェクト作成]をクリックします。

Image from Gyazo

3. プロジェクト名をセットして、続行をクリックする

プロジェクト名を入力し、「自身の取引、ビジネス、仕事、または職業のみを目的としてFirebaseを利用することを正式に認めます。」へチェックを入れて、[続行]をクリックします。
プロジェクト名はあとから変更ができませんのでご注意ください。

Image from Gyazo

4. Googleアナリティクスの設定をする

Googleアナリティクスの有効/無効を設定します。
有効にした場合、次の画面でGoogleアナリティクスのアカウント設定画面に遷移します。今回は[無効]に変更します。

Image from Gyazo

5. プロジェクトの作成が完了したら、続行をクリックする

プロジェクトの作成完了画面で[続行]をクリックします。

Image from Gyazo

以上でFirebaseプロジェクトが完成します。

Firebaseの設定・Credentialsの取得

ここからはFirebaseの管理画面にて作業します。

6. [プロジェクトの設定]にアクセスする

Firebaseのダッシュボードの歯車マークから、「プロジェクトを設定」をクリックします。

Image from Gyazo

7. 秘密鍵のダウンロードをする

[サービスアカウント]のタブを開き、[新しい秘密鍵の生成]をクリックします。

Image from Gyazo

表示されたポップアップの中の[キーを生成]をクリックします。
すると、ファイルがダウンロードされます。

ダウンロードしたファイルは後ほど使用しますので保存しておいて下さい。

Image from Gyazo

8. Firebaseのストレージの利用開始設定をする

サイドメニューの[構築] -> [storage]をクリックし、Storageの画面で[始める]をクリックします。

Image from Gyazo

[次へ]をクリックします。

Image from Gyazo

Cloud Storage のロケーションは「asia-northeast1」または「asia-northeast2」を選択し、[完了]をクリックします。
Image from Gyazo

9. Firebaseのアプリ追加設定をする

サイドメニューの[プロジェクトの概要]からプロジェクトホーム画面に戻り、WEBタイプアプリ[< / >]をクリックします。

Image from Gyazo

アプリのニックネームを入力し、[アプリを登録]をクリックします。

Image from Gyazo

「Firebase SDKの追加」画面が表示されるので、[コンソールに進む]をクリックします。

Image from Gyazo

10. FirebaseConfigを取得する

「プロジェクト概要」の横の歯車マークをクリックし、[プロジェクト設定]の画面にアクセスします。

Image from Gyazo

画面下部の「マイアプリ」->「SDKの設定と構成」の[Config]を選択します。
すると、firebaseConfigが表示されます。後ほど使用するので、コピーします。

Image from Gyazo

Kurocoでの設定

ここからはKurocoの管理画面にて作業します。

11. Firebase設定画面に上記の7と10で取得したCredentialsをセットする

Kuroco管理画面のサイドメニューの[外部システム連携] -> [firebase]をクリックします。

Image from Gyazo

Credentialsの欄に「7. 秘密鍵のダウンロードをする。」で取得したファイルをセットします。

Image from Gyazo

また、App Configの欄に「10. FirebaseConfigを取得する」で取得したFirebaseConfigを貼り付けます。

Image from Gyazo

[接続する]をクリックします。

Image from Gyazo

12. StorageをEnableにする

「Storage」の[Enable]にチェックを入れ、[更新する]をクリックします。

Image from Gyazo

以上でFirebaseとの連携が完了です。

コンテンツ定義での利用方法

Kuroco管理画面のコンテンツ定義より、設定項目で[ファイル(GCSにアップロード)]を選択します。

Image from Gyazo

コンテンツ編集画面にファイルアップロードフィールドが表示されます。

Image from Gyazo

こちらからファイルをアップロードすると、FirebaseのStorageにファイルがアップロードされるようになります。

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。