新着情報

2020.07.20

YouTube動作連携について

「YouTube動画の設定・設置について」

1.Googleのアカウントを取得

Googleのアカウントを取得

2.OAuthクライアントIDおよびAPIキーの作成

YouTubeの連携に必要なOAuth 2.0のクライアントIDおよびAPIキーの認証情報を作成します。

注意
【重要】OAuth クライアントIDの制限について

GoogleのOAuth 2.0の規格(プロトコル)でGoogle APIを使用するアプリケーションでは、OAuth 2.0のクライアントIDを作成するために「OAuth同意画面」の設定を行います。
クライアントIDを制限なく使用する場合は、GoogleによるOAuth同意画面の確認の手続きが必要ですが、本機能では下記の制限内での機能提供となりますのでご注意ください。

【重要】GoogleのAPIの制限について

GoogleのAPIには、「割り当て(quata)」という制限があります。
YouTubeへのデータアクセスは『YouTube Data API v3』の割り当ての上限を超えるとYouTubeダイアログに動画が表示できない状態になり、上限がリセットされるまではAPIを使用することができませんのでご注意ください。

割り当ての上限や使用量はGoogle Cloud Platformの[IAMと管理](https://console.cloud.google.com/iam-admin/)の[割り当て]から確認することができます。Googleに対して割り当ての増加を申請することができますので、必要に応じて申請を行ってください。

※GoogleのAPIの割り当ての詳細や制限増加の申請につきましては、Googleによる提供となりますので、当サービスでのサポートは行っておりません。

OAuth 2.0 のクライアントIDの制限

- 対象クライアントIDを使用したアプリケーションを利用するGoogleアカウントは100アカウントまで
- 対象クライアントIDを使用したアプリケーションの1日の表示上限は10,000回まで
- Googleアカウントのアプリケーション認証の際に「このアプリは確認されていません」と警告メッセージを表示

①コントロールパネルの[設定] > [便利な機能] > [YouTube]を選択

②“YouTubeダイアログ”が表示されますので、表示されているGoogle Cloud PlatformのAPIダッシュボードのURL(https://console.cloud.google.com/apis/)にアクセスし、OAuth クライアントIDを作成するGoogleアカウントでログインします。

注意

Google Cloud PlatformにログインするGoogleアカウントは、OAuth クライアントIDを作成・管理するアカウントになります。YouTubeを利用するGoogleアカウントとは別のGoogleアカウントで管理することも可能です。
その際は、前述の「【重要】OAuth クライアントIDの制限について」に記載の制限内容にご注意の上、ご利用ください。

③Google Cloud PlatformのAPIダッシュボードが表示されますので、[プロジェクトの選択]をクリックします。

④プロジェクトの選択画面の[新しいプロジェクト]をクリックします。

作成済みの既存のプロジェクトで管理する場合は、既存のプロジェクトを選択し、手順⑥へ進みます。

⑤任意のプロジェクト名を入力し、[作成]をクリックします。

⑥作成したプロジェクトを選択し、サイドナビゲーションの[APIとサービス] > [ダッシュボード]を選択します。
ダッシュボード画面が表示されたら[+APIとサービスの有効化]をクリックします。

⑦APIライブラリ画面より、下記の「有効にするAPI」について、有効にする設定を行います。

検索フォームに「youtube」を入力し、『YouTube Data API v3』をクリック後、次のページで[有効にする]をクリックします。

⑧サイドナビゲーションから[APIとサービス] > [認証情報]を選択します。
認証情報画面が表示されたら[+認証情報を作成]をクリックし、プルダウンメニューから「OAuth クライアントID」を選択します。

⑨OAuth クライアントIDの作成画面で下記の同意画面に関する内容と[同意画面を設定]が表示されている場合は、[同意画面を設定]をクリックし、下記の「OAuth同意画面の設定」を行います。

2-1.OAuth同意画面の設定

  1. OAuth同意画面で《User Type》の「外部」を選択し、[作成]をクリックします。
  2. 次のページで下記の項目を入力し、[保存]をクリックします。

    ダイアログの「承認済みドメイン」

  3. 保存が完了するとOAuth同意画面の設定は完了です。
  4. サイドナビゲーションから[APIとサービス] > [認証情報]を選択し、認証情報画面が表示されたら[+認証情報を作成]をクリックし、プルダウンメニューから「OAuth クライアントID」を選択します。
  5. 次の手順10に進みます。

⑩OAuth クライアント ID の作成画面で下記の項目を選択・入力し、[作成]をクリックします。

承認済みのリダイレクト URI

制限事項の設定は必要ありません。

アプリケーションの種類 “ウェブアプリケーション”を選択します。
名前

OAuth クライアントID の任意の名前を入力します。

※アプリケーション名ではありません。

⑪「OAuthクライアントを作成しました」と表示されます。

⑫サイドナビゲーションから[APIとサービス] >[認証情報]を選択します。

認証情報画面が表示されたら[OAuth 2.0 クライアントID]から作成したクライアントIDの名前、もしくは鉛筆マーク(編集)をクリックします。
ウェブアプリケーションのクライアントID画面の「クライアント ID」「クライアント シークレット」の値を控えます。

※この「クライアント ID」「クライアント シークレット」はYouTubeモジュールの初期設定で使用します。

⑬次に、同じ認証情報画面の[+認証情報を作成]をクリックし、プルダウンメニューから「APIキー」を選択します。

⑭「API キーを作成しました」と表示されたら、右下の「キーを制限」をクリックします。

⑮API キーの制限と名前変更画面が表示された、「API の制限」の「キーを制限」を選択し、[Select APIs]の選択肢の中から「YouTube Data API v3」にチェックを入れます。

右上に表示されている「API Key」の値を控えた後、[保存]をクリックします。 

※この「API Key」はYouTubeモジュールの初期設定で使用します。

名前 任意のAPIキーの名前を入力します。
アプリケーションの制限 “なし”が選択されているため、変更不要です。
APIの制限
“キーを制限”を選択します。
[Select APIs]の選択肢から「YouTube Data API v3」にチェックを入れいます。

⑯OAuth クライアントIDの作成は完了です。

3. YouTubeモジュールの初期設定

①コントロールパネルの[設定] → [便利な機能] → [YouTube]をクリック

②“YouTubeダイアログ”の《クライアントID》と《クライアント シークレット》に、
OAuth クライアントIDの作成で控えておいた「クライアントID」と「クライアント シークレット」、「API Key」を入力して[保存]ボタンをクリックします。

OAuth クライアントID

認証情報「OAuth 2.0 クライアント ID」の「クライアントID」を設定します。

  • 未設定の場合・・・入力ボックスにクライアントIDを入力します。
  • 設定済みの場合・・・クライアントIDと[削除]リンクが表示されます。《クライアント シークレット》は非表示となり、《Googleアカウント》が表示されます。
    別のクライアントIDに変更する場合は、[削除]リンクをクリックして再設定します。
  • OAuth クライアントIDの作成方法は、下記の「OAuth クライアントIDの作成を参照してください。
  • OAuth クライアントIDの作成に必要な「承認済みドメイン」「承認済みのリダイレクト URI」の設定情報は、OAuth クライアントIDが未設定の場合に表示される、ダイアログ内の『OAuth クライアントID 設定情報』をご確認ください。

クライアント シークレット

認証情報「OAuth 2.0 クライアント ID」の「クライアント シークレット」を入力します。

  • 《OAuth クライアントID》が未設定の場合に表示されます。設定済みの場合は表示されません。
APIキー

認証情報「APIキー」の「API Key」の値を入力します。

  • 《OAuth クライアントID》が未設定の場合に表示されます。設定済みの場合は表示されません。
Googleアカウント

Googleアカウントを認証します。

  • 未認証の場合・・・[認証]リンクをクリックし、YouTubeチャンネルを管理しているGoogleアカウントを選択して 「YouTubeアカウントの管理」などのアクセスを許可します。
  • 認証済みの場合・・・「認証済み」と認証したGoogleアカウントのメールアドレス表示されます。
    [削除]リンクをクリックすると、認証済みのGoogleアカウントが削除され、未認証の状態になります。
  • 《OAuth クライアントID》が設定済みの場合に表示されます。未設定の場合は表示されません。

③次に、《Googleアカウント》の[認証]リンクをクリックし、YouTubeを利用しているGoogleアカウントでログインして、許可します。

《Googleアカウント》の[認証]リンクをクリックすると、Googleアカウントの「ログイン」画面またはGoogleの「許可のリクエスト」画面が表示されます。ログイン画面が表示された場合は、接続したいYouTubeチャンネルを管理しているGoogleアカウントでログインしてください。「許可のリクエスト」画面が表示された場合は、接続したいYouTubeチャンネルを管理しているGoogleアカウントでGoogleにログインしていることを確認してください。

注意
  • httpからはじまるURLでアクセスしている場合は、Googleアカウントの認証を行うことができません。
    httpsからはじまるURLでアクセス後、“YouTubeダイアログ”よりGoogleアカウントの認証を行ってください。
  • 《Googleアカウント》に「認証済み」と表示されている場合は、認証済みです。
    別のGoogleアカウントで認証をする場合は削除して再度認証してください。

Googleアカウント認証の流れ

  1. [認証]リンクをクリックします。
  2. Googleアカウントの「ログイン」画面またはGoogleの「アカウントの選択」画面が表示されます。
    「ログイン」画面が表示された場合は、接続したいYouTubeチャンネルを管理しているGoogleアカウントにてログインします。
    「アカウントの選択」画面が表示された場合は、接続したいYouTubeチャンネルを管理しているGoogleアカウントを選択します。
    ※「YouTubeアカウントの管理」の権限の付与のメッセージが表示される場合は、[許可]をクリックします。
  3. 「このアプリは確認されていません」と警告メッセージが表示されます。左下の[詳細]をクリックし、
    さらに[承認済みドメイン+(安全ではないページ)に移動]をクリックします。
    ※承認済みドメインは、OAuth クライアントIDの作成で設定した「承認済みドメイン」です。
  4. 「選択内容を確認してください」画面に表示されている許可内容を確認します。
    「YouTubeアカウントの管理」にチェックが入っていない場合はチェックを入れてください。
    最後に、[許可]ボタンをクリックして認証を行います。
  5. 認証されると《Googleアカウント》に認証したGoogleアカウントが表示され、そのGoogleアカウントのYouTubeチャンネルにすでにアップロードしている動画がある場合は、《動画リスト》にアップロード済みの動画が表示されます。

※動画リストのサムネイルは「/images/YTimage/」に保存され、コンテンツパーツの追加・変更のサムネイル表示に使用されます。
※Googleアカウントの認証が期限切れなどにより解除され、手順2と同様に[認証]リンクのみが表示されている場合があります。
その際には、再度上記2~4の手順で接続したいYouTubeチャンネルを管理しているGoogleアカウントでの認証を行ってください。

Googleアカウントの認証エラー
■クライアントIDが間違っている場合

《OAuth クライアントID》に設定されているクライアントIDが間違っている場合は、Googleアカウントの認証の際に、Googleで「承認エラー(エラー401)」となって認証を行うことができません。《OAuth クライアントID》を削除し、クライアントIDの値に間違いがないように再度設定してください。

クライアント シークレットが間違っている場合

《OAuth クライアントID》に設定されているクライアント シークレットが間違っている場合は、Googleアカウントの認証の際に、エラーは表示されませんが、《Googleアカウント》が未認証のまま認証することができない状態(もしくはHTTP ERROR 500)となります。このような現象のときは、《OAuth クライアントID》を削除し、クライアント シークレットの値に間違いがないように再度設定してください。

クライアントIDに設定した承認済みのリダイレクトURIが間違っている場合

クライアントIDに設定した承認済みのリダイレクトURIが間違っている場合は、Googleアカウントの認証の際に、Googleで「承認エラー(エラー400)」となって認証を行うことができません。
Google Cloud Platform(https://console.cloud.google.com/apis/)にアクセスし、クライアントIDの承認済みのリダイレクトURIを修正してください
※設定する承認済みのリダイレクトURIは、《OAuth クライアントID》を削除し、ダイアログに表示される『OAuth クライアントID 設定情報』をご確認ください。

動画リストが取得できない場合
更新 動画リストを最新のものに更新します。
動画を追加 このダイアログから動画をYouTubeにアップロードすることができます。
詳しくは下記の「動画の追加方法」を参照してください。
動画詳細 対象の動画を参照します。
動画削除 対象の動画を削除します。
※アクセス許可が設定されていません。

YouTube Data API v3が無効の可能性があります。
Google Cloud Platform(https://console.cloud.google.com/apis/)にアクセスし、プロジェクトの『YouTube Data API v3』を有効に設定してください。

※APIキーが正しくありません。

APIキーが間違っています。
《OAuth クライアントID》を削除し、各項目に正しい値を設定してください。

※APIキーが間違っていも、Googleアカウントの認証の際にエラーになりません。

※割り当てを超えたため表示できません。

GoogleのAPIの制限(割り当て)を超過しています。
Googleの『YouTube Data API v3』の制限(割り当て)がリセットされるまでお待ちください。

GoogleのAPIの制限について

4.動画の追加・削除

4-1.動画の追加方法

YouTubeモジュールを設定しておくと、CMSから動画をYouTube直接にアップロードすることができます。
アップロードできる重さや動画の長さ、ファイルの種類などはYouTubeのサイトにてご確認ください。

①コントロールパネルの[設定] >[便利な機能] > [YouTube]を選択

②“YouTubeダイアログ”が表示されますので、[動画を追加]ボタンをクリックします。

③アップロードする動画の詳細を入力します。

タイトル アップロードする動画のタイトルを入力します。
説明文 アップロードする動画の説明を入力します。
カテゴリ アップロードする動画のカテゴリーを選択してください。
キーワード アップロードする動画のキーワードを入力します。キーワードが複数ある場合はカンマ「,」区切りで入力してください。
公開設定 アップロードする動画を公開にするか非公開にするかを選択してください。
動画ファイル [参照]ボタンまたは[ファイルを選択]ボタンをクリックして、アップロードする動画を選択してください。

④[アップロード開始]ボタンをクリックします。

認証しているGoogleアカウントにYouTubeチャンネルが作成されていない場合、アップロードする場所が存在しないためエラーになります。
プロファイルとリンクしたチャンネルが作成されているかどうかをご確認ください。

▼Googleダッシュボード → Youtubeアカウントの管理 → チャンネルを作成する

https://www.google.com/settings/dashboard?hl=ja

⑤リストに動画が追加されれば完成です。

動画によってはアップロードが完了するまでに時間がかかるため、正しい内容やサムネイル、再生時間がダイアログになかなか反映されないこともあります。

※しばらくたっても動画のサムネイルが表示されないままや、再生時間が0秒のままになっている場合は
一度[更新]ボタンをクリックしてください。
クリックしても状況が変わらない場合はアップロードに失敗したか、長さや重さ、動画ファイルの種類が
YouTubeの規定に沿っていない可能性があります。
[動画詳細]ボタンをクリックして、YouTubeのサイトでアップロードの状況をご確認ください。

アップロードしている動画をサイトに追加する場合

YouTubeモジュールを設定すると、コンテンツパーツの【その他】タブとレイアウトの「YouTube」の項目に、
そのYouTubeチャンネルにアップロードされた動画のパーツが追加されます。
動画を表示したい場所でコンテンツパーツの追加、もしくはレイアウトの場合は配置したいブロックに配置します。

動画の詳細確認

①コントロールパネルから[設定] >[便利な機能] >[YouTube]を選択
②“YouTubeダイアログ”が表示されますので、詳細を確認したい動画の[動画詳細]ボタンをクリックします。

③クリックすると、その動画がアップされているYouTubeのページが別ウィンドウで表示されます

4-2.動画の削除

①コントロールパネルから[設定] >[便利な機能] >[YouTube]を選択

②“YouTubeダイアログ”が表示されますので、削除したい動画の[動画削除]ボタンをクリックします。

③確認画面が表示されますので、内容を確認して[OK]ボタンをクリックして削除完了です。

※完全に削除されるまで時間がかかることがあります。

お問い合わせ

当CMSもしくは当社へのお問い合わせにつきましては、
お電話またはお問い合わせフォームからお気軽にお問い合わせください。

Tel.022-217-7780

営業時間 9:00 - 17:00 定休日:土・日、祝祭日、年末年始・夏季

サンプル紹介