[WinRT] Youtube のサムネールを GridView に表示させる

VS魂100連発アプリでは Youtube のリストを拾ってきて表示させています。Youtube の API を使うためには、Google アカウントが必要で、それぞれの APP KEY が必要になってきます。
データアクセスは Google.Apis.YouTube.v3 で、起動時の URL を取得するところは MyToolkit.Extended を使っています。MyToolkit を使わなくても URL のパラメータでできるハズなんですが、なんとなく。

Google.Apis.YouTube.v3 の APP KEY を取得する

Google Developer Console で「YouTube Data API v3」を ON にします。

「APIs & auth」→「Credentials」で、Public API access キーを作成します。検索するだけなので、ここで作られる API KEY を使います。もし、この API KEY が漏れて悪用されているようであれば、もう一度作成してアプリに埋め込めば ok です。
まあ、ストアアプリの場合、実行ファイルを覗けてしまうので API KEY を暗号化とかしない限りばれてしまうわけですが。そのあたりは適当に。

NuGetを利用する

Youtube へのアクセスは、Google.Apis.YouTube.v3 で検索します。

MyToolkit も Nuget にあります。

なんか、いっぱい DLL をインストールされますが、気にしないことにします。まあ、適当なツールアプリなので。

動画リストを取得する

100連発のリストは、動画リストから取ってきているのですが、これたちょうど VisualStudioJapan のチャンネルID にあたります。このチャンネル ID をどうやって拾うのか？は疑問なのですが、あれこれ実験しているうちに取れたものです。動画を検索したときに、どうやら一致しているっぽい値を入れました。URL には出てこないので、別途検索キーにするといいでしょう。この場合は「VisualStudioJapan」の検索にマッチさせたものを取ってくると良いでしょう。

async Task<VideoList> getYoutube()
{
    // タイトル一覧を取得する
    var youtube = new YouTubeService(new Google.Apis.Services.BaseClientService.Initializer()
    {
        ApiKey = "", // Google API key
        ApplicationName = "VS100Watcher"
    });

    var videos = new VideoList();

    var req = youtube.Search.List("snippet");
    req.ChannelId = "UCy2j4l0auN8DJaQ6itwVWFA"; // "VisualStudioJapan" のチャンネルID
    var res = new Google.Apis.YouTube.v3.Data.SearchListResponse(); 
    do
    {
        req.PageToken = res.NextPageToken;
        res = await req.ExecuteAsync();
        // Youtube のサムネールをリスト化する
        foreach (var it in res.Items)
        {
            var vi = new Video() { Result = it };
            videos.Add(vi);
        }
    } while (res.NextPageToken != null && res.NextPageToken != "");

    // 番号でソートする
    var lst = new VideoList();
    foreach ( var it in videos.OrderBy(x => {
        if ( x.Title.StartsWith("VS100") ) {
            return x.Title.Replace( " ", "" ).Replace("-", "");
        } else {
            return x.Title;
        }}))
    {
        lst.Add(it);
        Debug.WriteLine(it.Title);
    }
    return lst;
}

Youtube クラスの使い方に若干癖がある（ビデオや他のデータと混在しているため）のですが、それはインテリセンス等で確認してください。
Java のコードサンプルを参考にするとよいでしょう。.NET のもあるのですが、数が少なくなってます。

YouTube Data API: Java コード サンプル – YouTube ? Google Developers
https://developers.google.com/youtube/v3/code_samples/java?hl=ja

リファレンスがあるのですが、個人用のアプリであればそこまで使わないような気がします。

検索結果は複数のページに分かれています。応答データの NextPageToken プロパティを見て次のページを取得していきます。最後の番号でソートしているのは、タイトルフォーマットがいくつか違っているので揃えるためです。

動画のURLを取得する

GridView のリストをタップしたときには、高画質動画を表示しています。このためだけに MyToolkit を使っているという贅沢な仕様ですが、まあ手早く作れるのでよいでしょう。以前作ったときのコードをそのまま使っています。

private async void itemGridView_Tapped(object sender, TappedRoutedEventArgs e)
{
    var item = (sender as GridView).SelectedItem ;
    if (item == null ) return;

    vm.Current = item as Video;
    MainPage.SelectItemIndex = (sender as GridView).SelectedIndex;

    var uri = new Uri( vm.Current.Url );
    if (vm.GoIE == true)
    {
        await Launcher.LaunchUriAsync(uri);
    }
    else
    {
        try
        {
            var url = await YouTube.GetVideoUriAsync(vm.Current.VidoId, YouTubeQuality.Quality1080P);
            this.media.AutoPlay = true;
            this.media.Source = url.Uri;
            this.media.Play();
        }
        catch { }
    }
}

今回は、常時接続を前提としているので動画ファイルは保存していませんが、ストリームを使ってローカルファイルに保存もできるでしょう。よく見る画像は、ビデオフォルダに保存しておくと、手軽に見られると思います。また、検索用のキーワードを付ければ汎用的な Youtube の閲覧ツールにもなるでしょう。

サンプル

moonmile/WatchVs100
https://github.com/moonmile/WatchVs100