スポンサーサイト
投稿日時 : -------- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- --:-- | スポンサー広告
YouTube動画ダウンロードページを開くブックマークレット『OpenSaveYouTube』
投稿日時 : 2011-03-02 02:33
 GIGAZINEで紹介されてたSave YouTube用のブックマークレット『OpenSaveYouTube』を作りました。
 
『YouTubeのアドレスの前に「save」と入れるだけでムービーをダウンロードできる無料ネットサービス「Save YouTube」 - GIGAZINE』
 
単にURLのyoutube.comをsaveyoutube.comに書き換えて新しいウィンドウ(タブ)で開くだけです。リンクを右クリックしてお気に入り(ブックマーク)に追加して下さい。
 
ブックマークレット本体(2011-03-02 03:45更新)  
YouTubeの再生ページでお気に入り(ブックマーク)から実行すれば新しいウィンドウ(タブ)が開きます。
 

動作確認

 以下動作確認に使用した環境を列挙します。
  • Firefox3.6.13
  • Opera11.01
  • Google Chrome9.0.597.98
  • Internet Explorer8.0.7600.16385
  • Safari5.0.3
 
 
スポンサーサイト
2011-03-02 02:33 | Bookmarklet | Comment(0) | Trackback(0)
カーソル直下のソースを表示するブックマークレット(改)
投稿日時 : 2008-06-20 19:21
 以前 カーソル直下のソースをポップアップ表示するブックマークレットを公開しましたが、もとのソース自体は2006年頃に書いたもので、今見直すといろいろひどい。
 
まあ昔のことは気にせず改良版再公開。追記:IE6で動かないことに気づいたので更に修正(2008/06/23)。
 
onMouseSourceViewer demo
 
ブックマークレット本体
onMouseSourceViewer改
*IEとIEコンポーネントブラウザ(Sleipnir等)で動作
 
整形済みソース全文
javascript:(function(){
    d=document;
    b=d.body;
    E=d.compatMode!='CSS1Compat'?b:d.documentElement;
    b.innerHTML+='<p id=F align=left style="position:absolute;z-index:2147483646;word-break:break-all;width:300;background:222;color:e90;font-size:10"/>';
    d.onmousemove=function(){
        x=event.clientX;
        y=event.clientY;
        F.innerText=d.elementFromPoint(x,y).outerHTML.slice(0,1000);
        T=E.scrollTop;
        y+=T;
        h=F.offsetHeight;
        w=300;
        F.style.left=x+w+9>E.clientWidth?x-w-9:x+9;
        F.style.top=(Y=y+h-T>E.clientHeight?y-h:y)<T?Y+=T-Y:Y
    }
})()
色づけした部分は設定変更可能です。
横幅(1-999)
背景色(000-fff)
文字色(000-fff)
フォントサイズ(1-99)
表示文字数の上限(1-9999)
 
注意点は変数がグローバルで宣言されているのでページ本体のスクリプトに干渉するかもしれないということ。
 
以下変更点メモ。
  • 文字数を減らすためにelementFromPointに渡す座標をevent.xとevent.yで取っていたのをevent.clientXとevent.clientYに変更。これでカーソル下エレメントの相対座標を見てしまうことで見当違いなソースを表示してしまっていたのを回避。
  • DOCTYPEによってdocument.body.scrollTopの値が常に0になってしまうので、標準準拠(Standard)モード時はdocument.documentElement.scrollTopを参照しなければならない。このDOCTYPEをdocument.compatModeプロパティを使って確実に判定するようにした。
  • デザイン変更可能な範囲が増えた。
  • 文字数の関係上削っていたz-indexを復活させ、上限値2147483646を設定。これでz-indexが設定されたオブジェクトの下にポップアップフレームが潜ってしまうのを回避(Flashオブジェクトは依然不可)。
 
横スクロール対応版やonomousemoveのattachEvent版も作ってみましたが、やはり文字数の関係で見た目と機能のバランスが悪くなりすぎるので却下。文字数を削るってのはいつもながら大変ですね。
 
