ナムジの深宇宙探訪

前回、ニコニコ動画のマイリストをサムネイル付でサイドバーに並べた私は、次なる目標をYouTubeのお気に入りをサムネイル付で表示することに定めました。

今まで、YouTubeの動画は、見っぱなしでブックマークなどの記録を取っていませんでした。ちゃんとリストにしてみることができるならば、ワンクリックでお気に入りに登録しておくと便利そうです。YouTubeのお気に入りは、コメント機能はありませんけれども。

で、お気に入りをみると、RSSがない！ ニコニコと同じ手が使えません。

いろいろなウェブサイトをみていると、だいたいYouTubeは、個別の動画を直接貼り付けるのが主流で、サムネイル形式のリンクをみたことがありません。私としては、いちいち直接<embed>していたら重くてかないません。やっぱり、目指すはサムネイルです。

YouTubeのサイト内ではサムネイルが表示されているのだから、あのサムネイルを使わせてくれてもいいはずです。どうやらAPIが提供されていることがわかりました。それなら、WordPressのPluginを探せば、同じことを考えた人が、きっといるはずです。

いらっしゃいました。
» SubZane YouTube Plugin « WordPress Plugins

あとは、HTMLとCSSを整えて一丁上がりです。

Tumblrもそうなのですが、APIで情報を取ってくるPluginは、表示に時間がかかるようになります。+0.3秒とか。WP Super Cache でPreloadできるページなら、快適に表示できます。

縦横比について

最近のYouTubeは、ワイド画面16:9のサムネイルになっています。昔は、標準4:3の縦横比でした。YouTubeは、すべてのサムネイルを作り直すなんていう面倒なことはしていません。CSSでサムネイル画像の上と下をちょん切っています。ワイド画面にすると、上と下に黒帯が表示されないので、きれいですね。

ニコニコ動画と比較してみてください。ニコニコ動画のサムネイルは4:3なので、けっこう黒帯が目立ちます。気がつくと気になってきます。

それと、なぜかニコニコ動画のサムネイルは、130×100 pxで作られています。なぜ、16:9でもなく、4:3でもないのか、謎です。さらに、ニコニコは、普通のワイド動画をワイドなサムネイルにすると、上下に1pxの黒帯が残ります。正直、ニコニコの縦横比がどうなっているのか、よくわかりません。

まとめ

ニコニコ動画とYouTubeを押さえたことにより、ネット上の動画の情報をビジュアルに楽しく記録できるようになりました。ライフログ（笑）の2つ目の道具がそろいました。

次は、ネット動画以外の情報についてです。いよいよ、ライフログ（笑）計画の全貌を公開します。

追記

表示できなくなってしまいました。他人のYouTubeアカウントを指定すると、一部の動画が表示されます。YouTubeのAPIが悪い気がします。私では解決不能なので、リストを表示できないときは、リンク付タイトルだけを表示してます。 2011-03

マイリストの使い方

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

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

例えば、次の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出力がありません。さて、どうする？
ご期待ください。

はい、ブログのデザインを新しくしました。パチパチパチ。

予想以上にかっこよくできて、ご満悦です。自己満足でございます。

元にしたデザイン

WordPressのテーマを探しておりましたら、見つけました。いけてる感じの、ピッピッとくるテーマを。
» Byty the Free Child Theme – Built on Thematic

このBytyの見た目のデザインを参考にさせていただきました。見た目だけです。インスピレーションをえたというやつです。あるいは、リスペクトとかいいます。コードと画像は、自作です。

作成手順は、新しく作ったガワを、以前のコードに移植してます。

どうも潔癖すぎて気に入らないところを放っておくことができません。結局全部自分で手を入れることになります。えらい時間がかかります。結局、これも趣味ですな。

昔のデザイン

昔のデザイン

記念に昔のデザインも貼っておきます。Google先生から取り寄せました。

3年前は、これでも精一杯作ったんです。ｳﾙｳﾙ

ナムジ画像

→ 以前の自画像は、EVE Onlineのものでしたが、あまりにも洋ゲー風味であれなので変更します。

このゲームから拝借しました。
» Shattered Horizon

