2012年4月30日月曜日

とっても簡単!便利なブックマークレットの作り方



おはようございます。Pineです。

昨日自分で作ったブックマークレットというツールの紹介を行いましたが、
作ってみて結構楽しかったので作り方をまとめておこうと思います。

ブックマークレットって何?という方もどうぞ。
詳細は以下から.....................




ブックマークレットとは


ブックマークレットとは、本来のお気に入りの内容(URL)の代わりに
javascript:で始まるJavaScriptを記述することによって、見ているページ
内でいろいろな作業をできるようにするツールのことです。


例えばこちらで紹介しているページ編集モードというブックマークレット
を使うと、あら不思議ページを削除したり追記したりできてしまいます。

これは、JavaScriptを使ってページを一時的に編集可能なモードに変更
しているためです。ちなみに中身はこんな感じ

javascript:document.body.contentEditable='true';document.designMode='on';void%200

たった3行分のJavaScriptでこんなツールが作れるんです!!
楽しそうですよね?では作ってみましょう!



まずはコーディング


まず、作りたいものを頭に思い浮かべます。

今回は「Google画像検索でオプションを指定した画像検索を簡単にしたい」
という目的のもと作っていくことにしましょう。
これを簡単な処理にまとめると


検索キーワードを聞く

それをGoogle検索のURLにいれてオプションを追加する

できあがったURLを新規ウィンドウに読み込ませる


という感じになります。
これをぱぱっとコードにすると



var q=prompt("検索ワード?"); //プロンプトを表示してワードを聞く
var d=window.open("http://www.google.co.jp/search?as_q=" //新規ウィンドウ
+q //検索キーワードの追加
+"&tbm=isch&orq=&tbs=sur:f").document; //オプションの追加



と、こんなスクリプトになります。
ですがこれはスクリプトの一部です。実際にブックマークレットとして
動作させるためには、これを決まった型にいれてやる必要があります。



仕上げ


その決まった型というのが


javascript:(
 function(){
  function o(){
 処理.....
   }
  }
  o();
 }
)();


こちらです。クロージャと呼ばれるそうです。

基本的にjavascript:に続けて書くだけで問題ないはずなのですが、
それだと変数を利用したときに、見ているページ内の変数と値が
ごっちゃになってしまうため、このようにしてローカル変数のみ
用いるようにしています。

また、一部のブラウザーを除いて半角スペースは%20という値に
置き換えてやらないとうまく動作しません。
また、改行はすべて取り除きます。

これらの条件を全部適用させて、できあがるのがこちら


javascript:(function(){function%20o(){var%20q=prompt("検索ワード?");var%20d=window.open("http://www.google.co.jp/search?as_q="+q+"&tbm=isch&orq=&tbs=sur:f").document;}o();})();



ここまでの作業が完了したら、実際使ってみます。



テスト


ブックマークを新規登録し、その編集画面を開きます。
そして内容の部分に、先ほど作ったスクリプトを貼付けて保存します。
あとは動く事を祈ってクリックするだけです........

これで動かなかったり、異常があったりした場合はまた作り直しです。
上のスクリプトの場合、何も入力しなかった場合とキャンセルを押した
場合の処理を考えていなかったので



javascript:(
 function(){
  function o(){
   var q=prompt("検索ワード?");
   if(q!=null && q!=""){
    var d=window.open("http://www.google.co.jp/search?as_q="
    +q
    +"&tbm=isch&orq=&tbs=sur:f").document;
   }
  }
  o();
 }
)();



としてif文を簡単に組み込み直しました。
これで納得いくものになれば完成です。



_____________________


___________





随分無理矢理まとめましたがいかがでしたでしょうか?
簡単なJavaScriptの知識だけあればいろんなツールが作れるというのは
魅力的ですよね。

これからも、暇なときにごりごりツールを書いてみたいですね。
さすがに昨日作ったSWLは機能が少なすぎるんで、もっとマシなものを
作ってみようかな、と思ってますw

ではー

2 コメント:

匿名 さんのコメント...

半角スペースは&20という値に → 半角スペースは%20という値に 
ですね。

mikan さんのコメント...

>> 匿名さん
ご指摘ありがとうございます!!
すぐに修正いたします

コメントを投稿

Related Posts Plugin for WordPress, Blogger...

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Walgreens Printable Coupons