2013年8月26日

[ブックマークレット] コレ抜きではブログ書けねェ!! ブロガーにオススメの厳選ブックマークレット!!

bookmarklet_recommend_blogger-250

こんにちは! ヨス(@yossense)です!

以前、記事でブックマークレットってなんぞや?について書きました。今度は私が実際に使っていて、現在進行形で役に立ちまくっているオススメのブックマークレットを紹介します!!

ブックマークレットをオススメしている理由は、ブラウザのお気に入り(ブックマーク)に登録でき、ワンクリックで起動できるという手軽さだけではありません。なんと言っても軽いんです! 今回は「ブロガー向け」に絞ってのお勧めブックマークレットを紹介します!

ブロガーにオススメのブックマークレット

では私も普段から愛用しまくっているブロガー向けのブックマークレットたちを5つ(+ヨスが作ったオマケ1個)を紹介します。

あ! ブックマークレットの紹介って書きましたが、いきなり訂正します(笑)。よくよく考えると、今回の5つは、厳密には自分に合ったブックマークレットを作成する、「ブックマークレット・ジェネレーター」です。

そのまま使えるのではなく、自分でフォームに入力して設定する必要があります。最初は面倒臭いかもしれませんが、アフィリエイターの方や、普通にWEB制作をされる方も要チェックですよ~♪

記事紹介のブックマークレット

ShareHtml
ShareHtmlを使うと、こんな紹介リンクが一瞬で作成できます。

ブロガーの間では、神ブックマークレットとも呼ばれる「ShareHtml」です。「普通のサラリーマンのiPhone日記」のヒロ(@hiro45jp)さんが作者です。

このブックマークレットで出来ること

このshareHtmlは、一瞬でこれだけのことができます。

  • ページのスクリーンショットが作られ、小さく縮小される(クリックするとページに飛ぶ)。
  • ページのタイトルが表示される(クリックするとページに飛ぶ)。
  • 登録されている「はてなブックマーク」数が表示される。
  • ひと言コメントも入力できる(ポップアップウインドウで入力)。

ShareHtmlメーカー

私のブログでは、最もよく使っているブックマークレットです。これがなかったら、スクリーンショット画像なんてまず入れないでしょう。面倒すぎます(笑)。本当に神ブックマークレットとはこのことだと思います。

このブックマークレットは、自分のブログで他の方の記事を紹介したり、自分の記事を参照するときにもバリバリ使えますよ~。

このShareHTMLがブラウザで開いているタブ全部に一瞬でかけられるGoogle Chrome拡張機能もオススメです。

商品紹介リンクを作るブックマークレット

カエレバ
こんな感じの商品へのアフィリエイトリンクを一瞬で作れます。

次は「カエレバ」「ヨメレバ」「ポチレバ」の3セットの神ブックマークレットです。こちらは私も大好きな「わかったブログ」のかん吉(@kankichi)さんが作成しています。

このブックマークレットで出来ること

これらのブックマークレットは、一瞬でこんなことができます。

  • 商品の画像(クリックすると商品ページに飛ぶ)を表示させる。
  • 商品名(クリックすると商品ページに飛ぶ)が表示される。
  • 予め選択しておいたショップ(アマゾン、楽天、Yahooなど)へのリンクテキストが表示される。
  • すべてのリンク先に自分のアフィリエイトコードが入る。

という訳で、アフィリエイターには必須のブックマークレットだと思います。

ちなみに「カエレバ」「ヨメレバ」「ポチレバ」の3つのブックマークレットは、作り方、登録方法、表示のされ方などは同じですが、下記のような差があります。

1カエレバ

こちらが基本になります。アマゾンとか楽天の商品をアフィリエイトとして紹介したいときは、とりあえず「カエレバ」を使っておきましょう。

カエレバ

2ヨメレバ

こちらは書籍を紹介するのに特化したブックマークレットです。なのでKindleへのリンクも自動で生成されます。便利ですねー。

ヨメレバ

3ポチレバ

こちらはiTunesで販売されているもの、つまりiPhoneアプリとか音楽を紹介するのに特化したブックマークレットです。

ポチレバ

