Skip to content

Instantly share code, notes, and snippets.

@pastak
Last active Dec 19, 2015
Embed
What would you like to do?

Webページで学ぶJavaScript 2013 第9回 復習用

Pasta-K @ KMC

tyageくんが忙しそうだったので、急遽pastakが担当することになりました。勉強会中は資料とかなしに進めたので、ここに復習用にまとめておきます。

念のため過去の資料は http://slideshare.net/KMC_JP にあります。

今回のお題

ブックマークレットを公開して社会貢献しよう

  1. 便利なブックマークレットを作る
  2. ブックマークレットを公開する
  3. 拡散する
  4. 褒められる
  5. 世界平和

ブックマークレットとは?

ブラウザのお気に入り(ブックマーク)から呼び出して実行するJavaScript。
任意のページで任意のJavaScriptを実行できるので色んなWebサイトを便利にしたり不便にしたりできる。

Hatena::let

http://let.hatelabo.jp/

ブックマークレットを公開したりできるサイト。はてなidでログインすると色々出来る。

使い方など

tyageくんが作ったサンプルをうpしてますね

ブックマークレットの書き方

基本書式

javasript:something.javascript.code();void(0);

サンプル

javascript:alert(document.title);void(0);

書き方のポイント

  1. 基本は埋め込みのJavaScriptと同じに書く
  2. 改行などを全て削除する
  3. 先頭に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の独自実装だったため非標準ですので、使わないようにしましょう。

ブックマークレットから外部のJavaScriptを読み込む

使用用途

  • jQueryを使いたい時
    • 対象ページにすでに読み込まれていたら不要
  • URLの文字数制限でブックマークレット内に文字列として全てを埋め込むことが不可能な場合

書き方

下記のように書くと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と始めの方に書けば良いそうです。

ブックマークレットを公開する

Hatena::letを使う

楽ちん。

自分のサイトとかブログで配布したい

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>

その他tipsなど

スマートフォンのブラウザでもブックマークレットは使用可能。 ただし、iPhone版Safariではjavascript:から始まるaタグをブックマークすることが不可能なので、次のような回避法がある。

  • テキストとして掲載し、ユーザー自身がブックマークを編集して追加する
  • 次のような形式のリンクを提供する。
次のリンク先をお気に入りに追加した後に、?以前を削除してください
<a href='dummy.html?javascript:alert(1);void(0);'>ブックマークレット</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment