ブックマークレットとは?登録・設定・使い方【iPhone/パソコン】
ブックマークレットとは皆さん耳にしたことはありますか?ブックマークと似ているような名前ですよね。ブックマークレットを覚えてしまえば簡単にパソコンやスマホでもWebページを使うことができます。今回は便利なブックマークレットをご紹介します。
目次
- 1ブックマークレットを使おう
- ・そもそもブックマークレットとは
- ・ブックマークレットはどんな仕組み?
- 2ブックマークレットの使用例
- ・YouTubeがもっと楽しく&使いやすくなるブックマークレット
- ・TwitterなどのSNSで使えるブックマークレット
- ・Webページの閲覧が捗るブックマークレット
- 3パソコン版GoogleChromeでのブックマークレットの登録方法
- ・ブックマークバーを表示させる
- ・ブックマークを編集して設定する
- 4iPhone版Safariでのの登録方法
- ・ブックマークレットの使い方
- ・アプリと連動するブックマークレット
- ・単独で便利なブックマークレット
- 5Android版GoogleChromeでのブックマークレットの登録方法
- ・成功するパターン
- ・失敗するパターン
- ・おわりに
- ・合わせて読みたい!使い方に関する記事一覧
ブックマークレットを使おう
あまり聞きなれない『ブックマークレット』。ブックマークレットとはなんのことを表しているのでしょうか。名前から聞くとブックマークと何か近いものを感じますよね。
ブックマークレットはパソコンだけではなくiPhoneに搭載されているSafariでも使うことができます。もちろんGoogleChromeでも。今回はブックマークレットの詳しい使い方などをご紹介します。
そもそもブックマークレットとは
ブックマークレット とは何かというと、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことです。ブックマークブラウザとは携帯電話のウェブブラウザで足りない機能を補うことができます。
また、ブックマークレットではウェブアプリケーションの処理を起動する為に使われることが多いのです。設定をすればGoogleChromeだけではなくiPhoneやパソコンで使うことができます。
ブックマークレットとは設定しておけばすぐに使うことができる便利な機能です。
ブックマークレットはどんな仕組み?
あまり耳にしたことがないブックマークレットの使い方ですが上記の画面ではGoogleChromeからブックマークを編集するために編集ページを表示しようとしている画面です。ブックマークをクリックすると、以下のような画面になります。
このように通常のGoogleChromeからのWebページであればパソコン、iPhoneやスマホ同様『https://』からURLは始まるのですがブックマークレットのURLの始まりは違います。
一方、こちらの画面はブックマークレットの編集画面。『URL』欄が大きく違いますね。先頭に『javascript:...』と書いてある通り、ブックマークレットは『JavaScript』というプログラミング言語でできた簡単なプログラムなのです。ここが大きな違い。
このプログラムがWebページに動くことによって、『ちょっと便利な機能』たちが使えるわけです。プログラミングって難しいとは言え、難しいことは考えなくて大丈夫です。使う側には、クリックしてウェブページへ飛ぶか、プログラムを動かすかの違いだけです。
プログラムといっても、何か危ないものではありませんし、パソコンに負担をかけるようなものでもないのです。
ブックマークレットの使用例
ブックマークレットの使い方によっては人気の動画サイトのYouTubeや流行りのSNSなどでも使うことができるのです。ここではブックマークレットを使うことによってパソコンやSafariのWebページでどのようにして楽しむことができるのかご紹介します。
YouTubeがもっと楽しく&使いやすくなるブックマークレット
ブックマークレットではなんと動画再生サイトのYouTubeにも活用することができます。通常はリピート再生できないYouTube動画ですがブックマークレットを使用することによってリピート再生を行うことができるのです。
再生したい動画のページでクリックすると、リピート再生サービス「YouTube Repeat」で動画を開きます。
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’);})();
パソコン版GoogleChromeでのブックマークレットの登録方法
Chromeなどのブラウザで『ブックマーク』は利用したことがある方が多いかと思います。ブックマークはよくアクセスするWebページのURLを携帯電話の電話帳のように登録しておき設定しておけば、すぐにアクセスできるようにしておく便利な機能です。
ブックマークバーを表示させる
まずはパソコンのブックマークバーを表示させてください。もし、ブックマークバーが表示されなかったら画面の右上にあるメニューをクリックし『ブックマーク』にカーソルを合わせると『ブックマークバーを表示』という項目があるのでチェックをしましょう。
するとブックマークバーを表示させることができます。
ブックマークを編集して設定する
ブックマークレットしたいブックマークの上で右クリックします。すると、『編集』という項目があるのでこちらをクリックしてください。すると上記の画面のようになります。ブックマークレットをパソコンで設定する使い方をご紹介します。
私も試してみましたが、ブックマークレットを使うのには専用のソースコードが必要になるのですね。例えば『下にスクロールする』というブックマークレットのソースコードがあるので今のURLを消し、そちらをコピーして貼り付けます。
この作業だけでブックマークレットの設定を行うことができるのです。
「ドラッグ&ドロップ」による登録
『ドラッグ&ドロップ』でブックマークレットを登録する場合は、GoogleChromeの『ブックマークバー』にブックマークレットを左クリックで選択してそのまま『ドラッグ&ドロップ』するだけです。
もし『ブックマークバー』が表示されていない場合は、アドレスバーの右端にある『メニューボタン』を右クリックしましょう。メニュー内の『ブックマーク』にカーソルを合わせるとサブメニュー内の『ブックマークバーを表示』にチェックを入れます。
すると『ブックマークバー』を表示することができます。また、キーボードの「Ctrl」+「Shift」+「B」キーを押すことで、『ブックマークバー』を表示することも可能です。
「手入力」による登録方法
ブックマークレットのソースコードを手入力でGoogleChromeに登録することも可能です。まず、適当なウェブページを『ブックマークバー』に登録します。次に、登録したブックマークを右クリックするとメニュー内の『編集』が表示されます。
これをクリックして、ブックマークの「プロパティ画面」を表示します。そして、プロパティ画面の『URL』の欄にブックマークレットのソースコードを入力します。これだけでパソコンでブックマークレットを使うことができます。
iPhoneでSafariやLINEなどを開くと下にスクロールしますよね。そんなときにすぐにページのトップに行きたい場合にはこちらのページのトップに行く『javascript:(function(){ scrollTo(0, 0); })()』ソースコードを使うのが便利です。
ダミーで作ったブックマークのURL欄を変える
サイトによっては、このようにブックマークレットのソースコード。つまり、JavaScriptコードが直接書いてあることもあります。この場合は、ダミーのブックマークを作成し、URL欄を書き換えてあげましょう。
ブックマークに記載されているURLとブックマークレットのURLの違いは「URL欄に何が書いてるか」でしたね。
iPhone版Safariでのの登録方法
ブックマークレットは、その名の通り『ブックマーク』を使ってブックマークレットを登録をします。少しだけ登録方法が複雑なのですが難しく考えずに手順を踏まえて行ってみてください。まずは適当にSafariでページを開きブックマークします。
iPhoneで適当なページをブックマークしたら、ブックマークレットのプログラム(コード)をコピーしましょう。ブックマークレットは『java~』から始まるものでしたよね。難しいと感じる方でも頑張ってくださいね。次に、Safariのブックマークを開きます。
Safariのブックマークにある左下の『編集』をタップしてください。そして先ほど作成したブックマークを開きます。
ブックマークの編集を開くと上記の画面になりますよね。そうしましたら、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;
Android版GoogleChromeでのブックマークレットの登録方法
Android版のGoogleChromeでもブックマークレットは使うことができます。Android版のGoogleChromeでブックマークレットの使い方をご紹介します。
成功するパターン
Android版のGoogleChromeでブックマークレットを起動するには、ブックマークの一覧から選択せずに、URLの欄にブックマークレットのタイトルを入力して選択します。ちょっと、分かりづらいと思うので、順に見ていきます。
まず、先ほどブックマークの一覧でタップした「ブックマークレットのタイトル」を覚えます。
そしてこのブックマークレットのタイトルを覚えたら、ブックマークレットを起動したいページを表示し、URLの欄をタップします。そして、『ブックマークレットのタイトル』を入力します。
すると、”javascript:”で始まるブックマークレットが表示されますのでタップします。これで指定したブックマークレットが起動されるはずです!Android版でも同じGoogleChromeなので設定をすればiPhone以外でもスマホで使うことができます。
失敗するパターン
まず、失敗するパターンから。まず、ブックマークレットを利用したいページを表示します。そして右上のボタンをタップします。メニューが表示されるので、『ブックマークレット』を選択します。ブックマークが表示されるので利用したいブックマークレットを選択。
普通はコレでブックマークレットが起動すると思うのですが、失敗する場合には何も起きません。つまり見ていたページが表示されるだけです。
おわりに
ブックマークレットの使い方さえ覚えてしまえば、パソコンのWebページはもちろんですが、iPhoneでSafariを使ってブックマークレットの設定も行うことができます。意外と知られていない便利な機能。特に持ち運ぶiPhoneではSafariをよく使いますよね。
iPhoneでもSafariでブックマークレットの設定をしておけばお仕事の昼休みなどにも簡単に読むことができます。ぜひブックマークレットの使い方を覚えてくださいね。