JavaScript Archive

ここ最近、毎日のようにBookmarkletを作っている気がします。さて今日はニコニコ動画を作業用に見たいと思ってもどうにも場所をとってしまう、というわけで再生部分を別窓に追い出せるプレーヤーをつくってみました。とはいえ超α版。まだいろいろ調整中です。

使い方

NicoVideo_MiniPlayer ←このリンクをブックマークツールバーにドラッグ、または右クリックなどでブックマークに登録。

下記のソースをコピーしてブックマークに登録してもOKです

javascript:var%20b=document.body;if(b){void(z=document.createElement('script'));void(z.src='http://nicopon.jp/js/miniplayer.js');void(b.appendChild(z));}

ニコニコ動画の再生ページでブックマークレットを呼び出すことで、別ウインドウにプレーヤが開きます。再生は自動的にはじまりませんので(JavaScript経由のインタフェースが見当たらない)、自分で再生ボタンをクリックしてください。また、リサイズすると再生が一旦中断されますので手動で再開して早送りするなどしてください。

メモ

• Firefox 2 / 3beta, Opera 9.50 beta 2, IE 6, Safari 3.1 にて動作確認しました。
• 特にIEが挙動不審。window.openした先にDOMで<script>タグを挿入しようとするとスクリプトエラーになるのはなんでかな。あと動画のサイズをうまく取得できない。
• IEはwindow.opener関数を使っているため、呼び出し元のウインドウを閉じてしまうとサイズ変更ができなくなる不都合あり。

はてなブックマークでは公式のブックマークレットが配布されているのですが、うちの手元のFirefoxだと画面の背面にポップアップが出現してしまうために非常に使いにくく感じたので作り直してみました。

どうやら入れている拡張やバージョンの差違によって問題がなくなったりするみたいなのですが、とりあえず解決法はsetTimeout で非同期呼び出しを行うことのようでした。UAを判別してGeckoっぽかったらsetTimeoutで呼び出し、そうでなければふつうに呼び出してみます。

使い方

はてブに追加 ←このリンクをブックマークツールバーにドラッグ、または右クリックなどでブックマークに登録。

下記のソースをコピーしてブックマークに登録してもOKです

javascript:(function(){var d=document,l=d.location,f='http://b.hatena.ne.jp/add?mode=confirm&is_bm=1&title=',w=window,u=f+escape(d.title)+'&url='+escape(l),r=w.SymRealWinOpen;o=r?r:w.open ;a=function(){o(u,'b', 'width=550,height=600,resizable=1,scrollbars=1')};if(/Gecko//.test(navigator.userAgent))setTimeout(a,0);else a();void(0);})();

メモ

• Firefox 2 / 3beta, Opera 9.50 beta 2, IE 6 / 7(Thx: @nkoz), Safari にて動作確認しました。
• 遅延呼び出しはTumblrのBookmarkletからヒントを得ました。ありがとうございます。
• 2008/05/18追記: イミフでブックマークレットが動作しなかった問題に対処。Symなんちゃらっていう関数はいりませんよ＞イミフの中の人

TinyURLは長いURLをTwitterやメール、メッセンジャーなどに書き込むときに便利なんだけど、いちいちTinyURL.comのサイトからURLをコピペするのが面倒だな、と思ったので作成。

TinyURLによって生成された URI がプロンプトとして即時に返ってきますのでコピペとかしやすいかと。

使い方

TinyURL! ←このリンクをブックマークツールバーにドラッグ、または右クリックなどでブックマークに登録。

下記のソースをコピーしてブックマークに登録してもOKです

javascript:var%20b=document.body;if(b){_cb=function(s){void(window.prompt('Converted URI',s))};void(z=document.createElement('script'));void(z.src='http://remysharp.com/tinyurlapi?callback=_cb&url='+encodeURI(decodeURIComponent(location.href)));void(b.appendChild(z));}

メモ

• JSONを使っています。ソースはこんな感じ。

  var b=document.body;
  if(b){
   _cb=function(s);
   void(window.prompt('Converted URI',s));
   void(z=document.createElement('script'));
   void(z.src='http://remysharp.com/tinyurlapi?callback=_cb&url='+encodeURI(decodeURIComponent(location.href)));
   void(b.appendChild(z));
  }

• Safariなどで2バイト文字がデコードされずにアドレスバーに表示されているときでも正常にTinyURLで生成できるようにしています。
• しかしながら # を含む URL はうまくTinyURLできません。デコードしてAPIに渡しても #より先は切り捨てられてしまう。。

謝辞

remy sharp氏の TinyURL Callback API を利用させていただきました。 Thanks a lot!

ニコニコポンのGreasemonkeyスクリプトを書いてて気づいたのだが、ブラウザごとにJavaScriptの実行タイミングが異なるようなので、それの対処に苦慮した。

• Firefox + Greasemonkey: onloadイベントの直前
• Safari + Creammonkey: onloadイベントの直前
• Opera: onloadイベントの直後
• IE + Trixie, Sleipnir + SeaHorse: onloadイベントの直後

読み込まれたHTMLのDOMツリーにアクセスして内容を書き換える処理を行うUser JavaScriptを書くとして、FirefoxとSafariではaddEventListenerでloadイベントに関連づければよく、OperaとIE系では(loadが終わってからスクリプトが実行されるため)そのまま関数を実行すればよいということになる。

Continue reading