Hatena::ブログ(Diary)

NAT’s Programming Champloo このページをアンテナに追加 RSSフィード

2007-11-11

■[greasemonkey][ニコニコ] ニコニコ動画のサムネイルをはてなダイアリーに貼り付けるためのグリースモンキー

<2008-03-06 追記>

はてなダイアリーの機能拡張により、このグリースモンキーがなくとも、ニコニコ動画のサムネイルの貼り付けが可能になりました。

ニコニコ動画が貼り付けられる機能を拡張しました - はてなダイアリー日記

このエントリーは、サムネイルを貼り付けるのに苦労した時代もあったんだよ、という記録のため残しておきます。

<2008-03-06 追記終わり>

<2008-03-05 追記>http記法に対応しました。以下の説明文も、一部変更しました。<追記終わり>

ニコニコ動画をはてなダイアリーに貼り付けようと思っても、はてなダイアリーではURL(TEXT:PAGE URL)のみしか貼り付けることができず、サムネイル(THUMBNAIL:HTML)に対応していない。

f:id:NAT_programming:20071111182740j:image

これは、はてなダイアリーではHTMLの<iframe>に対応していないため。対応している範囲で頑張ってHTMLを書けば、サムネイルをはてなダイアリーに貼り付けることも可能だけど、それはかなり面倒。

<2008-03-05 http記法対応 追記>

また、http記法で動画を貼り付けることもできますが、ページのURL(TEXT:URL)をhttp記法にするには、URLの後ろに「:movie」という文字を追加し、半角のカッコ（ [ ] ）で囲んで記述する必要があるので、ちょっと面倒。

<2008-03-05 http記法対応 追記終わり>

というわけで、ニコニコ動画の右上にあるブログ貼り付け用のコードを、はてなダイアリーに対応したコードに変換するグリースモンキー「HatenaNicoNicoThumbnail.user.js」を作ってみました。

使い方

まずは使い方の説明。

はてなダイアリーのデザインでスタイルシートに追記

※サムネイルを貼り付けない場合は、この手順は不要です。何もせずに、スクリプトのインストールを行って下さい。

スタイルシートを設定しないとサムネイルの細かいレイアウトを調整できないので、まず最初にはてなダイアリー側でスタイルシートの設定をします。そのため、はてなダイアリーのデザインを詳細デザイン設定にする必要がありますのでご注意を。

はてなダイアリーの管理ツールトップから詳細デザイン設定を表示させ、スタイルシートに以下を追記します。

/* ニコニコ動画サムネイル用 */
.hatena-body .day .nico_thumb {
	background:#F7F7F7 none repeat scroll 0%;
	border:1px solid #CCCCCC;
	overflow:hidden;
	width: 312px;
	font-size: 100%;
	padding: 3px;
	margin: 0.5em;
}
.hatena-body .day .nico_thumb img {
	border:0px none;
}
.hatena-body .day .nico_thumb p {
	text-indent: 0px;
        padding: 0px;
        margin: 3px;
}
.hatena-body .day .nico_thumb table {
	margin: 0px;
}
.hatena-body .day .nico_thumb table .margin4 {
        margin: 4px 0px; 
}
.hatena-body .day .nico_thumb table tr td {
	border: medium none;
        padding: 3px; 
}
.hatena-body .day .nico_thumb .txt12 {
	font-size:12px;
	line-height:16px;
}
.hatena-body .day .nico_thumb .txt10 {
	font-size:10px;
	line-height:14px;
}
a.video {
	font-weight:bold;
}
a.video:link {
	color:#557799;
	text-decoration:underline;
}
a.video:visited {
	color:#113355;
	text-decoration:underline;
}
a.video:hover, a.video:active {
	background:#335577 none repeat scroll 0%;
	color:#FFFFFF;
	text-decoration:none;
}
スクリプトのインストール

以下のリンクをクリックして、スクリプトをグリースモンキーにインストールします。

HatenaNicoNicoThumbnail.user.js

ニコニコ動画のページを表示

スクリプトのインストールに成功すれば、ページの右上にあるブログ貼り付け用HTMLの表示部分に、はてなダイアリーのアイコンも表示されます。

f:id:NAT_programming:20071111190247j:image

ブログ貼り付け用コードをはてなダイアリーに貼り付ける

はてなダイアリーのアイコンが表示されていれば、貼り付け用コードの内容もはてなダイアリー用に変換されているので、それをそのままはてなダイアリーに貼り付けます。

「HTML:THUMBNAIL」の下にあるコードを貼り付けた場合は、サムネイルが貼り付けられます。

※はてなダイアリーのデザインでスタイルシートに追記が必要です。

ニコニコ動画
涙そうそう　ロボが歌いだした（沖縄感）

4:19

07/08/26 03:52 投稿

涙そうそう　ロボが歌いだした（沖縄感）
sm717903の「涙そうそう　ギターソロ弾いてみた」を聞いていたらロボットが歌いだしました。仕方が無い...

サムネイルのレイアウトや色などがおかしい場合は、はてなダイアリーのデザインで設定しているスタイルシートが、サムネイルのレイアウトに影響している可能性があります。追記したスタイルシートをうまく調整して修正して下さい。

「TEXT:PAGE URL」の下にあるコードを貼り付けた場合は、動画が貼り付けられます。

D


解説とか

オリジナルのサムネイルとの違い

はてなダイアリー対応のコードに変換する前のオリジナルのサムネイル表示とは、以下のような違いがあります。

動作の概要

内部的には、大体こんな動きをします。

  1. はてなダイアリーのアイコンを表示する
  2. TEXT:URLのテキストフィールドの値を、http記法に変換
  3. サムネイル表示のHTMLを以下のURLから取得
    • http://www.nicovideo.jp/thumb/<動画ID>
  4. 取得したサムネイル表示のHTMLを、はてなダイアリー用に変換
  5. 変換結果を、HTML:THUMBNAILのテキストフィールドに出力

動画を表示している時点でのサムネイル表示をもとに貼り付け用HTMLを作っているため、再生数やコメント数、コメントの内容が変化するように作れません。そのため、再生数やコメント数、コメントは削除しています。そのかわりに、はてなブックマーク数を表示させてます。

苦労した点とか

技術的にはDHTML(DOM)やXMLHttpRequestを使っているくらいで、XMLHttpRequestは初めて使いましたが、その辺はあまり苦労してないです。

スタイルシートを設定して、オリジナルの表示と同じようなレイアウトや色にするのに一番苦労しました。はてなダイアリー自体の持つスタイルシートの設定と色々かち合って、なかなか思ったようなレイアウトになってくれなかった。まぁ、私がスタイルシートをよく理解していないというのもあるかもしれませんが。

現在分かっている不具合／変更履歴

Permalink | コメント(0) | トラックバック(0) | 19:35

コメントを書く

スパム対策のためのダミーです。もし見えても何も入力しないでください
 ゲスト

画像認証

トラックバック - http://d.hatena.ne.jp/NAT_programming/20071111/1194777320
idトラックバック
リンク元
プロフィール

NAT_programming

id:NATのプログラマーもしくは技術者としての別アカウント

カレンダー
<< 2007/11 >>
日 月 火 水 木 金 土
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
最新タイトル
最近のトラックバック
人気エントリー一覧
カテゴリー
ページビュー