MSDN 開発体験テンプレートを使用した動画アプリの開発(応用編)


Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストア アプリ」の開発方法について書いています。

Windows ストア アプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。

なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。

 

前回の記事では MSDN で公開されている Windows 8 アプリ 開発体験用 テンプレート (HTML + JavaScript) を使用した RSS リーダーアプリの具体的な開発手順について紹介しました。

今回の記事では、上記 Windows 8 アプリ 開発体験用 テンプレート (以降、RSS_Reader テンプレート) を応用して、Youtube の動画をリストするアプリを作成する手順を紹介します。

 

RSS_Reader テンプレートと Web API を使用したアプリの開発

RSS_Reader テンプレートは、”RSS” と名前がついていますが、扱えるデーターは RSS のみならず、XML や REST で結果を返すものであればあらゆるものを使用することが、…たぶんできます。

たとえば、Amazon や flickr など、様々な Web サイトが提供している API を利用してアプリケーションを開発することができます。

この記事では RSS_Reader テンプレートと Youtube の API を使用して特定の Youtube アカウントのアップロードした動画を列挙、再生するアプリの作成方法を紹介します。

なお、この記事では例として Youtube アカウント microsoftjapanvideos を使用します。

 

Web サービス API を使用する前に確認すべきこと

様々な Web サイトが自らの機能を一般の開発者が使用できるよう API として公開していますが、どのように使用しても良いというのではありません。

Web API の使用には必ず制限や決まりといったものが存在します。

そういったものを知らずに利用してしまうと、API (サービス) の提供元に迷惑をかけるだけでなく、ひどい場合にはライセンス違反に問われ、ならず者のレッテルを貼られて社会生活から放逐される事態になりかねません。

そのような不幸な事態に陥らないためにも、API のみならず、第三者のリソースを利用してアプリケーションを作成する場合にはかならず利用規約に目を通しておきましょう。

とくに有料アプリ、サービスなどに利用する場合は使用許諾を子細に確認しましょう。お金が絡んだ途端に物事がシビアになるのは世の常です。自分を守るために面倒がらずにきちんと確認しておきましょう。

Youtube と Youtube API の使用許諾へのリンクは以下の通りです。

 

Youtube – 利用規約
https://www.youtube.com/t/terms

 

Youtube API – Terms of Service (英語)
https://developers.google.com/youtube/terms

 

Web API の機能とリファレンス

Web API のリファレンスは各提供元サービスが用意していますが、解説が上級者向けであったり、英文のままであったりすることがほとんどです。

しかしながら、メジャーな Web API については、技術系のニュースサイトや個人ブログで、分かり易く噛み砕いた解説されている場合が多々ありますので、初心者でかつ英語も苦手という方はそういった平易な記事を取り掛かりに開発を始めても良いでしょう。

幸いにして Youtube API には分かり易い日本語のリファレンスページが用意されています。

今回動画の一覧を取得する際に使用する Data API プロトコルのリファレンスは以下の通りです。

 

デベロッパー ガイド: Data API プロトコル
https://developers.google.com/youtube/2.0/developers_guide_protocol?hl=ja

 

Web API に限らず、API を利用するのに必要な情報は以下の三つだけです。

  1. 結果を得るための方法 (メソッド)
  2. 結果を得るために必要な情報 (引数)
  3. 返される結果についての情報 (返り値)

 

今回は Youtube アカウントに紐づけられた動画の一覧を取得するので、動画の取得と検索 リンク先の 「特定のユーザーがアップロードした動画」の 内容を見ればどのような方法 (メソッド) を使用して、どのような情報(引数)をサーバーに送れば良いかが分かります。

具体的には以下の URI をサーバーに送れば、Youtube アカウント microsoftjapanvideos が投稿した動画のフィード (一覧) が XML 形式で得られます。

http://gdata.youtube.com/feeds/api/users/microsoftjapanvideos/uploads
(※) 赤字部分が Youtube アカウントです。

 

返される XML のデータ構造については、動画のフィードとエントリについて のリンク先ページで解説されています。

 

