【ブックマークレットとは?】ブログ作成やアフィリエイトを楽にしてくれるツールがいっぱい!

スポンサーリンク




みなさんは、「ブックマークレット」をご存じでしょうか?

ブックマークレット」と似たような言葉に、「ブックマーク」があります。

ブックマーク」はほとんどの人が理解していると思います。
お気に入りのページの「URL」を登録しておいて、
いつでもそのURLに飛べるようにしておくものですね。

この機能を応用したのが、「ブックマークレット」なんです。

ブックマークと違うのは「URL」を登録するのではなくて、
プログラムコード」を登録しておきます。
それで、いつでもこのプログラムが簡単に呼び出せるようになります。

このブックマークレット、探してみると
ブログを書く時、アフィリエイト・コードを生成する時など、
便利なものがたくさんみつかります。

本レポートは、そんなブックマークレットをまとめてみました。



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

ブックマークレットという言葉を目にしたことがあるでしょうか。

好きなウェブページを「お気に入り」として保存して、
いつでも飛べるようにする「ブックマーク」と言葉が似ていますね。

それもそのはず、ザックリ言うと、
ブックマークレットはブックマークの友達みたいなものだからです。

さて、どんな友達か。 彼はなかなか賢いヤツです。

ブックマークの役割が「好きなウェブページにジャンプできる」だとしたら、
ブックマークレットは「好きなウェブページでちょっと便利な機能が使える」になります。

例えば、
YouTubeの動画をリピート再生する、見ているページの短縮URLを表示するなどです。

では、ブックマークレットは、どんな仕組みのものなのでしょうか?

 

01_bookmarklet.PNG

上の画像は、Facebookのブックマークを編集しようとしているところです。

ブックマークを右クリックして「プロパティ」や「編集」というボタンを押せば、
同じような画面が開くはずです。

URL」欄にはウェブページのアドレスが入っています。

 

ブックマークレット

一方、こちらの画面はブックマークレットの編集画面。
URL」欄が大きく違いますね。

先頭に「javascript:...」と書いてある通り、
ブックマークレットは「JavaScript」というプログラミング言語でできた簡単なプログラムなのです。

ここが大きな違い。
このプログラムが動くことによって、「ちょっと便利な機能」たちが使えるわけです。

とは言え、難しいことは考えなくてダイジョウブ。
使う側にとっては、クリックしてウェブページへ飛ぶか、プログラムを動かすかの違いだけです。

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



2 ブックマークレットの登録と使い方

ここでは、実際にブックマークレットを登録して利用するまでを説明していきます。

ブックマークレットには色々な機能があるので、
ブックマークバーに追加する時にそれぞれ設定が必要なものもあります。

まずは、ブックマークレットをツールバー(ブックマークバー)に
追加していつでも使えるようにするというところから。

基本的には、ブックマークバーにブックマークレットをドラッグするだけです。

 

03_bookmarklet.PNG

はてなブックマーク」の「はてなブックマークレット」登録を例として示します。

はてなブックマークレット」は、ブラウザのツールバーなどから手軽に、
閲覧中のページをはてなブックマークに追加することができるものです。

ちなみに、「はてなブックマークレット」を利用するには、
はてなブックマーク」にユーザー登録されていなければなりません。

はてなブックマーク」のトップページは、こちらになります。

はてなブックマーク

また、ブックマークバーが、ブラウザに表示されていないという場合があります。
その場合は、4 ブックマークバーを表示させる方法を参考にしてください。

はてなブックマークレットのページはこちら↓

はてなブックマークレットのページ

このページを下の方にスクロールしていくと
ブックマークレットのセットアップ」という項目があります。

その部分の「ブックマークする」というリンクボタンを
ブックマークバーにドラッグします。

04_bookmarklet.PNG

ブックマークバーに追加できたら、完了です。

あとは好きなページでこのボタンをクリックすると、
開いているページをブックマークすることができます。



