WordPressにニコニコ動画のマイリストを貼る方法

マイリストの使い方

ニコニコ動画にマイリストという機能があります。まず、これの使い方についてうんちくをたれます。

「ジャンル別にお気に入りの動画を収集するために使う」
これは破綻します。私がやっていました。

例えば、次の2つのマイリストを作っていたとします。
・アイマス
・ボーカロイド
最近では、アイマスキャラがボーカロイド曲を歌っています。どちらに入れていいか迷います。

そもそも、カテゴリーによる分類に限界があるので、WEB2.0でタグクラウドという機能が登場したのでした。

では、マイリストをどう使い分けるのがいいでしょう?

私の答えは、以下の分類です。

  • 公開自作動画
  • 公開お気に入りリスト
  • 非公開お気に入りリスト

私の場合は、まだ動画を作ったことがないので、お気に入りリストだけです。つまり、お気に入りリストを、公開と非公開に分けるといいよと提唱したいのです。

非公開

非公開には、もちろん公開できないような趣味の動画を入れておきます。マイリストの名前は、「R-18」です。

公開

公開リストには、「みんなー、この動画、おもしろいよー」という動画を入れてます。時々見直すのも楽しいですよ。

公開してる人は少ない

ただ、この公開マイリストにコメントを残している人は非常に少ないですね。だいたい平均してマイリスト全体の3%程度しかありません。各動画の画面で確認できます。

運営がブログパーツを作ればいいのにと思います。Twitterみたいに。

マイリストをサイドバーへ

この埋もれた機能である公開マイリストを、ブログのサイドバーに貼り付けたら楽しいよ、というご提案です。

手順は、以下のとおり。

  1. 公開マイリストはRSSを出力している。
  2. RSSをWordPressのサイドバーに表示する。
  3. RSSの中身のHTMLをCSSで整える。

1.RSS出力

あります。OK。

2.WordPressにRSSを表示する方法

ウィジェットにデフォルトであるRSSでは、中身が表示されないから駄目でした。

以前は、プラグインを使って実現していました。
» FeedList « WordPress Plugins

最近、ブラグインを使わなくても、WordPress本体がRSSを表示する機能を持っていることを発見しました。
» WebTecNote – [WP]wordpressでRSSを取得して表示

そこで、こんなコードをテンプレートに貼り付けています。

<?php include_once(ABSPATH.WPINC.’/rss.php’); $rss=fetch_rss(‘http://www.nicovideo.jp/mylist/7073501?rss=2.0’);
if($rss):
$items=array_slice($rss->items,0,5); ?>
<li>
<h2><a href=”http://www.nicovideo.jp/mylist/7073501″>ニコニコ動画のマイリスト</a></h2>
<ul>
<?php foreach ( $items as $item ) : ?>
<li>
<span><a href='<?php echo $item[‘link’]; ?>’><?php echo $item[‘title’]; ?></a></span>
<?php echo $item[‘description’]; ?>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endif; ?>

3.CSSで整形

RSSから取り込んだコードをみると、ごちゃごちゃしていてゲンナリします。めげずに、CSSを書いていきます。結果は、望むカタチに整形できました。

#sidebar li.nico li {
position: relative;
font-size: 90%;
}
#sidebar li.nico span.rssLinkListItemTitle {
position: relative; /*z-indexのため*/
z-index: 10;
padding: 0;
}
#sidebar li.nico span.rssLinkListItemTitle a {
position: relative; /*z-indexのため*/
z-index: 20;
display: block;
height: 68px; /*サムネイルの高さ*/
margin:  0;
padding: 0 0 0 122px;
overflow: hidden; /*タイトルが長いときは切り取る*/
}
#sidebar p.nico-memo {
margin: 0 0 -2px;
padding: 1px 0 0;
word-wrap: break-word;
}
#sidebar p.nico-thumbnail {
position: absolute;
top: 8px; /*liをpadding-top:8pxしているので。普通は0です*/
left: 0;
z-index: 1;
width: 120px;
height: 68px;
padding: 0;
overflow: hidden;
}
#sidebar p.nico-thumbnail img {
position: absolute;
top: -13px; /*サムネイルの上の隠し幅*/
left: 0;
z-index: 2;
width: 120px;
height: 94px; /*元の縦横比がおかしいから*/
}
#sidebar p.nico-description ,
#sidebar p.nico-info {
display: none; /*余計なHTMLタグは表示しない*/
}

ここでの頑張ったで賞は、3つあります。

  • HTMLの順序を無視する。サムネイルをabsoluteで左上の位置へ。
  • z-indexを使って、サムネイルにかぶせるようにリンクを配置する。ただし、IEではバグにより無効になる。
  • YouTubeのように外枠でサムネイルの上下を隠してワイド画面風にする。

まとめ

このRSS表示機能は、キャッシュが効くので、あまり描画が遅くなりません。すばらしい。全ページに表示することにします。

動画に描き込んだコメントは、水のように流れてしまいます。タグの登録は、タグ合戦ですぐに消されてしまいます。けれども、マイリストのコメントは、永久に残ります

自分のコメントは大切にしましょう。たとえ、それがどんな脊髄反射であったとしても。ズコッ

これで、また一歩、自己満足度が向上しました。

次回

こうなると、YouTubeのお気に入りもサムネイル表示させたくなりますよね。でも、YouTubeのお気に入りには、RSS出力がありません。さて、どうする?
ご期待ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この記事を書いた人

仕事のかたわら、ほそぼそとネットゲームに興じるおっさん。最近は、Hearthstone:ハースストーンが面白い。プロフィール  Twitter