Pasta-K @ KMC
tyageくんが忙しそうだったので、急遽pastakが担当することになりました。勉強会中は資料とかなしに進めたので、ここに復習用にまとめておきます。
念のため過去の資料は http://slideshare.net/KMC_JP にあります。
ブックマークレットを公開して社会貢献しよう
- 便利なブックマークレットを作る
- ブックマークレットを公開する
- 拡散する
- 褒められる
- 世界平和
ブラウザのお気に入り（ブックマーク）から呼び出して実行するJavaScript。
任意のページで任意のJavaScriptを実行できるので色んなWebサイトを便利にしたり不便にしたりできる。
ブックマークレットを公開したりできるサイト。はてなidでログインすると色々出来る。
使い方など
tyageくんが作ったサンプルをうｐしてますね
javasript:something.javascript.code();void(0);javascript:alert(document.title);void(0);- 基本は埋め込みのJavaScriptと同じに書く
- 改行などを全て削除する
- 先頭に
javascript:を付与する
- 前述の Hatena::let とかを使うと改行を消すとかその辺良い感じにやってくれる。
ブックマークレットを書く時は最後にvoid(0)と書くようにしましょう（自分が過去に書いたブックマークレットを見たら、最後にvoid(0)って書く代わりにundefinedって書いてた）。
理由に関しては http://meme.efcl.info/2011/05/javascriptvoidvoid.html に書いてあります。
また、ブラウザのURLフォームに直接コピペして実行する際、GoogleChromeでは先頭のjavascript:を削除してしまうので、コピペする前か後に入力する必要があります。
document.getElementsByClassName()- クラス名から要素を取得。返り値は配列なので注意
location.href- 現在表示しているページのURLが入ってる。
// http://example.comを表示している時
console.log(location.href) // => http://example.com
location.href = 'http://kmc.gr.jp/'; // => http://kmc.gr.jpに遷移Node.textContent- DOM要素内のテキストを取り出します。
- 同様の挙動を期待するプロパティとして
innerTextがありますが、元々IEの独自実装だったため非標準ですので、使わないようにしましょう。
- jQueryを使いたい時
- 対象ページにすでに読み込まれていたら不要
- URLの文字数制限でブックマークレット内に文字列として全てを埋め込むことが不可能な場合
- IEでは2083文字まで http://support.microsoft.com/kb/208427/ja
- その他のブラウザは数万文字まで可能。
下記のように書くとscriptタグが埋め込まれた時にsrc属性内のJavaScriptファイルが読み込まれ実行される。
jQueryを使う場合はjQueryの読み込みが終了したことを確認してから実行する必要がある。（もし読み込みが終わってないと、$などが見つからずにエラーになる）
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://code.jquery.com/jquery-2.0.3.min.js';
document.body.appendChild(s);
var timer=setInterval(function(){
if($){
clearInterval(timer);
/*jQuery読み込んでたら（$関数が存在すれば）以下を実行*/
console.log($('td>a').text());
}
},100);https://gist.github.com/pastak/6008052
Hatena::letを使う場合は@require http://code.jquery.com/jquery-2.0.3.min.jsと始めの方に書けば良いそうです。
楽ちん。
aタグのhref属性内に書いて、その要素をドラッグアンドドロップするように誘導する。
<!-- テキストのみ -->
<a href='javascript:alert(0);void(0)'>ブックマークレット！！！！！！</a>
<!-- 画像を利用する場合はalt属性の値がブックマーク時のタイトルになる-->
<a href='javascript:alert(0);void(0);'><img src='this_is_bookmarklet.png' alt='ブックマークレット！！！！！'></a>スマートフォンのブラウザでもブックマークレットは使用可能。
ただし、iPhone版Safariではjavascript:から始まるaタグをブックマークすることが不可能なので、次のような回避法がある。
- テキストとして掲載し、ユーザー自身がブックマークを編集して追加する
- 次のような形式のリンクを提供する。
次のリンク先をお気に入りに追加した後に、?以前を削除してください
<a href='dummy.html?javascript:alert(1);void(0);'>ブックマークレット</a>