3 便利なブックマークレットをいくつか紹介します。

ウェブ上には、たくさんのブックマークレットが配布されています。

ここでは、ブログの記事書きやアフィリエイトに役立ちそうなブックレットを紹介します。

(1)アフィリエイトに便利なブックマークレット

◆ カエレバ

Amazonや楽天で商品ページを開いておいて

1クリックでアフィリエイトリンクを作成できるものです。

カエレバ

アフィリエイトリンクのコードが1クリックで生成されるので、
あとはこれをブログにコピペするだけです。


◆ リンクシェア・ブックマークレット

好きな参加企業のウェブサイトを見ながらクリックするだけで、
いつでも簡単にアフィリエイトリンクが作成できます。

リンクシェア・ブックマークレット



◆ Amazonアソシエイト・リンク作成用

Amazonの商品ページから、商品のアマゾン・アソシエイトリンクを簡単に作れます。

Amazonアソシエイト・リンク作成



◆ ShareHtml

自分のブログの過去記事や他の人の記事を紹介するときに
便利なブックマークレットです。

紹介したいページを開いて、1クリックで紹介用のリンクが完成します。

ShareHtml

使い方は、次に示すページをご参照ください。

ShareHtmlの設定と使い方
ShareHtmlをカスタマイズする方法



◆ HTMLのタグチェック

HTMLのタグの閉め忘れやミスを指摘してくれるブックマークレットです。

HTMLのタグチェック

チェックしたいページでこのブックマークレットを起動させると、こんな感じでミスを指摘してくれます。

05_bookmarklet.PNG

ちょっとしたミスでレイアウトが崩れたり、HTMLの構造にミスがないかをチェックできます。

具体的には次の事ができます。

  •  タグの閉じ忘れを検索する
  •  開きタグがない閉じタグを検索する
  •  親より先に閉じちゃってる子がないか検索する
  •  タグ対応エラーの一覧と、ソースコード中のハイライト表示
  •  タグのミスをチェックして、そのページのソースコードと一緒に表示してくれる。

ミスのあるソースコードは、ハイライトされて探しやすいようにしてあるので非常に便利です。


◆ RWD Bookmarklet

レスポンシブデザインのサイトやブログで、
「タブレット」や「スマートフォン」の見た目を簡単にチェックできる
ブックマークレットです。

RWD Bookmarklet



◆ Bookmarklet Combiner

ブックマークレットで便利だけど、
ブックマークバーをどんどん占領していくよねって人に、
おすすめなのが「Bookmarklet Combiner」というブックマークレットです。

Bookmarklet Combiner

複数のブックマークレットを1つにまとめてくれます。
起動させると画面上に登録したブックマークレットの一覧が出現するので、
使いたいものを選択するようになっています。

詳しい設定等は、下に示す記事をご参照ください。

複数のブックマークレットを1つにまとめるブックマークレット【Bookmarklet Combiner】



◆ SEOチェキのブックマークレット

ブログの評価、SEO対策に非常に便利なSEOチェキのブックマークレットです。

http://seocheki.net/

詳しくは、下に示す記事をご参照ください。

サイトの評価をチェック!SEOツール【SEOチェキ】のブックマークレット




(2)ウェブページの閲覧が捗るブックマークレット

◆ Scrible

ウェブページにハイライトを引いたりコメントつけたりした後、
ファイルに書きだしてオフラインに保存することもできるブックマークレットです。

Scrible



◆ Google Personalized Off

Googleアカウントでログインした状態でGoogle検索をした際、
よく見ているページなどを検索上位に掲げる「パーソナライズ検索」。

しかし、ブログやウェブメディア、あるいはECサイトを運営している方なら、
自分のページが検索で「本当は何番目に表示されるか」は気になるところです。

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

Google Personalized Off




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

◆ YouTubeRepeat

通常はリピート再生できないYouTube動画を、リピート再生するための
ブックマークレットです。

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

