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

ブックマークレットを利用すると、いろいろなかゆいところに手が届くようなことが出来るようになります。ブックマークレットとは?を紹介。

home HOME about About this site Mail Mail

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

Last update 2018-05-07 22:24

twitter Facebook はてブ LINE pocet

 

ブックマークレットとはなんでしょう?私もつい最近までよく知らなかったのですが、実際にいじってみるとすごくこれが便利!
さて、ブックマークレットとは何か、なんですけれど、実際に簡単なブックマークレットを見てもらえばすぐにわかると思います。

Sponsored Link

 

目次

動画でわかるブックマークレット

ブックマークレットとは、その名前からだいたい分かる通り、お気に入り(ブックマーク)を利用したブラウザの機能のことです。
今までブックマークというと、気に入ったサイトのURLを登録していつでも簡単にアクセスできるような使い方しかできませんでしたが、このURLの部分にJavaScriptを記入すると、あら不思議。ボタンをクリックした時にJavaScriptが実行されちゃうんです。

例えば?

例えば気に入ったページをtwitterやFacebookに投稿したいんだけれど、twitterのボタンや「いいね」ボタンが無かったり・・・なんてことがありますよね。
そんなページでも後で紹介する、つぶやきボタンのブックマークレットをクリックすると、新たにウインドウが開き、そのページに対してつぶやくことが出来ます。

最近老眼のせいか、たまにある小さな文字のサイトが読みにくくって・・・。なんて場合も、ブックマークレットに文字を大きくするJavaScriptを記載してクリックすれば、文字を強制的に大きくしたり・・・。

私はPHPと組み合わせて、ブックマークに入れるほどではないけれど、後でじっくり読みたい。なんてページをクリックすると保存して、後でPHPで作成したお気に入りページから開く。なんて使い方をしています。

ブックマークレットを使ってみる

では早速ブックマークレットを使ってみましょう。ブックマークレットはどのブラウザでも使用できますが、ここではInternet ExplorerGoogle Chromeで使う方法を紹介したいと思います。
Firefoxでもほとんど同じ方法で使うことが出来ます。
Edgeは少し厄介で、別ページで紹介します。Edgeでブックマークレットを使うには

Internet Explorerでブックマークレット

ツールバーのお気に入りバーまず、①メニューバーの「表示」をクリックし、②「ツールバー」を選択。
③「お気に入りバー」をクリックします。

お気に入りバーするとメニューバーの下にスペースが表示されます。
ここが「お気に入りバー」と呼ばれるスペースで、お気に入りをここに表示させることが出来ます。
本来は頻繁にアクセスするお気に入りをここに登録して、すぐにアクセス出来るようにするのですが、この「お気に入りバー」にブックマークレットを登録してみます。

アイコンをお気に入りバーにドラッグどのページでもいいのですが、今表示しているページのURLの左横にある小さなアイコンをマウスでクリックしたら、そのまま離さずに先ほど表示させた「お気に入りバー」にドラッグ。
「お気に入りバー」と重なったら、指を離します。

登録されたブックマークを右クリックすると「お気に入りバー」に表示されたページがお気に入りとして登録されました。

続いてこの登録されたお気に入りを右クリックし・・・

プロパティを選択「プロパティ」を選択します。

URLの部分にJavascriptを記入このような画面になるので、URLの部分を選択し、URLをすべて削除してください。

javascriptを記入する続いてこのURLが記載されていた部分に、

javascript:(function(){alert("こんにちは。世界!");})()

と入力し、「OK」をクリックします。

ブックマークレットをクリック「お気に入りバー」に登録されたお気に入りをクリックします。

アラートが表示されたこのようにアラートが表示され、「こんにちは。世界!」と表示されました。
本来はページにJavaScriptが記載されていないと、このようなアラートは表示させることが出来ませんが、ブックマークレットでは独自のJavaScriptを記入して、そのページに対して動作させることが出来ます。

Google Chromeの場合

メニューをクリックGoogle Chromeの場合もやり方はほとんど同じ。
Chromeの右上にあるメニューボタンをクリック。

ブックマーク バーを表示「ブックマーク」を選択し、「ブックマークバーを表示」を選択します。

URLの隣のアイコンをドラッグどのページでもいいので表示されているページのURLの左横にある小さなアイコンをクリックしたら、そのまま離さずに・・・

ブックマークバーに登録ブックマークバーの位置までドラッグしたら、離します。

ブックマークバーに登録すると、このようにブックマークバーに表示させていたページが登録されます。

右クリックして編集登録されたブックマークを右クリックし、「編集」をクリックします。

URLの部分を選択URLの部分に記載されているURLを削除します。

URLにJavascriptを記入ここにJavaScriptを記載します。
例えば・・・

javascript:(function(){document.body.innerHTML="こんにちは。世界!";})()

