Roam Research、音源や動画を埋め込む

こんにちは、Choimirai School のサンミンです。

0  はじめに

Roam Research（以下、Roam）には、テキストや写真、YouTube、PDFに加え、音源やYouTube以外の動画を埋め込む事も出来ます。

今回の note では、「iframe 機能」を使って、動画と音源を埋め込む方法を紹介します。

1  動画編：動画

ニューヨークタイムズ（以下、NYT）などでは動画を埋め込むコードをウェブサイトでシェアしています。

Featured Videos

この note では、NYTの動画を例として埋め込む手順を説明します。

動画を選択し右上にある </> メニューをクリックしますと他のウェブサイトで埋め込むためのコードが表示されます。

コードの中身はこんな感じです。

<iframe title="New York Times Video - Embed Player" 
 width="480" height="321" frameborder="0" scrolling="no" 
 allowfullscreen="true" marginheight="0" marginwidth="0" 
 id="nyt_video_player" 
 src="
 https://www.nytimes.com/video/players/offsite/index.html?
 videoId=100000007410745
 "></iframe>

この中で必要なのは、src = " " の間にある、URLのみ。

https://www.nytimes.com/video/players/offsite/index.html?
 videoId=100000007410745

Roamで新しいページを作って、上記のリンクを{{iframe: }}に貼り付けます。

{{iframe: https://www.nytimes.com/video/players/offsite/index.html?videoId=100000007410745}}

マウスのカーソルを別のブロックに移しますと、動画が埋め込まられていることが確認できます。

2  動画編：スクリプト

もちろん、動画にある、CC（Closed Caption）マークをクリックしますと字幕を表示する事もできます。

但し、英語学習者の場合、スクリプトを確認してから動画を見るのが話の内容を理解しやすい場合が多い。

NYT動画サイトの動画を再生しますと画面の下部に「Show Transcript」のメニューがあります。

「Show Transcript」を押下しますと上記のように、スクリプトが表示されます。但し、この状態ですとスクリプトをテキストとしてコピーすることはできません。

テキストとしてコピーするためには、画面を右クリックし表示されるメニューから、「Inspect」を選択（Chromeブラウザの場合）してください。

しますと、右側にある、Elementsからテキストをコピーすることができます。

3  ポットキャスト編：音源

Roamに埋め込む音源は色々とありますが今回はポットキャストを例として紹介します。中でも、NPRサイトにある、Life Kitのポットキャストが対象です。

ポットキャストの場合、Otter.aiを利用されている方はこちらの note で紹介している「Ottercast」がオススメです。

Otter.ai を利用されてない方は続けてお読みください。

ポットキャストを埋め込む手順も基本的には動画と一緒です。

画面にある、<> メニューをクリックしますと他のウェブサイトで埋め込むためのコードがEMBEDのポップアップで表示されます。

コードはこんな感じです。

<iframe src="https://www.npr.org/player/embed/916995266/918870591" width="100%" height="290" frameborder="0" scrolling="no" title="NPR embedded audio player"></iframe>

ここでも必要なのは、src= " " 間にあるリンクのみです。

https://www.npr.org/player/embed/916995266/918870591

Roamで新しいページを準備して、上記のリンクを {{iframe: }}に貼り付けます。

それから、マウスのカーソルを別のブロックに移動しますと次のようにポットキャスト再生用のウィジットが表示されます。

4  ポットキャスト編：スクリプト

こちらも基本的な手順は、動画と一緒です。

NPRのサイトにあるスクリプトを選択しますと、スクリプト画面に遷移しますので、コピーしてRoam画面に貼り付けます。

5  まとめ

オンライン上でアクセスできる情報はいつよりも多い。それらの情報を自分の知識に変えるためにもRoam上で管理＋繋げるメリットはとてつもなく大きいです。

JavaScriptを使えば、API経由でYouGlishのようなサービスを埋め込む事もできる。

「iframe」で埋め込んだコンテンツを参照しながらサイドバーでまとめますとより効果的に情報が知識へと変わりますのでぜひ試してみてください。