「トップページ/windows/プログラミング/言語/javascript/ブックマークレット(Bookmarklet)/つくりかた」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
最終更新日時&date()
#html2(){{{{{{
<TABLE align="right">
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4893116487" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4774144665" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4873113911" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4873114888" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>
</TABLE>
}}}}}}
■目次
#contents_line()
■本文
*学習の流れ
０．ブックマークレットって何ですか。
１．簡単なブックマークレットのソースをみて、勉強してみる。
２．簡単なのを、つくってみる。
３．難しいのを見てみる。（javascriptのライブラリを使用するようなもの）
４．難しいのをつくってみる。
*０.ブックマークレットって何ですか。
[[ITmedia Biz.ID：キミはブックマークレットを知っているか？ >http://bizmakoto.jp/bizid/articles/0702/08/news105.html]]
[[ブックマークレットとは 【bookmarklet】 - 意味/解説/説明/定義 ： IT用語辞典 >http://e-words.jp/w/E38396E38383E382AFE3839EE383BCE382AFE383ACE38383E38388.html]]
[[かなり使えるブックマークレットいろいろ | IDEA*IDEA >http://www.ideaxidea.com/archives/2009/03/most_useful_bookmarklets.html]]
*１．既存の簡単なブックマークレットのソースをみて、勉強してみる。
[[You Look Too Cool » ブックマークレットの簡単な作り方 >http://stabucky.com/wp/archives/557]]
[[Bookmarkletの作り方 - catch.jp >http://www.catch.jp/wiki/index.php?Bookmarklet%A4%CE%BA%EE%A4%EA%CA%FD]]
簡単だけど役に立つブックマークレットをいくつか見てみる。
まず、ブックマークレットになる前のソース。
スクリプト例：[[Bookmarklet - Mozilla Firefox まとめサイト >http://firefox.geckodev.org/index.php?Bookmarklet]]
**今、ブラウザで使っているブックマークレットのソースの見方
***chromeで使っているブックマークレットのソースの見方
ブックマークバー上で右クリック⇒「ブックマークマネージャー」をクリック
⇒ブックマークレットを右クリック⇒「編集」をクリック
***IEで使っているブックマークレットのソースの見方
「お気に入りバー」に表示されているブックマークレットを右クリック⇒「プロパティ」⇒「アドレス」欄
**ブックマークレットのソースのデコード（意味不明な文字列をjavascriptのコードに戻す）
javascriptのソースに見えない場合は、エンコード（符号化）されていることが多い。％記号が何回も出ている場合はエンコードされていると思ってよいだろう。エンコードされる前のソースを確認したいときは[[ Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト>http://www.tagindex.com/tool/url.html]]の中段にあるデコード欄にコピペ。「デコードする」ボタンをクリック。
ただし、このURLのサービスでデコードすると「＋」記号などいくつかの文字は消えてなくなる。
**実際のソースコードをみると分かりにくい点の解説ページ。
***function()ってなんだろう。
ある程度javascriptを知っている人向けのページ。
[[ Javascriptのブックマークレットに見る無名関数の使われ方 | 村式開墾日記>http://blog.ville.jp/2007/07/09/56]]
もう少し基礎から解説したページ。
[[Bookmarklet - ブックマークレットを作成する際のポイント >http://www.teria.com/~koseki/memo/bookmarklets/tips.html]]
*2．簡単なブックマークレットをつくってみる。
[[ブックマークレットサービス・Hatena::Let を作りました - 川o・-・）＜2nd life >http://d.hatena.ne.jp/secondlife/20100515/1273919432]]
[[Bookmarkletの作り方 - catch.jp >http://www.catch.jp/wiki/index.php?Bookmarklet%A4%CE%BA%EE%A4%EA%CA%FD]]
[[Bookmarklet - ブックマークレットを作成する際のポイント >http://www.teria.com/~koseki/memo/bookmarklets/tips.html]]
**実際に作る上での便利なツールと、作ったときに動かない場合の解決法
***ツール：javascriptで書いたスクリプトをfirefoxのブックマークレットに変換
[[Bookmarklet Builder >http://subsimple.com/bookmarklets/jsbuilder.htm]]
[[bookmarkletで選択文字列を取得することを考える - 徒書 >http://www.akatsukinishisu.net/itazuragaki/js/get_selected_text.html]]
***chromeでブックマークレットを作ったが動かない場合
URLが、https://で始まるページは、ブックマークレットが動かない場合があります。
例えばグーグルのトップページのURLもこのパターンです。https://www.google.co.jp/
まずは「https://」ではなく、sの入らない「http://」で始まるページで動作確認をしましょう。
そのうえで、「https://」のページでもブックマークレットを動かせるようにします。
[[Google Chromeでhttpsで動かないブックマークレットがあるときのメモ | monolis >http://www.monolis.net/2012/11/google-chromehttps.html]]
*３．難しいブックマークレットを見てみる。
javascriptのライブラリや、ブラウザ以外のソフトと連携するようなもの。
[[XPath検索バー (for Mozilla/Firefox) | 東京嫉妬 >http://tokyoenvious.xrea.jp/b/javascript/xpath_finder.html]]
コメント：ライブラリは使ってないが、自分で外部にファイルをつくり、呼び出している。
[[はてなブックマーク - aki77のブックマーク - bookmarklet >http://b.hatena.ne.jp/aki77/bookmarklet/]]
[[“なかのひと”の解析結果をExcelで使えるようにする便利ブックマークレットを作ってみた | Web担当者Forum >http://web-tan.forum.impressrd.jp/e/2008/11/07/4330]]
*４．難しいのをつくってみる。
javascriptのライブラリを使用するような、ちょっと難しいブックマークレット。
[[SDP - エスデーペー » 外部からjsファイルを読み込むbookmarklet >http://sdp.katteyomi.info/?p=33]]
[[hail2u.net - Weblog - 設定を外部JavaScriptファイルから読み込む >http://hail2u.net/blog/coding/load-settings-from-external-javascript-file.html]]
[[右クリックで Bookmarklet を実行する | Life Hacks Lite >http://www.lifehackslite.com/hacks/2007-11/196.html]]
[[JavaScriptで遅延ロードをする方法についてのおさらい - Clouder::Blogger >http://blog.clouder.jp/archives/000631.html]]より。
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);
// prototype.jsで使いたい関数が読み込まれてから、その関数を使っての処理
wait('Class.create', function() {
// 実行したい処理
alert("Class.create loaded!");
var newclass = new Class.create();
});
*未分類・未読：他に参考となりそうなページ：
[[要素の追加 (append) >http://www9.plala.or.jp/oyoyon/html/script/append.html]]
外部jsファイルを読み込んで、ロードが完了するのを待った後、指定の関数を実行する
[[遅延ロードでJavaScriptのお勉強 - Born Neet >http://blog.bornneet.com/Entry/114/]]
[[ブックマークレットからjQueryを読み込む方法 | THE HAM MEDIA >http://h2ham.seesaa.net/article/115498697.html]]
[[最速インターフェース研究会 :: HTMLドキュメントを解析して特徴的なループを見つけるBookmarklet >http://la.ma.la/blog/diary_200705301424.htm]]
[[ Google Contacts/Calendar API for JavaScript をブックマークレットから呼び出す - snippets from shinichitomita’s journal >http://d.hatena.ne.jp/shinichitomita/20080725/1216985694]]
[[Karafuto Blog - Google AJAX Language APIを読みこむブックマークレット >http://karafuto50.blog117.fc2.com/blog-entry-207.html]]
[[他人のサイトで外部ファイルのJavascriptを読み込むブックマークレットの作り方 - 蟲！虫！蟲！ - #!/usr/bin/bugrammer >http://bugrammer.g.hatena.ne.jp/nisemono_san/20110919/1316360776]]
#amazon2(728x90)
*ページフッタ
&link_edit(text=ここを編集)
**このページの1階層上のページ
&link_parent()
**このページの1階層下のページ
#lsd()
**このページに含まれるタグ
&tags()
**このページへのアクセス数
今日：&counter(today)
昨日：&counter(yesterday)
これまで合計：&counter(total)
最終更新日時&date()
#html2(){{{{{{
<TABLE align="right">
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4893116487" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4774144665" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4873113911" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=tomokazu0525-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4873114888" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>
<TR>
<TD>
</TD>
</TR>
</TABLE>
}}}}}}
■目次
#contents_line()
■本文
*学習の流れ
０．ブックマークレットって何ですか。
１．簡単なブックマークレットのソースをみて、勉強してみる。
２．簡単なのを、つくってみる。
３．難しいのを見てみる。（javascriptのライブラリを使用するようなもの）
４．難しいのをつくってみる。
*０.ブックマークレットって何ですか。
[[ITmedia Biz.ID：キミはブックマークレットを知っているか？ >http://bizmakoto.jp/bizid/articles/0702/08/news105.html]]
[[ブックマークレットとは 【bookmarklet】 - 意味/解説/説明/定義 ： IT用語辞典 >http://e-words.jp/w/E38396E38383E382AFE3839EE383BCE382AFE383ACE38383E38388.html]]
[[かなり使えるブックマークレットいろいろ | IDEA*IDEA >http://www.ideaxidea.com/archives/2009/03/most_useful_bookmarklets.html]]
*１．既存の簡単なブックマークレットのソースをみて、勉強してみる。
[[You Look Too Cool » ブックマークレットの簡単な作り方 >http://stabucky.com/wp/archives/557]]
[[Bookmarkletの作り方 - catch.jp >http://www.catch.jp/wiki/index.php?Bookmarklet%A4%CE%BA%EE%A4%EA%CA%FD]]
簡単だけど役に立つブックマークレットをいくつか見てみる。
まず、ブックマークレットになる前のソース。
スクリプト例：[[Bookmarklet - Mozilla Firefox まとめサイト >http://firefox.geckodev.org/index.php?Bookmarklet]]
**今、使っているブックマークレットのソースの見方(ブラウザごと)
***chromeで使っているブックマークレットのソースの見方
ブックマークバー上で右クリック⇒「ブックマークマネージャー」をクリック
⇒ブックマークレットを右クリック⇒「編集」をクリック
***IEで使っているブックマークレットのソースの見方
「お気に入りバー」に表示されているブックマークレットを右クリック⇒「プロパティ」⇒「アドレス」欄
**ブックマークレットのソースのデコード（意味不明な文字列をjavascriptのコードに戻す）
javascriptのソースに見えない場合は、エンコード（符号化）されていることが多い。％記号が何回も出ている場合はエンコードされていると思ってよいだろう。エンコードされる前のソースを確認したいときは[[ Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト>http://www.tagindex.com/tool/url.html]]の中段にあるデコード欄にコピペ。「デコードする」ボタンをクリック。
ただし、このURLのサービスでデコードすると「＋」記号などいくつかの文字は消えてなくなる。
**実際のソースコードをみると分かりにくい点の解説ページ。
***function()ってなんだろう。
ある程度javascriptを知っている人向けのページ。
[[ Javascriptのブックマークレットに見る無名関数の使われ方 | 村式開墾日記>http://blog.ville.jp/2007/07/09/56]]
もう少し基礎から解説したページ。
[[Bookmarklet - ブックマークレットを作成する際のポイント >http://www.teria.com/~koseki/memo/bookmarklets/tips.html]]
*2．簡単なブックマークレットをつくってみる。
[[ブックマークレットサービス・Hatena::Let を作りました - 川o・-・）＜2nd life >http://d.hatena.ne.jp/secondlife/20100515/1273919432]]
[[Bookmarkletの作り方 - catch.jp >http://www.catch.jp/wiki/index.php?Bookmarklet%A4%CE%BA%EE%A4%EA%CA%FD]]
[[Bookmarklet - ブックマークレットを作成する際のポイント >http://www.teria.com/~koseki/memo/bookmarklets/tips.html]]
**実際に作る上での便利なツールと、作ったときに動かない場合の解決法
***ツール：javascriptで書いたスクリプトをfirefoxのブックマークレットに変換
[[Bookmarklet Builder >http://subsimple.com/bookmarklets/jsbuilder.htm]]
[[bookmarkletで選択文字列を取得することを考える - 徒書 >http://www.akatsukinishisu.net/itazuragaki/js/get_selected_text.html]]
***chromeでブックマークレットを作ったが動かない場合
URLが、https://で始まるページは、ブックマークレットが動かない場合があります。
例えばグーグルのトップページのURLもこのパターンです。https://www.google.co.jp/
まずは「https://」ではなく、sの入らない「http://」で始まるページで動作確認をしましょう。
そのうえで、「https://」のページでもブックマークレットを動かせるようにします。
[[Google Chromeでhttpsで動かないブックマークレットがあるときのメモ | monolis >http://www.monolis.net/2012/11/google-chromehttps.html]]
*３．難しいブックマークレットを見てみる。
javascriptのライブラリや、ブラウザ以外のソフトと連携するようなもの。
[[XPath検索バー (for Mozilla/Firefox) | 東京嫉妬 >http://tokyoenvious.xrea.jp/b/javascript/xpath_finder.html]]
コメント：ライブラリは使ってないが、自分で外部にファイルをつくり、呼び出している。
[[はてなブックマーク - aki77のブックマーク - bookmarklet >http://b.hatena.ne.jp/aki77/bookmarklet/]]
[[“なかのひと”の解析結果をExcelで使えるようにする便利ブックマークレットを作ってみた | Web担当者Forum >http://web-tan.forum.impressrd.jp/e/2008/11/07/4330]]
*４．難しいのをつくってみる。
javascriptのライブラリを使用するような、ちょっと難しいブックマークレット。
[[SDP - エスデーペー » 外部からjsファイルを読み込むbookmarklet >http://sdp.katteyomi.info/?p=33]]
[[hail2u.net - Weblog - 設定を外部JavaScriptファイルから読み込む >http://hail2u.net/blog/coding/load-settings-from-external-javascript-file.html]]
[[右クリックで Bookmarklet を実行する | Life Hacks Lite >http://www.lifehackslite.com/hacks/2007-11/196.html]]
[[JavaScriptで遅延ロードをする方法についてのおさらい - Clouder::Blogger >http://blog.clouder.jp/archives/000631.html]]より。
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);
// prototype.jsで使いたい関数が読み込まれてから、その関数を使っての処理
wait('Class.create', function() {
// 実行したい処理
alert("Class.create loaded!");
var newclass = new Class.create();
});
*未分類・未読：他に参考となりそうなページ：
[[要素の追加 (append) >http://www9.plala.or.jp/oyoyon/html/script/append.html]]
外部jsファイルを読み込んで、ロードが完了するのを待った後、指定の関数を実行する
[[遅延ロードでJavaScriptのお勉強 - Born Neet >http://blog.bornneet.com/Entry/114/]]
[[ブックマークレットからjQueryを読み込む方法 | THE HAM MEDIA >http://h2ham.seesaa.net/article/115498697.html]]
[[最速インターフェース研究会 :: HTMLドキュメントを解析して特徴的なループを見つけるBookmarklet >http://la.ma.la/blog/diary_200705301424.htm]]
[[ Google Contacts/Calendar API for JavaScript をブックマークレットから呼び出す - snippets from shinichitomita’s journal >http://d.hatena.ne.jp/shinichitomita/20080725/1216985694]]
[[Karafuto Blog - Google AJAX Language APIを読みこむブックマークレット >http://karafuto50.blog117.fc2.com/blog-entry-207.html]]
[[他人のサイトで外部ファイルのJavascriptを読み込むブックマークレットの作り方 - 蟲！虫！蟲！ - #!/usr/bin/bugrammer >http://bugrammer.g.hatena.ne.jp/nisemono_san/20110919/1316360776]]
#amazon2(728x90)
*ページフッタ
&link_edit(text=ここを編集)
**このページの1階層上のページ
&link_parent()
**このページの1階層下のページ
#lsd()
**このページに含まれるタグ
&tags()
**このページへのアクセス数
今日：&counter(today)
昨日：&counter(yesterday)
これまで合計：&counter(total)