YouTubeRepeat



◆ Songdrop

Songdropは、
YouTubeやSoundCloudなどに点在するウェブ上の音楽を一括整理できるサービスです。

ブックマークレット経由で音楽をどんどん登録すれば、
まとめて「Songdrop」のサイト上で楽しめます。

Songdrop



◆ Wadsworth Constant

ほとんどのYouTube動画は最初の30%をスキップしても
問題ないという説に基づいて作られたブックマークレットです。

動画ページで使うと、全体の1/3まで飛ばします。

Wadsworth Constant



◆ 動画ダウンロード用リンク追加処理

YouTubeの動画ページで起動すると、通常はない「ダウンロード」ボタンが出現します。
いくつかのファイル形式から選んで動画をダウンロードすることができます。

動画ダウンロード用リンク追加処理




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

◆ ソーシャルてんこ盛り1.3

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

ソーシャルてんこ盛り1.3



◆ Twitter のハッシュタグ挿入ブックマークレット

Twitter公式サイトや「HootSuite」「ついっぷる」などのブラウザ上で

動作するクライアントで使えるブックマークレット。

あらかじめハッシュタグを上記のサイトで登録し、ブックマークレット化しておきます。

あとは、ツイートの入力ボックスを選択した状態で起動させれば、
設定したハッシュタグが挿入できます。

Twitter のハッシュタグ挿入ブックマークレット



◆ p.tlブックマークレット

イラスト投稿サイトのpixivが提供しているURL短縮サービスのブックマークレット。

好きなページで使うと、小さなウィンドウが開き、タイトルと共に短縮URLを表示してくれます。

特に文字数制限のあるSNSで投稿したい時に使えます。
URLをそのまま貼り付けると長すぎて収まりが悪い…という時にも。

p.tlブックマークレット



◆ Encipher.it

圧縮ファイルであればパスワードを設定できますが、
Encipher.itは「文章そのもの」にパスワードをかけられます。

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

暗号化を解除するには、再度ブックマークレットを起動し、パスワードを入力すればOK。

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

Encipher.it




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

色々なブラウザで
ブックマークバーの表示/非表示させる方法が異なっているので、整理しておきます。

GoogleChrome、Firefox、Internet Explorerでのブックマークバーの表示方法を示します。

(1)Google Chromeでブックマークバーを表示させる

GoogleChromeでブックマークバーが表示されていない場合は、
図4-1に示すように、
アドレスバーの右端にある赤枠で囲ったツールアイコンをクリックして、
表示されるメニューから順次下に示す項目を選択します。

ブックマーク」⇒「ブックマークバーを表示

ブックマークバーを表示」にチェックを入れることで、
ブックマークバーを表示することができます。

06_bookmarklet.PNG
※ クリックすると、図が拡大します




(2)Firefoxでブックマークバーを表示させる

まず、図4-2に示すように、
画面の右上にある赤枠で囲ったツールアイコンをクリック、
表示されるメニューから「カスタマイズ」を選択します。

 

07_bookmarklet.PNG

カスタマイズの画面になるので、
画面下の「ツールバーを表示/隠す」という項目をクリックして、
ブックマークツールバー」にチェックを入れます。

 

08_bookmarklet.PNG

チェックを入れたら右の「カスタマイズを終了」をクリックして完了します。
09_bookmarklet.PNG




(3)Internet Explorerでブックマークバーを表示させる

まず、Internet Explorerを起動し、
新しいタブ」の右側の何も表示されていない箇所を右クリックします。

 

10_bookmarklet.PNG

※ クリックすると、図が拡大します。

右クリックするとメニューが出てくるので表示された一覧から、
お気に入りバー」をクリック。

 

11_bookmarklet.PNG

これでブックマークバーが表示されるようになります。


以上






スポンサーリンク

スポンサーリンク

コメントを残す

このページの先頭へ

Top