2012年6月13日水曜日

JavaScriptでBookmarklet


何となく、JavaScriptを使ったBookmarkletを作って見た。
ブックマークにJavaScriptを書き込んで、ページ上で走らせることができる。
参考:Bookmarklet - ブックマークレットを作成する際のポイント

使ったことはあったけど、自分で作ったことがなかったので
ちょっとやってみた。

基本形:

javascript:( function() { var v; /* do it */ })()



  1. 上の無名関数内に実行するスクリプトを書いて、
  2. 改行をとって(つまり一行にして)、
  3. ブックマークのURLの部分に貼り付けると
  4. Bookmarkletになる。


無名関数を使うのは、varで宣言された変数がローカルになるので。
上の基本形を元に作る方が安全と思う。

作ったブックマークボタンを押すと、表示されてるページでスクリプトが実行されます。

いくつか作ってみたので、解説でも。

inputタグの名前を抜き出す。


  1. 全input要素を抜き出して:document.getElementsByTagName("input")
  2. 要素をループして:for(i=0;i<theForms.length;i++)
  3. list変数に書き込んで:list = list + ','+theForms[i].name;
  4. alertとして書き出す:alert( list );

javascript:(function() { /* do something */ var theForms = document.getElementsByTagName("input");var list = '';for(i=0;i<theForms.length;i++) list = list + ','+theForms[i].name;alert( list );})()


inputタグの自動入力

今度はinputタグの名前を抜きだし、値として使ってみる。

javascript:(function() { /* do something */ var theForms=document.getElementsByTagName("input");var list='';for(i=0;i<theForms.length;i++) theForms[i].value=theForms[i].name;})()
開発していて、大量の入力フォームがある時に便利かなと思って作って見た。

想定どおりに動くんだけれど、数字のみにしたい、セレクト・チェックボックスなどに対応して内など、細かな問題が多くて使いづらい。

一行なので修正も動作確認も面倒だし、
Bookmarkletは使いどころが難しい、という感想。

0 件のコメント: