👋

【過去Blogからの移行記事】google sites に youtubeチャンネルの動画リストをガジェットとして表示する

2022/09/18に公開

Google App Engine

YouTube API

tech

この記事の内容は次の構成になっています。

YoutubeチャンネルのRSSフィードをガジェットにして表示
Google App Engine のPHPから YouTube Data API v3 のメソッドをコールして、上記のRSSフィードと似たような結果を得る

今年の4月にYoutubeの古いAPIが廃止になっていたようで、

その「古いAPI」のRSSを使って取得しガジェットとして表示させていた友人の音楽動画一覧が、取得に失敗して真っ白になっていた。

RSSの取得が出来なくなったわけではないようで、次の情報源等より新しいRSSフィード取得URLを知ることが出来た。

YoutubeチャンネルのRSS - OE
http://jnst.hateblo.jp/entry/2015/05/08/162917

ガジェットXMLファイルに記述していたURLを上記ページの例に準じて書き換えれば、特に他に弄るところ無く問題は回避できた。
参考までに、ガジェットXMLファイルは下記のような内容です。

<?xml version="1.0" encoding="UTF-8" ?>
<module>

  <moduleprefs author="Tatsuhiko Kimita" author_email="nannbo@crappo.net" height="300" title="naoki hayakyan の YOUTUBEチェンネルRSSフィード">

  <content type="html">
    <![CDATA[
      <div id="content_div">
</div>
<script type="text/javascript">

  var showdate = true;
  var entries = 10;
  var summaries = false;

  function getFeed() {
    var params = {};

    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;

    params[gadgets.io.RequestParameters.NUM_ENTRIES] = new Number(entries);
    params[gadgets.io.RequestParameters.GET_SUMMARIES] = summaries;

    var url = "https://www.youtube.com/feeds/videos.xml?channel_id=UC1jRcLeeoIYiqvJFYsnIfyQ";

    gadgets.io.makeRequest(url, response, params);
  };

  function response(obj) {
    *// obj.data contains the feed data*
    var feed = obj.data;
    var html = "";

    *// Display the feed title and description*
    html += "<div><b>" + feed.Title + "</b></div>";
    *//    html += "<div>" + feed.Description + "</div><br>";*

    *// Access the data for a given entry*
    if (feed.Entry) {
      for (var i = 0; i < feed.Entry.length; i++) {
        html += "<div>";
        if (showdate==true)
        {
          var milliseconds = feed.Entry[i].Date;
          var date = new Date(milliseconds);
          html += date.toLocaleDateString();
          html += " ";
          html += date.toLocaleTimeString();
          html += "</div>";
          html += '<div style="margin-left:30px;margin-bottom:10px;">';
        }
        html += "<a target='_blank' href='" + feed.Entry[i].Link + "'>"
          + feed.Entry[i].Title
          + "</a> ";
        if (summaries==true) {
          html += "<br><i>" + feed.Entry[i].Summary + "</i>";
        }
        html += "</div>";
      }
    }
    document.getElementById('content_div').innerHTML = html;
  };
  gadgets.util.registerOnLoadHandler(getFeed);

      </script>
    ]]>
  </content>
  </moduleprefs>
</module>

ところで。
実は上記のやり方で対処する前に勉強を兼ねて、問題を回避する別のやり方を実験していたので、以下では自分用メモがてらその話題を書きます。

「別のやり方」とは、次の要素を組み合わせて似たような表示を実現するというもの。

YouTube Data API v3 の「Search API の listメソッド」を使ってデータを取得する。
Search API へは、Google App Engine のPHPを使ってアクセスする。
Google App Engine のPHPで Search API から取得したJSONデータを表示用に加工するのは、ガジェットXMLに記述したjavascript。

ちょうど去る６月に Google App EngineのPHPサポートが正式版になったということだったので、このやり方を思い立った次第。

まずは、「YouTube Data API (v3)にどんなHTTPリクエストを送ったら、どんなレスポンスが得られるのか」を確認する。これは、Googleアカウントを持っていてブラウザにそれでログインしていれば、下記のページでテストできる。

Search: list | YouTube Data API (v3) | Google Developers
https://developers.google.com/youtube/v3/docs/search/list?hl=ja

次のようなリクエストで、RSSフィードと似たような結果セットのJSONデータが得られる。
(ちなみに、テストに使った channelId はギターをやってる友達のもの)

GET https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UC1jRcLeeoIYiqvJFYsnIfyQ&maxResults=5&key={YOUR_API_KEY}

上記リクエストURIの「{YOUR_API_KEY}」の部分に、Google App Engine にて自分で生成した API KEY を埋め込むことで、Google App Engine のPHP/Java/Python/GoからYoutubeデータへアクセスできるというわけだ。

そこで次に、Googleアカウントにログインしているブラウザで下記へアクセスして Google App Engine にPHPプロジェクトを作成する。

Google Developers Console
https://console.developers.google.com/project

