YouTube動画の設定、設置 | マニュアル一覧 | CMSなら「ant2-ASP」でホームページ制作!

Manual

CMS操作マニュアル

CMSの操作方法を作業から探せるようにマニュアル一覧にしました。
「こんな時はどうするの?」と迷った場合は、こちらをご覧ください。

YouTube動画の設定、設置

YouTubeチャンネルで有効なGoogleアカウントを設定することで、お手持ちの動画をCMSよりアップロードすることができるようになります。また、アップロードした動画はコンテンツパーツやレイアウトで好きな場所に簡単に貼り付けることができます。
Googleアカウントをお持ちでない方は、まずは公式サイトからアカウントを取得してください。

⇒ Googleアカウントを作成する

YouTubeモジュールの初期設定

1
下記の「OAuth クライアントIDの作成」の手順を参照して、OAuth クライアントIDおよびAPIキーを作成します。

2
コントロールパネルの[設定][便利な機能][YouTube]をクリックすると、“YouTubeダイアログ”が表示されます。

3
“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》が設定済みの場合に表示されます。未設定の場合は表示されません。

4
次に、《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アカウントの管理」にチェックが入っていない場合はチェックを入れてください。最後に、[許可]ボタンをクリックして認証を行います。
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 設定情報』をご確認ください。

5
認証されると《Googleアカウント》に認証したGoogleアカウントが表示され、そのGoogleアカウントのYouTubeチャンネルにすでにアップロードしている動画がある場合は、《動画リスト》にアップロード済みの動画が表示されます。

  • Googleアカウントの認証が期限切れなどにより解除され、手順2と同様に[認証]リンクのみが表示されている場合があります。その際には、再度上記2~4の手順で接続したいYouTubeチャンネルを管理しているGoogleアカウントでの認証を行ってください。

動画リストが取得できない場合

※アクセス許可が設定されていません。 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の制限についてはこちら

動画リスト

更新 動画リストを最新のものに更新します。
動画を追加 このダイアログから動画をYouTubeにアップロードすることができます。詳しくは下記の「動画をYouTubeにアップする」を参照してください。
動画詳細 対象の動画を参照します。
動画削除 対象の動画を削除します。

6
[閉じる]ボタンをクリックして終了です。

 Hint

2段階認証を設定している場合

Google側のセキュリティ強化のため、2段階認証などの設定により認証プロセス画面が表示されることがあります。その場合は、Googleから送信されるセキュリティに関するメールや認証プロセス画面の内容を確認して認証を行ってください。

動画を追加する

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

1
コントロールパネルの[設定][便利な機能][YouTube]を選択します。

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

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

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

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

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

▼Googleダッシュボード → Youtubeアカウントの管理 → チャンネルを作成する
https://www.google.com/settings/dashboard?hl=ja

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

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

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

 Hint

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

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

⇒ コンテンツパーツについてはこちら
⇒ レイアウトについてはこちら

右クリックかYouTubeの設定

YouTube動画パーツのタイトルの上で右クリックして、表示されたショートカットメニューから[YouTube][YouTube設定]を選択します。

動画の詳細を確認する

1
コントロールパネルから[設定][便利な機能][YouTube]を選択します。

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

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

動画を削除する

1
コントロールパネルから[設定][便利な機能][YouTube]を選択します。

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

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

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

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同意画面の確認の手続きが必要ですが、本機能では下記の制限内での機能提供となりますのでご注意ください。

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

  • 1つのクライアントIDを複数のサイトでご利用いただく場合は、Google側の制限がありますので、ご注意ください。

【重要】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による提供となりますので、当サービスでのサポートは行っておりません。

1
コントロールパネルの[設定][便利な機能][YouTube]を選択します。

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

 Hint

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

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

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

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

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

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

7
APIライブラリ画面より、下記の「有効にするAPI」について、有効にする設定を行います。
検索フォームに「youtube」を入力し、『YouTube Data API v3』をクリック後、次のページで[有効にする]をクリックします。

有効にするAPI
  • YouTube Data API v3

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

OAuth同意画面の設定

  1. OAuth同意画面で《User Type》の「外部」を選択し、[作成]をクリックします。
  2. 次のページで下記の項目を入力し、[保存して次へ]をクリックします。
  3. アプリ名 任意のアプリケーション名を入力します。
    ※同意画面に表示される
    ユーザーサポートメール メールアドレスを選択します。
    ※ユーザーの同意に関して問い合わせるために使用されます。
    アプリのロゴ (設定不要)
    アプリケーションのホームページ (設定不要)
    [アプリケーション プライバシーポリシー]リンク (設定不要)
    [アプリケーション利用規約]リンク (設定不要)
    承認済みドメイン

    [+ドメインの追加]をクリックし、“YouTubeダイアログ”にある『OAuth クライアントID 設定情報』の「承認済みドメイン」の内容を入力します。

    デベロッパーの連絡先情報 メールアドレスを入力します。
    ※プロジェクトの変更について Googleからのお知らせに使用されます。
  4. 「スコープ」画面の内容を確認し、[保存して次へ]をクリックします。
    ※スコープの設定は必要ありません。
  5. 「テストユーザー」画面の内容を確認し、[保存して次へ]をクリックします。
    ※テストユーザーの設定は必要ありません。
    (OAuth同意画面の公開ステータスが「テスト」の間はテストユーザーが必要ですが、この後の手順で公開ステータスを「本番環境」に変更するため設定は必要ありません。)
  6. OAuth同意画面の「概要」が表示されます。[ダッシュボードに戻る]をクリックします。
  7. OAuth同意画面のダッシュボードで「公開ステータス」の[アプリを公開]をクリックし「テスト」から「本番環境」に切り替わったら設定は完了です。
    【テスト中】

    【本番環境へ変更後】

    ・本番環境: アプリのステータスを「本番環境」に設定すると、Google アカウントを持つすべてのユーザーがアプリを利用できるようになります。OAuth 画面の構成方法に応じて、検証を受けるためにアプリの送信が求められることがあります。
    ・テスト: アプリがまだテスト中やビルド中である場合は、ステータスを「テスト」に設定できます。この状態では、アプリをテストできますが、ユーザー数に上限があります。
  8. 手順9と同様にサイドナビゲーションから[APIとサービス][認証情報]を選択し、認証情報画面が表示されたら[+認証情報を作成]をクリックし、プルダウンメニューから「OAuth クライアントID」を選択します。
  9. 次の手順11に進みます。

9
OAuth クライアント ID のの作成画面で「ウェブアプリケーション」を選択後、下記の項目を選択・入力し、[作成]をクリックします。

アプリケーションの種類 “ウェブアプリケーション”を選択します。
名前 OAuth クライアントID の任意の名前を入力します。
※アプリケーション名ではありません。
承認済みのリダイレクト URI

[+URLを追加]をクリックし、“YouTubeダイアログ”にある『OAuth クライアントID 設定情報』の「承認済みのリダイレクト URI」の内容を入力します。

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

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

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

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

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

14
API キーの制限と名前変更画面が表示された、「API の制限」の「キーを制限」を選択し、[Select APIs]の選択肢の中から「YouTube Data API v3」にチェックを入れます。右上に表示されている「API Key」の値を控えた後、[保存]をクリックします。

名前

任意のAPIキーの名前を入力します。

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

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