[ Siena 目次 ]

簡易 YouTube プレーヤー

YouTube 視聴機能を使用して、簡易的な YouTube プレーヤーを試作します。
作成は興味深かったのですが、 Google へのログインが時々不調になるなど、確信を持ってお勧めするまでに至っていないことを、あらかじめお伝えしておきます。


実際の画面を確認

シンプルなオープニング画面で始まります。
スクリーン1
オープニング画面の挿入には、初期処理を入れるタイミングとして使用する意味もあります。 自動でグーグルのログイン画面が表示されます。
スクリーン2
グーグルのログイン画面です。グーグルに登録済のメールアドレスとパスワードを入力してログインします。 一度ログインすると、2回目以降のアプリ起動時、この画面が出ないことがありました。理由は不明です。 ただ、 YouTube には接続していたので、そのあたりの兼ね合いかと想像しています。
スクリーン3
メイン画面です。画面上のドロップダウンを使用して、検索モードと「後から見る」モードを選びます。 最初は検索モードで起動します。画面右側に検索結果ギャラリーが配置されています。 起動時はビデオプレーヤーに何も表示されていません。
スクリーン4
動画を選択した状態です。ビデオプレーヤーで動画を再生しています。再生と同時に、タイトルやチャンネル名を表示します。 説明文は、トグルスイッチを ON にしたら表示するようにしました。
スクリーン5
試しに "project siena" で検索しました。 検索一覧のデータ数を指定する方法がわからなかったので、最大が50件程度となっています。2ページ以降の参照方法もわかりませんでした。
スクリーン6
「後から見る」モードにした状態です。 YouTube のプレーヤーで「後から見る」に指定した動画リストをギャラリーに表示しています。


以下に、作成時のポイントを記述します。

[ 目次 ]
  1. 実際の画面を確認
  2. ログインに関する問題点
  3. 事前準備
  4. 仕様確認
  5. 仕組みの解説
  6. YouTube 接続までのハードル
  7. 実現できなかったこと
  8. 感想



ログインに関する問題点

今回の仕組みでは、ログインをコーディングで明示していませんが、結果としてログイン画面が出ています。 このあたりの呼吸がよくわかっていません。一応、関数として YouTube!SignIn() が準備されていたので、 てっきりそれを使用するのかと思っていましたが、それを使っても、うまくいったりいかなかったりでした。 特に、2回目以降のアプリ起動の際に YouTube への接続がうまくいかないことが度々でした。 ということで、2回目以降のアプリ起動時に、接続の可能性が一番高い方法を採用しました。

これは関係あるのかどうかわかりませんが、 Publish する際、ネット接続はしているものの、 あえて YouTube への接続をキャンセルした状態で Publish したことを、ここにメモしておきます。

何とか動くところまでこぎつけたのでサンプルを紹介していますが、この「ログインをコーディングしないでログイン画面を出す」という方法は邪道の可能性があります。 ですので、似たような機能を試したいという方は、 リファレンスページで紹介されている内容等を参考にしながら 作成することを強くお勧めします。



事前準備

Publish する段階になって、 ClientID や REDIRECT URIS が必要だと通知され、 訳も分からず取得しました。その顛末は下記の「YouTube 接続までのハードル」をご参照ください。



仕様確認

  1. YouTube に接続し、キーワードによる動画検索ができます。
  2. 「後から見る」リストを取得し、動画を再生できます。



仕組みの解説

ここでは、貼り付けた部品の属性を ExpressView で確認します。
部品を選んで右下の ExpressView ボタンをクリックすれば、画面右に開きます。
以下、画像をクリックすると拡大画面が表示されます。

  1. タイマー
    2. 「後から見る」の動画リストをコレクションに登録します。
    OnTimerStart 属性で、
    Clear(WatchLater);Collect(WatchLater,YouTube!PlaylistItems("WL"))
    と指定している部分がそれです。

    メイン画面に遷移します。
    OnTimerEnd 属性で、
    Navigate(Main, ScreenTransition!Fade,{StringInput:"",StringVideoID:"",
    StringTitle:"",StringChannelTitle:"",StringDescription:""})
    と指定している部分がそれです。メイン画面で使用するストリング変数の初期化も指定しています。
    タイマー1

  2. モード選択用ドロップダウン
    3. ここからメイン画面の要素です。
    モードの選択肢を表示します。
    Items 属性で、 ["Search","Watch Later"] と指定している部分がそれです。
    モード選択用ドロップダウン1

  3. 検索ワード入力ボックス
    4. 検索モードの時のみ表示します。
    Visible 属性で、 DropdownMode!Selected!Value="Search"
    と指定している部分がそれです。
    検索ワード入力ボックス1

  4. 検索ボタン
    5. 検索ワード入力ボックスの値を、ストリング変数に転送しています。
    OnSelect 属性で、 UpdateContext({StringInput:Text1!Text})
    と指定している部分がそれです。

    検索モードの時のみ表示します。
    Visible 属性で、 DropdownMode!Selected!Value="Search"
    と指定している部分がそれです。
    検索ボタン1

  5. 検索結果用ギャラリー
    6. 検索結果を表示します。
    Items 属性で、 YouTube!Search(StringInput)
    と指定している部分がそれです。

    準備されている YouTube Search 部品を貼り付けると、検索ワード入力ボックスの値を直接指定していますが、 それだと、一文字入力するごとに検索結果を更新しようとするので、あえてストリング変数を使うことで、ギャラリーの不要な更新を回避しました。

    検索モードの時のみ表示します。
    Visible 属性で、 DropdownMode!Selected!Value="Search"
    と指定している部分がそれです。
    検索結果用ギャラリー1

  6. タイトル(検索結果)
    7. 検索結果のビデオタイトルを表示します。
    Text 属性で、 ThisItem!snippet!title と指定している部分がそれです。
    タイトル(検索結果)1

  7. チャンネル名(検索結果)
    8. 検索結果のチャンネル名を表示します。
    Text 属性で、 ThisItem!snippet!channelTitle
    と指定している部分がそれです。
    チャンネル名(検索結果)1

  8. イメージ(検索結果)
    9. 検索結果のイメージを表示します。
    Image 属性で、 ThisItem!snippet!thumbnails!default!url
    と指定している部分がそれです。
    イメージ(検索結果)1

  9. イベント用部品(検索結果)
    10. クリックされたら、その動画の情報をストリング変数に転送します。
    OnSelect 属性で、
    UpdateContext({StringVideoID:ThisItem!id!videoId,StringTitle:ThisItem!snippet!title,
    StringChannelTitle:ThisItem!snippet!channelTitle,StringDescription:ThisItem!snippet!description})
    と指定している部分がそれです。
    イベント用部品(検索結果)1

  10. 「後で見る」用ギャラリー
    11. 「後で見る」のリストを表示します。
    Items 属性で、 WatchLater と指定している部分がそれです。

    「後で見る」モードの時のみ表示します。
    Visible 属性で、 DropdownMode!Selected!Value="Watch Later"
    と指定している部分がそれです。
    「後で見る」用ギャラリー1

  11. タイトル(「後で見る」)
    12. 「後で見る」のビデオタイトルを表示します。
    Text 属性で、 ThisItem!snippet!title と指定している部分がそれです。
    タイトル(「後で見る」)1

  12. チャンネル名(「後で見る」)
    13. 「後で見る」のチャンネル名を表示します。
    Text 属性で、 ThisItem!snippet!channelTitle と指定している部分がそれです。
    指定はしたものの、値が入っていませんでした。 YouTube のデータの仕様なのかどうか、詳細は不明です。
    チャンネル名(「後で見る」)1

  13. イメージ(「後で見る」)
    14. 「後で見る」のイメージを表示します。
    Image 属性で、 ThisItem!snippet!thumbnails!default!url
    と指定している部分がそれです。
    イメージ(「後で見る」)1

  14. イベント用部品(「後で見る」)
    15. クリックされたら、その動画の情報をストリング変数に転送します。
    OnSelect 属性で、
    UpdateContext({StringVideoID:ThisItem!snippet!resourceId!videoId,StringTitle:ThisItem!snippet!title,
    StringChannelTitle:ThisItem!snippet!channelTitle,StringDescription:ThisItem!snippet!description})
    と指定している部分がそれです。
    イベント用部品(「後で見る」)1

  15. 「後で見る」再読み込みボタン
    16. 「後で見る」リストを再読み込みします。
    OnSelect 属性で、
    Clear(WatchLater);Collect(WatchLater,YouTube!PlaylistItems("WL"))
    と指定している部分がそれです。

    ビデオプレーヤーで再生中の動画について、「後で見る」アイコンをクリックすると普通に機能するのですが、 ギャラリー内は即時更新されないので、このボタンを追加しました。

    「後で見る」モードの時のみ表示します。
    Visible 属性で、 DropdownMode!Selected!Value="Watch Later"
    と指定している部分がそれです。
    「後で見る」再読み込みボタン1

  16. ビデオプレーヤー
    17. ギャラリーで指定された動画を再生します。
    Media 属性で、 "https://www.youtube.com/watch?v="&StringVideoID
    と指定している部分がそれです。

    既にストリング変数に引き渡されている動画の ID を使って、アドレスの文字列を編集しています。
    ビデオプレーヤー1

  17. ビデオタイトル
    18. ビデオタイトルを表示します。
    Text 属性で、 StringTitle と指定している部分がそれです。
    ビデオタイトル1

  18. チャンネル名
    19. チャンネル名を表示します。
    Text 属性で、 StringChannelTitle と指定している部分がそれです。
    チャンネル名1

  19. 説明表示用トグルスイッチ
    20. ビデオの説明の表示／非表示を、これで操作します。
    配置をしただけで、特段の指定はしていません。
    説明表示用トグルスイッチ1

  20. ビデオ説明
    21. ビデオの説明文を表示します。
    Text 属性で、 StringDescription と指定している部分がそれです。

    トグルスイッチが ON の時に説明文を表示します。
    Visible 属性で、 ToggleSwitch1!Value=true
    としている部分がそれです。
    ビデオ説明1



