私が普段使っているブックマークレットの解説・使い方

必須でしょ

ブックマークレットとは

ブックマークレット(Bookmarklet)とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。拡張機能の中身やページ内で実行されるプログラムと中身は一緒だったりする。

ブックマークレットの使い方

ブックマークやお気に入りに適当なページを登録してURLを編集するか、ブックマークレットのコードをブックマークバー等にD&Dして登録する。
ブックマークレットはクリックして実行する。また、アドレスバーにブックマークレットの名前を入力し選択して実行することもできるので、例えばGoogle検索ならbgjpTwitter検索ならbtwitterという様に、打ち易く且つ干渉しにくい名前にするとコマンドを実行するように(PC版ChromeならF6->bgjpと入力->Tabで選択->Enter、スマホChromeならアドレスバーをタップ->bgjpと入力->ブックマークレットをタップ)ブックマークレットを実行できるのでおすすめ。

ブックマークレット

キーワード検索ブックマークレット

javascript:(function() { var t = ''+(window.getSelection ? window.getSelection(): document.getSelection ? document.getSelection(): document.selection.createRange().text); if(!t) { L=document.location.href; if(L.match(/(\?.*\b)q=([^&]+)/))t=decodeURIComponent(RegExp.$2); } if(!t)t = prompt("twitter.com",""); if(t)open('https://twitter.com/search?q='+encodeURIComponent(t)+'','_blank'); } )()

このブックマークレットを実行すると、
1.選択している文字があればそれを変数とする
2.google検索のページの検索ボックスに入力されている文字があればそれを変数とする
3.検索ボックスが現れる
その変数をhttps://twitter.com/search?q=の後に補完してそのページに飛ぶという仕組みである。要するにtwitter検索ブックマークレット
ただ、用途に合わせて検索するサイトを変える事ができる。例えば、
https://twitter.com/search?q=https://www.google.com/webhp?gl=us&hl=en&gws_rd=cr&pws=0#gl=us&hl=en&pws=0&q=に変えることで米国版Google検索が出来る。下の表に纏めておいた。

検索URL サイト
http://www.google.co.jp/search?q= 日本版Google
https://www.google.com/webhp?gl=us&hl=en&gws_rd=cr&pws=0#gl=us&hl=en&pws=0&q= 米国版Google
https://www.google.com/webhp?gl=uk&hl=en&gws_rd=cr&pws=0#gl=uk&hl=en&pws=0&q= 英国版Google
https://www.google.com/webhp?gl=cn&hl=zh&gws_rd=cr&pws=0#gl=cn&hl=zh&pws=0&q= 中国版Google
https://www.google.com/webhp?gl=ru&hl=ru&gws_rd=cr&pws=0#gl=ru&hl=ru&pws=0&q= ロシア版Google
https://www.google.com/webhp?gl=kr&hl=ko&gws_rd=cr&pws=0#gl=kr&hl=ko&pws=0&q= 韓国版Google
https://trends.google.co.jp/trends/explore?q= Googleトレンド
https://www.google.co.jp/maps/search/ Googleマップ
https://translate.google.co.jp/?hl=ja&tab=wT#auto/ja/ Google翻訳(外国語→日本語)
https://drive.google.com/drive/search?q= GoogleDrive
https://ndlonline.ndl.go.jp/#!/search?keyword= 国立国会図書館
https://www.instagram.com/ Instagramユーザ名
https://twitter.com/search?q= Twitter
https://twitter.com/search?s=follows&f=tweets&vertical=default&q= Twitter(フォローしているユーザーのみ、すべてのツイート)
http://twitcasting.tv/search/text/ ツイキャスユーザ
https://feedly.com/i/spotlight/ Feedly
http://www.yodobashi.com/ec/category/index.html?cate=&word= ヨドバシ・ドット・コム
https://www.amazon.co.jp/exec/obidos/external-search/?keyword= Amazon
https://www.google.co.jp/search?q=%E3%83%A4%E3%83%9E%E3%83%88+ クロネコヤマト追跡(Googleを使用)
https://trackings.post.japanpost.jp/services/srv/search/direct?reqCodeNo1= 日本郵便追跡
http://tsutaya.tsite.jp/search/ TSUTAYA
http://mora.jp/search/keyword?keyWord= mora
http://www.e-onkyo.com/search/search.aspx?q= e-onkyo
https://musicbrainz.org/search?query= MusicBrainz
https://www.google.co.jp/search?q=site%3Aitunes.apple.com iTunes(Googleを使用)
http://www.kasi-time.com/allsearch.php?q= 歌詞タイム
https://www.youtube.com/results?search_query= YouTube
http://www.nicovideo.jp/search/ ニコニコ動画
https://soundcloud.com/search?q= SoundCloud
http://jpon.xyz/s/2012/ 住所でポン!
https://stackoverflow.com/search?q= Stack Overflow
https://www.axfc.net/u/search.pl?search_str= Axfc Uploader
http://www.irasutoya.com/search?q= いらすとや
http://minecraft-ja.gamepedia.com/ Minecraft Wiki
http://search.2ch.net/search?q= 2ch

