オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンター(pleasanter)のブログです

オープンソースWebDB「プリザンター」のブログです。 機能の紹介や実例を交え、わかりやすく解説していきます。

Youtubeを使ったE-learningをプリザンターで実現するには?

こんにちは。
リーデックス小川です。

先日、7月15日に実家へお坊さんが来ました。旧暦で盂蘭盆だったためなのですが、なぜか実家は旧暦の盆のようです。地域性なんですかね?今年からは代替わりして、女性の坊さんが担当になったようです。いろいろとお話を聞いて、とてもためになりました。また来年、お会いすることがとても楽しみです。

さて、今日はYoutubeの動画をプリザンターに貼り付ける方法について書いてみたいと思います。公式FAQに上がっていたもので、少し見た目が派手(笑)のため、試してみようと思いました。

 Youtubeの動画をiframeで埋め込んで表示したい(ID:509630)

それでは始めていきましょう。公式FAQは下記URLとなります。

https://pleasanter.net/fs/publishes/509630/edit

まずは、下準備です。適当なフォルダでテーブルを作成しましょう。テーブルは記録テーブルでも期限付きテーブルでもどちらでもOKです。

テーブル作成後に、分類Aを「エディタ」タブでついかし、分類Aを「埋め込みタグ」と名前を変更してください。

エディタの操作方法の詳細は割愛しますので、追加の方法がわからない方は、下記を参考にしてみてください。

 

続いて、タブ「スクリプト」に下記スクリプトを追加します。タイトルは「動画セット」として、出力先を「編集」のみに設定してください。

// 動画のiframeをセット
showMovie = function () {
// 分類Aに入力された埋め込みタグを取得
var html = $p.getControl('ClassA').val();
// 埋め込みタグを内容欄にセット
$p.getControl('Body').parent().html(html);
}
// 分類Aが変更されたら動画を変更
$p.on('change', 'ClassA', function () {
showMovie();
});
// ページを開いた際にセット
showMovie();

f:id:h-ogawa-reedex-co-jp:20190717210346p:plain


設定の方法は下記に詳しく記載されています。


なお、

// 分類Aに入力された埋め込みタグを取得
var html = $p.getControl('ClassA').val();
// 埋め込みタグを内容欄にセット
$p.getControl('Body').parent().html(html);

の書き方については、最近のバージョンで実装されたものですので、古いバージョンの場合は動かないことがあります。もし、動かない場合で要望が多い場合は、修正版をブログで公開しようと思いますので、ぜひコメントを頂ければと思います。

さて、上記まで記載したら、変更ボタン、更新ボタンで反映させてください。これでプリザンター側の準備は完了です。

Youtubeの埋め込みタグを確認する

次に、実際に埋め込む動画の埋め込みタグを取得します。先ほど設定した分類A「埋め込みタグ」に、ここで取得したタグを張り付けます。

埋め込みたい動画に移動します。今回はこちらの動画を例に出させていただきました。動画の下にある「共有」をクリックします。

f:id:h-ogawa-reedex-co-jp:20190717210937p:plain

 

ポップアップで画面が表示されるので、「埋め込む」をクリックします。

f:id:h-ogawa-reedex-co-jp:20190717211036p:plain

表示された画面のソースを全選択してコピー、もしくは、画面下にあるコピーをクリックしてください。

f:id:h-ogawa-reedex-co-jp:20190717211127p:plain

これを先ほどのプリザンターのテーブルの分類A「埋め込みタグ」に追加します。そして画面をリロードすると・・・

f:id:h-ogawa-reedex-co-jp:20190717212026p:plain

 

できました!動画も無事に再生されていますね。
これを応用すれば、プリザンターでE-learningシステムを開発できそうですね。

 

ただし、注意してください!

E-learningはできそうですが、Youtubeを会員制サイトで利用したり、商業目的で利用する場合は、注意が必要です。必ず、利用規約に目を通して、利用方法が違反していないかを確認してください。

f:id:h-ogawa-reedex-co-jp:20190717203012p:plain

https://www.youtube.com/static?template=terms&hl=ja&gl=JP

※自己責任でお願いします。

 

まとめ

今日は、Youtubeの動画の埋め込みを行いました。ほかの動画サービスでも同じようなことはできそうですので、チャレンジしてみてください。

それでは今日はこの辺で。
最後までご覧いただきありがとうございました。