ブックマークレットとは?登録・設定・使い方【iPhone/パソコン】

ブックマークレットとは皆さん耳にしたことはありますか?ブックマークと似ているような名前ですよね。ブックマークレットを覚えてしまえば簡単にパソコンやスマホでもWebページを使うことができます。今回は便利なブックマークレットをご紹介します。

ブックマークレットとは?登録・設定・使い方【iPhone/パソコン】のイメージ

目次

  1. 1ブックマークレットを使おう
  2. そもそもブックマークレットとは
  3. ブックマークレットはどんな仕組み?
  4. 2ブックマークレットの使用例
  5. YouTubeがもっと楽しく&使いやすくなるブックマークレット
  6. TwitterなどのSNSで使えるブックマークレット
  7. Webページの閲覧が捗るブックマークレット
  8. 3パソコン版GoogleChromeでのブックマークレットの登録方法
  9. ブックマークバーを表示させる
  10. ブックマークを編集して設定する
  11. 4iPhone版Safariでのの登録方法
  12. ブックマークレットの使い方
  13. アプリと連動するブックマークレット
  14. 単独で便利なブックマークレット
  15. 5Android版GoogleChromeでのブックマークレットの登録方法
  16. 成功するパターン
  17. 失敗するパターン
  18. おわりに
  19. 合わせて読みたい!使い方に関する記事一覧

ブックマークレットを使おう

あまり聞きなれない『ブックマークレット』。ブックマークレットとはなんのことを表しているのでしょうか。名前から聞くとブックマークと何か近いものを感じますよね。

ブックマークレットはパソコンだけではなくiPhoneに搭載されているSafariでも使うことができます。もちろんGoogleChromeでも。今回はブックマークレットの詳しい使い方などをご紹介します。

そもそもブックマークレットとは

ブックマークレット とは何かというと、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことです。ブックマークブラウザとは携帯電話のウェブブラウザで足りない機能を補うことができます。

また、ブックマークレットではウェブアプリケーションの処理を起動する為に使われることが多いのです。設定をすればGoogleChromeだけではなくiPhoneやパソコンで使うことができます。

ブックマークレットとは設定しておけばすぐに使うことができる便利な機能です。

ブックマークレットはどんな仕組み?

ブックマークをクリック

あまり耳にしたことがないブックマークレットの使い方ですが上記の画面ではGoogleChromeからブックマークを編集するために編集ページを表示しようとしている画面です。ブックマークをクリックすると、以下のような画面になります。

ブックマークしたページのURLを表示させる

このように通常のGoogleChromeからのWebページであればパソコン、iPhoneやスマホ同様『https://』からURLは始まるのですがブックマークレットのURLの始まりは違います。

URLのはじめが”java”から

一方、こちらの画面はブックマークレットの編集画面。『URL』欄が大きく違いますね。先頭に『javascript:...』と書いてある通り、ブックマークレットは『JavaScript』というプログラミング言語でできた簡単なプログラムなのです。ここが大きな違い。

このプログラムがWebページに動くことによって、『ちょっと便利な機能』たちが使えるわけです。プログラミングって難しいとは言え、難しいことは考えなくて大丈夫です。使う側には、クリックしてウェブページへ飛ぶか、プログラムを動かすかの違いだけです。

プログラムといっても、何か危ないものではありませんし、パソコンに負担をかけるようなものでもないのです。

Thumb Androidブックマークをホーム画面に追加!ショートカットを作成しよう
皆さんAndroidのホーム画面にブックマークのショートカットはありますか?Androidを...

ブックマークレットの使用例

ブックマークレットの使い方によっては人気の動画サイトのYouTubeや流行りのSNSなどでも使うことができるのです。ここではブックマークレットを使うことによってパソコンやSafariのWebページでどのようにして楽しむことができるのかご紹介します。

YouTubeがもっと楽しく&使いやすくなるブックマークレット

ブックマークレットではなんと動画再生サイトのYouTubeにも活用することができます。通常はリピート再生できないYouTube動画ですがブックマークレットを使用することによってリピート再生を行うことができるのです。

再生したい動画のページでクリックすると、リピート再生サービス「YouTube Repeat」で動画を開きます。

