はじめに
以前の記事YouTube APIを利用したソリューションの構築例の続編です。
前回の記事では、このようなデータセットを取得することができました。今回の記事ではこれらのデータを利用してみようと思います。
オリジナルのメニューでも作成してみましょうか。
パブリッシャー
Webベースのメニューの作成に利用できるSharperlightアプリケーションと言えばパブリッシャーです。
早速、アプリケーションメニューから起動します。
メニューレポート
一般タブ
ここではレポートの基本情報を入力します。
オプション
このタブでは、既定の出力形式にMenu Panelを指定します。
クエリ
クエリを編集ボタンでクエリの作成を開始します。
製品（データモデル）には、もちろん先に作成したYouTubeを指定。
テーブルはPlaylistsを選択します。
メニューを作成するにあたりPlaylistのタイトルと各Playlistに属するVideoのタイトル、そしてビデオが選択された場合、そのビデオを再生するために必要なVideoIdを準備します。
データモデル内で作成しておいたVideoテーブルへのJOINも見えますね。
ここで一度、クエリとレポートを保存します。
動作確認をするためSharperlightサービスを起動します。
作成したばかりのメニューレポートを選択し、右クリックメニューよりレポートの表示を選択します。
メニューレポートがお手持ちのブラウザに表示されます。
あるPlaylistアイテムを展開表示した状態です。
ビデオ再生用レポート
Videoメニューアイテムが選択された場合にそのビデオを表示する準備をします。
もうひとつ新たにレポートを作成しビデオの再生用とします。そしてその再生用レポートをこのメニューレポートから呼び出すといった形を作成します。
一般タブ
ここではレポートの基本情報を入力します。
クエリ
クエリを編集ボタンでクエリの作成を開始します。
製品（データモデル）には、システムを指定。
テーブルは、ユーザーアカウントを選択します。
モード(このテーブルの必須フィルター)は、CUのまま。
このクエリはたった1行のレコードさえ返せばいいので、こういったフィルター設定とします。
そしてテキスト型のフィルターをひとつ追加し、メニューレポートから渡されるVideoIdを受け取る変数とします。このフィルターはプロンプトフィルターといってクエリにはなんら影響を与えません。
このレポートの目的はビデオの再生なので、拡張表現を利用してiframタグを作成しYouTubeビデオを埋め込む定義を作成します。
出力領域の右クリックメニューより拡張表現を追加を選びます。
構文エディタに以下のコードを記入します。データ型にはHTMLを指定。
"<iframe src='https://www.youtube.com/embed/" + {@videoId} + "'"
+ " width='1200px' height='800px' scrolling='yes' frameborder='0' allow='accelerometer; autoplay;'></iframe>"
構文中のタグ{@videoId}は、先ほど追加したメニューレポートから渡されるVideoIdを受け取るためのプロンプトフィルターの参照タグです。実行時は実際の値で置き換えられます。
このように出力アイテムは、拡張表現ひとつのみです。説明欄は不要なので空白にします。
これでビデオ再生用のレポートは完成。クエリとレポートを保存します。
メニューレポートの更新
ではメニューレポートに、今作成したビデオ再生用レポートを呼び出すコードを追加します。
クエリを開いて、新しい拡張表現を追加します。
構文エディタに以下のコードを記入し、データ型にはURLを指定。
"{_System.Rest.URL}" + "Report/?query=QiitaSample.YouTubeVideoPlayer&fltvideoId=" + {%VideoId} + "&usid=" + "{_System.Rest.Usid}"
構文中のタグ{_System.Rest.URL}は、Sharperlightサービスの基礎URLを取得するタグです。これ{_System.Rest.Usid}はセッションID取得用です。また{%VideoId}は、現在行のVideoIdを参照するタグです。
名前と説明にもURLと記入します。
またVideiIdは非表示(Hidden)にします。
これでメニューレポートは完成。クエリとレポートを保存します。
動作確認
パブリッシャーダイアログの右クリックメニューよりレポートの表示を選択します。
ブラウザにメニューレポートが表示されサブメニュー、つまりあるビデオをクリックすると選択されたビデオがこのように表示されます。
メニューパネルの拡張
このままではサブメニューの字数が多くて見づらくなってます。ちょっとクエリを編集して短くしてみます。
メニューレポートのクエリを再度開き、新しい拡張表現を追加します。
ビデオのタイトルからVol以降の文字のみ取り出します。
元のビデオタイトルは非表示にします。
また、パネルの幅を広げるためCSSを追加します。
<style type="text/css">
#slTreeViewSection{
width: 255px !important;
}
</style>
さあ、保存して実行してみます。結構スッキリしましたね。
既定ページの追加
今のままではメニューレポートが最初に表示された際、真ん中の領域が空白で格好悪いです。
何か既定ページを設定してみましょう。
メニューレポートの定義を再度開きます。オプションタブの既定の内容プロパティにこのようなURLを設定します。
SharperlightサービスのIndexページのアドレスです。
保存して実行してみると、このようになります。
で、ビデオを選ぶと...このようになります。
あとがき
今回はメニューレポートを作成してみました。データがこのような情報しか持っていないのであまり大したことはできませんが、こういった手法はどこかで役に立つのではないかと思います。
この記事が皆さんの業務のお役に立てれば光栄です。