ニコニコ動画のサムネイルをはてなダイアリーに貼り付けるためのグリースモンキー
<2008-03-06 追記>
はてなダイアリーの機能拡張により、このグリースモンキーがなくとも、ニコニコ動画のサムネイルの貼り付けが可能になりました。
ニコニコ動画が貼り付けられる機能を拡張しました - はてなダイアリー日記
このエントリーは、サムネイルを貼り付けるのに苦労した時代もあったんだよ、という記録のため残しておきます。<2008-03-06 追記終わり><2008-03-05 追記>http記法に対応しました。以下の説明文も、一部変更しました。<追記終わり>
ニコニコ動画をはてなダイアリーに貼り付けようと思っても、はてなダイアリーではURL(TEXT:PAGE URL)のみしか貼り付けることができず、サムネイル(THUMBNAIL:HTML)に対応していない。
これは、はてなダイアリーでは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:THUMBNAIL」の下にあるコードを貼り付けた場合は、サムネイルが貼り付けられます。
※はてなダイアリーのデザインでスタイルシートに追記が必要です。
07/08/26 03:52 投稿 涙そうそう ロボが歌いだした(沖縄感) |
サムネイルのレイアウトや色などがおかしい場合は、はてなダイアリーのデザインで設定しているスタイルシートが、サムネイルのレイアウトに影響している可能性があります。追記したスタイルシートをうまく調整して修正して下さい。
「TEXT:PAGE URL」の下にあるコードを貼り付けた場合は、動画が貼り付けられます。
解説とか
オリジナルのサムネイルとの違い
はてなダイアリー対応のコードに変換する前のオリジナルのサムネイル表示とは、以下のような違いがあります。
- 再生数やコメント数が表示されない
- コメントが表示されない
- はてなブックマーク数を表示
動作の概要
内部的には、大体こんな動きをします。
- はてなダイアリーのアイコンを表示する
- TEXT:URLのテキストフィールドの値を、http記法に変換
- サムネイル表示のHTMLを以下のURLから取得
- http://www.nicovideo.jp/thumb/<動画ID>
- 取得したサムネイル表示のHTMLを、はてなダイアリー用に変換
- 変換結果を、HTML:THUMBNAILのテキストフィールドに出力
動画を表示している時点でのサムネイル表示をもとに貼り付け用HTMLを作っているため、再生数やコメント数、コメントの内容が変化するように作れません。そのため、再生数やコメント数、コメントは削除しています。そのかわりに、はてなブックマーク数を表示させてます。
苦労した点とか
技術的にはDHTML(DOM)やXMLHttpRequestを使っているくらいで、XMLHttpRequestは初めて使いましたが、その辺はあまり苦労してないです。
スタイルシートを設定して、オリジナルの表示と同じようなレイアウトや色にするのに一番苦労しました。はてなダイアリー自体の持つスタイルシートの設定と色々かち合って、なかなか思ったようなレイアウトになってくれなかった。まぁ、私がスタイルシートをよく理解していないというのもあるかもしれませんが。
現在分かっている不具合/変更履歴
Sleipnir + SeaHorseで動かない2007-11-17 対応しましたはてなダイアリーのアイコンは表示するが、サムネイル表示のHTML取得に失敗XMLHttpRequestのクロスブラウザ対応をしていないのが原因- 環境によっては動かない場合があるらしい。私の環境(Windows Vista + Sleipnir + UserAction Extension + SeaHorse)では成功しています
多分 IE + Trixieでも動かない2007-11-17 動かないのを確認し、対応しました確認してないが、Sleipnirと同じくクロスブラウザの問題で動かない可能性が高い
ニコニコ動画のページをログイン前に表示するとJavaScriptエラーが起こる場合がある2007-11-17 対応しましたニコニコ動画のアイコン画像が表示されなくなった。2007-12-16 対応しました。- 対応したつもりが、修正スクリプトをアップし忘れていました。ありがとうございます→ニコニコのサムネイル表示 - たどたどしく貪る日々
- 2007-12-16 レイアウト調整のために、スクリプトとスタイルシートを修正
- スクリプトの修正
- 「class="margin4"」を出力するようにしました
- スタイルシートの修正
- エントリ「.hatena-body .day .nico_thumb」のwidthプロパティを「width: 312px;」に変更
- エントリ「.hatena-body .day .nico_thumb table .margin4」を追加
- エントリ「.hatena-body .day .nico_thumb table tr td」のpaddingプロパティを「padding: 3px;」に変更
- スクリプトの修正
- 2008-03-05 http記法に対応しました
- ニコニコ動画のアイコンの位置が微妙にずれる問題が発生していたので、それも修正しました
- サムネイルのHTMLが変わったため、class="margin4"のdivタグが正しく出力されていなかったのが原因でした
- ニコニコ動画のアイコンの位置が微妙にずれる問題が発生していたので、それも修正しました