公式iframeを使わずにニコニコ動画のサムネイルを貼る方法色々

動画紹介の部分はニコ動のを使ったほうがええかしらん。一日考えよう。これ沢山張ると重くなるんだよなー。あるいはniconail.infoを使うかだなー
〜中略〜
↓というように画像だけニコ動から引っ張ってくる方法もあるのだがこれはめんどくさいので日次更新には向かない感じだ。

テスト - ニコニコの杜

ふむふむ、最近ちょっとはマシになった気がするけど、確かにニコ動公式のサムネは大量に貼ってあるとかなり重くなる印象があるので使うのがためらわれます。
ではNiconailさんを使わせてもらうかニコ動の画像だけ引っぱってくる方法を、動画横のiframeタグをコピペするのと変わらない手間にしてしまえば解決ですね!

実はその方法については既に3度ほどまとめているのですが、新しい方法見つけたり個人的に使い方がちょこちょこ変わってたりするので、改めてまとめておきます。

マウスジェスチャで一発コピー(NEW!/2010.03.22)

こちらの記事で紹介されている方法。現状最も楽な方法かな。Google Chromeの拡張を使いますが、Firefox版もあります。

var txt = '<a href="' + location.href + '" target="_blank"><img src="http://niconail.info/' + location.href.substring(30) + '" alt="' + document.title + '"></a>';connection.postMessage({action:'copy','message':txt});

Chrome Gesturesという拡張に上記のスクリプトを登録します。
例えば、上のスクショの通りにすれば、貼りたい動画のページで右クリックしながらマウスを下に動かすだけでサムネのタグがクリップボードにコピーされる。あとはそれをブログにペーストするだけで、
アイドルマスター 春香さんの告白‐ニコニコ動画(9)
こうなります。
このスクリプトはたぶん他の拡張にも応用が利きそう。

Firefox版

こっちはfirefoxの拡張「FireGestures」版です。ちょっと登録方法は違いますが、機能は一緒。Chromeじゃなくて火狐使いの方はこっち使いましょう。

拡張のオプションで「スクリプトを追加」を選び、上記リンク先のコードをコピペして登録するだけです。

ブックマークレット

これは既に上に貼ったまとめで紹介してますが、今は画像取ってくるだけじゃなくてタイトルとブクマアイコンも一緒に取ってくるように改良してます。
まずニコネイル用。「Niconail作成」のリンクをお気に入りに突っ込んで下さい。

ニコネイル用

本来は↑にガジェットが表示されているはずですが、ブラウザの環境やセキュリティソフトの関係でグーグルガジェットがちゃんと見えない人は適当なお気に入り作って以下のコードをURL欄に貼り付けましょう。

javascript: (function(){ var test=prompt('以下のタグを貼るべし','<a href="'+document.URL+'" target="_blank"><img src="http://niconail.info/'+document.URL.substring(30)+'" alt="'+document.title+'" border="0"></a><a href="'+document.URL+'">'+document.title+'</a><a href="http://b.hatena.ne.jp/entry/'+document.URL+'"><img src="http://b.hatena.ne.jp/entry/image/'+document.URL+'" border="0"></a>'); })();

ついでにはてな記法版も。タイトルとブクマタグの部分をはてな記法に変えただけです。

javascript: (function(){ var test=prompt('以下のタグを貼るべし','<a href="'+document.URL+'" target="_blank"><img src="http://niconail.info/'+document.URL.substring(30)+'" alt="'+document.title+'" border="0"></a>['+document.URL+':title]['+document.URL+':bookmark]'); })();

紹介したい動画のページで実行すると、こんなふうに真ん中にタグが出てきます。

↓タグの内容。

<a href="http://www.nicovideo.jp/watch/sm4250498" target="_blank"><img src="http://niconail.info/sm4250498" alt="ぴょっぴょっぴょー‐ニコニコ動画(夏)" border="0"></a><a href="http://www.nicovideo.jp/watch/sm4250498">ぴょっぴょっぴょー‐ニコニコ動画(夏)</a><a href="http://b.hatena.ne.jp/entry/http://www.nicovideo.jp/watch/sm4250498"><img src="http://b.hatena.ne.jp/entry/image/http://www.nicovideo.jp/watch/sm4250498" border="0"></a>

で、これをそのまんまブログの本文にコピペすれば、
ぴょっぴょっぴょー‐ニコニコ動画(夏)ぴょっぴょっぴょー‐ニコニコ動画(夏)
こうなる、と。

