1. まとめトップ

【iPad/PC】ブックマークレットを活用しよう【Android】

手軽にブラウザに機能を追加します。Firefox/Chrome/Safari/Opera他どのブラウザでも利用できます。iPadなどで拡張機能をサポートしていないブラウザにも、ブックマークレットを入れることで極力快適なブラウザにできます。一度登録すればずっと簡単に使えます。Pinterestを追加。

更新日: 2015年03月10日

8 お気に入り 16961 view
お気に入り追加

この記事は私がまとめました

felt87さん

iOSは8でApp Extensionが導入され、アプリから他のアプリへの共有機能が強化されてだいぶ便利になりました。safariからpocketやinstapaperへの共有が簡単にできます。少し前からtwitterやfacebookに共有してるのと同じ感じですね。Androidは以前から共有機能は便利ですね。ということでブックマークレットの活躍できる場所はPCくらいですか。それもブラウザの拡張機能があればそちらでできそう。よっぽどマイナーなことを求めない限りブックマークレットはなくてもいいかなって感じになりました。

私が今でも使うのはPCでchromeからツイートするときのtwitter公式のブックマークレットだけですね。

Twitter

javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());

ブックマークレットとは

ブックマークレット (Bookmarklet) とはJavaScriptで記述された小さなプログラムである。

たいていの場合、ウェブブラウザのブックマークに登録して利用することからこの名称となった。 登録したブックマークをクリックして使用する。
ブックマークレットを用いると、ウェブサイトを閲覧する際の補助として役立つ。特に携帯情報端末 (PDA) や携帯電話に搭載されたブラウザでは足りない機能をブックマークレットによって補うことが可能となる。

- PC -
パソコンのブラウザならば以下にあるスクリプトを選択してドラッグアンドドロップすれば登録できます。

- iPad/iPhone -
まず何でもいいのでブックマークを作ります。作ったブックマークを編集してブックマークレットにします。タイトルは自分で好きなように決めてもらって、アドレスに以下に貼ったスクリプトをコピーします。これで登録完了です。

iPadだとこのページからコピー出来ないみたいです。各項目のGood横、>マークから詳細ページに行くとコピーできます(ちょっと不便ですね)。スクリプトの最後にスペースが入らないように気をつけてください。

- Android -
AndroidでもiPadと同様に利用できます。登録方法も同じで、ブックマークを作成しアドレスに以下のそれぞれのスクリプトをコピーします。仮に登録したサイトのアドレスが残ってるとうまく動作しないので、ちゃんとスクリプトだけになってるか確認して下さい。これだけで利用可能です。共有・登録したいサイトでブックマークからブックマークレットを開くとPCと同じように動くはずです。

*Chrome限定でandroid端末に簡単に送る方法があります。PCでコードを選択しChrome to Phoneで送るとandroidのクリップボードにコピーされています。とても便利なのでChromeをお使いの方はぜひお試しを^^

ここではブラウザでブックマークレットを使う方法を書きましたが、Androidでは共有で他のアプリに受け渡すこともできますね。アプリがある場合はアプリに渡し、アプリが対応してないサービスではブックマークレットを利用するといった具合に、組み合わせて使ってもいいと思います。

Instapaper

javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/NVRIzitCNsj4?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)

Read It Later

javascript:(function(){ISRIL_H='0213';ISRIL_SCRIPT=document.createElement('SCRIPT');ISRIL_SCRIPT.type='text/javascript';ISRIL_SCRIPT.src='http://readitlaterlist.com/b/r.js';document.getElementsByTagName('head')[0].appendChild(ISRIL_SCRIPT)})();

はてなブックマーク

javascript:(function(){var d=(new Date);var s=document.createElement('script');s.charset='UTF-8';s.src='http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js?'+d.getFullYear()+d.getMonth()+d.getDate();(document.getElementsByTagName('head')[0]||document.body).appendChild(s);})();

Evernote

javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();

現在開いてるページをQRコード化

javascript:(function(){location.href='http://chart.apis.google.com/chart?chs=480x480&cht=qr&chl='+encodeURIComponent(location.href)})()

こちらを参考にしました。ほかにもツールはいろいろあるようですが、googleのAPIを使ってるここを選びました。PCからスマートフォンへの受け渡しに使えます。私はiPadで見れないFlashサイトをAndroid端末に受け渡すのに使ったりしています。
http://android-smart.com/2011/06/%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%81%8B%E3%82%89qr%E3%82%B3%E3%83%BC%E3%83%89%E7%94%9F%E6%88%90%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%A7%E6%89%8B.html

tumblr

javascript:var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='http://www.tumblr.com/share',l=d.location,e=encodeURIComponent,p='?v=3&u='+e(l.href) +'&t='+e(d.title) +'&s='+e(s),u=f+p;try{if(!/^(.*\.)?tumblr[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a =function(){if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=450,height=430'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}void(0)

Pinterest

javascript:void((function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());

Readability

http://www.readability.com/bookmarklets
ログインしてこのページから追加してください。

iPad/iPhone 操作編 スマホ

閉じるボタン

javascript:window.close();

参考

公式サイトで用意されてる場合はそこから持ってきてます。


Share Bookmarklet https://dev.twitter.com/docs/share-bookmarklet
Read Later bookmarklet http://www.instapaper.com/extras
Evernote web clipper http://www.evernote.com/about/download/web_clipper.php
Tumblrで共有 http://www.tumblr.com/goodies
Pin It! http://pinterest.com/about/goodies/
Readability http://www.readability.com/bookmarklets

1