 Kanasansoft Web Lab.私的Web研究所 |
|
|
Bookmarkletのリンク上でコンテキストメニューを表示します(Windowsでは右クリック、MacintoshではControlキー+クリック)。
「お気に入りに追加」もしくは「ブックマークに追加」を選択して下さい。 アラートが表示される事がありますが、そのまま追加処理を続行して下さい。 後は、Bookmarkletを実行したいページを開き、お気に入り(ブックマーク)からBookmarkletを選択するだけです。
フォームをクリアするBookmarklet Ver1.0.0
フォームをクリアします。 初期状態にするのではありません。 テキストボックス・テキストエリア・ヒドゥン・パスワードの内容を空白に、ラジオボタン・チェックボックスを未チェック状態に、単一セレクトメニュー・複数セレクトメニューを未選択状態にします。 特にラジオボタン・単一セレクトメニューの入力チェック試験に役に立つでしょう。 「ラジオボタンの初期状態をチェック状態、単一セレクトメニューの初期状態を選択状態にすれば、入力チェックが不要」と考えている開発者が少なからずいる為、この試験は実施する価値があると思います。
Bookmarkletを作成するツール[Kanasansoft Convert Source And Bookmarklet]をバージョンアップしました。
当ブログのテンプレート変更に合わせ、変換方法を改良しました。 新バージョン[Kanasansoft Convert Source And Bookmarklet Ver1.1] 旧バージョン[Kanasansoft Convert Source And Bookmarklet Ver1.0]
任意のコードを実行するBookmarklet Ver1.1を使用して、フォーム部品の一覧を作成します。
下のテキストエリアのコードを任意のコードを実行するBookmarklet Ver1.1で実行してみて下さい。 全てのフレームのフォーム部品の一覧が表示されます。 全てのフレームに対し処理を行っていますがフレーム対応Bookmarkletの作成方法とは別の方法で実現しています。 あちらよりもこちらの方が汎用性があると思います。 興味のある方は関数[fncReflexiveCallFrames]とその利用方法を解析してみて下さい。 残念ながらこの一覧表示には次のような制限があります。 ある要素の属性であるノードと同名の子要素がある場合、子要素の取得を優先してしまうようです。 このため、HTML作成処理中にエラーとなってしまい、一覧が正常に表示されません。 正常に動作しない例
<form>
<input type="text" name="target"> </form>
任意のコードを実行するBookmarklet Ver1.1
私が一番多用しているBookmarkletです。 実行すると別ウィンドウが開きます。 このウィンドウは親ウィンドウと同一サイトとして認識されます(Bookmarkletの特徴のひとつ)。 別ウィンドウには、[run]ボタンがひとつと、テキストエリアがふたつ表示されます。 使い方をかるく説明します。 親ウィンドウの情報を取得してみます。 上のテキストエリアに次のように記述して下さい。 親ウィンドウの情報を取得
alert(window.opener.document.title);
[run]ボタンをクリックして下さい。
テキストエリアに記述したJavaScriptが実行され、親ウィンドウのタイトルをアラートで表示しました。 次は親ウィンドウを操作してみましょう。 親ウィンドウを操作
window.opener.document.getElementsByTagName("body")[0].style.backgroundColor="#ffffcc";
上記のように入力し、[run]ボタンをクリックして下さい。
親ウィンドウの背景色が変わりました。 下のテキストエリアは結果表示用です。 [document.getElementById("output")]でアクセスできます。 調べたい項目が複数ある場合、アラートで表示していたのでは面倒です。 親ウィンドウのリンクの一覧を表示してみましょう。 結果表示用テキストエリアの使用例
document.getElementById("output").value="";
var obj=window.opener.document.links; for(var i=0;i<obj.length;i++){ document.getElementById("output").value+=obj[i].href+"\n"; }
上記のコードを入力後、[run]ボタンをクリックして下さい。
下のテキストボックスにリンク先の一覧が表示されました。 調査結果のコピーもまとめてできます。 このBookmarkletの利点はもとのソース(親ウィンドウ)を汚さないことです。 デバッグを行う場合、ソースを直にさわりアラートを挿入したり項目を追加したりすることが多いのですが、この方法であればデバッグソースの削除忘れやミスを防ぐことができます。 また、ソースファイルを変更しないため、タイムスタンプも変更されません。 タイムスタンプでソース管理やバージョン管理を行うような環境、プロジェクトでも重宝します。 何度も同じような調査を行うのであれば、Bookmarkletを作成するツールでBookmarkletしてしまえば楽になります。
Bookmarkletを作成するツールを自作しました。
ついでにHTMLのエンコードも行えます。 このサイトのようにコードをそのまま埋め込んだり、エンコードして表示させたりする場合に便利です。 例えば、codeタグ内に表示する場合、HTMLエンコードを行いますが、tabがtabのまま残っているとレイアウトが崩れます。 かといって、半角スペースでインデントを行うとcodeタグ内ではきれいに表示されますが、見やすいBookmarkletの記述で書いたように、そのままBookmarkletとして使用するには問題があります。 では、どうするのかというと、Bookmarkletはエンコードせずにそのまま管理し、サイト更新の時に個別に処理をしたほうが楽です。 このツールなかなか使えると自負しているのですがどうでしょうか。 使い方はそのうち解説します(要望があれば...)。
Bookmarkletはaタグのhref属性内に書くため、改行もtabも無視されます。
この為、無理して1行に書く必要はありません。 少なくとも私が確認した範囲では、改行があろうがtabがあろうが正常に動作しました。 但し、半角スペースでインデントを行うのは問題があります。 ここで少し話が脱線します。 以前作成していたBookmarkletは[&]["][<][>][ ](半角スペース)全てエンコードをしていました。 しかし、WindowsXPでは半角スペースをエンコードすると、Bookmarklet登録時に[?]へ変換されるようでこうなるとBookmarkletが正常に(全く?)動作しません。 回避方法は[&]["][<][>]はエンコードし、[ ](半角スペース)はエンコードせずにそのままにしておきます。 こうしておくと、bookmarkletには[%20]と登録され正常に動作させることが可能です。 話を元に戻します。 半角スペースでインデントを行うのは問題と書いたのは、[%20]に変換されるのが理由です。 [%20]は3Byteにもなります。 例えば、インデントを4文字(4tab)で行った場合、4文字×3Byteで12Byteも消費してしまいます。 IE6ではBookmarkletに登録できるのは512(?)Byteまでなので、記述できるコードが少なくなってしまいます。 長いBookmarkletを書く時には気を付けましょう。
hiddenの内容を調査するBookmarklet Ver1.5
hiddenの一覧を別ウィンドウに表示します。 非常に醜いです。 本当ならtableタグを使用したかったのですが、IEのBookmark(お気に入り)の文字数制限に引っかかってしまい、これ以上のレイアウト改善は不可能でした。 では、hiddenの一覧の見方を説明しましょう。 まず、項目は"||"で大きく3つに、更に","で細かく分かれます。
"ウィンドウ及びフレームのwindow.topからのフレームのindex"は特にわかり難いので説明します。
フレームがない場合は"top"とのみ表示されます。 フレームを、例えば左右に分割し、左側のフレームを指す場合は"top.0"となります。 更に、右側のフレームを上下に分割し、下側のフレームを指す場合は"top.0.1"となります。
Bookmarkletの作成では無名関数を使用するのが一般的のようです。
無名関数とは何か、なぜ無名関数を使うのかはここでは割愛します。 無名関数を利用した一般的なBookmarkletの記述方法
<a href="
javascript:( function(){ } ) () ">Bookmarklet</a>
このBookmarkletをフレームのあるページで実行すると、表示されているフレームで実行されるのではなく、framesetタグやframeタグを記述している親フレームで実行されます。
ここでいう親ウィンドウとはJavaScriptでいう"window.top"のことで、"window.parent"のことではありません。 これではフレームを使用しているページでは、ページの表示内容を操作するBookmarkletは役に立ちません。 そこで、フレームに対応するBookmarkletを考えてみましょう。 フレーム内で更にフレーム分割されている場合も考慮にいれないといけません。 以下、HTMLエンコードする前のソースを記述します。 フレームに対応したBookmarkletの記述方法
javascript:(
function(){ var F=function(w){ for(var i=0;i<w.frames.length;i++){ F(w.frames[i]) } } ; F(top) } ) ()
フレーム内フレームに対応するため、関数を再帰的に呼び出しています。
まず、変数[F]に関数を定義しています。 定義された関数では、引数に渡されたウィンドウオブジェクト内のフレームオブジェクトを、順に変数[F]に渡しています。 変数[F]には関数が定義されているので、渡されたフレームオブジェクトはウィンドウオブジェクトとして処理されます。 処理を記述します。 URLを表示するBookmarklet
javascript:(
function(){ var F=function(w){ alert(location.href); for(var i=0;i<w.frames.length;i++){ F(w.frames[i]) } } ; F(top) } ) ()
使い道のなさそうなBookmarkletです。
一応これで複数のフレームを処理対象とすることができます。 しかし、ここで問題が発生します。 フレームを用いるということは、他のサイトのページも表示される可能性があります。 つまり、全てのフレームを処理対象にできるということは、他サイトのページも処理対象になってしまい、サイト越えの制限でエラーが発生してしまい処理が中断します。 サイト越えに対応したBookmarklet
javascript:(
function(){ var F=function(w){ try{ alert(location.href); }catch(e){ } for(var i=0;i<w.frames.length;i++){ F(w.frames[i]) } } ; F(top) } ) ()
"try...catch..."内に処理を記述しました。
URLを調べ処理対象とするようなロジックも考えましたが、そもそも他サイトのURL取得もサイト越えの制限の範囲に入る可能性があったので、このような記述になります。 フレームに対応したBookmarkletの記述方法
javascript:(
function(){ var F=function(w){ try{ /*ここに処理を記述*/ }catch(e){ } for(var i=0;i<w.frames.length;i++){ F(w.frames[i]) } } ; F(top) } ) ()
以上、フレーム対応Bookmarkletの作成方法でした。
役に立ちそうですか?
指定されたタグの背景色をランダムに変更するBookmarklet Ver1.2.1
このBookmarkletを実行するとプロンプトが開きますので、背景色を変更したいタグ、例えば"td"等を入力して下さい。 指定されたタグの背景色がランダムに変更されます。 ","(カンマ)または" "(半角スペース)で区切れば複数のタグを一度に指定することもできます。 タグの位置調整・サイズ調整に非常に便利です。 特に、tableを使用した際、tdタグが多すぎないか、少なすぎないかを確認する場合、威力を発揮します。
|