はてなでニコニコ動画のサムネイルを表示する方法

IT Web

前エントリでニコニコ動画のリンクを張ろうとして気づいたのだが、はてなでは、ニコニコ動画のページの右上に出てくる「この動画をあなたのブログに貼り付けよう！」のサムネイル表示用タグをコピぺしても、そのタグのテキスト文がそのまま表示されるだけなのだった。iframeタグ非対応が原因とのこと。理由はよくわからんが、この仕様はちょっと何とかしてほしい。

で、ググってみたところ、あっさり対処方法発見。

ニコニコ動画のサムネイルをはてなダイアリーに貼り付けるためのグリースモンキー（NAT’s Programming Champloo）
要するに、クライアント側のスクリプトでhtmlを書き換えてしまおう、ということ。

上記サイトの説明だと、セットアップ方法がイマイチ素人向けに書いてないので、他にも色々検索して集めた手順を備忘録を兼ねて書いておく。ちなみにブラウザはSleipnir。他のブラウザは知らないので各自ググるべし。

  1. Sleipnirのサイトから、SeaHorseプラグインとUserAction Extensionプラグインをインストール。
  2. NAT’s Programming Champlooの上記エントリで公開されているスクリプトHatenaNicoNicoThumbnail.user.jsをダウンロード。
  3. このスクリプトを[Sleipnirインストールフォルダ]\plugins\seahorseにコピー。
  4. Sleipnirの[ツール]−[Sleipnirオプション]メニューからオプション設定画面を開き、[クライアント]−[全般]の「スクリプトによるクライアントの操作を許可する」をオンにする。
  5. 同じくオプション設定画面の[拡張機能]−[SeaHorse]で再読込ボタンを押し、「HatenaNicoNicoThumbnail」が表示されているのを確認。
  6. はてなダイアリーの管理ページの「デザイン」にあるスタイルシート入力欄に、NAT’s Programming Champlooの上記エントリで公開されているスタイルシートをコピー＆ペースト。必要ならば表示色などを調整。
  7. 任意のニコニコ動画のページを表示して、タグが"div class="nico_thumb"みたいになっていたら成功。あとはこのタグ文字列をはてなダイアリー編集画面にコピー＆ペーストすればOK。
以上。