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

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

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

:::info
[Firebase料金プラン](https://firebase.google.com/pricing)
:::

### 1. Firebase(Google Cloud Platform)の利用を申し込む
[Firebase公式サイト](https://firebase.google.com/)にアクセスし、[使ってみる]をクリックします。 

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e807acad195169fff4436e7f3a92632f.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/70b5829719f81fadba812b594b19aed8.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bb115a42526740463dd268eb32c12c6b.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5e62d93c133a13f5e67e2d1df156b87b.png)

### 5. プロジェクトの作成が完了したら、続行をクリックする
プロジェクトの作成完了画面で[続行]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bde55442584c88164cf3ec4f55887082.png)

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

## Firebaseの設定・Credentialsの取得

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

### 6. [プロジェクトの設定]にアクセスする
Firebaseのダッシュボードの歯車マークから、「プロジェクトを設定」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c1c11f5b83a3cb83de90a6ddeaece0f8.jpg)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1345caeac70910faf0b1f5c6fee0a772.png)
  
表示されたポップアップの中の[キーを生成]をクリックします。  
すると、ファイルがダウンロードされます。

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/003bc04a79c820aa19063a9e208608b7.png)

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/66f04986cde9381e8b194d9b211727c6.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c53cba3f9b2bf46c59f96599fb37c732.png)

Cloud Storage のロケーションは「asia-northeast1」または「asia-northeast2」を選択し、[完了]をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/05782cded7ebb2e84b79dee77f67c3ac.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/73a2dc2fd699aa5dfd04852c2c491328.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b17490d3dfcba0378657d4fea2fb4c6a.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ec764ca41ea38964b4e2897baa27ec9b.png)  


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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/c1c11f5b83a3cb83de90a6ddeaece0f8.jpg)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a122c76ca6a6d43a3888574c12006627.png)

## Kurocoでの設定

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

### 11. Firebase設定画面に上記の7と10で取得したCredentialsをセットする  
Kuroco管理画面のサイドメニューの[外部システム連携] -> [firebase]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/86d14b73e133a8a6b2ceb141ec505be1.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6e6766204136632e7b31945966e5b536.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fdf4816301c6c7493f94d44843828b9e.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1a3c3cdc1210b264aed0f1cc0f27cb4c.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8c496d85c162da862d4698dab1c3cf70.png)

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

## 利用方法
### ファイル
接続完了後、[ファイルマネージャー]をクリックすると、GCSの表示が確認でき、ファイルをアップロードできます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5308fa4547eef87dd25ebe7982f1b0db.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d2f3c1fc8e4dfe681542b90731503f19.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ed4c0df948b6f34fcd039a496fa32b51.png)

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

#### WYSIWYG
WYSIWYG項目の全般設定で「リソースを指定」にGCSのパスを入力すると、WYSIWYGからアップロードしたファイルが指定したGCSのフォルダに保存されます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a1b98b35034215b4bc9471dddb7c14c1.png)