<a href="http://www.nicovideo.jp/watch/sm4250498" target="_blank"><img src="http://niconail.info/sm4250498" alt="ぴょっぴょっぴょー‐ニコニコ動画(夏)" border="0"></a>[http://www.nicovideo.jp/watch/sm4250498:title][http://www.nicovideo.jp/watch/sm4250498:bookmark]

はてな記法版だとこんな感じの文字列になりますが、貼り付けたら結果は一緒。

ぴょっぴょっぴょー‐ニコニコ動画(夏)
ぴょっぴょっぴょー
ぴよよP作。ぴよちゃんなごむー。

ついでに改行して「ニコニコ動画(夏)」を削って見やすくするとこうなる。
ブクマアイコンとかタイトルとかいらねえよ! サムネだけよこせ! って人はブックマークレットのコードから該当部分を削って、

javascript: (function(){ var test=prompt('以下のタグを貼るべし','<a href="'+document.URL+'" target="_blank"><img src="http://niconail.info/'+document.URL.substring(30)+'" alt="'+document.title+'" border="0"></a>'); })();

こうすりゃNiconailの部分だけとってきてくれます。

サムネ画像用

サムネ画像のみをニコ動から引っぱってくるブックマークレットはこっち。

javascript: (function(){ var test=prompt('以下のタグを貼るべし','<a href="'+document.URL+'" target="_blank"><img src="http://tn-skr.smilevideo.jp/smile?i='+document.URL.substring(32)+'" alt="'+document.title+'"></a>■<a href="'+document.URL+'">'+document.title+'</a><a href="http://b.hatena.ne.jp/entry/'+document.URL+'"><img src="http://b.hatena.ne.jp/entry/image/'+document.URL+'" border="0"></a>'); })();

javascript: (function(){ var test=prompt('以下のタグを貼るべし','<a href="'+document.URL+'" target="_blank"><img src="http://tn-skr.smilevideo.jp/smile?i='+document.URL.substring(32)+'" alt="'+document.title+'"></a>■['+document.URL+':title]['+document.URL+':bookmark]'); })();

こっちで生成されるタグはこんな感じ。

<a href="http://www.nicovideo.jp/watch/sm3426189" target="_blank"><img src="http://tn-skr.smilevideo.jp/smile?i=3426189" alt="アイドルマスター Will/千早 春香 雪歩‐ニコニコ動画(夏)"></a>■<a href="http://www.nicovideo.jp/watch/sm3426189">アイドルマスター Will/千早 春香 雪歩‐ニコニコ動画(夏)</a><a href="http://b.hatena.ne.jp/entry/http://www.nicovideo.jp/watch/sm3426189"><img src="http://b.hatena.ne.jp/entry/image/http://www.nicovideo.jp/watch/sm3426189" border="0"></a>
<a href="http://www.nicovideo.jp/watch/sm3426189" target="_blank"><img src="http://tn-skr.smilevideo.jp/smile?i=3426189" alt="アイドルマスター Will/千早 春香 雪歩‐ニコニコ動画(夏)"></a>■[http://www.nicovideo.jp/watch/sm3426189:title][http://www.nicovideo.jp/watch/sm3426189:bookmark]

アイドルマスター Will/千早 春香 雪歩‐ニコニコ動画(夏)アイドルマスター Will/千早 春香 雪歩 - ニコニコ動画
とよもと・はさきP。id:raydiveさんとこ経由で見たけど、確かに2:30からの逆再生長回しは新鮮だった。

で、貼るとこうなると。僕は最近こっちの形式多用してますね。
サムネ画像のみのシンプルさを取るか、再生・マイリス・コメント数表示アリの親切さを取るかはお好みで決めましょう。僕はわりと気分で変えてるw


他の方法は全てfirefox必須だけど、ブックマークレットはブラウザ環境を問わず使えるのが魅力ですね。

keyconfigを使う(firefox限定)

こっちはfirefoxのみですが、キーボードショートカットをカスタマイズするアドオンを利用する方法もあります。ctrl+nにニコネイル作成を割り当てたり、ctrl+tにサムネ作成を割り当てたり。コピーする手間がないぶん慣れるとブックマークレット使うより早い。

var txt = '<a href="' + window._content.document.location.href + '" target="_blank"><img src="http://niconail.info/' + window._content.document.location.href.substring(30) + '" alt="' + window._content.document.title + '"></a>'
const CLIPBOARD = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
CLIPBOARD.copyString(txt);

音無小鳥さんに自重して「Ievan Polkka」を(ry【アイドルマスター】‐ニコニコ動画(夏)

var txt = '<a href="' + window._content.document.location.href + '" target="_blank"><img src="http://tn-skr.smilevideo.jp/smile?i=' + window._content.document.location.href.substring(32) + '" alt="' + window._content.document.title + '" border="0"></a>■[' + window._content.document.location.href + ':title] [' + window._content.document.location.href + ':bookmark]'
const CLIPBOARD = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
CLIPBOARD.copyString(txt);

音無小鳥さんに自重して「Ievan Polkka」を(ry【アイドルマスター】‐ニコニコ動画(夏)音無小鳥さんに自重して「Ievan Polkka」を(ry【アイドルマスター】 - ニコニコ動画
アドオンをインストールすると追加されるツールメニューの「キーボードショートカットのカスタマイズ」に↑のコードを追加して動画ページでショートカットを実行すると、それぞれのタグがクリップボードにコピーされます。とっても楽ちん。


以下の方法は現状動きません。

ニコニコ動画紹介サイト記述支援GMスクリプトを使う(firefox限定)

マイリストやタグ検索、ランキングなどの動画一覧ページでマーキングした動画を、指定した形式でまとめてブログに貼ることができるスクリプト
長々と書いてきましたけど、これまで紹介した方法は最初に貼った過去記事の焼き直しです。今回一番紹介したかったのはこれだったり。ちょっと使い方に癖があるけど、慣れるとテラ便利。
例えばですね、ニコニコ動画の「最近見た動画」のページでキーボードの「e」キーを2回押してNicoClipモードに切り替えて、貼りたい動画をマーキングするとこんな感じになります。

この状態で既にマーキングした動画が全て指定された形式でクリップボードにコピーされてるんですよ。
なので後はブログ本文に貼り付ければ……
アイドルマスター Do-Dai メカ千早プロトタイプ駆動音山盛りVer.アイドルマスター Do-Dai メカ千早プロトタイプ駆動音山盛りVer.
アイドルマスター 忙しい人のための「Do-Dai」アイドルマスター 忙しい人のための「Do-Dai」
FirstStage Again / chi-haFirstStage Again / chi-ha
アイドルマスター ダンス練習も命がけでござるアイドルマスター ダンス練習も命がけでござる
こうなる。
これはすごい。なんかけっこう手軽にニコニコ動画系ニュースサイトがはじめられてしまいそうです。


参考までに僕が使ってる設定を羅列しておきましょう。

サムネ用
<a href="%URL%" target="_blank"><img src="%IMG%" alt="%TITLE%"></a>■[%URL%:title=%TITLE%][%URL%:bookmark]

伯方の塩プロデューサー アイドル紹介伯方の塩プロデューサー アイドル紹介

ニコネイル用
<a href="%URL%" target="_blank"><img src="http://niconail.info/%ID%" alt="%TITLE%"></a>
[%URL%:title=%TITLE%][%URL%:bookmark]

とりのうた 三浦あずさ feat 如月千早 and 765Pro.
とりのうた 三浦あずさ feat 如月千早 and 765Pro.

外部プレイヤー用
[niconico:%ID%:w544:h427]
[%URL%:title=%TITLE%][%URL%:bookmark]

D
【NRF'08】アイドルマスター パーフェクトサン 大黒摩季 FIRE Live arrange
%TITLE%でニコニコ動画(夏)を最初から削ってくれてるのが地味にうれしい。
自分用なので全てはてな記法を利用した形式です。はてな以外のブログを使ってる方はタグにするなりサービスが提供している形式にカスタマイズするなり。


以下に書いてた要望は速攻で実現されています。id:Sore_0さんGJ! もはや隙無し!

ところで、このスクリプト「マイリスト」「ランキング」「検索」「ホットリスト」「最近見た動画」とありとあらゆる動画リストのページに対応していて感動するくらい便利なんですけど……実は動画視聴ページには対応してないのですよね。
元々マーキングスクリプトから派生したものらしいので、動画を見てるその場でタグを生成するっていうのはだいぶ方向性が違うのでしょうがないかもしれませんが、正直言ってここまで便利だと、他の方法と併用するより全部コレ一個でまかないたくなります。できたら現在見てる動画の記述支援機能もつけてくれたらうれしいなあ……と、駄目元でリクエストをしてみる(笑)。


あとですね、そりゃ慣れてしまえばもちろんキーボードでの操作が一番早いのだけど、それしかないせいでだいぶ敷居が上がっている印象があります。NicoClipモードへの切り替え・設定画面の呼び出しボタンあたりが実装されたら、このグリモンはニコニコ動画紹介系サイト支援ツールの決定版になれるポテンシャルを秘めてると思う。ニコ動紹介するならコレ入れてるのが当たり前でしょ、くらいの勢い。

ってことで、使える環境ならコレが最強ということでファイナルアンサー……だったんだけど、ニコニコ動画の仕様変更の影響か、どうも現在クリップボードへのコピーが出来なくなってる模様。うーん、僕んとこの環境の問題かなあ。