これを手動で作ろうとすれば、アマゾンと楽天の商品ページへのリンク先を探して貼り付けるだけでもかなり手間です。カエレバ無しでやろうと想像するだけでゾッとします。しかも手動と違い、ブックマークレットの場合は、リンクの貼り付けミスがありません

カエレバ・ヨメレバ・ポチレバのカスタマイズはこちらの記事をどうぞ。私はこれをやるだけでアフィリエイトの収益が激増しました。

ページの情報を引き抜き、自由にHTMLを作成するブックマークレット

ページの情報を引き抜いて好みのコードを作成できます。
ページの情報を引き抜いて好みのコードを自由に作成できます。

次に紹介するのはMake Linkです。ShareHtmlみたいに自分用のブックマークレットを作れます。HTMLを知っているへ向けたブックマークレットで、アイデア次第でいろんなことができます

簡単に説明すると「ページURL」「ページタイトル」「選択しているテキスト」を抜き出し、自分用に自由に文章やhtmlタグに組み込めるブックマークレットです。

使い方によっては、ブロガーだけでなくWEB制作に携わる方すべてにオススメできるブックマークレットです。

このブックマークレットで出来ること

例えばですが、こんなタグが一瞬で作れます。一瞬ですよ! マジで。

<blockquote cite="http://yossense.com/toy_can/" title="ついに揃った「銀のエンゼル」5枚! おもちゃのカンヅメをもらうぞ~!">
<p>金のエンゼルは37年間生きてきて、まだ見たこともないし、銀のエンゼルは、5枚集めないといけません。子どもの頃は、何年もかけて5枚も紛失せずに集めるなんてほぼ不可能(笑)。</p>
</blockquote>
<p class="quoted"><cite><a href="http://yossense.com/toy_can/" target="_blank">
ついに揃った「銀のエンゼル」5枚! おもちゃのカンヅメをもらうぞ~!</a></cite>より引用しました。</p>

これを表示するとこんな感じ。

金のエンゼルは37年間生きてきて、まだ見たこともないし、銀のエンゼルは、5枚集めないといけません。子どもの頃は、何年もかけて5枚も紛失せずに集めるなんてほぼ不可能(笑)。

ついに揃った「銀のエンゼル」5枚! おもちゃのカンヅメをもらうぞ~!より引用しました。

変数を組み込むことで情報を抜き出せる

もちろん、上の例は、あくまで一つの例です。下にある4つの変数をHTMLタグに組み込むことで、自由にカスタマイズできちゃいます。

Make Linkで使える変数
ページのURL %url%
ページのタイトル %title%
選択しているテキスト %text%
ページのURLエンコード %encodeURI%

例えば「%url%」を使えば、ブックマークレットを起動させたページのURLを取得できるということです。

Make Link ジェネレータ

Youtubeなど動画の埋め込みコードを取るブックマークレット

Youtube2HTML
YouTubeの動画を簡単にブログに。ちなみに上の画像は私の永遠の天使 Jewel。可愛い。

YouTube・TED・USTREAMを始めとする動画をブログに貼り付けるときに超便利な「Video2HTML」です。動画の埋め込みコードを一瞬で取得できます。

ブログ「Feelingplace」のふぃーぷれ(@feelingplace)さんが制作者です。

このブックマークレットで出来ること

  • 動画が見られるサイト「YouTube」「Vimeo」「TED」「Daily Motion」「SlideShare」「USTREAM」の動画をページの中に埋め込められる。
  • 動画を表示する横幅も自由に変更できる。
  • サムネイルも表示できる。

最初の設定のときに横幅も決められるのは嬉しいですね。自分のブログに合った大きさに調整できるんです! これでメイン領域から動画がはみ出すような悲しい事件とはオサラバです。

もちろん、このブックマークレットを使わないでも、ブログに貼り付けるHTMLコードを取得できるのですが、普通にやると面倒なんですよね~。いやはや、ふぃーぷれ(@feelingplace)さんに感謝!

Video2HTMLメーカー

ふぃーぷれさんのブログではYouTube2HTMLというブックマークレットも公開されていますが、Video2HTMLに統合されているようです。なのでVideo2HTMLをお使い下さい。

複数の検索エンジンで同時に検索するブックマークレット

一度の検索で複数ページでの検索が!
一度の検索で複数ページでの検索が!

