Vimeoと連携して動画をアップロードする

このページでは、KurocoとVimeoを連携し、Kurocoから動画のアップロード・表示をする方法を説明します。

Firebaseと連携する

Vimeoと連携して動画をアップロードするために、Firebaseと連携がされている必要があります。
まずはFirebaseと連携して、Storageにファイルを保存するのチュートリアルを参考にFirebaseとの連携を行ってください。

Vimeoと連携する

1. Vimeoのアカウントを登録する
Vimeoのアカウントを登録してください。
参考) Vimeoのプランについて 機能的にはPlusでも対応可能ですが、頻繁に利用する場合はBussinessがおすすめです。
https://vimeo.com/
Image (fetched from Gyazo)

2. 新規アプリ登録の画面へ進む
ログインした状態のまま、Vimeo developer から[新規アプリ]をクリックします。 Image (fetched from Gyazo)

3. appを追加する
下記内容を入力し、[Create app] をクリックしてappを追加します。

  • App name: お好きな名前
  • App description:簡単でよいので動画利用する内容の説明
  • Will people besides you be able to access your app?:No

Image (fetched from Gyazo)

4. appの設定画面からUpload Accessの申請画面に進む
[Request Upload Access]をクリックします。 Image (fetched from Gyazo)

5. Request Upload Accessの申請を行う
下記内容を入力します。

  • Will you be charging for sample?: No
  • Where will these videos be uploaded?: My account
  • Who created these videos?: Other people created these videos
  • What kind of videos will be uploaded?: 簡単でよいのでどのような動画がアップロードされるかの説明を入力します。

Image (fetched from Gyazo)

全て記載したら [Request upload access] をクリックして申請完了です。

注意) アプリの認証には2、3日ほどかかります。申請されない場合はVimeoのサポートにお問い合わせください。

6. Access Tokensを作成する
Vimeo developperのMy Appsを確認すると、先ほど作成したアプリが表示されるので、クリックして作成したアプリの設定画面へ遷移します。 Image (fetched from Gyazo)

下記のように、Authenticatedを選択後、Scopesを選択して、[Generate]をクリックします。 Image (fetched from Gyazo)

Access Tokenが作成されます。
下記情報をメモしておいて下さい。

  • Access Token
  • Client identifier
  • Client secrets

注意)Access Tokenは画面を閉じると再表示できませんので、メモをしておいてください。

Image (fetched from Gyazo)

Image (fetched from Gyazo)

7. Kurocoの管理画面に設定する
次にKuroco管理画面に移動し、[外部システム連携] -> [vimeo]に遷移します。 Image (fetched from Gyazo)

Vimeoタグの設定欄に「6. Access Tokensを作成する」で取得した、「Client Identifier」「Client Secrets」「Access Token」をセットします Image (fetched from Gyazo)

値を記入したら、[更新する] ボタンをクリックします。
以上でKurocoとVimeoが連携できるようになりました。

Plus以上のプランを契約している場合、アップロードのデフォルトを設定することができるので下記設定に進んでください。
特に設定が必要ない場合は連携したVimeoの利用方法に進んでください。

8. Vimeoの設定をする
Vimeoの設定画面に移動し、[新規プリセットを追加]をクリックして、プリセットの設定画面に遷移します。

Image (fetched from Gyazo)

9. プリセットを作成する
下記の部分でプリセットを設定します。 Image (fetched from Gyazo)

設定完了したら[保存]をクリックします。

10. アップロードのデフォルトを設定する
アップロードのデフォルト画面からアップロードのデフォルトを設定します。プリセットは先ほど作成したものを選択してください。
Image (fetched from Gyazo)

設定完了したら[保存]をクリックします。

連携したVimeoの利用方法

1. コンテンツ定義を編集する
Firebase, Vimeoそれぞれとの連携が完了すると、コンテンツ定義編集のページで拡張項目に「動画ファイル(Vimeo/)」が選択できるようになります。
対象のコンテンツ定義より、「動画ファイル(Vimeo)」を設定します。 Image (fetched from Gyazo)

2. コンテンツに動画をアップロードする
対象のコンテンツの追加・編集ページで動画をアップロードします。 Image (fetched from Gyazo)

動画はVimeoにアップロードされます。 Image (fetched from Gyazo)

3. フロントで表示する
フロントでは下記のようにVimeoのリンクを取得できます。
Image (fetched from Gyazo) 参考) VimeoのリンクはChromeの開発者コンソールから、[Network]タブで実際にKurocoと通信している内容を確認するか、Swagger UIを利用して確認してください。

下記のようにフロントでVimeoの動画の表示が確認できます。 Image (fetched from Gyazo)

以上でKurocoとVimeoを連携し動画をアップロードできるようになりました。