フィルタgenerico
| フィルタgenerico | |
|---|---|
| タイプ | フィルタ |
| セット | 該当なし |
| ダウンロード | https://moodle.org/plugins/filter_generico |
| 問題点 | https://github.com/justinhunt/moodle-filter_generico/issues |
| 討論 | https://moodle.org/mod/forum/discuss.php?d=261896 |
| メンテナ | ユーザー：ジャスティンハント |
Generico（およびVideo Easy）を使う
内容
前書き
技術用語では、GenericoとVideo EasyはMoodle用のフィルタです。しかし、それは彼らがあなたを助けることができる方法を説明することにそれほど遠く行きません。ユーザーが話す際に、管理者はMoodleのhtmlエリアにポップできるhtml / cssとjavascriptの再利用可能なスニペットを定義することができます。これらの断片はテンプレートと呼ばれます。簡単なテンプレートを使用して、現在ログインしているユーザーの名前、メインコースページに戻る魅力的な緑色のボタン、ビデオプレーヤー、または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 https://mysite.com?favoritefruit=appleでは、変数 'favoritefruit'に値 'apple'が設定され、@@ favoritefruit @@としてテンプレートで使用できるようになります。
ジェネリコ
GenericoはVideoEasyとは少し違った働きをします。テキスト領域のリンクではなく、次のように特別にフォーマットされたテキストブロックで機能します。{GENERICO：type = "greenbutton"、text = "Go Back"}
これらのいずれかが見つかると、処理されたテンプレートに置き換えられます。テンプレート作成者は手作業でこれらの巧妙で小さなテキストブロックを作ることができるかもしれませんが、それは普通のユーザにとって現実的ではありません。そのため、Attoテキストエディタ用の特別なプラグインが用意されています。これにより、ユーザ用にGenericoフィルタ文字列を準備できます。
Genericoテンプレートを使う
Genericoテンプレートをページに追加する方法は2つあります。
i) Manually enter a Generico filter string on a page ii) Selecting a Generico template from the Generico popup dialog on the Atto text editor.
ほとんどの場合、後者を使用します。なぜなら、それは単純で、人的ミスが起こりにくいからです。 Genericoテンプレートの例を見て、カスタムのキャプションとリンク付きのきれいなボタンを表示しましょう。このような場合、Genericoフィルタを手動で追加すると、次のようになります。{GENERICO：type = prettybutton、caption = "GenericoはGoogleにアクセスします"、link = " https://www.google.com "}
ただし、Attoポップアップダイアログを使用した場合は、最初に次のようになります。
ただし、Atto Genericoプラグインを使用してページにGenerico文字列を挿入した後でも、それはまだGenerico文字列にすぎません。ボタンのようには見えません。これは、Genericoがhtmlエリアのコンテンツが保存され、それを含むページが表示された後にのみフィルタ文字列を処理するためです。
私たちがGenericoテンプレートを「テンプレート」と呼ぶのは、それらがいくつかのデータと組み合わされて、ページに表示される最終的なhtmlスニペットを生成するからです。かわいいボタンの場合、このデータはキャプションとURLです。テンプレートが作成されると、変数と呼ばれるプレースホルダがそれに挿入されます。次に、テンプレートをページに追加するときに、データ（captionや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 is sending the page to the browser b) It looks through the page for any Generico filter strings, and when it finds one: i) it removes the filter string from the output ii) it processes the filter string and replaces it with the processed output. c) it sends the output to the page
この処理では、テンプレート内の可変プレースホルダを探し、それらをフィルタ文字列内のデータと照合します。これらが一致すると、テンプレート内の可変プレースホルダがフィルタ文字列データと交換されます。その後、処理されたテンプレートはブラウザに返されます。この動作については後で詳しく説明します。
テンプレートのインポートとエクスポート
自分や他の人が作成したテンプレートを共有できるようにするには、それらをインポートおよびエクスポートすることが可能です。テンプレートの設定ページの右上に、「Bundle」というタイトルの緑色のボックスがあります。ボックスをクリックすると、テンプレートがテンプレートキーと同じ名前のテキストファイルにエクスポートされます。テンプレート「helloworld」の場合、hello world.txtファイルがエクスポートされ、ダウンロードがすぐに開始されます。そのようなファイルをインポートするには、テキストファイルを緑色のバンドルボックスにドラッグします。枠が青に変わります。ファイルがそこにドラッグアンドドロップされると、現在ロードされているテンプレートはインポートされたコンテンツで上書きまたは記入されます。ただし、テンプレートを保存するまで変更は永続的ではありません。そのため、ページの一番下までスクロールして[保存]ボタンを押す必要があります。
テンプレートフィールド
各テンプレートの設定ページには、Video Easy用のXフィールドとGenerico用の14のフィールドがあります。順番と名前も少し異なります。各フィールドは、一般、HTML、Javascript、およびCSSの4つのカテゴリのいずれかに分類されます。ハローワールドテンプレートの場合、JavaScriptやCSSはありません。 HTMLを返すだけです。必要に応じて、CSSスタイルやJavaScriptのclickイベントをテキストに追加することもできます。順番に各フィールドを見てみましょう
a) The Template Key
b) The Template Name
c) The Template Instructions
d) The Template Body
e) The Template Body End
f) The Template AMD flag
g) The Template JQuery flag
h) The Template Require JS
i) The Template Script
j) The Template Upload JS
k) The Template Require CSS
l) The Template CSS
m) The Template Upload CSS
n) The Template Dataset
o) The Template Dataset Datavars
テンプレートキー
テンプレートキーは内部処理で使用される一意の識別子で、Genericoフィルタ文字列の最も重要な部分です。キーにはスペースや英数字以外の文字を含めないでください（アンダースコアは問題ありません）。重要なのは、Genericoフィルタ文字列の「type」部分です。たとえば、先ほど使用したプリティボタンの例では、テンプレートキーは「プリティボタン」になります。{GENERICO：type = prettybutton、caption = "Googleにアクセス"、link = " https://google.com "}
テンプレートの他の部分はすべて変更でき、テンプレートが処理されると動作もそれに応じて変わります。しかし、キーが変更されると、そのテンプレートのサイトに存在するすべてのフィルタ文字列は処理されなくなります。それは、「タイプ」がどのテンプレートのキーとも一致しないためです。
テンプレート名
テンプレート名は、単にテンプレートを参照するときにサイトの周囲に表示されるものです。すなわち、設定ページとAttoテキストエディタにあります。 「キー」とは異なり、ここにスペースと英数字以外の文字を含めることができます。
テンプレートの説明
テンプレートの説明は、AttoテキストエディタのGenericoテンプレート挿入フォームに表示されます。そこに多くのスペースがないので、短い指示が最善です。
テンプレート本体
テンプレート本体は、処理されているGenericoフィルタ文字列の代わりにページに配置されるHTMLを配置する場所です。 「helloworld」の例の場合、テンプレート本体は次のようになります。Hello World @@ USER：firstname @@
変数、この場合は現在のユーザーの姓を返すプリセット変数の使用に注意してください。しかしここで重要なことは、汎用フィルター文字列の実際の置き換えがここで行われることです。 bodyセクションにあるものは何でも文字列を置き換えますが、実際の値で置き換えられた変数は置き換えられます。
テンプレート終了セクション
これはGenericoにのみ存在します。フィルタ文字列のtype属性が 'type = [key] _end'の形式の場合、これは“ Template Body”セクションの代わりに処理されます。例えば{GENERICO：type = helloworld_end}。これは、テンプレートが開始タグと終了タグを必要とする場合に使用するために設計されています。ボタンが押されたときにライトボックス内の画像を表示するライトボックステンプレートの例を見てみましょう。 2つのgenericoフィルタ文字列がページに配置されます。1つは開始タグ用、もう1つは終了タグ用です。そのため、次のようになります。{GENERICO：type = lightbox} {GENERICO：type = lightbox_end}
その後、ユーザはエディタ上の標準Moodle「画像挿入」アイコンを使用してそれらの間に画像を挿入することができます。 Generico AttoプラグインはTemplate endフィールドを認識していて、それが空白でなければメインフィルター文字列と一緒に自動的にページの最後のフィルター文字列を挿入します。
テンプレートAMDの旗
AMDはバージョン2.9でMoodleに導入されたJavaScriptローディングシステムです。 AMDはテンプレートのJavaScript依存関係を安全にロードし、同じページ上の他のテンプレートおよびJavaScriptの依存関係と名前およびバージョンが競合しないようにします。あなたのテンプレートがJavascriptやMoodle 2.9より古いものを含んでいない場合は、これについて心配する必要はありません。 「テンプレートスクリプト」領域（後述）でjavascriptを使用する場合は、AMDを「yes」に設定するとjQueryがスクリプトで使用可能になります。 「template require JS」または「template upload JS」領域にサードパーティのライブラリをロードする場合は、サードパーティのライブラリが推奨するものをすべて選択する必要があります。 AMDをサポートしているライブラリは、「はい」を選択しないと通常失敗します。AMDをサポートしていないライブラリは、「はい」を選択すると通常失敗します。
テンプレートJQueryフラグ
あなたがロードするサードパーティのライブラリ、あるいはあなた自身のスクリプトがJQueryに頼るとき、あなたはこれを“ yes”に設定することによってロードされることを強制することができます。しかし、あなたは本当にこれをするべきではありません。あなたが他の方法を見つけることができるならば、それはそれより良いでしょう。この理由は、jQueryにはバージョンとプラグインがあるからです。ページ上の別のテンプレートまたは他のものがjQueryプラグインをロードした場合、または異なるバージョンのjQueryが必要な場合は、jQueryを強制的にロードすると、他のものがすでにロードしたjQuery（およびプラグイン）は上書きされます。それ以外の何かは失敗します。これらの衝突は追跡するのが難しい場合があり、AMDシステムが回避するように設計されたまさにそのことです。本当にjQueryが必要で、AMDが使えない場合は、jQueryをロードするテーマを使ってみてください。 Essentialのような素敵なテーマの大部分はそうです。それに失敗したら、「HEAD」セクションのmoodleの追加のHTMLエリアに、あなたのjQuery呼び出しを追加してください。 （Moodleの追加のHTMLセクションを使用してjQueryをロードしても、jQueryを必要とする他のプラグインで問題を引き起こす危険性があることに注意してください。）
ここの開発者は、なぜGenericoとVideoEasyがPHPの$ PAGE要件マネージャを使ってload jQueryを使わないのか不思議に思うかもしれません。問題は、ページヘッダがすでにブラウザに送信された後でフィルタが頻繁に呼び出されることです。その時点で$ PAGE要件マネージャを介してjQueryを要求しようとするとエラーが発生します。
テンプレートにはJSが必要
ライトボックスを作成するためのライブラリなど、テンプレートにサードパーティのライブラリが必要な場合は、そのライブラリのURLをここに配置できます。これは、ライブラリがCDN（コンテンツ配信ネットワーク）を介して利用できるようにする場合に便利です。ライブラリ自体にテンプレートを提供する必要はないため、URL、多くのプリセット、およびGenerico / VideoEasyバンドルだけで、この方法でサードパーティのライブラリがロードされます。
ライブラリのURLを指定するときは、//で始めてください（つまりhttps：やhttp：ではありません）。
テンプレートスクリプト
テンプレートスクリプトが指定されている場合は、ページ上のテンプレートのフィルタ文字列ごとに1回呼び出されます。テンプレートを初期化するために必要なイベントハンドラやDOM操作を設定するためにこれを使用するのが一般的です。たとえば、ライトボックスで画像を開くボタンをページに配置する場合は、ボタンのhtmlを「テンプレート本体」に追加し、ここにclickイベントのイベントハンドラを添付します。この場合、通常はボタンにクラスまたはid属性を指定してから、スクリプト領域でそのクラスまたはidの要素を選択する必要があります。これは、すべてのHTMLがページにロードされた後にのみスクリプトが実行されるためです。 「テンプレートスクリプト」と「テンプレート本体」の領域で同じIDまたはクラスを使いやすくするために、特別な変数AUTOIDが用意されています。これにより、要素のIDまたはクラスとして使用できるランダムで希望に応じて一意な文字列が提供されます。これは、特定のフィルタ文字列の処理を通じて同じになります。
今この時点で私たちは本当に変数について話す必要があります。あなたのテンプレートの中であなたはあなた自身の定義の変数を使うことができます、あるいはあなたはプリセット変数を使うことができます。 AUTOIDとUSER：firstnameは、プリセット変数の2つの例です。 Generico / VideoEasyはそれらが正しいデータを含むことを保証します。あなたもあなた自身のカスタム変数を宣言することができます。二重の@@マークで囲まれたものはすべて変数として扱われます。そのため、テンプレートでは@@ AUTOID @@と@@ FAVORITECOLOR @@が変数として認識されます。そのカスタム変数Genericoがフィルタ文字列から値を取得する場合。 VideoEasyはURLパラメータからカスタム変数の値を取得します。指定されていない場合はデフォルト値が使用されるように、Generico / VideoEasyのデフォルト値を設定することも可能です。
変数の使用について注意することが重要です。変数は「テンプレート本体」および「テンプレートスクリプト」領域で使用できます。しかし、処理は少し異なります。テンプレート本体では、変数@@ FAVORITECOLOR @@が「ピンク」に置き換えられることがあります。しかし、テンプレートスクリプトでは、それは 'opts [' FAVORITECOLOR ']'に置き換えられます。
そのため、「テンプレート本体」では、任意の方法で変数を配置でき、それらは値と直接入れ替わります。しかし、「テンプレートスクリプト」では、次のようなものを書かないように注意する必要があります。var elem = $（ '＃@@ AUTOID @@'）;
後処理は次のようになるのでこれは失敗します。var elem = $（ '＃opts [' AUTOID ']'）;
代わりにこれを書くべきです：var elem = $（ '＃' + @@ AUTOID @@）;
これは動作し、次のようなものになります。var elem = $（ '＃' + opts ['AUTOID']）;
あなたが疑問に思うのは、スクリプトに対してこのようにしなければならない理由です。その理由は、スクリプトファイルがMoodleにキャッシュされるからです。変数のリテラル値の代わりにopts変数を使用すると、キャッシュはうまく機能し、ユーザーに古いコンテンツ（または他のユーザーのコンテンツ）が提供されることは決してありません。
テンプレートアップロードJS
upload js領域により、管理者は「template require js」ファイルがロードされるのと同じ方法でロードされるjavascriptファイルをアップロードできます。テンプレートのrequire jsファイルに加えて使用することができ、複数のサードパーティのライブラリファイルが必要な場合、またはJavascriptファイルをCDNや他のインターネットソースからではなくMoodleサーバからロードしたい場合に便利です。
テンプレートにCSSが必要
テンプレートにサードパーティのCSSファイルが必要な場合は、ここにライブラリのURLを配置できます。ライブラリのURLを指定するときは、//で始めてください（つまりhttps：やhttp：ではありません）。
テンプレートCSS
ここにあなたのテンプレート用のカスタムCSSを指定してください。残念ながら、カスタムcss領域でテンプレート変数を使用することはできません。カスタムCSSはかなり遅くロードされており、スタイルの最近の適用はユーザーには顕著です。これが問題になる場合は、カスタムCSS宣言をファイルに保存し、それらを「テンプレートアップロードCSS」領域にアップロードしてください。
テンプレートアップロードCSS
「Template upload js」領域と同様に、「Template upload css」領域では、テンプレート作成者がサードパーティのCSSファイルをアップロードできます。これは、ファイルがローカルサーバーからアクセスされる場合、またはCSSスタイルが“ custom 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;” template body：ユーザー37の名は@@ DATASET：名@@です 。忘れないでください。
1つのレコードが返されても複数のレコードが返されても、データセットを指定すると、@@ DATASET @@変数がテンプレートのカスタムJavaScriptで使用可能になります。これはオブジェクトの配列になり、各オブジェクトは返されたレコードの1つを表します。 PHPのオブジェクトの配列からJavaScriptのオブジェクトの配列への変換プロセスでは、配列内のオブジェクトの順序/インデックスは変更されているように見えるため、信頼することはできません。
テンプレートデータセット変数
テンプレート変数はテンプレートデータセットでは機能しません。これは、get_records_sql APIに独自のテンプレートシステムがあるためです。関数の最初のパラメータはSQL文です。 SQL文に疑問符を付けたとき、つまり '？' 、Moodleはそれを変数として認識しています。変数値は2番目のパラメータで関数に渡されます。 Moodleはそれぞれの疑問符を2番目のパラメータで渡された値の1つと交換します。 Genericはこのシステムを使用しており、[テンプレートデータセット変数]フィールドに変数値のカンマ区切りリストを指定できます。ここでGenericoテンプレート変数を指定することができます。これはこれに大きな力を与えます。現在ログインしているユーザーの情報を返すように上記の例を書き換えることでこれを実証できます。
テンプレートデータセット：“ SELECT * FROM {user} WHERE id =？;”
テンプレートデータセットvars：@@ USER：id @@
テンプレート本体：ユーザー@@ USER：id @@のファーストネームは@@ DATASET：ファーストネーム@@です。忘れないでください。
Generico @@ USER：xx @@変数を介して、現在ログインしているユーザーの情報にすでにアクセスしているので、実際にはこれは簡単です。しかし、Genericoテンプレート変数を使用してデータベースからデータセットを取得する方法を示しています。 @@ USER：xx @@、@@ COURSE：xx @@、または事前設定された変数のいずれかを使用できます。さらに、自分で定義した変数を使用することもできます。
get_records_sql呼び出しから複数のレコードが返された場合は、@@ DATASET：xx @@にアクセスしてフィールドを取得することはできません。その場合、@@ DATASET @@はオブジェクトの配列を含み、実際にはカスタムjs領域でのみ役に立ちます。各オブジェクトはデータセットからのレコードを表します。配列のインデックスは返されるレコードのIDとなる可能性が高いので、@@ DATASET @@ [0]を使用して最初のレコードを取得することはできません。
データを取得するためのajax呼び出しはありません。フィルタが解析されるとデータが取得され、その後は再度取得されません。
注意Genericoの現在の実装のバグは、Dataset変数で指定された最初の変数セットのみが実際にプラグインで利用可能になることを意味します。
ネイティブ変数
GenericoとVideo Easyは、箱から出して使用できるいくつかの変数を提供します。認識されるには、それらを二重の@マークで囲む必要があります。例：@@ AUTOID @@または@@ USER：firstname @
一般的なネイティブ変数
これらのうちの1つだけがあります。しかし、それは良いものです、あなたはそれをたくさん使うでしょう。
AUTOID =コンテナdivまたは他の場所で使用するために自動生成されたID。
これは、HTML要素に一意のIDを与えるために使用されます。これは、javascriptから見つけることができます。 AUTOIDの値は、フィルタが実行されるたびに異なりますが、テンプレートの各フィールドで同じです。
一般的なネイティブ変数
USER：xxxx =現在のユーザーのユーザーレコードの値。 xxxx =ユーザーレコードのフィールド
COURSE：xxxx現在のコースレコードの値。 xxxx =コースレコードのフィールド
WWWROOT =ムードルサイトのURL
MOODLEPAGEID =現在のページのURLに渡されるidパラメータの値（存在する場合）
URLPARAM：xxxx =現在のページに渡されたURLパラメータの値。 xxxx = URLパラメータビデオを簡単にするために、URLPARAM：ビットを使用せずに、url paramsを最上位のネイティブ変数として使用できます。
ビデオ簡単ネイティブ変数
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 =ビデオの高さ