2008-06-20 19:21 | Bookmarklet | Comment(0) | Trackback(0)
Firefox上で互換性のないアドオンのインストールボタンを強制的に有効にするブックマークレット
投稿日時 : 2008-04-21 22:53
 新しくなったFirefoxの公式アドオンページではブラウザ本体のバージョンと互換性のないアドオンのインストールボタンが自動で無効になるようになってしまいました。2008/04/21現在、史上最速と言われるFirefox3.0beta5に正式対応したアドオンはまだまだ少ないので、多くのアドオンのインストールボタンが無効になっています。
 しかし動作保証がないだけでインストールすれば使えるアドオンも少なくありません。IEなどのFirefox以外のブラウザでxpiファイルをダウンロードしてFirefoxにD&Dする方法もありますが、面倒なのでFirefox上で無効になったインストールボタンを強制的に有効にするブックマークレットを作りました。
 
実行すると以下のように「このアドオンは古いバージョンのFirefox向けです」と表示され無効になってクリックできないインストールボタンを強制的に有効にします。
demo
 
 ただし、このブックマークレットを使ってもインストール画面に進めるようになるだけで、インストール時の互換性チェックではじかれます。互換性チェックを無効にできるアドオンのNightly Tester Toolsをインストールして「Disable add-on compatibility checking」にチェックを入れた状態で使用して下さい。
 
関連:Firefoxの非互換アドオンを強制インストールする方法  
 
ブックマークレット本体
 
整形済みソース全文
javascript:(function(){
	var d=document.getElementsByTagName('div');
	for(var i=0;i<d.length;i++){
		if(d[i].id.match(/install-([0-9]+)$/))
			removeCompatibilityHint(RegExp.$1);
	}
})();
 
 removeCompatibilityHintという関数にアドオンのIDを抽出して渡してるだけです。はじめは無理矢理xpiファイルのURLを取得してAオブジェクト生成しようとしてたんですが、公式アドオンページのHTMLソースを眺めてたらインストールボタンのリンクをいじってそうなそれっぽいjsファイルを発見。解読してみると、アドオンのリンク書き換え関係の関数がいくつかあって、その中にページロード時にUAその他の条件で無効にしたリンクを再度有効にする専用の関数があったので利用させてもらいました。おかげで楽できた。

 
2008-04-21 22:53 | Bookmarklet | Comment(0) | Trackback(0)
別ドメインの外部スクリプトを実行するブックマークレット
投稿日時 : 2008-02-25 09:46
更新日時 : 2011-08-29 10:28
更新:2011-08-29 10:28
デモスクリプトがリンク切れになっていたのを修正
 

■概要

 これはブックマークレット作成者のためのブックマークレットです。ブックマークレットには文字数制限(IEで508文字)がありますが、ブックマークレットから外部スクリプトファイルをロードして実行することでこの制限を回避できます。事実上ブックマークレットの文字数制限は無くなります。さらに別ドメイン(別サーバ)のスクリプトファイルのロード、実行も可能。他のメリットとしては、スクリプト本体を完全に外部ファイル化しておけば、後で動作を変更したくなってもユーザ側に再登録をお願いしたりする必要がないということでしょうか。
 

■デモ

外部ドメインのスクリプトファイル
http://t-service.no-ip.com/blog/72_ExternalScriptDemo/demo_outerscript_utf8.js
をロードして実行するデモ。
別ドメインの外部スクリプトファイルを実行するブックマークレットのデモ
 

■ブックマークレットメーカー

 1行コードの中のURLを書き換えたりする作業は若干イライラするので自動で生成できるようにしました。外部ファイルのURLとEncodingを指定して「Generate」ボタンを押すとソースが生成されます。Nameが空白でないなら、Nameに入力された文字列でHTMLリンク用のソースと、テスト用のリンクオブジェクトを生成します。
 大体のブラウザで動くんじゃないかと。デフォルトで入力されているデモのデータは「Clear」ボタンで削除できます。値チェックは面倒なのでしてません。Encodingについては後述しています。
ブックマークレットメーカー
URL:
Encoding:
Name:


