filter generico

Generico（およびVideo Easy）の使用

はじめに

技術的には、GenericoおよびVideo EasyはMoodleのフィルタです。しかし、それだけではこれらがどのように役立つかを説明したことにはなりません。わかりやすく言えば、これらを使用すると、管理者はHTML/CSSおよびJavaScriptの再利用可能なスニペットを定義し、MoodleのHTMLエリアに差し込むことができます。これらのスニペットをテンプレートと呼びます。シンプルなテンプレートを使用すると、現在ログインしているユーザの名前を含むウェルカムメッセージ、ユーザをメインのコースページに戻す魅力的な緑色のボタン、ビデオプレイヤ、FAQ形式のアコーディオンを表示できます。より高度なテンプレートは、QRコード、音声読み上げウィジェット、画像スライドショーの作成に使用されています。

これの何がよいのでしょうか？ 複数のプラグインやカスタムPHPコーディングに頼ることなく、Moodleサイトを大幅にカスタマイズできるようになります。また、免責事項や著作権表示など、よく使うHTMLの断片を一元化して再利用できます。さらに、iframeを埋め込むパーミッションを全般的に与えることなく、特定のサイトからのiframeコンテンツの埋め込みなどのタスクをユーザが実行できるようにする方法も提供します。

テンプレートの作成に必要なスキルは、テンプレートの複雑さによって異なります。しかし、作成済みのテンプレートを使用するのに特別なスキルはまったく必要ありません。GenericoおよびVideoEasyには、使い始めるのに役立つ作成済みテンプレートのコレクションが付属しています。

GenericoとVideoEasyの違いは何ですか？

両者はよく似ており、テンプレート作成者の観点からはほぼ同じものです。主な違いは、MoodleがいつどのようにHTMLページにテンプレートを適用するか、そして変数をどのようにテンプレートに渡すかにあります。

VideoEasy

VideoEasyは、ページ上のHTMLリンクを探すことで動作します。HTMLリンクがVideoEasyに登録されているファイル拡張子と一致する場合、そのリンクを処理済みのテンプレートに置き換えます。

そのため、拡張子が.mp4のビデオファイルへのリンクは、mp4ビデオプレイヤに置き換えることができます。その名前にもかかわらず、VideoEasyはビデオにまったく限定されません。他のファイル拡張子を登録することもできます。たとえば、.pdf拡張子を登録して、.pdfリンクをPDFビューアに置き換えることができます。

VideoEasyで処理するファイル拡張子は、次の場所で登録します。 サイト管理 > プラグイン > フィルタ > Video Easy > 一般設定

ファイル拡張子に使用する実際のテンプレートも、同じページで登録します。これは、活動インスタンスの設定メニューからアクセスする「フィルタ」ページの「設定」ボタンを使用して、コースまたは活動レベルでオーバーライドできます。これにより、必要に応じてコースや活動ごとに異なるビデオプレイヤを使用できます。

変数は、HTMLリンクのURLにパラメータを付加することでテンプレートに渡すことができます。たとえばURL http://mysite.com?favoritefruit=apple では、変数「favoritefruit」に値「apple」が設定され、@@favoritefruit@@としてテンプレートで使用できるようになります。

Generico

Genericoの動作はVideoEasyとは少し異なります。テキストエリア内のリンクに作用するのではなく、次のような特別な形式のテキストブロックに作用します。 {GENERICO:type="greenbutton",text="Go Back"}

Genericoはこれらのいずれかを見つけると、それを処理済みのテンプレートに置き換えます。テンプレート作成者であれば、これらの巧妙な小さいテキストブロックを手で作成できるかもしれませんが、平均的なユーザには現実的ではありません。そのため、ユーザのためにGenericoフィルタ文字列を準備できる、Attoテキストエディタ用の特別なプラグインが用意されています。

Genericoテンプレートを使用する

Genericoテンプレートをページに追加する方法は2つあります。

i) ページにGenericoフィルタ文字列を手動で入力する
ii) AttoテキストエディタのGenericoポップアップダイアログからGenericoテンプレートを選択する

シンプルで人為的なミスが起こりにくいため、ほとんどの場合は後者を使用することになるでしょう。カスタムキャプションおよびリンク付きのきれいなボタンを表示するGenericoテンプレートの例を見てみましょう。この場合、Genericoフィルタを手で追加すると、次のようになります。 {GENERICO:type=prettybutton,caption="Generico goes to Google",link="http://www.google.com"}