YouTubeの画面の上でクリックする

YouTubeやSoundCloudなどに点在するウェブ上の音楽を一括整理できるサービスとしてSongdropというのもあります。ブックマークレット経由で音楽をどんどん登録すれば、まとめてSongdropのサイト上で楽しめます。

ブックマークレットの設定をしておけば曲順なども設定できるので、まるでオリジナルのアルバムを作るかのように遊べます。ウェブで音楽をたくさん聴く人には特にオススメです。

YouTubeの動画ページで起動すると、通常はない『ダウンロード』ボタンが表示されます。いくつかのファイル形式から選んで動画をダウンロードできます。

※ただし、ダウンロード利用に関しては、違法にアップロードされたコンテンツのダウンロードは刑に問われる可能性がありますのでくれぐれもご注意をしてブックマークレットを使いましょう。

YouTube動画を見ながら、「この動画の最初の40秒って不要じゃね?」と思ったことありませんか? このような経験のある方もシンプルなブックマークレットを一つ使えば動画が30%経過した部分まで見れるので動画の核となる見たい部分をすぐに視聴できます。

Wadsworth Constant(ワズワース定数)とは、ユーザーのWadsworth氏が「Reddit」のスレッド上で提案した定理で、YouTube動画の最初の30%は時間の無駄であり、最初の30%をスキップしても大切な部分はちゃんと見られるというものです。

これはインターネットミームとして急速に広がっていったのですが、Redditによると、YouTubeでこのWadsworth Constant機能が追加できるようになっているそうです。そのやり方はURLの末尾に「&wadsworth=1」を追加すれば完了です。

TwitterなどのSNSで使えるブックマークレット

ブックマークレットの使い方の一つとしてSNSへ投稿するボタンがないようなページでも、TwitterやFacebook、はてなブックマークなど、任意のSNSへリンクをつけて投稿できます。

Twitter公式サイトや『ついっぷる』などのWebページなどのブラウザ上で動作するクライアントで使えるブックマークレット。

あらかじめハッシュタグを登録し、ブックマークレット化しておくのです。あとは、ツイートの入力ボックスを選択した状態で起動させます。

そうすることによって設定したハッシュタグがすぐに挿入できます。機能は限定されていますが、イベントやスポーツの試合など、同じハッシュタグをつけてたくさんつぶやきたい時に使える便利な使い方です。

Twitterをやっているユーザーであれば使えるのがこのソースコード。閲覧しているWebページがTwitter上に何ツイートされているのかを表示するブックマークレットです。SNSが浸透している今だからこそ使ってみてもいいかもしれませんね。