作成の流れは下記のような感じ。

とりあえず「プロジェクトを作成」から適当な名前で作成。仮に「hoge-project」とする。
画面にリストされた hoge-project をクリックするとプロジェクトの詳細画面に遷移する。
左ペインの「APIと認証」＞「API」をクリックし、表示されたAPI一覧から「YouTube Data API」をクリック。
「APIを有効にする」というボタンがあるのでそれをクリックすると、このプロジェクトから当該APIを利用することが出来るようになる。(APIキーを作るのはこれから)
左ペインの「APIと認証」＞「認証情報」をクリックし表示された画面に「認証情報を追加」というボタン(のようなセレクトボックス)があるので、そこから「APIキー」を選択。
「サーバーキー」「ブラウザキー」「Androidキー」「iOSキー」とあるが、今回はPHPからのアクセスを行うので「サーバーキー」を選択。作成画面の「リクエストを受け入れるサーバーIPアドレス」の欄は、知らないので省略。
以上で作成したAPIキーを控えておいて、次にPHPコードを当該プロジェクトへアップロードするための下準備をする。左ペインの「概要」＞「Hello World アプリのデプロイ」をクリック。(概要の画面がグラフ表示になってて困ったら、 https://console.developers.google.com/project/hoge-project/start/appengine で直接開くのもあり)
「PHP」を選択し、「Google App Engine SDK for PHP」のリンクを新しい画面へ開き、自分の使用PCに合うSDKを入手してインストールする。
Google Developers Console の「Hello World アプリのデプロイ」画面へ戻り、「Php sample code」のリンクからサンプルアプリをダウンロードして解凍してコマンドラインツールを開き、サンプルコードの解凍先へ移動する。
「Hello World アプリのデプロイ」画面に記載されている DEPLOY THE APP の手順に従ってサンプルコードをアップロードして動作を確認する。

あとはサンプルコードの中身を好きなように編集して、DEPLOY THE APP の手順を繰り返せば良い。
なお、アップロードしたPHPソースを取得する手段としては下記があるので、詳しくはコマンドのヘルプやWebで公開されてるドキュメントをみるよろし。

App Engine SDKに付属のコマンド appcfg.py の download_app オプションを使う
Google Cloud Platform SDKを使って git clone する

そうしてアップロードしたPHPが動作することを確認できたら、今度は Youtube API から取得したデータを加工して表示する google gadget を作ってみる。

手始めに次のようなコードで目的のチャンネルの動画リストを取得して吐き出すだけ。
※もちろん「{YOUR_API_KEY}」の部分は適宜書き換えが必要。

<?php
  echo "Hello, world!n";

  readfile('https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UC1jRcLeeoIYiqvJFYsnIfyQ&maxResults=5&order=date&key={$YOUR_API_KEY}');

期待通りにデータが取れたら、こいつを加工してgadgetのXMLを吐くようにする。
下記のような感じ。

<?php
    header("Content-Type: text/xml");
    echo '<?xml version="1.0" encoding="UTF-8" ?>';
    $entries = 10;
?>
<Module>
  <ModulePrefs
    title="Youtube API : Search: list のテスト"
    height="300"
    author="Tatsuhiko Kimita"
    author_email="nannbo@crappo.net"/>
  <Content type="html">
    <![CDATA[
      <div id="content_div"></div>
      <script type="text/javascript">

  var showdate = true;
  var summaries = false;

  var listData = <?php readfile('https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UC1jRcLeeoIYiqvJFYsnIfyQ&maxResults='.$entries.'&order=date&key={$YOUR_API_KEY}'); ?>;

  function response(listData) {
    *//var html = "<div><b>naoki hayakyan のチャンネル動画リスト</b></div>";*
    var html = "";

    if (listData.items) {
      for (var i = 0; i < listData.items.length; i++) {
        html += "<div>";
        if (showdate==true)
        {
          html += listData.items[i].snippet.publishedAt;
          html += "</div>";
          html += '<div style="margin-left:30px;margin-bottom:10px;">';
        }
        html += "<a target='_blank' href='" + listData.items[i].Link + "'>"
          + listData.items[i].snippet.title
          + "</a> ";
        if (summaries==true) {
          html += "<br><i>" + listData.items[i].snippet.description + "</i>";
        }
        html += "</div>";
      }
    }
    document.getElementById('content_div').innerHTML = html;
  };
  gadgets.util.registerOnLoadHandler(response(listData));

      </script>
    ]]>
  </Content>
</Module>

※もしこのコードをコピペして使う場合は「{YOUR_API_KEY}」の部分を適宜書き換えるように。

このコードによって得られる表示はこちらのページにあります。

Google Gadgets について詳しいことは下記を参照。

参考２：Gadgets JavaScript Reference | Gadgets API | Google Developers
https://developers.google.com/gadgets/docs/reference/#gadgets.util.registerOnLoadHandler

今回の記事は以上です。

Discussion