一方、Attoのポップアップダイアログを使用した場合は、最初は次のように表示されます。

しかし、Atto Genericoプラグインを使用してページにGenerico文字列を挿入した後でも、それはまだ単なるGenerico文字列です。ボタンのようにはまったく見えません。これは、GenericoがHTMLエリアのコンテンツが保存され、それを含むページが表示されて初めてフィルタ文字列を処理するためです。

Genericoテンプレートを「テンプレート」と呼ぶ理由は、テンプレートが何らかのデータと組み合わされて、ページに表示される最終的なHTMLスニペットが作成されるためです。きれいなボタンの場合、このデータはキャプションおよびURLでした。テンプレートを作成するときに、変数と呼ばれるプレースホルダをテンプレートに挿入します。そして、テンプレートをページに追加するときにデータ（キャプションやURLなど）を渡すと、それらがテンプレートとマージされてHTMLスニペットが作成されます。Generico Attoテキストエディタプラグインは、ユーザが簡単に入力できるよう、変数ごとにフィールド（テキストエリアまたはドロップダウンリスト）を持つシンプルなフォームを生成します。

シンプルなGenericoテンプレートを調べる

それでは、シンプルなGenericoテンプレートを作成してみましょう。テンプレートはサイト管理エリアで定義します。各テンプレートには、次の場所にエントリがあります。 サイト管理 > プラグイン > フィルタ > Generico

Genericoをインストールした時点でデフォルトで20個の空白のテンプレートがありますが、さらに追加することもできます。空白のGenericoテンプレートは何もしません。何かが起こるようにするには、テンプレートに入力する必要があります。しかし、使用できるプリセットテンプレートがあるため、何かを行う新しいテンプレートを作成するのは簡単です。最もシンプルな「hello world」テンプレートを使用してみましょう。次のようにします。 i) 空白のテンプレートを開きます。 ii) テンプレート設定ページの最初のコントロールで、テンプレートプリセットのドロップダウンリストから「hello world」を選択します。 iii) 一番下までスクロールして、テンプレートを保存します。 これで完了です。テンプレートが作成されました。フィルタ文字列「{GENERICO:type=helloworld}」をHTMLエリアに入力するか（フォーラム投稿やページリソースで試してください）、Generico Attoエディタプラグインからフィルタ文字列を選択/挿入します。ページが表示されると、「hello world [yourname].」というメッセージが表示されるはずです。

では、実際には何が起こったのでしょうか？ 次のような流れです。

a) Moodleがページをブラウザに送信しようとしています。
b) Moodleはページ内でGenericoフィルタ文字列を探し、見つけると次の処理を行います。
 i) 出力からフィルタ文字列を削除します。
 ii) フィルタ文字列を処理し、処理済みの出力に置き換えます。
c) 出力をページに送信します。

この処理では、テンプレート内の変数プレースホルダを探し、それらをフィルタ文字列内のデータと照合します。一致すると、テンプレート内の変数プレースホルダがフィルタ文字列のデータに置き換えられます。その後、処理済みのテンプレートがブラウザに返されます。この動作については、後で詳しく説明します。

テンプレートのインポートおよびエクスポート

自分や他の人が作成したテンプレートを共有できるように、テンプレートをインポートおよびエクスポートできます。テンプレート設定ページの右上に、「Bundle」というタイトルの緑色のボックスがあります。このボックスをクリックすると、テンプレートキーと同じ名前のテキストファイルにテンプレートがエクスポートされます。たとえばテンプレート「helloworld」の場合、hello world.txtファイルがエクスポートされ、すぐにダウンロードが始まります。このようなファイルをインポートするには、テキストファイルを緑色のBundleボックスにドラッグします。枠線が青色に変わります。そこにファイルをドラッグ＆ドロップすると、現在読み込まれているテンプレートが、インポートした内容で上書きまたは入力されます。ただし、テンプレートを保存するまで変更は確定しません。そのため、ページの一番下までスクロールして保存ボタンを押す必要があります。

テンプレートのフィールド

