ジェスチャ一発でニコニコ動画のサムネをはてなダイアリーに綺麗に貼るレシピ(Chrome拡張とGoogleガジェットとCSSで)

全部webで教えてもらった方法を繋ぎあわせただけですが、参考までに。

個人的サムネ貼りジェスチャの紆余曲折

1. id:sikii_j さんのこちらの記事でジェスチャにサムネ変換が登録できることを教えてもらう
2. これまで頼っていたNicoNail.infoがサービス終了
3. はてなダイアリーはまだiframeタグを変換してくれないことがしばしば
4. id:Gimite さんのiframe → Google Gadgetコンバータを使わせていただく
5. 下にiGoogleの追加ボタンが出てくるのがなんとなく残念
6. 諦めてたところにid:raydive さんがid:amachang さんのCSSでボタンを消す方法の記事を教えてくれる

…これ、全部繋げられるんじゃないか？
ということで試してみた。
以下自分の使ってるChrome用だけど多分他のブラウザでも流用は可能。
ジェスチャは敷居さんのとこに載ってたChrome Gesturesを使用。

とりあえずスクリプトとにらめっこしてみる

まず自分がNicoNailからニコニコ動画で生成されるiframeに改変してジェスチャに登録してたのがこちら。

var txt = '<iframe width="312" height="176" src="http://ext.nicovideo.jp/thumb/' + location.href.substring(30) + '" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="' + location.href + '">' + document.title.replace(" ‐ ニコニコ動画(原宿)","") + '</a></iframe>\n['+location.href +':title='+document.title.replace(" ‐ ニコニコ動画(原宿)","")+':bookmark]';connection.postMessage({action:'copy','message':txt});

実際貼るとこうなる。(狡猾に自貼る)

【疑似m@sで】アイドルマスター キラメキラリ【歌ってみm@ster】

リロードしてるとサムネが表示されたりiframeタグが生で表示されたりといういつもの光景。

なんとなく読んでくと固定文字は'でくくって、変数と+で繋いでるらしいと把握。
document.title.replaceってのはスクリプトで取得するとタイトルの末尾についてくる「 ‐ ニコニコ動画(原宿)」を削除してる模様。
実はずっとこの削除するところを「 ‐ ニコニコ動画(9)」のまま放置してたのでうちのブログは削除されないまま貼ってた^^;
自分でもわかる程度の説明をすると、から後ろの部分はサムネではなくその下につけるはてブのリンク。
はてブのリンクがいらないならこうなる。

var txt = '<iframe width="312" height="176" src="http://ext.nicovideo.jp/thumb/' + location.href.substring(30) + '" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="' + location.href + '">' + document.title.replace(" ‐ ニコニコ動画(原宿)","") + '</a></iframe>';connection.postMessage({action:'copy','message':txt});

Googleガジェットはどうなってるの？

次にGimiteさんのコンバータでiframeを変換すると生成されるコードがこちら。
sm番号はsmXXXXXXXXに置き換えてみた。

<script src="http://gmodules.com/ig/ifr?url=http://gimite.net/rails/iframe_gadget/xml%3Fparams%3Dscrolling%3Dfalse%21url%3Dhttp://ext.nicovideo.jp/thumb/smXXXXXXXX&amp;synd=open&amp;w=312&amp;h=176&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

同じく自貼る

なるほど、わからん。

わからないならサンプルをとればいいじゃない、ということでいくつかの動画を変換してテストしてみた。
どうも置き換わるのはsm番号のところだけらしい。
変数の場所さえわかればあとは切り貼りすればいいんだろか、という短絡思考に行き着いた。

切り貼りしてみた

var txt = '<script src="http://gmodules.com/ig/ifr?url=http://gimite.net/rails/iframe_gadget/xml%3Fparams%3Dscrolling%3Dfalse%21url%3Dhttp://ext.nicovideo.jp/thumb/' + location.href.substring(30) + '&amp;synd=open&amp;w=312&amp;h=176&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>\n['+location.href +':title='+document.title.replace(" ‐ ニコニコ動画(原宿)","")+':bookmark]';connection.postMessage({action:'copy','message':txt});

ついでに自貼る

【疑似m@sで】アイドルマスター キラメキラリ【歌ってみm@ster】

うまくいった。
いじったところはもう見たまんま。

1. 元のスクリプトのiframeのところをGoogleガジェットのスクリプトに差し替え
2. sm番号を' + location.href.substring(30) + 'に置き換え

これを適当なジェスチャに放り込んでテストしたら動いた。
中身を把握せずにいじってるので無駄とかなんか残ってる情報とかあるかもしれません。ごめんなさい。

ボタンを消そう

で、このままだとiGoogleの追加ボタンがまだ消えない。
消す方法は教わったとおりに、はてなダイアリーにCSSを設定するだけ。

amachangさんの記事を下にスクロールして、「こんなめんどくさいことできない＞＜！！！」の項にあるstyleタグでくくったところをまるっとコピーさせてもらう。
はてなダイアリーの<管理>→<デザイン>→<詳細>タブ→<スタイルシート>のところに貼り付ける。
プレビューして問題がなければ「この内容に変更する」を押して終わり。

※ CSSは設定したはてなダイアリー全体に影響します。既にCSSを登録してる場合などはくれぐれもバックアップをお忘れなく。

どうにかなった

ジェスチャ＋Googleガジェット+CSSで快適な環境が帰ってきた。
冒頭に書いたとおり、スクリプトを登録できるジェスチャがあれば他のブラウザできると思う。
スクリプトをまともにいじったことがない人間でもあれこれいじって何とかできたことが驚き。

参照させていただいた記事の皆様、情報を教えていただいた皆様に感謝をm(_ _)m

追記

上のスクリプトにiframe → Google Gadgetコンバータの修正を反映いたしました。
Gimite さん修正ありがとうございます。
対応が遅くなり申し訳ございませんm(_ _)m

さらに追記

計画停電対応関連で上記のスクリプトが表示されなくなったとのことです。
補記を別記事にてあげておりますので参照くださいませ。