#はじめに
カード型リンク
アメバには、元々、カード型リンクを埋め込む機能がありますが、これは、サムネイル表示にページのメタ情報を用いています。今回、ここで説明する内容は、埋め込む機能の一部は利用しますが、サムネイルの表示は専用のプラグインで行う方法についてです。
今回の埋め込み方法
この処理が必要になるのは、自作のyoutubeプレーヤーサイトへのリンクを埋め込むときに、再生リストの先頭のサムネイルを埋め込みたいためです。
この埋め込みリンクでは、youtubeプレーヤーのサイトurlとリストのタイトル名、それとこのリストの先頭のサムネイルを表示します。
そのメリット
これにより、再生リスト毎にそれぞれのリストのサムネイルを表示することができ、リストの区別がしやすくなります。
#サンプル画面
アメバブログ画面
わかりやすくするため、埋め込みリンクのサンプル画面を以下に表示します。
このように再生リスト毎にそれぞれのサムネイルを表示することができます。
リンクをクリック
ここのカード型リンクをクリックすると、自作のyoutubeプレーヤーサイトのページが開き、そこで、リストの再生がスタートします。その時、このサムネイルの動画が再生されます。
アメバブログへのリンク
埋め込みリンクのURL
酒は大関/ワンカップ大関
このリンクは、サンプル画面の先頭の埋め込みリンクです。このリンクをクリックすると「酒は大関/ワンカップ大関」の再生リストが表示されて、再生がスタートします。
#プラグインのインストール
プラグインのインストール
プラグインは、上のリンクをクリックするとインストールすることができます。
このプラグインは、Chromeウェブストアで公開されています。
プラグインの説明
このプラグインは、「Agent_Youtubeプラグインv14.0」でChromeウェブストアで公開されています。
このプラグインのおもな機能は以下の通りです。
(1)サムネイルの埋め込み
(2)Agent i呼び出し機能
(3)アメバyoutube検索機能の呼び出し
今回は(1)のサムネイルの埋め込み機能についての説明です。
サムネイルの埋め込み
実行環境
(1)youtubeプレーヤーサイト
サムネイルの埋め込みが可能なサイトは以下の2サイトあります。
・https://favorite.tecoyan.net/tiny_1/TinyPlayer_test_1.php?dnm=森進一
・https://favorite.tecoyan.net/updateGenre/indexGenre_like.php?dnm=青江三奈
この2つのURLを埋め込み時に指定します。dnm=...は、DBサーバーに保存してあるリストの名前です。
(2)アメバの書き出しページ
このページで、リンクの埋め込みを行います。操作は、URLをペーストするだけです。
#実装のキーポイント
リンクデータのコピー
リンクデータは、youtubeプレーヤーのアドレスバーのURLです。このURLをコピーします。ポイントは、URLの中に引数があることです。この引数で、リスト名を指定します。引数の形式は、dnm=.....です。
ペースト処理
コピーしたリンクデータは、アメバの書き出しページで、ペーストします。このペースト処理で、サムネイルが表示されます。
#使用感
このサムネイルを表示することで、リンクの意味が一目瞭然になることです。サムネイルは、再生リストの先頭のサムネイルです。また、リンクには、サムネイルのタイトルも表示されますので、どのようなリストなのかも想定できます。
好みの動画のサムネイルを表示したリンク
アメバのブログにこのサムネイルを表示したリンクを複数埋め込むことで、ブログの一つの特長を表すことができます。関連する再生リストを並べて、一挙に動画を視聴することができますので、個々に動画を選択する手間がなくなります。
#あとがき
ちなみに、複数のリンクを埋め込んだテストリンクをつくりましたので、その使用感を試してみてください。