Source

 
Link Test
 

■整形ソース

 ブックマークレットメーカーで生成されるコードを整形し、コメントをつけて貼っておきます。
javascript:(function(){
//外部ファイルURL
var url='http://t-service.no-ip.com/blog/72_ExternalScriptDemo/demo_outerscript_utf8.js';

//キャッシュ使用を回避
if(!url.match(/\?/))url+='?'+(new Date()).getTime();

//scriptエレメント作成
var d=document;
var e=d.createElement('script');

//外部ファイルのエンコーディング指定
e.charset='utf-8';

//srcを外部ファイルURLに設定
e.src=url;

//エレメント追加
d.getElementsByTagName('head')[0].appendChild(e);

})();
今回のデモで使っている外部スクリプトファイルの内容は以下のような感じ。
alert('外部ドメインから実行されました。\nEncoding is "utf-8".');
 

■外部ファイルのエンコーディングについて

 ブックマークレットを実行するページのエンコーディングと外部ファイルのエンコーディングがずれていると日本語などの2Byte文字が文字化けを起こします。これを回避するためにソース中の、
//外部ファイルのエンコーディング指定
e.charset='utf-8';
の部分で外部ファイルのエンコーディングを指定する必要があります。スクリプト中でASCII文字しか使用しない場合は省略しても問題なし。
 以下は指定したエンコーディングと外部ファイルのエンコーディングがずれている場合と、一致している場合のデモです。ブラウザによって結果が異なります(後述)。
 
 以下はエンコーディング指定しなかった場合のデモです。このブログのページのエンコーディングはeuc-jpです。  

■各ブラウザのエンコーディング指定と文字化けについて

 この記事を書いているときに気づいたんですが、Opera(9.26)はどんな条件でも正しく日本語が表示できるようです。
 IE(6、7)、Firefox(2.0.0.12)は指定エンコーディングと外部スクリプトのエンコーディングが不一致の場合や指定なしだと基本的に文字化けしますが、指定なしでもページの エンコーディングと外部スクリプトのエンコーディングが一致している場合は化けません。
 Safari(3.0.4 for win)はIEやFirefoxとほぼ同じですが、加えて、指定なしだがページエンコーディングと外部スクリプトエンコーディングが一致している場合でも化けるようです。
 まあつまり基本的にエンコーディング指定は省かない方が得策。
 

■キャッシュからのロード回避について

 通常のブラウザは通信量を減らすためやレスポンス速度を上げるために、一度ロードしたファイルをローカルのハードディスクにキャッシュとして保存しておき、再度同じファイルへリクエストがあった場合はキャッシュからロードします。しかしこのキャッシュのせいで外部スクリプトファイルの内容を変更しても、キャッシュからロードされてしまい変更が反映されことがあります。それを回避するためにURL末尾に、「?」に続けて実行たびにURLが変化するように現在時刻をミリ秒で取得したものを付加しています。
//キャッシュ使用を回避
if(!url.match(/\?/))url+='?'+(new Date()).getTime();
外部ファイルの内容を一切変更しないのであればこの記述は必要ありません。
 

■外部ファイル化されたブックマークレットの危険性

 スクリプト本体を外部ファイル化したブックマークレットは、文字数制限を回避できるおかげで通常のものよりも高度な処理ができ非常に便利ですが、セキュリティ的には危険を孕んでいます。たとえばブックマークレットの作成者に悪意があれば、あるサイト用のブックマークレットを公開後、ユーザが増えてきたところで動作をこっそり変更してユーザのcookieを盗む、ということも可能。ブックマークレット実行時のスクリプトの権限はそのサイト管理者と全く同じなのでcookieにもアクセスできます。怪しいサイトのブックマークレットは危険かもしれないという話。
 
2008-02-25 09:46 | Bookmarklet | Comment(0) | Trackback(0)
ブックオフオンラインでAmazon検索するブックマークレット
投稿日時 : 2008-02-19 12:42
 ブックオフオンラインで本を探している際にAmazonで買うのとどっちが得か知りたいとき、タイトルをもとにamazon検索リンクを生成して簡単に比較できるようにするブックマークレットを作ってみました。大した手間じゃないのでSleipnirプラグインのSeaHorseスクリプト、FirefoxアドオンのGreasemonkeyスクリプト、IEアドオンのTrixieスクリプトも作りました。
 
