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

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

Firebaseのプロジェクト作成

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

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

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

プロジェクト名を入力し、[Firebaseの規約に同意します]にチェックを入れて、[続行]をクリックします。
プロジェクト名はあとから変更ができませんのでご注意ください。

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

Firebaseの設定・Credentialsの取得

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

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

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

「Firebase SDKの追加」画面が表示されるので、[次へ]をクリックします。

Image (fetched from Gyazo)

「Firebase CLIのインストール」画面が表示されるので、[次へ]をクリックします。

Image (fetched from Gyazo)

[コンソールに進む]をクリックします。

Image (fetched from Gyazo)

10. FirebaseConfigを取得する

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

Kurocoでの設定

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

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

接続をクリックします。

Image (fetched from Gyazo)

12. StorageをEnableにする

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

Image (fetched from Gyazo)

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

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

Kuroco管理画面のコンテンツ定義より、設定項目で[GSC上のファイル]を選択します。

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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