javascript:(function(){window._fbt=function(t){var tc=”;if(t.count!=null){tc=t.count;}else{tc=’0′;}alert(‘このページがtweetされた数:’+tc);};var s=document.createElement(‘scr’+’ipt’);s.src=’http://urls.api.twitter.com/1/urls/count.json?url=’+document.URL+’&callback=_fbt’;document.body.appendChild(s);})();

Webページの閲覧が捗るブックマークレット

ブックマークレットとは『送信用』と『受信用』の2種類があります。デバイス間のURL共有することに便利です。少し設定をする必要がありますが、デバイスやWebページなどのブラウザを選ばず簡単にURLのやりとりができます。

例えば、パソコンでで見ていたWebページを『送信』、手元にあるiPhoneを『受信』しておけば続きを読むことが可能です。これまでわざわざ自分宛にURLを入れたメールを送っていた...なんていう方にはとっても嬉しい機能ですね。

つまりパソコンのWebページで見ていたものをSafariでも同じように見ることができるということです。必ず持ち運ぶiPhoneですから暇さえあればSafariを開いたりすることがあると思うので便利な機能かと思います。

Webページに書き込み・保存・書き出しができるツール」としてもある、『Scrible』のブックマークレット。ハイライトを引いたりコメントつけたりした後、ファイルに書きだしてオフラインに保存も可能です。

パソコンやスマホで論文などの参考資料としてWebページを使う場合など、特に役立ちそうなサービスです。

何気に一番使っているのはこのブックマークレットかもしれません。Googleのアカウントでログインした状態でGoogleChromeで検索をした際、よく見ているページなどを検索上位に掲げる『パーソナライズ検索』。

しかし、ブログやWebページなどのメディア、もしくはECサイトを運営している方なら自分のページが検索で『自分のWebページは何番目に表示されているのか』は気になりますよね。

『Google Personalized Off』というブックマークレットを使えば、アカウントからログアウトすることなく、パーソナライズ検索を無効にできます。

今ではオンラインブックが流行っていますよね記事上で書籍を紹介する際に、Amazonや楽天ブックスなどのオンライン書店へのリンクを表示させるためのブックマークレットをご紹介します。

書籍紹介をする際に、その都度URLやサムネイル画像を取得するのは手間がかかりますが、このブックマークレットを使用すればワンクリックでリンクを取得することができます。取得できる情報は、主に次の5つです。『該当書籍のタイトル』は必ずあるといいでしょう。

また『オンライン書店のURL』『著者名』『出版社』『刊行日』があればすぐに挿入することができます。avascript:window.open('http://yomereba.com/blogparts/?&url='+encodeURI(document.location.href));undefined;

こちらはexciteの翻訳サービス『エキサイト翻訳』のブックマークレットです。今では海外の人と簡単にやりとりができる時代です。特にSNSなどは世界共通なので私もインスタなどでよくメールが英語で来ることがあります。そんなとき使うのが翻訳サイト。

javascript:(function(){var cur=document.location.href;var target=’http://www.excite-webtl.jp/world/english/web/?wb_url=’+encodeURIComponent(cur)+’&wb_lp=ENJA&wb_dis=2′;window.open(target,’_blank’);})();

ThumbGoogle Chromeのブックマークをエクスポート・インポートする方法
ブラウザの中で人気のChrome。PCの買い替えやブラウザの乗り換えで、お気に入り(ブックマ...

パソコン版GoogleChromeでのブックマークレットの登録方法

Chromeなどのブラウザで『ブックマーク』は利用したことがある方が多いかと思います。ブックマークはよくアクセスするWebページのURLを携帯電話の電話帳のように登録しておき設定しておけば、すぐにアクセスできるようにしておく便利な機能です。

ブックマークバーを表示させる

パソコンにブックマークバーを表示させる

まずはパソコンのブックマークバーを表示させてください。もし、ブックマークバーが表示されなかったら画面の右上にあるメニューをクリックし『ブックマーク』にカーソルを合わせると『ブックマークバーを表示』という項目があるのでチェックをしましょう。

するとブックマークバーを表示させることができます。

ブックマークを編集して設定する

ブックマークの編集を開いてURLを消す

ブックマークレットしたいブックマークの上で右クリックします。すると、『編集』という項目があるのでこちらをクリックしてください。すると上記の画面のようになります。ブックマークレットをパソコンで設定する使い方をご紹介します。

私も試してみましたが、ブックマークレットを使うのには専用のソースコードが必要になるのですね。例えば『下にスクロールする』というブックマークレットのソースコードがあるので今のURLを消し、そちらをコピーして貼り付けます。

この作業だけでブックマークレットの設定を行うことができるのです。

「ドラッグ&ドロップ」による登録

ブックマークバーを表示

『ドラッグ&ドロップ』でブックマークレットを登録する場合は、GoogleChromeの『ブックマークバー』にブックマークレットを左クリックで選択してそのまま『ドラッグ&ドロップ』するだけです。

ブックマークを表示させる

もし『ブックマークバー』が表示されていない場合は、アドレスバーの右端にある『メニューボタン』を右クリックしましょう。メニュー内の『ブックマーク』にカーソルを合わせるとサブメニュー内の『ブックマークバーを表示』にチェックを入れます。

すると『ブックマークバー』を表示することができます。また、キーボードの「Ctrl」+「Shift」+「B」キーを押すことで、『ブックマークバー』を表示することも可能です。

「手入力」による登録方法

ブックマークの『編集』を表示

ブックマークレットのソースコードを手入力でGoogleChromeに登録することも可能です。まず、適当なウェブページを『ブックマークバー』に登録します。次に、登録したブックマークを右クリックするとメニュー内の『編集』が表示されます。

これをクリックして、ブックマークの「プロパティ画面」を表示します。そして、プロパティ画面の『URL』の欄にブックマークレットのソースコードを入力します。これだけでパソコンでブックマークレットを使うことができます。

iPhoneでSafariやLINEなどを開くと下にスクロールしますよね。そんなときにすぐにページのトップに行きたい場合にはこちらのページのトップに行く『javascript:(function(){ scrollTo(0, 0); })()』ソースコードを使うのが便利です。

ダミーで作ったブックマークのURL欄を変える

サイトによっては、このようにブックマークレットのソースコード。つまり、JavaScriptコードが直接書いてあることもあります。この場合は、ダミーのブックマークを作成し、URL欄を書き換えてあげましょう。

ブックマークに記載されているURLとブックマークレットのURLの違いは「URL欄に何が書いてるか」でしたね。

ThumbChromeのブックマーク(お気に入り)を登録・削除・編集する方法
Chrome ブックマーク(Chrome お気に入り)を自由に登録、編集、削除する方法を解説...

iPhone版Safariでのの登録方法

ブックマークレットは、その名の通り『ブックマーク』を使ってブックマークレットを登録をします。少しだけ登録方法が複雑なのですが難しく考えずに手順を踏まえて行ってみてください。まずは適当にSafariでページを開きブックマークします。

iPhoneでブックマークする

iPhoneで適当なページをブックマークしたら、ブックマークレットのプログラム(コード)をコピーしましょう。ブックマークレットは『java~』から始まるものでしたよね。難しいと感じる方でも頑張ってくださいね。次に、Safariのブックマークを開きます。

Safariのブックマークにある左下の『編集』をタップしてください。そして先ほど作成したブックマークを開きます。

iPhoneのブックマークのURLを編集

ブックマークの編集を開くと上記の画面になりますよね。そうしましたら、URLのところを削除してに、先ほどコピーしたブックマークレットを貼付けてください。必要であればタイトルも修正してこれでおしまいです!覚えてしまえば簡単です。

下にスクロールするするブックマークレットを入力した表示

するとiPhoneのSafariでページを開くと下にスクロールする画面になります。そうです。私が入力したのは下にスクロールするソースコードです。iPhoneでも行えるのは嬉しいですね。

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

ブックマークレットを使いたいページを開く

一度作ってしまったら、あとはとても簡単です。
まず、ブックマークレットを使いたいと思ったページを開きましょう。開きましたか?

ブックマークレットを開く

開いたら、ブックマークレットをタップ!これでブックマークレットが機能します。Safariのブラウザに戻るとページが下までスクロールされています。色んな種類のブックマークレットがあるのでメモなどに残しておくといいでしょう。

一度設定してしまえばSafariでもパソコンと同様にChromeで簡単に行えることができます。必要なものはブックマークレットの設定をいくつかしておきましょう。

アプリと連動するブックマークレット

iPhoneでコピーをする場合、テキストは右端よりも右にとび出してコピーできないというケースがあります。そういった場合には次の行のテキストまでコピーして、最終行を削除するという方法でコピー下さい。

例えば、『読んでいるページをGoogle Readerに追加』のブックマークレットをコピーする場合『javascript:var%〜』から『読んでいるページをInstapaperに追加』までコピーします。後で『読んでいるページをInstapaperに追加』を消します。

すると、正しくブックマークレットをコピーすることができます。

単独で便利なブックマークレット

読んでいるWebページをFacebookでShareする場合には

『javascript:vard=document,f=’http://www.facebook.com/share’,l=d.location,e=encodeURIComponent,p=’.php?src=bm&v=4&i=1271771052&u=’+e(l.href)+’&t=’+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+’r’+p,’sharer’,’toolbar=0,status=0,resizable=1,width=626,height=436′))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)』

これを貼り付けましょう。

読んでいるWebページをTwitterでつぶやく場合には

『javascript:(function(){window.twttr=window.twttr||{};var%20D=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)}());』

を貼り付けましょう。

iPhoneでWebページでの最下部へ移動する場合には『javascript:window.scrollTo(0,document.documentElement.scrollHeight);』こちらを貼り付けてください。

「クレジットカード情報などの機密を含むメールをたったワンクリックで暗号化できる」ブックマークレットもあります。圧縮ファイルであればパスワードを設定できますが、Encipher.itは「文章そのもの」にパスワードをかけられます。

使い方はウェブメールの作成画面などに暗号化したいテキストを入力し、ブックマークレットを起動。パスワードの入力画面が表れます。設定するとテキストが暗号化されます。暗号化を解除するには、再度ブックマークレットを起動しパスワードを入力すればOK。

暗号化したテキストをやり取りするときは、双方がEncipher.itを使えなくてはならないのがややネックですが、TwitterのDMやFacebookメッセージで重要情報をやり取りするような使い方もあります。

また、何かブログなどを書くときや執筆をしたいときに便利なのが『類義語辞典』のソースコードです。こちらを設定しておくと文字をドラッグするだけで簡単に類義語辞典で意味などを調べてくれます。ソースコードはこちらです。

javascript:var d=document; var tx=d.selection?d.selection.createRange().text:d.getSelection(); var subw=window.open('http://thesaurus.weblio.jp/content/'+tx).document;

ThumbGoogle Chromeでブックマークを左側に固定表示する方法
Google Chromeでブックマークを表示させようと思って、面倒だと思ったことはありませ...

Android版GoogleChromeでのブックマークレットの登録方法

Android版のGoogleChromeでもブックマークレットは使うことができます。Android版のGoogleChromeでブックマークレットの使い方をご紹介します。

成功するパターン

Android版のGoogleChromeでブックマークレットを起動するには、ブックマークの一覧から選択せずに、URLの欄にブックマークレットのタイトルを入力して選択します。ちょっと、分かりづらいと思うので、順に見ていきます。

まず、先ほどブックマークの一覧でタップした「ブックマークレットのタイトル」を覚えます。

そしてこのブックマークレットのタイトルを覚えたら、ブックマークレットを起動したいページを表示し、URLの欄をタップします。そして、『ブックマークレットのタイトル』を入力します。

すると、”javascript:”で始まるブックマークレットが表示されますのでタップします。これで指定したブックマークレットが起動されるはずです!Android版でも同じGoogleChromeなので設定をすればiPhone以外でもスマホで使うことができます。

失敗するパターン

まず、失敗するパターンから。まず、ブックマークレットを利用したいページを表示します。そして右上のボタンをタップします。メニューが表示されるので、『ブックマークレット』を選択します。ブックマークが表示されるので利用したいブックマークレットを選択。

普通はコレでブックマークレットが起動すると思うのですが、失敗する場合には何も起きません。つまり見ていたページが表示されるだけです。

おわりに

ブックマークレットの使い方さえ覚えてしまえば、パソコンのWebページはもちろんですが、iPhoneでSafariを使ってブックマークレットの設定も行うことができます。意外と知られていない便利な機能。特に持ち運ぶiPhoneではSafariをよく使いますよね。

iPhoneでもSafariでブックマークレットの設定をしておけばお仕事の昼休みなどにも簡単に読むことができます。ぜひブックマークレットの使い方を覚えてくださいね。

合わせて読みたい!使い方に関する記事一覧

Thumb【iPhone】音声入力の便利な使い方と設定方法!フリック入力より便利!
iPhoneの音声入力を使ったことはありますか?Siriでしか使ったことがない方もいるかもし...
Thumb【Windows10新機能】クリップボードの履歴と同期機能の使い方
Windows10の最新バージョン・Windows10 Octorver 2018 Upda...
ThumbiOS12「Siriショートカット」の便利な使い方!操作を自動化しよう
iPhoneiOS12に対応したSiriショートカットというものをご存知でしょうか?仕事効率...
Thumb【iPhone】Safariプライベートブラウズとは?使い方や使いどころを解説
iPhoneユーザーなら、ほとんどの方は「Safari」というアプリを利用したことがあるので...

関連するまとめ

Original
この記事のライター
早乙女 美樹
元フィットネスインストラクター。 美容や健康、ファッションなどと幅広いジャンルの記事を担当し皆様に正しい情報を配...