私が普段使っているブックマークレットの解説・使い方
必須でしょ
ブックマークレットとは
ブックマークレット(Bookmarklet)とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。拡張機能の中身やページ内で実行されるプログラムと中身は一緒だったりする。
ブックマークレットの使い方
ブックマークやお気に入りに適当なページを登録してURLを編集するか、ブックマークレットのコードをブックマークバー等にD&Dして登録する。
ブックマークレットはクリックして実行する。また、アドレスバーにブックマークレットの名前を入力し選択して実行することもできるので、例えばGoogle検索ならbgjp
、Twitter検索なら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検索が出来る。下の表に纏めておいた。
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が反映されている筈だ。