WEB関連の仕事をやっていると、検索することがめっちゃ多いです。私のようなブロガーで言うと、Googleはもちろん、無料素材サイトや、類義語辞典とか……。

そして気づくんですよ。複数の検索エンジンで同じキーワードを検索するのってウザい!ってことに。例えばアフィリリンクを貼る時にiOS用のiTunes、そしてAndroid用のGoogle Playで検索するとか、音楽のアフィリを貼りたいときにアマゾンとiTunesで検索するとか。ほかにも無料素材サイトの「ぱくたそ」と「足成」で検索するとか。結構あるでしょ?

それを一度の検索で済ませてくれる「Search at Once」というブックマークレットがあるんですよ!

このブックマークレットで出来ること

  • 複数の検索エンジンで同時に検索
  • 「iTunes」「Google Play」「Amazon」が選べる。
  • ほかにも好きな検索エンジンも自分でカスタマイズできる

詳しくは下記の記事をどうぞ!!

Search at Onceメーカー

語彙を多様にする類義語辞典のブックマークレット

類義語辞典のブックマークレット。
類義語が一瞬で検索できます。

最後に私が作ったブックマークレットを紹介します。

ブログで最も重要なのはもちろん文章です。文章って、やっぱり語彙を豊富にしたいですよね。

例えば「食べる」って言葉を使いまくっていると単調になってしまいます。そこで便利なのが類義語辞典。調べてみると、「喰う・召しあがる・召す・頂く・食む・召し上がる・食する・喫す」といろいろ出てきます。

このブックマークレットで出来ること

こちらは、ブラウザ上でドラッグ選択した文字(日本語 or 英語)を即座に「Weblioシソーラス」で検索してくれるブックマークレットです。

ドラッグした言葉の類義語を一気に表示してくれます。

類義語辞典で検索

↑ このリンクをお気に入り登録するだけで使えます。詳しくは「ブックマークレットとは? 」をご覧ください。

追記: このブックマークレットはあの有名サイト「Gigazine」でも紹介されています。本家の私より詳しく説明してくれています(笑)。

【現在はサービス終了】「食べログ」のコードを取得するブックマークレット

こちらのブックマークレットは2013年10月9日をもって使えなくなりました。

詳しくはFeelingPlaceさんの、こちらのページをご覧ください。食べログページからコードは簡単に取得できるのですが、私の場合、CSSのクラスとかを結構変えていたので、手間が増えてしまいます……。トホホ。

Tabelog2HTML
レストランの情報が一瞬で貼り付けられます。上の画像は「らーめん春友流」。行ってみてぇ!!

レストランの情報をブログに貼り付けるときに便利な「Tabelog2HTML(現在は閉鎖しています)」です。食べログの埋め込みコードを一瞬で取得できます。

外に食べに行って、その感動を伝えるというのはブログで人気のあるテーマの一つですよね。そんなときに、食べたレストランの情報を載せたいもの。こちらのブックマークレットを使えば、レストラン情報サイトの「食べログ」の情報が使え、親切な記事が簡単につくれます。

こちらも「Video2HTML」と同じく、ふぃーぷれさんが作っています。ちなみにふぃーぷれさんは、ほかにもいろいろなブックマークレットを作って下さっています

このブックマークレットで出来ること

このブックマークレットは食べログ上のページへのリンクだけでなく、こんなことができます。

  • 店名が表示されます(クリックすると食べログ上のページへ飛ぶ)。
  • お店の地図(Googleマップ)が表示されます。
  • お店の詳細情報を表示させます(住所・電話番号・営業時間など)。

詳細情報をコピペするだけでもヤル気がなくなりそうな作業が、一瞬でできるようになります!!

というわけで、今回は、ブロガーにオススメのブックマークレット……というようにターゲットを絞って書きました。

まあ、ターゲットを絞ったっていうか、ただ単に長くなりすぎたから分けたんですが(笑)。なので、またほかのオススメブックマークレットも違う記事で紹介しますね♪

他にはこんなブックマークレットもあります!

ブックマークレットについて詳しく知りたい方は、こちらの記事もどうぞ。

あと、ブックマークレットをショートカットで起動させられるGoogle Chrome拡張機能はこちらです。超オススメですのでぜひ、ご覧ください。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!