各テンプレートの設定ページには、Video EasyではX個、Genericoでは14個のフィールドがあります。順序や名称も少し異なります。各フィールドは、一般、HTML、JavaScript、CSSの4つのカテゴリのいずれかに属すると考えることができます。hello worldテンプレートの場合、JavaScriptやCSSはありません。単にHTMLを返すだけです。しかし、必要であれば、CSSスタイルや、テキストへのJavaScriptのクリックイベントを追加することもできます。各フィールドを順に見ていきましょう。

a) テンプレートキー
b) テンプレート名
c) テンプレート説明 
d) テンプレート本文
e) テンプレート本文終了
f) テンプレートAMDフラグ
g) テンプレートjQueryフラグ
h) テンプレートの必要なJS 
i) テンプレートスクリプト 
j) テンプレートのJSをアップロードする
k) テンプレートの必要なCSS
l) テンプレートCSS
m) テンプレートのCSSをアップロードする
n) テンプレートデータセット
o) テンプレートデータセット変数
    

テンプレートキー

テンプレートキーは、内部処理で使用される一意の識別子であり、Genericoフィルタ文字列の最も重要な部分です。キーには、スペースや英数字以外の文字を含めないでください（アンダースコアは使用できます）。キーは、Genericoフィルタ文字列の「type」の部分です。たとえば、先ほど使用したprettybuttonの例では、テンプレートキーは「pretty button」になります。 {GENERICO:type=prettybutton,caption="Go to Google",link="http://google.com"}

テンプレートの他の部分はすべて変更でき、テンプレートが処理されるときの動作もそれに応じて変わります。しかし、キーを変更すると、サイト上で使用されているそのテンプレートのフィルタ文字列はすべて処理されなくなります。これは、「type」がどのテンプレートのキーとも一致しなくなるためです。

テンプレート名

テンプレート名は、サイト内でそのテンプレートを参照するとき、つまり設定ページやAttoテキストエディタで表示される名前にすぎません。「キー」とは異なり、ここにはスペースや英数字以外の文字を含めることができます。

テンプレート説明

テンプレート説明は、Attoテキストエディタでそのテンプレートを挿入するGenericoフォームに表示されます。そこにはあまりスペースがないため、短い説明が最適です。

テンプレート本文

テンプレート本文には、処理対象のGenericoフィルタ文字列の代わりにページに配置するHTMLを入力します。「helloworld」の例では、テンプレート本文は次のようになっています。 Hello World @@USER:firstname@@

変数が使用されていることに注目してください。この場合は、現在のユーザの名を返すプリセット変数です。しかし、ここで重要なのは、Genericフィルタ文字列の実際の置き換えがここで行われるということです。本文セクションにあるものが、変数を実際の値に置き換えたうえで、文字列と置き換えられます。

テンプレートセクション終了

これはGenericoにのみ存在します。フィルタ文字列のtype属性が「type=[key]_end」の形式（例：{GENERICO:type=helloworld_end}）の場合、「テンプレート本文」セクションの代わりにこれが処理されます。これは、テンプレートに開始タグと終了タグが必要な場合に使用するためのものです。ボタンが押されたときに画像をライトボックスで表示するライトボックステンプレートの例を見てみましょう。ページには2つのGenericoフィルタ文字列を配置します。1つは開始タグ用、もう1つは終了タグ用です。そのため、次のようになります。 {GENERICO:type=lightbox} {GENERICO:type=lightbox_end}

ユーザは、エディタにある標準のMoodleの「画像を挿入する」アイコンを使用して、それらの間に画像を挿入できます。Generico Attoプラグインはテンプレート終了フィールドを認識しており、それが空白でない場合は、メインのフィルタ文字列とともに終了フィルタ文字列を自動的にページに挿入します。

テンプレートAMDフラグ

AMDは、バージョン2.9でMoodleに導入されたJavaScriptの読み込みシステムです。AMDは、テンプレートのJavaScriptの依存関係を安全に読み込み、同じページ上の他のテンプレートやJavaScriptの依存関係との名前やバージョンの競合を防ぎます。テンプレートにJavaScriptが含まれない場合、またはMoodle 2.9より古い場合は、これを気にする必要はありません。「テンプレートスクリプト」エリア（後述）でJavaScriptを使用する場合、AMDを「yes」に設定すると、スクリプトでjQueryを使用できるようになります。「テンプレートの必要なJS」または「テンプレートのJSをアップロードする」エリアでサードパーティのライブラリを読み込む場合は、そのサードパーティのライブラリが推奨する設定を選択する必要があるかもしれません。AMDをサポートするライブラリは、一般に「yes」を選択しないと失敗します。AMDをサポートしないライブラリは、通常「yes」を選択すると失敗します。

