Home > JavaScript Archive

JavaScript Archive

超実験中: ニコニコ別窓ミニプレーヤ

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

Hatena Bookmark 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でも前面にちゃんとポップアップする はてブ追加Bookmarklet (5/18更新)

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

Hatena Bookmark Bookmarklet

どうやら入れている拡張やバージョンの差違によって問題がなくなったりするみたいなのですが、とりあえず解決法は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なんちゃらっていう関数はいりませんよ>イミフの中の人

その場で生成された短縮URLがわかるTinyURLブックマークレットを作ったよ

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

TinyURL Bookmarklet

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!

User JavaScriptのロードタイミング

ニコニコポンの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

Home > JavaScript Archive

Search
Feeds
Meta

Return to page top