prompt("twitter.com","")は検索ボックス上部のただの表示なのでお好みに変えてください。不必要ならprompt()

ページをミニウィンドウで開くブックマークレット

https://mobile.twitter.com/notificationsを変えることで開くページを自由に変えられる。
width=400,height=800で横幅と縦幅(単位:px)を変えられる。

javascript:(function(){open('https://mobile.twitter.com/notifications','_blank','width=400,height=800');})()

リーダー表示

Instapaperのリーダー機能を呼ぶ。初回利用時はアカウントを作成(無料)する必要がある。

javascript:(function(){document.location.href='https://www.instapaper.com/text?u='+top.document.URL;})()

Google翻訳

1.選択している文字があればそれを変数とする(キーワード翻訳)
2.選択している文字が無ければURLを変数とする(ページ翻訳)

javascript:(function(){var b=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));if(b!=''){window.open('https://translate.google.co.jp/?hl=ja&tab=wT#auto/ja/'+encodeURIComponent(b));}else{window.open('https://translate.google.co.jp/translate?hl=ja&sl=auto&tl=ja&u='+encodeURIComponent(location.href)+'&act=url');}})();

Google画像検索

画像URLのページを開いた状態で実行すると、Google画像検索ができる。Chrome以外のブラウザで便利。

javascript:(function(){ location.href="https://www.google.co.jp/searchbyimage?hl=ja&safe=off&tbo=d&site=search&image_url="+location.href; return; })()

Googleキャッシュ検索

消えてしまった、改変されてしまったページの古いバージョンのキャッシュがGoogleに残っていないかを探す。ある程度の閲覧のあるページなら大抵残っているので、魚拓より役に立つ場合が多い。
現在のタブ

javascript:(function(){document.location.href='http://webcache.googleusercontent.com/search?q=cache:'+escape(document.location.href)})();

新しいタブ

javascript:(function(){window.open('http://webcache.googleusercontent.com/search?q=cache:'+escape(document.location.href));})()

Feedly検索

ブログやメディアのトップページで実行すると、新しいタブでURL検索をしてくれる。

javascript:(function(){window.open('https://feedly.com/i/discover/sources/search/feed/'+encodeURIComponent(document.location.href));})()

Amazon短縮URL

ふつうの

javascript:(function(){window.open('http://www.amazon.co.jp/dp/' + document.getElementById('ASIN').value);})()

Amazonアソシエイト(自分のIDに書き換えること)

javascript:(function(){window.open('https://www.amazon.co.jp/exec/obidos/ASIN/' + document.getElementById('ASIN').value + '/nyanshiba00-22/');})()

Twitter data-user-id

data-user-idとはユーザ名と違い自動で割り振られ、変更できない。これで紐付けられているため、ユーザ名を変更することが出来る。友人が行方不明になった時に探せます。
Twitterのユーザページで実行することで、プロフィール欄にdata-user-idのリンクを表示する。
ページのソースが残っていれば動作するので、魚拓やキャッシュにも使えると思います。

javascript: (function () { var d = $('.ProfileNav[data-user-id],div.permalink-tweet[data-user-id]').attr('data-user-id'); $('h1.ProfileHeaderCard-name').append('<a href="https://twitter.com/intent/user?user_id=' + d + '"><span>' + d + '</span></a>'); })()

Twitterオリジナル画像

Twitterで画像を新しいタブで開き、これを実行すると、オリジナル画像のURLに置き換わる。:orig:largeにすれば"大きなサイズの画像"となる。保存する時に便利。

javascript:(function(){document.location.href=top.document.URL+':orig';})()

TwitterDM共有