テンプレートjQueryフラグ

読み込むサードパーティのライブラリや独自のスクリプトがjQueryに依存している場合、これを「yes」に設定すると、jQueryを強制的に読み込むことができます。しかし、本当はこれは決して行うべきではありません。他の方法が見つかるのであれば、その方がよいでしょう。（警告：ここから技術的な説明です）その理由は、jQueryにはバージョンとプラグインがあるためです。ページ上の別のテンプレートや他の何かがjQueryプラグインを読み込んでいたり、異なるバージョンのjQueryを必要としていたりする場合、jQueryを強制的に読み込むと、他の何かがすでに読み込んでいたjQuery（およびプラグイン）が上書きされます。すると、その他の何かは失敗します。こうした競合は原因を突き止めるのが難しく、AMDシステムはまさにこれを避けるために設計されました。どうしてもjQueryが必要で、AMDを使用できない場合は、jQueryを読み込むテーマを使用してみてください。Essentialなど、よいテーマのほとんどはjQueryを読み込みます。それができない場合は、Moodleの追加HTMLエリアの「HEAD」セクションにjQueryの呼び出しを追加します。（注：Moodleの追加HTMLセクションを使用してjQueryを読み込む場合でも、jQueryを必要とする他のプラグインで問題が発生するおそれがあります。）

開発者の方は、GenericoおよびVideoEasyが、なぜPHPの$PAGEリクワイアメントマネージャを使用してjQueryを読み込まないのか疑問に思うかもしれません。問題は、ページヘッダがすでにブラウザに送信された後でフィルタが呼び出されることが多いという点です。その時点で$PAGEリクワイアメントマネージャを介してjQueryを要求しようとすると、エラーが発生します。

テンプレートの必要なJS

テンプレートで、ライトボックスを作成するライブラリなどのサードパーティのライブラリが必要な場合は、ここにそのライブラリのURLを入力できます。これは、ライブラリがCDN（コンテンツ配信ネットワーク）経由で提供されている場合に便利です。テンプレートとともにライブラリ自体を提供する必要はなく、URLだけでよいため、多くのプリセットやGenerico/VideoEasyのバンドルがこの方法でサードパーティのライブラリを読み込んでいます。

ライブラリのURLを指定するときは、//から始めてください（つまり、https:やhttp:から始めないでください）。

テンプレートスクリプト

テンプレートスクリプトを指定すると、ページ上のテンプレートのフィルタ文字列ごとに1回呼び出されます。これは、テンプレートを初期化するために必要なイベントハンドラの設定やDOM操作を行うためによく使用されます。たとえば、画像をライトボックスで開くボタンをページに配置する場合、ボタンのHTMLを「テンプレート本文」に追加し、クリックイベントのイベントハンドラをここでアタッチします。この場合、一般にボタンにclass属性またはid属性を与え、スクリプトエリアでそのclassまたはidの要素を選択する必要があります。これは、スクリプトがページ上のすべてのHTMLが読み込まれた後にのみ実行されるためです。「テンプレートスクリプト」エリアと「テンプレート本文」エリアで同じidやclassを簡単に使用できるように、特別な変数AUTOIDが用意されています。これは、要素のidやclassとして使用できる、ランダムでおそらく一意の文字列を提供します。この文字列は、特定のフィルタ文字列の処理全体を通して同じです。

さて、ここで変数について説明する必要があります。テンプレートでは、独自に定義した変数を使用することも、プリセット変数を使用することもできます。AUTOIDおよびUSER:firstnameは、プリセット変数の2つの例です。Generico/VideoEasyは、これらに正しいデータが含まれるようにします。独自のカスタム変数を宣言することもできます。2つの@@記号で囲まれたものはすべて変数として扱われます。そのため、テンプレート内の@@AUTOID@@および@@FAVORITECOLOR@@は変数として認識されます。カスタム変数の場合、Genericoはフィルタ文字列から値を取得します。VideoEasyは、カスタム変数の値をURLパラメータから取得します。Generico/VideoEasyにデフォルト値を設定して、値が指定されていない場合にデフォルト値が使用されるようにすることもできます。

変数の使用については、重要な注意点があります。変数は「テンプレート本文」エリアと「テンプレートスクリプト」エリアで使用できます。しかし、処理が少し異なります。テンプレート本文では、変数@@FAVORITECOLOR@@は「pink」に置き換えられるかもしれません。しかし、テンプレートスクリプトでは「opts[‘FAVORITECOLOR’]」に置き換えられます。

そのため、「テンプレート本文」では変数を好きなように配置でき、変数はそのまま値に置き換えられます。しかし、「テンプレートスクリプト」では、次のように書かないよう注意する必要があります。 var elem = $(‘#@@AUTOID@@’);

処理後に次のようになるため、これは失敗します。 var elem = $(‘#opts[‘AUTOID’]’);

代わりに、次のように書いてください。 var elem = $(‘#’ + @@AUTOID@@);

これは機能し、次のような結果になります。 var elem = $(‘#’ + opts[‘AUTOID’]);

スクリプトではなぜこのようにしなければならないのか、疑問に思うかもしれません。その理由は、スクリプトファイルがMoodleによってキャッシュされるためです。変数のリテラル値の代わりにopts変数を使用することで、キャッシュがうまく機能し、ユーザに古いコンテンツ（または他の人のコンテンツ）が提供されることはありません。

テンプレートのJSをアップロードする

JSアップロードエリアでは、管理者がJavaScriptファイルをアップロードできます。このファイルは、「テンプレートの必要なJS」のファイルと同じ方法で読み込まれます。テンプレートの必要なJSのファイルに加えて使用でき、複数のサードパーティのライブラリファイルが必要な場合や、CDNやその他のインターネット上のソースではなくMoodleサーバからJavaScriptファイルを読み込みたい場合に便利です。

テンプレートの必要なCSS

テンプレートでサードパーティのCSSファイルが必要な場合は、ここにそのライブラリのURLを入力できます。ライブラリのURLを指定するときは、//から始めてください（つまり、https:やhttp:から始めないでください）。

テンプレートCSS

テンプレートのカスタムCSSをここで指定します。残念ながら、カスタムCSSエリアではテンプレート変数を使用できません。カスタムCSSはかなり遅く読み込まれるため、スタイルが遅れて適用されることにユーザが気づきます。これが気になる場合は、カスタムCSSの宣言をファイルに保存し、「テンプレートのCSSをアップロードする」エリアにアップロードしてください。

テンプレートのCSSをアップロードする

「テンプレートのJSをアップロードする」エリアと同様に、「テンプレートのCSSをアップロードする」エリアでは、テンプレート作成者がサードパーティのCSSファイルをアップロードできます。これは、ファイルにローカルサーバからアクセスする必要がある場合や、「カスタムCSS」で指定したスタイルよりも早くCSSスタイルを適用する必要がある場合に便利です。

テンプレートデータセット

サーバ側で実行されるカスタムSQLスクリプトを設定し、その結果のデータをテンプレートに返すこともできます。SQLスクリプトは、Moodleの$DB->get_records_sql()関数を使用して呼び出されます。参照：https://docs.moodle.org/dev/Data_manipulation_API#moodle_database::get_records_sql.28.29

返されるレコードが1件だけの場合、そのレコードは、@@DATASET:[fieldname]@@という構文を使用してテンプレートの本文エリアで使用できます。 例： テンプレートデータセット：「SELECT * FROM {user} WHERE id = 37;」 テンプレート本文：ユーザ37の名は@@DATASET:firstname@@です。お忘れなく。

返されるレコードが1件でも複数件でも、データセットを指定すると、テンプレートのカスタムJavaScriptで@@DATASET@@変数を使用できるようになります。これはオブジェクトの配列で、各オブジェクトは返されたレコードの1件を表します。PHPのオブジェクトの配列からJavaScriptのオブジェクトの配列に変換する過程で、配列内のオブジェクトの順序/インデックスが変更されるようであるため、これに頼ることはできません。

テンプレートデータセット変数

テンプレート変数は、テンプレートデータセットでは機能しません。これは、get_records_sql APIに独自のテンプレートシステムがあるためです。この関数の第1パラメータはSQL文です。SQL文に疑問符（「?」）を置くと、Moodleはそれを変数として認識します。変数の値は、この関数の第2パラメータで渡されます。Moodleは、各疑問符を、第2パラメータで渡された値の1つに置き換えます。Genericはこのシステムを使用しており、「テンプレートデータセット変数」フィールドに、変数の値をカンマ区切りのリストで指定できます。ここではGenericoのテンプレート変数を指定できるため、非常に強力です。上の例を書き換えて、現在ログインしているユーザの情報を返すようにすることで、これを実演してみましょう。

テンプレートデータセット：「SELECT * FROM {user} WHERE id = ?;」

テンプレートデータセット変数：@@USER:id@@

テンプレート本文：ユーザ@@USER:id@@の名は@@DATASET:firstname@@です。お忘れなく。

実際には、Genericoの@@USER:xx@@変数を介して現在ログインしているユーザの情報にすでにアクセスできるため、これはささいな例です。しかし、Genericoのテンプレート変数を使用してデータベースからデータセットを取得する方法がわかります。@@USER:xx@@、@@COURSE:xx@@、その他のプリセット変数を使用できるほか、独自に定義した変数も使用できます。

get_records_sqlの呼び出しから複数のレコードが返される場合は、@@DATASET:xx@@にアクセスしてフィールドを取得することはできません。その場合、@@DATASET@@にはオブジェクトの配列が含まれ、実際に役立つのはカスタムJSエリアでのみです。各オブジェクトは、データセットの1件のレコードを表します。配列のインデックスは、返されたレコードのIDになる可能性が高いため、@@DATASET@@[0]で最初のレコードを取得することはできません。

データを取得するためのAJAX呼び出しはないことに注意してください。フィルタが解析されるときにデータが取得され、その後は再び取得されることはありません。

注：現在のGenericoの実装にはバグがあり、データセット変数で指定した一連の変数のうち、最初の変数だけが実際にプラグインで使用できます。

ネイティブ変数

GenericoおよびVideo Easyには、すぐに使用できる多くの変数が用意されています。認識されるようにするには、2つの@記号で囲む必要があります。例：@@AUTOID@@または@@USER:firstname@

共通ネイティブ変数

これは1つしかありません。しかし、便利な変数で、頻繁に使用することになるでしょう。

AUTOID = コンテナdivなどで使用する、自動生成されるID。

これは、HTML要素に一意のIDを与えるために使用され、そのIDでJavaScriptから要素を見つけることができます。 AUTOIDの値はフィルタが実行されるたびに異なりますが、テンプレート内の各フィールドでは同じです。

Genericoネイティブ変数

USER:xxxx = 現在のユーザのユーザレコードの値。xxxx = ユーザレコードのフィールド

COURSE:xxxx 現在のコースレコードの値。xxxx = コースレコードのフィールド

WWWROOT = MoodleサイトのURL

MOODLEPAGEID = 現在のページのURLに渡されたidパラメータの値（存在する場合）

URLPARAM:xxxx = 現在のページに渡されたURLパラメータの値。xxxx = URLパラメータ。videoeasyでは、URLパラメータはURLPARAM:の部分なしでトップレベルのネイティブ変数として使用できます。

Video Easyネイティブ変数

FILENAME = ビデオのファイル名

AUTOJPGFILENAME = ビデオのファイル名（拡張子をjpgにしたもの）

AUTOMIME = ファイル拡張子から判断したビデオファイルのMIMEタイプ

AUTOPNGFILENAME = ビデオのファイル名（拡張子をpngにしたもの）

AUTOPOSTERURLJPG = ビデオの完全なURL（拡張子をjpgにしたもの）

AUTOPOSTERURLPNG = ビデオの完全なURL（拡張子をpngにしたもの）

CSSLINK = 必要に応じてCSSファイルを読み込むために内部で使用

DEFAULTPOSTERURL = デフォルトのポスター画像のURL。VideoEasyには地味なグレーの画像が付属していますが、Video Easyの一般設定ページで独自のデフォルトポスター画像をアップロードできます。

FILEEXT = ビデオファイルのファイル拡張子

VIDEOURL = ビデオのURL

URLSTUB = ビデオのURL（ファイル拡張子を除いたもの）

PLAYER = プレイヤのタイプ（videojs、flowplayerなど）

TITLE = ビデオのタイトル（リンクテキストから）

WIDTH = ビデオの幅

HEIGHT = ビデオの高さ