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

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

Firebaseと連携する

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

Vimeoと連携する

1. Vimeoのアカウントを登録する
Vimeoのアカウントを登録してください。
参考) Vimeoのプランについて
機能的にはPlusでも対応可能ですが、頻繁に利用する場合はBussinessがおすすめです。
https://vimeo.com/
2. 新規アプリ登録の画面へ進む
ログインした状態のまま、Vimeo developer から[新規アプリ]をクリックします。
3. appを追加する
下記内容を入力し、[Create app] をクリックしてappを追加します。

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

4. appの設定画面からUpload Accessの申請画面に進む
[Request Upload Access]をクリックします。
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?: 簡単でよいのでどのような動画がアップロードされるかの説明を英語で入力します。

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

ヒント

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

6. Access Tokensを作成する
Vimeo developperのMy Appsを確認すると、先ほど作成したアプリが表示されるので、クリックして作成したアプリの設定画面へ遷移します。
下記のように、Authenticatedを選択後、Scopesを選択して、[Generate]をクリックします。
Access Tokenが作成されます。
下記情報をメモしておいて下さい。

• Access token
• Client identifier
• Client secrets

注意

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

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

「6. Access Tokensを作成する」で取得した、「Client identifier」「Client secrets」「Access token」をセットします。

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

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

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

9. プリセットを作成する
下記の部分でプリセットを設定します。
設定完了したら[保存]をクリックします。

10. アップロードのデフォルトを設定する
アップロードのデフォルト画面からアップロードのデフォルトを設定します。プリセットは先ほど作成したものを選択してください。
設定完了したら[保存]をクリックします。

連携したVimeoの利用方法

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

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

動画はVimeoにアップロードされます。

3. フロントで表示する
フロントでは下記のようにVimeoのリンクを取得できます。

参考) VimeoのリンクはChromeの開発者コンソールから、[Network]タブで実際にKurocoと通信している内容を確認するか、Swagger UIを利用して確認してください。

下記のようにフロントでVimeoの動画の表示が確認できます。

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