現在閲覧中のページのURLをDMで共有するブックマークレット
以前のようにd [ユーザ名] [本文やURL]でDMを送る機能が廃止されたので、モバイルサイトを利用してDMを送る。
この時、data-user-id(ユーザ名ではない)が必要になるが、mobile.twitter.comでDM欄に飛べばhttps://mobile.twitter.com/messages/[送信先data-user-id]-[送信元data-user-id]となっているのが分かる筈だ。[送信先data-user-id] [送信元data-user-id]に正しく補完してほしい。

javascript:var d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:(enc(s))),f='https://mobile.twitter.com/messages/[送信先data-user-id]-[送信元data-user-id]',l=d.location,p='?text='+s2+enc(l),u=f+p;try{if(!/^(.*.)?tumblrzzz[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a =function(){if(!w.open(u))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}void(0)

Line共有

現在閲覧中のページのURLをLineのタイムラインで共有するブックマークレット

javascript:(function(){document.location.href='https://lineit.line.me/share/ui?url='+escape(document.location.href)})();

YouTube広告回避

YouTubeの動画再生ページで実行すると、YouTubeの埋め込みURLを利用して広告を回避してくれる。
新しいタブで開く

javascript:var title = window.location.href;if (title.indexOf('https://www.youtube.com/watch') == 0) { (function(){ window.open(title.replace('watch?v=','embed/')); })(); }

新しいウィンドウ(480x270px)で開く

javascript:var title = window.location.href;if (title.indexOf('https://www.youtube.com/watch') == 0) { (function(){ window.open(title.replace('watch?v=','embed/'),'width=480,height=270'); })(); }

YouTubeダウンロード

svnpenn氏作のスクリプトからForkさせて頂いたものにアクセスし読み込んでいる。
YouTube再生ページで実行すると、読み込まれている映像・音声のURLが表示される。

javascript:q=document;q.body.appendChild(q.createElement('script')).src='//rawgit.com/nyanshiba/bm/master/yt-dl/yt-dl.js';void(0)

iTunesフルサイズジャケット画像ダウンロード

itunes.apple.comの任意のページで実行すると表示されているジャケット画像の最も大きなサイズを取得できる。
キーワード検索ブックマークレット(https://www.google.co.jp/search?q=site%3Aitunes.apple.com)と併用すると便利。

javascript: (function() { function productImg() { var pi = document.getElementsByTagName('meta'); for(i=0;i<pi.length;i++){ if(pi[i].getAttribute("property")=="og:image"){ return pi[i].getAttribute("content"); } } return ""; } var metas = productImg(); window.open(metas.replace('1200x630bb.jpg', '10000x10000.png')); })();

PageSpeed Insights

計測したいページで実行する。

javascript:(function(){window.open('https://developers.google.com/speed/pagespeed/insights/?&url='+escape(document.location.origin));})()

ブックマークレットfaviconをつける

ページをブックマークすると付いてくるアイコン、ブックマークレットの場合は自動で付いては来ない。視認性が悪い為、必要な場合はURLエンコードされた画像を手動で書き加える必要がある。
1.ブックマークレットに使いたいfaviconの付いたページをブックマーク(例:Twitter検索ブックマークレットfaviconを付けたい場合はtwitter.comをブックマーク)
2.ブラウザでブックマークを"エクスポート"。htmlファイルがエクスポートされるはずだ。
3.htmlファイルをテキストエディタで開く。
4.初めにfaviconの付いたページの行を探し(Ctrl+F等で検索すると早い)、ICON="(省略)"をコピー。ここがfaviconを表している。

<DT><A HREF="https://twitter.com/" ADD_DATE="1490956452" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACgElEQVQ4jX1TTYscVRQ9577XVdXd00kclCHJaHCyCGQXyEoIuIq6CQg6O3FiwL0rNwr1FxxEDEFMAtlMyDIE4iaQdSQqutLRxUwy6gTy0d1VXR/3uKgeMWpy4W3uu/fcd949BwCAPDc8KyT+J5fr73o+VUjqX6UEoKULD1/tJfEM4Ikau7l9buE7bChZevD7Ab74VXksC7M3ttb2rwMANhSwyha5DDn94NeP3oxpdoW9ZBEEfDIuYfEy2mrYiudjFmYnmY0+W740PrT16/ATrLLZG7+4/mBfMHxJC4s+eTIDSUCZDbIPNfVNtrpugnZUF7Bs+PHy0ent5UvTt5HfGyCnh1FcAnjEy6mLSAD1QDaqmlru35J+k1hXenj0+Kpl/bfgiiChqtgEeQuCAzhLIgiQBIH00B+Gevr43ftrB67FQwuPTpnFFNXMRTRwN/bSFSbpCgSoeAJI3esJAh40KxnIKQBEZ/qzoX6d2UKiYuwkqaZyNZXPvyKQpLqNOC1SbTMpQ7wLALZztv+bE++grX+h0QFovr7A7kBdToIcaR8Abu++N7wPiAYA9zZHN1CVP5K2BwBy3tWhEaAIAm1LQZ93ggKtU9pP5rRtGwwSxjRA6mh3OBQgSI0NR9HLybXttf3XIRE5/SmZHrw4Ph1D+FTAa/JaBAyAQ3Ib7ut5Obnb1Dq988HC7lzEiq9cefhCUVWpKT1C+gm4L9Ni0+laxpgG9pLQFpNvZnWxtnvupT8BcY9qbGo7njL7iCGcscVBDy2gBlAtoCpc3v7gxfiL7fdH5+emmbP6p5ly2csr1XFHeYLgYcmNsD+A+P1Wv38Hq2z/r3luzedYeS82FJ519RceFTBxSvLCewAAAABJRU5ErkJggg==">Twitter / 通知</A>

5.次にブックマークレットの行を探し、 …} )()" ADD_DATE="1466623879">btwitter</A>の間に先程コピーしたICON="(省略)"をペーストする。

<DT><A HREF="javascript:(function() { var t = ''+(window.getSelection ? window.getSelection(): document.getSelection ? document.getSelection(): document.selection.createRange().text); if(!t) { L=document.location.href; if(L.match(/(\?.*\b)q=([^&]+)/))t=decodeURIComponent(RegExp.$2); } if(!t)t = prompt(%22twitter.com%22,%22%22); if(t)open('https://twitter.com/search?q='+encodeURIComponent(t)+'','_blank'); } )()" ADD_DATE="1466623879" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACgElEQVQ4jX1TTYscVRQ9577XVdXd00kclCHJaHCyCGQXyEoIuIq6CQg6O3FiwL0rNwr1FxxEDEFMAtlMyDIE4iaQdSQqutLRxUwy6gTy0d1VXR/3uKgeMWpy4W3uu/fcd949BwCAPDc8KyT+J5fr73o+VUjqX6UEoKULD1/tJfEM4Ikau7l9buE7bChZevD7Ab74VXksC7M3ttb2rwMANhSwyha5DDn94NeP3oxpdoW9ZBEEfDIuYfEy2mrYiudjFmYnmY0+W740PrT16/ATrLLZG7+4/mBfMHxJC4s+eTIDSUCZDbIPNfVNtrpugnZUF7Bs+PHy0ent5UvTt5HfGyCnh1FcAnjEy6mLSAD1QDaqmlru35J+k1hXenj0+Kpl/bfgiiChqtgEeQuCAzhLIgiQBIH00B+Gevr43ftrB67FQwuPTpnFFNXMRTRwN/bSFSbpCgSoeAJI3esJAh40KxnIKQBEZ/qzoX6d2UKiYuwkqaZyNZXPvyKQpLqNOC1SbTMpQ7wLALZztv+bE++grX+h0QFovr7A7kBdToIcaR8Abu++N7wPiAYA9zZHN1CVP5K2BwBy3tWhEaAIAm1LQZ93ggKtU9pP5rRtGwwSxjRA6mh3OBQgSI0NR9HLybXttf3XIRE5/SmZHrw4Ph1D+FTAa/JaBAyAQ3Ib7ut5Obnb1Dq988HC7lzEiq9cefhCUVWpKT1C+gm4L9Ni0+laxpgG9pLQFpNvZnWxtnvupT8BcY9qbGo7njL7iCGcscVBDy2gBlAtoCpc3v7gxfiL7fdH5+emmbP6p5ly2csr1XFHeYLgYcmNsD+A+P1Wv38Hq2z/r3luzedYeS82FJ519RceFTBxSvLCewAAAABJRU5ErkJggg==">btwitter</A>

6.htmlファイルを上書き保存(Ctrl+S)し、ブラウザに"インポート"。faviconが反映されている筈だ。