YouTube 接続までのハードル

作成している最中は意識しなくてもよかったのですが、 Publish するに至って、 ClientID と REDIRECT URIS の入力を画面上で要求され、 よくわからないままに Google の開発関連情報を調べる羽目となりました。 以下が、調べた結果行ったことです。

  1. 「承認の認証情報を取得する」(https://developers.google.com/youtube/registering_an_application) というページを開く。
  2. 手順に従い、 Google Developers Console に移動して、サインインする。
  3. 画面に従い、プロジェクトを作成する。
  4. 左帯メニューから APIS&AUTH の中の APIS を選択する。
  5. YouTube Data API v3 を ON にする。ついでに、 YouTube Analytics API も ON にしておく。
  6. 左帯メニューから Credential を選択して、 Create New ClientID をクリックする。
  7. Web application を選択して Create ClientID をクリックする。
  8. Project Siena で Publish する。その際、 ClientID と REDIRECT URIS には、上記で作成された値を指定する。

ここまでの手続きを踏んで、やっと Publish できるようになりました。 ここまでくると開発者の専門領域という色彩が強く、 Web 開発に疎い私のような立場の人間には、相当な難関でありました。

このままだと、作成中は快適に動画が再生されるのに、 Publish するに至って訳も分からない入力を要求されて失望する、という人が少なからず出てきそうです。 少なくとも、ログイン不要で従来も使用できる YouTube の機能については、上のような手続きが不要にならないものか、と思った次第です。 コーディングレスを謳う Project Siena の姿勢からして、いささか疑問に感じました。

Beta3 になって、ソーシャル関連や Bing 関連のデータソースが増えましたが、サービス接続がややこしいと、 あまり使用されない気がするので、そのあたりの工夫(手続きを簡略化するか、サービス接続の手順を Project Siena 内に取り込むか、 もしくはサービス接続の手順をきっちりと Web 上で伝えるなど)をしてほしいものです。



実現できなかったこと

登録チャンネルを取り込んで、そのチャンネルの動画を再生できればと思っていました。 しかし、登録チャンネルの一覧は取得できるものの、そこからチャンネル個々の動画一覧を取得することができず、 登録チャンネルの取り込みをあきらめました。

YouTube の Data API に強い方であれば、そのあたりは簡単に解消できる話なのかもしれません。 今回は、どのIDでどの関数を使えばいいのかわからなかったので、見送りとなりました。

あと、グーグルへのサインイン・サインアウトのコントロールがよくわかりませんでした。 サインアウトのボタンを作って、別のグーグルアカウントでもサインインできるようにすることも考えたのですが、 一度サインインすると、動画再生中にサインアウトを指示しても、動画データをロードし続けるなどの動きがあり、 制御しきれていない印象をもったので、別アカウントでのサインイン機能を見送りました。

お好みの再生リストを取り込むことも考えたのですが、検索から連続再生まで考えるには知識が不十分だとすぐわかったので、見送りました。

この位の機能を実現したいと思うようになると、コーディングレス前提の初心者レベルでは対処できない問題が出てくる、ということなのかもしれません。



感想

このアプリを作成するに至って、 Project Siena の印象が、初心者向けツールから、開発者向け簡易ツールにやや軸足を移しました。 理由は、 Publish 時の YouTube 接続に至るもろもろの分かりにくさです。 エクセルVBA レベルの人がここまで対応しなければいけないのかと思うと、安易におすすめはできないな、という感想を持ちました。

チャンネル9で新たに紹介されていた YouTube 使用サンプルの感触もよかっただけに、 なんだかもったいないなあ、という気分です。

あと、洋楽好きの人は VEVO をよく見ているかもしれませんが、このアプリで VEVO を視聴すると、 「このコンテンツには VEVO さんのコンテンツが含まれており、特定のサイトでの再生が制限されています。」と表示されて、見ることができません。 VEVO だけではなく、他のコンテンツでも同様の事象がありました。これも、メトロアプリ普及にはマイナスだな、と思っています。