---
title: Vimeoと連携して動画をアップロードする
category: 外部システム連携
weight: 1
---

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

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

## Vimeoと連携する
**1. Vimeoのアカウントを登録する**  
Vimeoのアカウントを登録してください。  
参考) Vimeoのプランについて  
機能的にはPlusでも対応可能ですが、頻繁に利用する場合はBussinessがおすすめです。  
[https://vimeo.com/](<https://vimeo.com/>)  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9adcf326009b7831b351e68745525926.png)
**2. 新規アプリ登録の画面へ進む**  
ログインした状態のまま、[Vimeo developer](https://developer.vimeo.com/) から[新規アプリ]をクリックします。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/5fd6266289e7e6f2e79247a3fad9e992.png)
**3. appを追加する**  
下記内容を入力し、[Create app] をクリックしてappを追加します。
- App name: お好きな名前
- App description:簡単でよいので動画利用する内容の英語の説明
- Will people besides you be able to access your app?:No

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/00f63d9590c1a7a71dfaaaa23a014328.png)
**4. appの設定画面からUpload Accessの申請画面に進む**  
[Request Upload Access]をクリックします。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/1cc6fa6a5755d0b4f097d28d0d02a2b0.png)
**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)](https://t.gyazo.com/teams/diverta/d55161531b041665efab32f3bc27a9d1.png)
全て記載したら [Request upload access] をクリックして申請完了です。

:::tip
アプリの認証には2、3日ほどかかります。承認されない場合は[Vimeoのサポート](https://vimeo.com/help/contact)にお問い合わせください。
:::

**6. Access Tokensを作成する**   
[Vimeo developperのMy Apps](https://developer.vimeo.com/apps)を確認すると、先ほど作成したアプリが表示されるので、クリックして作成したアプリの設定画面へ遷移します。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/f44c1a583d2a802d95b657d824208559.png)
下記のように、Authenticatedを選択後、Scopesを選択して、[Generate]をクリックします。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/9d4d4a4fc49c800e2afc5cc6dfc05a4d.png)
Access Tokenが作成されます。  
下記情報をメモしておいて下さい。
- Access token
- Client identifier
- Client secrets

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

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/bde62e7ce65b5ea44cdd4c98dbe49700.png)
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/b44dd865b2769a7dd506aea4603a4603.png)
**7. Kurocoの管理画面に設定する**  
次にKuroco管理画面へ移動し、[外部システム連携] -> [vimeo]に遷移します。

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

「6. Access Tokensを作成する」で取得した、「Client identifier」「Client secrets」「Access token」をセットします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/402b9060c6cd45cd755e9b41b5d3425f.png)

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

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

**8. Vimeoの設定をする**  
[Vimeoの設定画面](https://vimeo.com/settings/videos/embed_presets)に移動し、[新規プリセットを追加]をクリックして、プリセットの設定画面に遷移します。  

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/bd4a5c677d313f4a250b90dd26121f38.png)
**9. プリセットを作成する**  
下記の部分でプリセットを設定します。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/89962274c7b72c46919f3be3ad308bd6.png)
設定完了したら[保存]をクリックします。

**10. アップロードのデフォルトを設定する**  
[アップロードのデフォルト画面](https://vimeo.com/settings/videos/upload_defaults)からアップロードのデフォルトを設定します。プリセットは先ほど作成したものを選択してください。  
![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/e28f4e4b464facc3f830e7b36bf5b409.png)
設定完了したら[保存]をクリックします。  


## 連携したVimeoの利用方法
**1. コンテンツ定義を編集する**  
Firebase, Vimeoそれぞれとの連携が完了すると、[コンテンツ定義編集](/ja/docs/management/content-structure-topics-group/#コンテンツ定義編集)のページで拡張項目に「動画ファイル(Vimeo/)」が選択できるようになります。  
対象のコンテンツ定義より、「動画ファイル(Vimeo)」を設定します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f863f031ff9f3914bc597c836487d944.png)

**2. コンテンツに動画をアップロードする**  
対象のコンテンツの追加・編集ページで動画をアップロードします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7a070a95a23d788ac6b9fe131be7ac3b.png)

動画はVimeoにアップロードされます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a0e779da8dee3dfc991867703e1ae2e3.png)

**3. フロントで表示する**  
フロントでは下記のようにVimeoのリンクを取得できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/b0f95ff4dc49d9571929fe8f474dc292.png)

参考) VimeoのリンクはChromeの開発者コンソールから、[Network]タブで実際にKurocoと通信している内容を確認するか、[Swagger UI](/ja/docs/tutorials/using-swagger-to-check-the-structure-of-data/)を利用して確認してください。

下記のようにフロントでVimeoの動画の表示が確認できます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/70961f15062f8e2bee5092d380a6a7fa.jpg)

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