実行結果
 

■概要

 ブックオフオンラインの検索結果ページでのみ動作します。実行すると検索結果の各タイトルの下にそのタイトルをもとにしたamazon.co.jpの検索リンクを生成します。
 

■問題点とか

 9割はちゃんと検索できるんですが、ブックオフの検索結果のタイトルがおかしなときは無理。たとえば副タイトルが本タイトルの間に入ってしまっている場合とか、途中で途切れてたり、余計な文字がくっついている場合とか。ブックオフ側がもうちょっと正確にデータを入力してくれればなんとかなりそうなものですが。
 タイトルに含まれる()括弧の中には、英語タイトルの日本語読みだとか月刊だとかムックだとか、検索に邪魔な情報が書いてあることが多いので削除することにしました。
 

■動作確認

動作が確認できたブラウザは以下。Safariでは動作不可。URL欄に直接コードを貼り付ければ動くんですが、ブックマークに登録するとダメ。
IE6/IE7/Opera9.25/Firefox2.0.0.12/Mozilla1.8b/Netscape9.0.0.5
 

■ブックマークレット

Opera以外のブラウザ用  
Opera用。コピーして手動で追加してください。*コード自体は全く同じ。

 

■SeaHorseスクリプト

 SleipnirプラグインのSeaHorseスクリプトです。ブックオフオンラインの検索ページを開くと自動的にamazon検索リンクを生成します。ダウンロードしたら所定の位置に移動させてオプションから有効にして下さい。
 

■Greasemonkey/Trixieスクリプト

 FirefoxアドオンのGreasemonkeyとIEアドオンのTrixieの共用スクリプトです。ブックオフオンラインの検索ページを開くと自動的にamazon検索リンクを生成します。Firefoxの場合Greasemonkeyが有効になっているならクリックするとインストールダイアログが表示されるハズ。IEの場合はダウンロードしたら所定の位置に移動させてオプションから有効にして下さい。
 
[参考]
Sleipnir | プラグイン | SeaHorse
タブブラウザ Sleipnir オンラインデータベース(SeaHorseスクリプト)
Greasemonkey :: Firefox Add-ons
Trixie
 
2008-02-19 12:42 | Bookmarklet | Comment(0) | Trackback(1)
カーソル直下のソースをポップアップ表示するブックマークレット
投稿日時 : 2008-01-15 15:05
onMouseSourceViewerDemo
 
 
改良版を公開しました(2008/06/23):
カーソル直下のソースを表示するブックマークレット(改)

 
 
カーソル直下にあるオブジェクトを取得して、その前後のソースをポップアップ表示させるブックマークレットです。IE独自のelementFromPoint(x,y)を使っているので基本的にIEでしか動作しません。最近のOperaは一応elementFromPoint(x,y)が実装されたようですが、どうも動作が怪しいのでサポート外。
 
ウィンドウの端でポップアップフレームが見えなくなったら意味がないので、がんばって回り込み機能をつけました。まあその回り込み処理と見栄えにこだわったせいで508文字というブックマークレットの文字数制限に悩まされました。変数もグローバルで宣言されているので、ページ本体のスクリプトと干渉するかもしれません。文字数を減らすために削って動くものはすべて削っています。それと横スクロールが出た状態を想定していません。
 

■動作環境

  • IE5.5+
  • フレームページ不可
  • このページのようにスタイルシートで段組が作成されている場合elementFromPoint(x,y)がうまく動作しないみたいで、取得するオブジェクトが見当違いなものになったり、表示位置がおかしくなったりします。テーブルでレイアウトが構成されているようなレガシーなページだとうまく動作します(Googleの検索結果ページなど)。
508文字ではこのあたりが限界かと。
 
使用にあたっては自己責任でお願いします。
このスクリプトによって発生したいかなる損害も作者は責任を負いません。

 