と入力してみます。
「名前」の部分は適当に変更してください。
エンターキーを押して登録します。

ブックマークレットを登録登録したブックマークレットをクリックしてみます。

ページにこんにちは。世界するとページが真っ白になって上の方に小さく、「こんにちは。世界!」と表示されました。

便利なブックマークレット集

上のサンプルだと、「それが出来たからってなんなの?」と言われそうなので、便利な私が考えたブックマークレットを紹介しておきます。

twitterに投稿ボタン

twitterにつぶやくブックマークレットTwitterに投稿したいページに、ツイートボタンがない場合でもつぶやくことが出来ます。

javascript:(function(){window.open("https://twitter.com/intent/tweet?url="+encodeURI(document.location.href)+"&original_referer=" + encodeURI(document.location.href) + "&text=" + encodeURI(document.title))})()

Facebookに投稿

Facebookに投稿するブックマークレットいいねボタンがないページをFacebookに投稿したい場合に使用します。

javascript:(function(){window.open("://www.facebook.com/sharer.php?u="+encodeURI(document.location.href)+"&t="+encodeURI(document.title))})()

はてなブックマーク

はてなブックマークへ登録する気に入ったページをはてなブックマークに保存したい場合に使用できます。

javascript:(function(){window.open("http://b.hatena.ne.jp/entry/"+encodeURI(document.location.href))})()

Pocketに保存

pocketへ登録するブックマークレットPocketに保存したい場合に使用できます。

javascript:(function(){window.open("http://getpocket.com/edit?url="+encodeURI(document.location.href))})()

ページのリンクタグを取得

リンクタグを取得するブックマークレット私のようにブログを書いている人は、とあるページヘリンクを貼りたい時に、ページのURLを取得し、ページタイトルをアンカーとするタグを作成してくれるブックマークが非常に便利です。

javascript:(function(){window.prompt("リンク" , '<a href="'+document.location.href+'" target="new">'+document.title+'</a>');})()

フォントを大きくする

文字を大きくするブックマークレットCSSでフォントを小さく指定しているサイトってありますよね。そんなサイトでも文字を大きくするブックマークレットです。

javascript:(function(){document.head.innerHTML+="<style>body,h1,h2,h5,h3,h4,p,div,li{font-size: 24px !important;}</style>";})()

文字を強制的にメイリオに

游ゴシック体をメイリオにヤフーのトップページや、最近多い「游ゴシック体」のサイトを強制的に「メイリオ」にしてしまうブックマークレットです。

javascript:(function(){document.head.innerHTML+="<style>body,h1,h2,h5,h3,h4,p,div,li{font-family: 'メイリオ' !important;}</style>";})()

リンクを大きく

リンクのアンカーを大きくするタブレットなどタッチ操作ができる端末でサイトを見ていると、リンクをタップしようとしたら、別のページを開いてしまった。なんてことありますよね。
そんな時にAタグで囲まれたアンカーの文字を大きくしてくれるブックマークレットです。

javascript:(function(){document.head.innerHTML+="<style>p a{vertical-align:middle; font-size:150% !important;}</style>";})()

ページ内の画像を削除

画像を削除ページ内にある画像を全て削除します。
ただし、background-image などスタイルシートで指定された画像や、IFRAMEで外部のサイトをページ内に表示させている場合は、削除されない画像もあります。

javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/<img[^>]+>/g , "")})()

まとめ

このようにある程度JavaScriptができる人であれば、ブックマークレットを利用して、ちょっと便利に使うことが出来ます。
JavaScriptができなくてもコピペだけで登録完了できるので、色々なサイトで公開されている便利なブックマークレットを登録しておけば、よりネットサーフィンが便利になると思います。

さて、私は、先程も書いたとおり、ブックマークレットとPHPを組み合わせて、ボタンをクリックするだけで、どんどんPHPにページのURLとタイトル、説明文を送信し、保存するプログラムを自作して便利に使用しています。
ブックマークに登録する程でもないけれど、後でチェックしておきたいページが有る場合、そのブックマークレットをクリックすれば、裏でPHPに送信してガンガン保存してくれる便利なプログラムになっています。
私はタブを40個や50個ぐらい平気で開いたままにしてしまうのですが、困るのがWindows Updateとかで再起動しなければならない時。
ブックマークに登録してしまうと後で整理が大変だし、ブックマークに入れるほどでもないし、かと言って再起動後にじっくり読みたいし・・・。
なんてときに役立っています。

いずれ機会があればソースを公開したいと思います。

関連ページ

最終更新日 2018-05-07 22:24

 

twitter Facebook はてブ LINE pocet

Sponsord Link

 

投稿日:2016-01-06 | このページのトップへ | コメントを書く | 管理

カテゴリー

同じカテゴリーの記事