動画のフィードとエントリについて
https://developers.google.com/youtube/2.0/developers_guide_protocol?hl=ja#Understanding_Video_Entries

 

あとは、この XML のフォーマットに合わせて RSS_Reader テンプレートの data.js の内容を書き換えれば良いだけです。

以降、具体的な手順を示します。

 

Youtube 動画フィードを処理するための RSS_Reader プロジェクトの改造

ここからは、RSS_Reader アプリケーション テンプレートが生成するアプリケーションプロジェクトが Youtube の Data API プロトコルを処理できるよう改造していきます。

これからの手順を実際に試される場合、もしまだ RSS_Reader アプリケーション テンプレートを入手していないのであれは、以下の記事を参考に入手し、Visual Studio 2012 に配置してください。

 

MSDN 開発体験テンプレートを使用したニュースリーダーアプリの開発 (準備編)

なお、Windows ストア アプリは、Windows 8 上でなければ開発できませんのでご注意ください。

 

以下に、実際にコードを変更していく手順を示します。

 

[手順]

  1. Visual Studio 2012 を起動 
     
  2. メニュー [新規作成] – [プロジェクト] を選択 
     
  3. [新しいプロジェクト] ダイアログ ボックスが表示されるので、同ダイアログボックスの左側のツリーより [テンプレート] – [JavaScript] を選択
     
  4. ダイアログボックス中央のリストビューにプロジェクト テンプレートの一覧が表示されるので [RSS_Reader] を選択し [OK] ボタンをクリック
     
  5. Visual Studio 2012 画面右の [ソリューション エクスプローラー] で、/js/data.js をオープン
     
  6. 変数 sourceInfo で定義している RSS の指定を以下のように変更
     
    var sourceInfo = [{
           url: "http://gdata.youtube.com/feeds/api/users/microsoftjapanvideos/uploads",
           group: {
               key: "MS-Video",
               category: "Video",   
               title: "日本マイクロソフトのビデオ"
           } 
    }];

  7. キーボードの [Ctrl] + [G] キーを押下し、表示されたダイアログボックスに 38 と入力し、38 行目にジャンプ
     
  8. 38 行目の WinJS.xhr メソッドの内容を以下のように変更
     

    //RSS が一つしかない場合は ① のコメントを解除し、② コメントアウト 
    WinJS.xhr({ 
            url: sourceInfo[_readCount].url 
    }).then(loadRSS, errHendler).then(defineNameSpace).done(callBackFunction); //① 
    //.then(secondJob); //②

     

  9. キーボードの [Ctrl] + [G] キーを押下し、44 行目にジャンプ
     
  10. 44 行目にある loadRSS 関数の内容を Youtube の Data API の返す XML のスキーマに合わせ、以下のように書き換え
     

    function loadRSS(response) { 
       //RSS の記事一覧が格納される 
       var skipWord = "PR:"; 
       var resXML = response.responseXML;

       try {
             var items = resXML.querySelectorAll("feed > entry"); 
             var length = items.length;

             for (var i = 0; i < length; i++) { 
                 var _item = items[i]; 
                 var _title = _item.querySelector("title").textContent; 
                 var _category = _item.querySelector("group > category").textContent; 
                 var _link = _item.querySelector("group > content").attributes[6].nodeValue; 
                 var _date = new Date(_item.querySelector("published").textContent); 
                 if ((_date.getFullYear() <= (new Date()).getFullYear())
                       && _title.indexOf(skipWord) < 0) { 
                     var _description = (_item.querySelector("description") != null) 
                          ? _item.querySelector("description").textContent : ""; 
                     var _picture = _item.querySelector("thumbnail").attributes[0].nodeValue; 
                     var _includingPic = false; 
                  
                     if (!_picture) { _picture = "/images/NoPhoto.png"; }
                        RssItemsArray.push({ 
                           listIndex: _listIndex++, 
                           group: sourceInfo[_readCount].group , 
                           title: _title, 
                           link: _link, 
                           pubDate: _date, 
                           pubDateDisplay: appUtil.formatDatetime_JP(_date), 
                           description: _description, 
                           pictute: _picture, 
                           includingPicture: _includingPic 
                       });
                    } 
             }    
          } 
       catch (ex) { //RSS の読み込みに失敗した場合のエラー処理 必要があれば 
       } 
    }

    なお、同ファイル内にある getFromImagePath 関数は使用しないので削除してしまって構いません。

    この時点でアプリ内に動画のサムネイル画像の一覧と、動画の説明文が表示されるようになっています。

    経過を確認したい人は [F5] キーを押下してプロジェクトを実行してみるといいでしょう。

    動画の説明文のページでタイトルをクリックすると、プレイヤーは起動しますが、現段階では動画は全画面表示となり正常に動作しません。 
     

  11. Visual Studio 2012 画面右の [ソリューション エクスプローラー] で、/js/news/article.js をオープン
      
  12. ネームスペース内の一番最後に、以下のように ifarme で Youtube 動画を表示するための URI を生成する chgEmbeddedURI 関数を定義
      

       function chgEmbeddedURI() { 
          contentURL = contentURL.replace("www.youtube.com\/v", "www.youtube.com\/embed"); 
          contentURL = contentURL.substring(0, contentURL.indexOf("?")) 
        }
     

    })();

                                      

  13. WinJS.UI.Pages.define メソッドの ready :  に以下のように chgEmbeddedURI 関数の呼び出しを記述
     

    ready: function (element, options) {
                // TODO: ここでページを初期化します。

                //スナップビューを解除
                Windows.UI.ViewManagement.ApplicationView.tryUnsnap();

                var articleData = options.newsData;
                renderRSS(articleData);
                contentURL = articleData.link;
                contentTitle = articleData.title;

                //共有ソースを設定
                dataTransferManager.addEventListener("datarequested", dataRequested);

                chgEmbeddedURI();

            },

                                

  14. Visual Studio 2012 画面右の [ソリューション エクスプローラー] で、/js/news/view.html をオープン
     
  15. 動画の再生時に 戻る ボタンが表示されるよう、以下のように <iframe id=“contentFrame”> の高さを 93% に変更
     
    <iframe id="contentFrame" style="height:93%;width:100%"></iframe>