■ブックマークレット本体

*このページではうまく動作しません。
動作確認はGoogleあたりでお願いします。
 

■整形済みソース全文

javascript:
(function(){
  d=document;
  b=d.body;

  //scrollTopが動作するか判定
  b.scrollTop++;
  b.scrollTop?E=b:E=d.documentElement;

  //ポップアップフレーム生成(正しいHTMLではない)
  b.innerHTML+='<div id=F style=position:absolute;left:0;
  top:0;width:300;word-break:break-all;background-color:000;
  color:fff;font-size:11;z-index:99999999/>';

  //マウスイベント補足
  d.onmousemove=function(){
    //現在座標
    x=event.x;
    y=event.y;

    //現在座標下のオブジェクト取得
    o=d.elementFromPoint(x,y);

    //ポップアップフレームの初期Y座標決定
    T=E.scrollTop;
    y+=T;
    
    //ポップアップフレームの横幅
    w=300;
    
    //表示文字数を切り詰めてポップアップフレームに書き込み
    F.innerText=o.outerHTML.slice(0,w*3);

    //ポップアップフレームのサイズに応じて回り込み処理
    h=F.offsetHeight;
    x+w>E.clientWidth?X=x-w-9:X=x+9;
    F.style.left=X;
    y+h-T>E.clientHeight?Y=y-h:Y=y;
    Y<T?Y+=T-Y:Y;
    F.style.top=Y
  }
}())
*実際は1行のコードにしないと動作しません。
 

■設定変更

ポップアップフレームの横幅を変更
    //ポップアップフレームの横幅
    w=300;
「w=300;」 の部分を1~999の3文字以内で指定する。
 
最大表示文字数を変更
    //表示文字数を切り詰めてポップアップフレームに書き込み
    F.innerText=o.outerHTML.slice(0,w*3);
「F.innerText=o.outerHTML.slice(0,w*3);」 の「3」を1~9の1文字の整数で指定するか、「w*3」を1~999の3文字以内の整数に書き換える。
 
2008-01-15 15:05 | Bookmarklet | Comment(0) | Trackback(0)
Google検索結果に番号を振るブックマークレット
投稿日時 : 2007-11-20 13:23
どこだかにあったやつはGoogleが仕様変更でもしたのか、動かなくなっているようなので自分で作ってみました。
・IE6/IE7/Firefox2/Opera9/Safari3/Netscape9/Mozilla1.8で動作確認
Googleの検索結果に通し番号を振るだけです。自分のHPが何番目に表示されるか確認する時とかにはある程度便利。良く言えばSEO用、悪く言えば自己満足用ブックマークレット。
Googleの表示言語が日本語or英語の場合に動作することを確認しています。その他の言語でも検索結果件数の表記が下記のように「n - n」の形式なら正常に動作するような気がする。
対応形式
bookmarklet の検索結果 約 22,800,000 件中 1 - 50 件目 (0.24 秒)
整形したソース貼っときます。
javascript:(
  function(){
    var n=1;
    var d=document;
    window.onerror=function(){return true};
    if(!d.URL.match(/\/\/[^\/]*google[^\/]*\/search\?/i)){
        alert('ERROR!');
        return
    }
    var t=d.getElementsByTagName('table');
    for(var i=0;i<t.length;i++){
      if(t[i].className=='t bt')
        n=eval(t[i].innerHTML.match(/<b>(\d+)<\/b> ?-/i)[1])
    };
    var e=d.getElementsByTagName('div');
    for(i=0;i<e.length;i++){
      if(e[i].className=='g'){
        e[i].innerHTML='<font size="-1" 
        style="border:1px solid;padding:1px;">'
        +n+'</font> '+e[i].innerHTML;
        n++
      }
    }
  }
)();
改造するなり転載するなり好きなように使ってもらってかまいません。 実際は1行のコードにしないと動作しません。
これで502文字。IE対応を捨てないなら残り6文字。
2007-11-20 13:23 | Bookmarklet | Comment(0) | Trackback(0)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。