Shattered Horizonは、バリバリSFなFPSのゲームで、無重力な3D空間を縦横無尽に飛び回れるのが魅力です。買って少し遊んだのですが、過疎気味で、ブログに書くことなく時が過ぎてしまいました。

これからのライフログ（笑）計画

さて、ろくにブログを更新していないのに、デザインを新しくして何をするのでしょう?

一応、考えています。

ライフログ（笑）計画です。別名、ライフストリーム（笑）計画ともいいます。

読んだり、見たりしたものを、もらさず何でも記録していきます。どこに記録するのかは、サイドバーにある以下の3つです。

• ニコニコ動画のマイリスト
• YouTubeのお気に入り
• Tumblr

サイドバーは、ずばり｢楽しさの可視化｣を目指しました。具体的には、サムネイル画像をペタペタと貼ることです。

3つの記録の中から、気が向いたものをブログに書く、という二段階の構成にします。

ブログは、自分向けのチラシの裏であると同時に、人に見せるためのものでもあります。人に見せるためというのが、気が重くなって、筆無精になる原因です。これを、もう少し「自分のため」「自分の記録として」という方向にシフトさせます。

とりあえず、3つのナマの記録を眺めていただきますと、ナムジというのは、いろいろと偏った趣味志向を持った人格であることがわかると思います。その辺りをはばかることなく開陳するのが、新しいブログデザインの目的です。

よくブログを書く人の情報整理方法として、「Twitter→ブログ」というのがあるらしいです。ネタをTwitterにメモしておいて、まとまったらブログに書くという手順を踏みます。

ここでネタというのは、以下の2種類がありますが、両方とも一緒にこの流れで扱えます。

• 思いついたアイディア
• ネットで見つけた情報

このようにTwitterとブログは相性がいいので、Twitter初期に、アルファブロガーがこぞってTwitterに飛びつきました。

余談ですが、ブログに対するモチベーションが低い人や、書く力が弱い人は、Twitterに書くことで満足してしまい、ブログを書かなくなってしまいました。

この「Twitter → ブログ」な役割分担については、佐々木俊尚さんが解説していた気がします。他にも書いてた人がいると思います。よく知られた考え方です。

ところで、これとまったく同じ使い方が「Tumblr→ブログ」でもできます。あんまり見かけないのは、気のせいでしょうか。

ネタ帳としてもTumblrを使ってみようかと考えているところです。 いくつものWEBツールを使いまくるよりも、一つのツールを使い倒す方がよさそうですし。ちなみに、ナムジのタンブラーにリンクや文章を書いても、このブログのサイドバーにある「最近のタンブラー」には、表示されません。画像だけなんです。

ちょっと前の話になりますが、2ch VIPの小説『魔王「この我のものとなれ、勇者よ」勇者「断る！」』、いわゆる「まおゆう」を読み終えました。長かったです。

まだiPadを手に入れる前で、iPhoneで読んでました。いろいろなWebサイトで読めますが、私としては、以下のページが読みやすかったです。細かくページを分けてくれているので、どこまで読んだかわかりやすい。
» 魔王「この我のものとなれ、勇者よ」勇者「断る！」@ wiki

中世ファンタジー世界に経済学を持ち込んだところが面白かった。「狼と香辛料」と同じ系統に属する小説ですね。

また、魔王と勇者ということで、ドラゴンクエストをプレイしたことがある人が、より楽しめるように考えて書かれています。

• ストーリーがドラクエのクライマックスから始まります。つかみはオッケー。
• ドラクエではしょられている部分を丹念に書き込んでいます。
  • 勇者は、なぜ、ずば抜けて強いのか？
  • 町の人達の暮らし、総じて経済はどうなっているのか？
  • なぜ、人間と魔族は戦っているのか？

まおゆうの動画

Webで読んでも充分面白い「まおゆう」ですが、なんと、この長編小説を原作にして、静止画アニメ（音楽付）を作っている人がいます。よくやるなと思います。絵が動かなくても、音楽があると、充分にアニメのように楽しめます。けど、何話まで作ったら終わるのでしょうか。心配です。

完成まで、まったりと楽しむことにしましょう。以下をGoogle Readerに登録っと。
» 魔王と勇者のアレ‐ニコニコ動画(9)