これで Youtube 動画のサムネイルの一覧が、列挙され、動画もアプリ内で再生できるようになりました。

Visual Studio 2012 のメニュー [デバッグ] – [デバッグ開始] を選択してプロジェクトを実行して機能を確認してみましょう。

 

image (動画のサムネイル一覧画面)

 

image(動画の説明画面)

 

image(動画の再生画面)

サムネイル一覧画面のアプリ名や、アプリ バーのフィルター機能については前回の記事を参考に変更するか、削除してください。

 

【備考】 Youtube の動画が Windows ストア アプリで再生できる理由

Windows ストア アプリのホスト プロセス WWAHOST.exe は Flash プレイヤーをホストできません。

これは CVList で Flash コンテンツの動作が許可されているドメインのコンテンツについても同様です。

Youtube の動画は、デスクトップ用の Internet Explorer からアクセスされた場合には Plash プレイヤーを使用して動画を再生しますが、Windows 8 の新しい UI の Internet Explorer 10、Windows ストア アプリからアクセスされた場合は、HTML5 コンテンツを返し、プラグインフリーでの動画再生を実現しています。

—– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —– ・ —–

今回は、MSDN で配布されている Windows 8 アプリ 開発体験テンプレート (RSS_Reader) と、Youtube の Web API を組み合わせで動画再生アプリを作成する方法を紹介しました。

記事中でも紹介したように RSS_Reader アプリケーション テンプレートは改造することにより、RSS のみならず、XML、REST などにも容易に対応することができます。

現在、インターネット上には、様々な Web サービスの API が公開されていますので、Windows ストア アプリを作成する際には、それら API を使ってみるのも良いかもしれません。

 

Real Time Analytics

Clicky

Comments (0)

Skip to main content