Youtubeなどの動画サイトの動画は、柔軟に埋め込み用のタグなどを作ってくれるわけですが、Google Drive内に保存している動画となると、単純なiframeタグを使った埋め込み用コードが出るだけです。しかし、実際にはこれらGoogle Drive内での動画というものは付属の資料であったり、研修用問題集であったり、色々使われている事が多いのが、常です。単純にGoogle Sitesに動画を貼り付けて、関連資料などもリンクでポン付けも良いのですが、もっと格好良く見せたい。なにより、動画を何個も貼り付けると重い。

そこで、Googleスプレッドシート連携の動画・資料などをひとまとめにし、リスト化し再生できるプレーヤー的な何かをつくろうと思いつくったのがこのガジェット。やってることは単純なのですが、単純なファイルとGoogle Spreadsheetに対応しています。また、スプレッドシートに作成したリストが有る一定以上になると、右側のリスト表示はスクロールするようになり、クリックすると該当の動画を再生し、該当の資料を開けるようになるという寸法です。

目次

使用する材料

  1. 動画プレイヤーリストで使用するスプレッドシート
  2. Google Visualization APIライブラリ
  3. jQuery 1.11.1 ライブラリ
  4. Google CSS Addon
  5. その他のCSSファイル

実行結果

♬ Tam Free Music – 散歩道

ソースコード

CSSによるデザインがとても重要です。div要素全体へのリンクやdiv内のスクロール、div boxを2つ並べるなどがその要素です。ここでは、ポイントになるコードを紹介します。

冒頭のグローバル変数はその後のアクションでも使います。dataにスプレッドシートのデータを格納し、spreadmanやslidemanには組み立てたドキュメントへのURLを格納します。

動画右側の動画リストを組み立てるHTMLです。リンクはJavaScriptのOnLinkClickを叩くようにしており、引数にはスプレッドシートの1個目が0なので、0から順番に格納していきます。組み立てたHTMLをdiv要素内にinner.htmlで書き込みます。次にクリックした時のOnLinkClick関数について記述します。

OnLinkClickは単純で引数に格納した数値をグローバル変数に格納し、それをdrivetubeover関数内で読みに行きます。drivetubeover関数内で動画エリアのHTMLを組み立ててノードの書き換えを行います。グローバル変数の値をもとにdataテーブルから値を貰ってきて嵌めこんでます。

ボタンの部分はopenFiles関数に対して通常のファイルの場合には0を、Google Docsの場合には1を引数に取り、読みに行く組み立てるURLを分岐させて、直接開くようにしています。Driveは通常のファイルとGoogleドキュメント類とではURLが異なるからです。

ダウンロード

Cloud-download-icon-0926003654 Google Drive動画再生ガジェット

使い方と効能

使うまでの手順

このガジェット用のスプレッドシートをコピーして入手し、中に入ってる項目を埋めます。F列〜G列にある項目はURLではなくドキュメントのIDを入れます。ガジェット自体をカスタマイズして、URLで行けるようにしても良いと思います。今回はあえてIDにしてあります。

その後ガジェットをサイトに配置します。通常のサイトであれば、ガジェット特有のコードの部分を排除し、Visualization APIに投げる部分をスプレッドシートのURLが入るように改造しても良いでしょう。Google Sitesに貼り付けた場合には、Spreadsheet URLにスプレッドシートのURLを入力しOKとします。これでリストを読みに行き、動画プレイヤーが出てくるようになります。

期待できる効用

  1. 同一ページに動画を大量に貼り付けてページの読み込みが重たくなるのを防ぎます。
  2. Google Driveの動画と各種資料を一意にユーザは確認することが出来ます。散らばっていてもスプレッドシートでまとめることができます。
  3. 閲覧したい動画をリストから簡単にチョイスすることができます。

関連項目

 

Pocket
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark
Pocket