トップページ > windows > プログラミング > 言語 > javascript > ブックマークレット(Bookmarklet) > つくりかた


※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

最終更新日時 2014-08-29


■目次
■本文

学習の流れ

0.ブックマークレットって何ですか。
1.簡単なブックマークレットのソースをみて、勉強してみる。
2.簡単なのを、つくってみる。
3.難しいのを見てみる。(javascriptのライブラリを使用するようなもの)
4.難しいのをつくってみる。

0.ブックマークレットって何ですか。





1.既存の簡単なブックマークレットのソースをみて、勉強してみる。



簡単だけど役に立つブックマークレットをいくつか見てみる。

まず、ブックマークレットになる前のソース。
スクリプト例: Bookmarklet - Mozilla Firefox まとめサイト

今、使っているブックマークレットのソースの見方(ブラウザごと)

chromeで使っているブックマークレットのソースの見方


ブックマークバー上で右クリック⇒「ブックマークマネージャー」をクリック
⇒ブックマークレットを右クリック⇒「編集」をクリック

IEで使っているブックマークレットのソースの見方

「お気に入りバー」に表示されているブックマークレットを右クリック⇒「プロパティ」⇒「アドレス」欄


ブックマークレットのソースのデコード(意味不明な文字列をjavascriptのコードに戻す)

javascriptのソースに見えない場合は、エンコード(符号化)されていることが多い。%記号が何回も出ている場合はエンコードされていると思ってよいだろう。エンコードされる前のソースを確認したいときはWeb便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト の中段にあるデコード欄にコピペ。「デコードする」ボタンをクリック。
ただし、このURLのサービスでデコードすると「+」記号などいくつかの文字は消えてなくなる。

実際のソースコードをみると分かりにくい点の解説ページ。

function()ってなんだろう。





2.簡単なブックマークレットをつくってみる。





実際に作る上での便利なツールと、作ったときに動かない場合の解決法

ツール:javascriptで書いたスクリプトをfirefoxのブックマークレットに変換



chromeでブックマークレットを作ったが動かない場合

URLが、https://で始まるページは、ブックマークレットが動かない場合があります。
例えばグーグルのトップページのURLもこのパターンです。https://www.google.co.jp/

まずは「https://」ではなく、sの入らない「http://」で始まるページで動作確認をしましょう。

そのうえで、「https://」のページでもブックマークレットを動かせるようにします。




3.難しいブックマークレットを見てみる。

javascriptのライブラリや、ブラウザ以外のソフトと連携するようなもの。

XPath検索バー (for Mozilla/Firefox) | 東京嫉妬
コメント:ライブラリは使ってないが、自分で外部にファイルをつくり、呼び出している。




4.難しいのをつくってみる。

javascriptのライブラリを使用するような、ちょっと難しいブックマークレット。





function wait(a,func){
 var check = 0;
 try{
  eval("check = " + a);
  }catch(e){
 }
 if(check){
  func()
 }else{
  var f = function(){wait(a,func)};
  setTimeout(f,100);
 };
};

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://prototypejs.org/assets/2009/8/31/prototype.js";
document.body.appendChild(s);

wait('Class.create', function() {
 // 実行したい処理
 alert("Class.create loaded!");
 var newclass = new Class.create();
});



未分類・未読:他に参考となりそうなページ:




ページフッタ

このページの1階層上のページ

このページの1階層下のページ

このページに含まれるタグ

このページへのアクセス数

今日: -
昨日: -
これまで合計: -