チュートリアル: ビデオ サイトを作成する
最終更新日: 2010年4月19日
適用対象: SharePoint Server 2010
この記事の内容
コンテンツ構造
カスタムのビデオ表示フォーム
非表示データ フォーム Web パーツ
列の可用性と非表示データ フォーム Web パーツ
ソーシャル メディア共有サイトおよび関連する各種操作 (ビデオのアップロード、サムネイル イメージの抽出、ビデオの表示とビデオ コンテンツの管理を最適化するホーム ページ、大規模ビデオ ライブラリのチャネルなどの集約ツールなど) を作成するには、まず、ビデオ用の基本サイトを作成する必要があります。基本のビデオ サイトを作成するには、以下の 5 つの基本手順を実行します。
ビデオ コンテンツ タイプをサポートするコンテンツ構造をセットアップします。
ビデオを表示するためのカスタマイズされたフォームを作成します。
非表示の DataFormWebPart を作成し、それを使用してメディア パラメーターを取得します。
メディア プレーヤーを作成します。
ECMAScript (JavaScript、JScript) オブジェクト モデルを使用して、MediaWebPart オブジェクトにアクセスします。
また、ビデオの評価、コメントの記入、関連するビデオの閲覧、現在のビデオに関連付けられたメディア プロパティの表示など、ビデオ コンテンツに関連付けられる一般的なタスクをサポートする各種機能を基本サイトに追加できます。
前提条件
チュートリアルを完了するには、Microsoft Visual Studio 2010、および以下の SharePoint 関連技術に関する専門知識が必要です。
Microsoft SharePoint Designer 2010
基本的な HTML
基本的な JavaScript プログラミング
Microsoft Silverlight 開発
基本的な XML と XSL
コンテンツ構造
ビデオ サイトの作成を準備するには、まず、SharePoint Designer 2010、または Microsoft SharePoint Server 2010 ブラウザーのユーザー インターフェイス (UI) を使用して、コンテンツ構造をセットアップします。コンテンツ構造には、サイト レベルおよびサイトコレクション レベルで使用可能とする機能、有効にする必要のあるコンテンツ タイプ、ビデオ コンテンツをサポートするために追加する必要のある列を定義します。
発行ポータル サイト テンプレートを使用して、サイト コレクションを準備します。
.gif "重要") 重要 |
|---|
コンテンツ タイプを更新する場合は、サイト コンテンツ タイプ ギャラリーを使用して変更を行います。サイト コンテンツ タイプ ギャラリーで変更を行うと、その後、一貫したコンテンツ タイプを持つライブラリの追加が容易になります。個々のコンテンツ ライブラリでコンテンツ タイプを更新しないでください。 |
[ビデオ] ライブラリと [サムネイル] ライブラリの 2 つの [資産の種類] ライブラリをセットアップします。[ビデオ] ライブラリにはビデオ コンテンツ タイプを含めて、他のすべてのコンテンツ タイプを削除します。[サムネイル] ライブラリにはイメージ コンテンツ タイプを含めて、他のすべてのコンテンツ タイプを削除します。一連のチュートリアルの全体にわたって、[ビデオ] ライブラリにはビデオ ファイルが格納され、[サムネイル] ライブラリには、サイトにアップロードされるサムネイル イメージが格納されます。
| 重要 |
|---|
ビデオをビデオ ライブラリに追加し、後でデータ フォーム Web パーツを追加して列とフィルターを構成するときにクリックできる <img> タグを作成します。 |
基本のビデオ サイトでは、標準的なビデオ機能を使用できます。また、ビデオ コンテンツ タイプによってサポートされる関連するメディア プロパティを設定できます。評価機能、エンタープライズ キーワード、ブックマーク、チャネル ページのサポート、その他のプロパティをビデオ コンテンツ タイプに追加できます。[サイト内の列ギャラリー] から、表 1 に表示された列を [ビデオ] コンテンツ タイプに追加します。
表 1. サイト内の列ギャラリーに追加するサイト列
列の名前 |
列の種類と、関連する設定 |
|---|---|
Bookmarks |
複数行テキスト。種類==("テキスト形式"、ドキュメント ライブラリでの長さを制限しない=="はい") |
Channel |
検索 (情報の取得先: "ページ" ライブラリ、"タイトル" 列、"複数の値を許可する"==いいえ) |
表 2. ビデオ コンテンツ タイプ列
列の名前 |
使用目的 |
|---|---|
Rating (0-5) |
ユーザーが表示フォームでコンテンツを評価するために使用します |
Enterprise Keywords |
表示フォーム上の関連するビデオで使用します |
列の名前 |
列の種類と、関連する設定 |
使用目的 |
Bookmarks。このフィールドには、長いビデオ内のブックマークを表示するために必要なデータが含まれます。 |
||
Channel |
検索 (ソース: "ページ" ライブラリ、"タイトル" 列、"複数の値を許可する"==いいえ) |
チャネル ページで使用します。このフィールドを使用して、ビデオをどのチャネルで表示する必要があるかを示します。 |
カスタムのビデオ表示フォーム
ビデオ共有サイトの最初の要素は、ビデオを表示するために使用するカスタマイズされたページです。ページ上のほとんどのアイテムは、[評価] および [ブックマーク] のような、ビデオ コンテンツ タイプの列を作成するときに定義したプロパティです。メディア プレーヤーは以降の手順で追加します。ページには以下の要素が含まれます。
メディア プレーヤー
評価
ブックマーク
関連するビデオ
メディア プロパティ
メディア プレーヤーのテキスト
コメント
SharePoint Designer で新しい表示フォームを作成する
SharePoint Designer 2010 を開始し、SharePoint サイトを開きます。
左側のナビゲーション ウィンドウで、[リストとライブラリ] をクリックし、[ビデオ] ライブラリを選択します。
[フォーム] セクションで、[新規] をクリックします。
[新しいリスト フォームの作成] ダイアログ ボックスで、[作成するフォームの種類の選択] を指定し、[選択した種類の既定フォームとして設定] するかどうかを指定します。
作成するフォームの種類の選択: アイテムを表示するフォーム
選択した種類の既定フォームとして設定=はい
コンテンツ タイプ: ビデオ
[フォーム] セクションで、新しく作成したフォームを右クリックして、[詳細モードでファイルを編集] を選択します。
カスタマイズ可能な新しい [アイテムを表示するフォーム] が存在します。これは、ユーザーがビデオに対して [プロパティの表示] コマンドをクリックしたときに表示される既定のフォームです。
非表示データ フォーム Web パーツ
非表示の DataFormWebPart を作成し、それを使用してメディア パラメーターを取得します。メディア プレーヤーおよびブックマークのような、[アイテムを表示するフォーム] に含まれる多くの機能が、JavaScript によって提供されます。JavaScript オブジェクト モデルでは、表示されるビデオの列に格納される入力パラメーター値が使用されます。[アイテムを表示するフォーム] をカスタマイズするには、まず、DataFormWebPart をページに追加します。非表示にすると、[データ フォーム Web パーツ] に、必要な JavaScript 関数を有効にするために必要なすべてのデータが含まれます。
表 3. DataFormWebPart パラメーター
列 |
使用目的 |
データ フォーム Web パーツでの XSL 名 |
推奨されるアンカー名 |
|---|---|---|---|
Title |
MediaPlayer |
@Title |
TitleFieldValue |
URL Path |
MediaPlayer |
@FileRef |
UrlFieldValue |
PreviewImageUrl |
MediaPlayer |
@AlternateThumbnailUrl |
PreviewsImageUrlFieldValue |
Bookmarks |
Bookmarks |
@Bookmarks |
BookmarksFieldValue |
Enterprise Keywords |
RelatedVideos |
@TaxKeyword |
KeywordsFieldValue |
データ フォーム Web パーツを追加し、列とフィルターを構成するには
[挿入] リボンの [アイテムを表示するフォーム] を選択し、ドロップダウン メニューから [ビデオ] ライブラリを選択します。
[データ ビュー ツール - オプション] 操作別リボンで、[列の追加/削除] をクリックし、表 3 に含まれるフィールドを [表示する列] グループに追加します。
現在表示されている、[PreviewImageUrl] 列の <img> タグを右クリックし、[アイテムの形式を設定] コマンドを使用して、形式をテキストに変更します。
表示されている、[URL Path] 列のハイパーリンクを右クリックし、[アイテムの形式を設定] コマンドをテキストに変更します。
[オプション] 操作別リボンの [パラメーター] ボタンをクリックし、[ID] と呼ばれる [新しいパラメーター] を、以下のパラメーターを使用して、[データ ビューのパラメーター] セクションに追加します。
パラメーター ソース: クエリ文字列
クエリ文字列変数: ID
既定値: 1
[オプション] 操作別リボンの [フィルター] をクリックし、次のフィルター条件を追加します。<Field Name:ID>Equals[ID]
最後の 2 つの手順によって、ユーザーに現在表示されているアイテムのメタデータ値が、DataFormWebPart に常に表示されるようになります。
列の可用性と非表示データ フォーム Web パーツ
既定では、DataFormWebPart オブジェクトの値は、JavaScript で解決できません。DataFormWebPart に表示される各値を、JavaScript で解決できるようにセットアップする必要があります。これらの設定は一般的なパターンに従います。この手順を実行するには、各ページの HTML を表示できる必要があります。したがって、作業を始める前に、SharePoint Designer 2010 の [分割] ビューに切り替えます。
DataFormWebPart の値を JavaScript で解決できるようにした後、Web パーツを非表示にして、[アイテムを表示するフォーム] ページが表示されるときにそのページで Web パーツが表示されないようにします。パラメーターごとによく知られた名前でアンカー タグが配置された後は、1 行の JavaScript コードだけであらゆる値にアクセスできます。
ECMAScript を使用して列を使用できるようにするには
SharePoint Designer 2010 を開始し、[分割] ビューに切り替えて、各ページの HTML を表示します。
[データ フォーム Web パーツ] を表示します。
コード ビューで、適切な値を生成するために使用する <xsl:value-of> ステートメントを見つけます。
.gif "ヒント")
ヒントたとえば、[タイトル] フィールドのコードは <xsl:value-of select=”@Title”/> です。
<xsl:value-of> ステートメントを <a> 要素で囲み、<a> 要素の name 属性を指定します (次のコードには例の値が含まれます)。<a name="TitleFieldValue"> <xsl:value-of select="@Title" /></a>
データ フォーム Web パーツを非表示にするには
[アイテムを表示するフォーム] ページの HTML 内にある <WebPartPages:DataFormWebPart> 要素を見つけます。
その要素を、style="display:none;" 属性付きの <div> 要素で囲みます。
次の JavaScript 行を使用して、任意の DataFormWebPart オブジェクト値にアクセスします。(document.getElementsByName(‘Title’))[0].innerText;
注意
コード スニペット内の [タイトル] ではなく、表 3 の「推奨されるアンカー名」を使用します。
要約すると、このトピックでは、SharePoint Server 2010 を、評価機能を有効にする発行サイトとして構成しました。2 つの資産の種類のライブラリ (ビデオ ファイルとサムネイル イメージ ファイルを格納する) を作成しました。ビデオ コンテンツ タイプを指定し、そのビデオ コンテンツ タイプで使用可能なメディア プロパティを定義しました。メディア パラメーターとメディア プレーヤーを表示する [アイテムを表示するフォーム] を作成しました。表示するビデオの列に格納された入力パラメーター値を使用する DataFormWebPart オブジェクトを追加しました。DataFormWebPart オブジェクトの値を JavaScript オブジェクト モデルでアクセスできるようにしました。DataFormWebPart オブジェクトを非表示にして、そのオブジェクトが、ビデオ サイトの基本的な表示を提供する [アイテムを表示するフォーム] を表示するユーザーに表示されないようにしました。
次のチュートリアルでは、ビデオの表示に使用する [アイテムを表示するフォーム] に MediaWebPart オブジェクトを追加する方法、そのフォームでメディア プロパティを表示する方法、およびビデオ コンテンツ タイプの他のメディア パラメーター (評価、関連するビデオ、コメントなど) のデータを設定する方法について説明します。
次の手順
チュートリアル: MediaWebPart とビデオ サイト機能を追加する