ページ

2013-08-01

ブックマークレットって結構普通に使われてたのね。あらためて便利さに感動!

ブックマークレット(Bookmarklet)って、時々目にしますよね。「○○をブックマークレットに登録すれば一発でできちゃうよ!」なんて言われたりしますね。ブックマークレットってブックマーク? はてな先日書いたブログ「あっ、このサイト、Feedlyに登録したい!」iOSのMobile Safariだったら断然ブックマークレットで登録でしょ!」でも出てきました。いろんなブラウザで同じように使うことができ、使用法はFeedlyやPocketなんかに書き出すためのコードなどを、ブックマーク登録時にURLを登録する部分にJavascriptの短いコードを書くだけですね。

自分でオリジナルのコードを作成するには、多少なりともHTMLとJavascriptの知識が必要になるわけですが、日々行なっているようなことなら参考にさせていただけるコードが公開されています。いま行なっている作業を効率化するには、公開されているブックマークレットを探して、それを使わせていただくのが手っ取り早いですね。ただ、ブックマークレットに登録するのはプログラムなのでコードを使う際は自己責任で行なってくださいね

    ブックマークレット(Bookmarklet)って何?
    ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
    出典:ブックマークレット - Wikipedia

ブックマークレット(Bookmarklet)とはブックマーク(お気に入り)機能を使って、通常URLが埋め込まれる部分にプログラム・コードを埋め込むことで便利な機能を追加することが出来るわけです。これによってただリンクを表示してくれるブックマークとは違う機能となる訳です。これ自体がプログラムなんですね。ということで、日ごろブログを書く際に使っているブックマークレットを紹介します。


ブラウザごとのブックマークレットの登録方法


FirefoxFirefox
    まず、任意のブックマークを作成します。作成したブックマークのプロパティを開き、「名前」をブックマークレットの機能が分かるタイトルにします。URLの入力部分にJavascriptのコードを埋め込みます。

ChromeChrome
    まず、任意のブックマークを作成します。作成したブックマークを選んで右クリックで「編集」を開きます。「ブックマークを編集」ダイアログが表示されたら、「名前」をブックマークレットの機能が分かるタイトル、URLの入力部分にJavascriptのコードを埋め込みます。

SafariSafari
    任意のブックマークを作成します。メニューバーの「ブックマーク」→「すべてのブックマークを表示」でブックマーク編集のページを開きます。ブックマークレットを登録する任意のブックマークにカーソルを合わせて右クリック。タイトルを編集する際は「名前を編集」、アドレス(URL)部分を編集する際は「アドレスを編集」(Javascriptのコードを埋め込み)します。

Internet ExplorerInternet Explorer
    まず、任意のブックマークを「お気に入りに追加」します。メニューバーの「お気に入り」をクリックして任意のブックマークを選びます。右クリックで「プロパティ」を開きます。プロパティのタグメニュー「全般」でタイトルを変更、「Webドキュメント」のURLの入力部分にJavascriptのコードを埋め込みます。


ブログ作成時に便利なブックマークレット

ブログを書く際にこれはちょっと便利だなと思って使っているブックマークレット・コードをいくつか紹介します。上記のブラウザごとの設定方法で登録して使ってみてください。
  • Webサイトのタイトルをテキストエリアに書き出す
  • 表示しているWebサイトのページタイトル(Document Title)を、新しいタブを開いてテキストエリアに書き出します。
    javascript:(function(){function%20o(s){var%20d=window.open().document;%20d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');%20d.close()}var%20contents=document.title;o(contents);})();

  • 選択したテキストをテキストエリアに書き出す
  • 表示しているWebサイトのページ内の選択したテキストを、新しいタブを開いてテキストエリアに書き出します。
    javascript:var%20d=document;%20var%20tx=d.selection?d.selection.createRange().text:d.getSelection();%20var%20subw=window.open().document;%20subw.writeln('<textarea%20rows=1%20cols=40>'+tx+'</textarea>');

  • タイトルとURLをテキストエリアに書き出す
  • 表示しているWebサイトのタイトルとURLを、新しいタブを開いてテキストエリアに書き出します。
    javascript:(function(){function%20o(s){var%20d=window.open().document;%20d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');%20d.close()}%20o(document.title+"\n"+location.href);})();

  • HTMLのリンクタグを作成してテキストエリアに書く出す
  • 表示しているWebサイトのページへのHTMLリンクタグを生成して、新しいタブを開いてテキストエリアに書き出します。
    javascript:(function(){function%20o(s){var%20d=window.open().document;%20d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');d.close()}var%20prefix='';%20var%20suffix='';var%20contents=document.title;var%20target='_blank';%20o(prefix+'<a%20href=\''+location.href+'\'%20target=\''+target+'%20\'>'+contents+'</a>'+suffix);})();

  • 表示サイトのタイトルを件名にしたメーラーを起動します
  • メーラーを起動します。表示しているWebサイトのタイトルを件名に、本文スペースにWebサイトURLリンクを書き出した新規メール作成画面を表示します。
    javascript:location.href='mailto:?SUBJECT='+encodeURIComponent(document.title)+'&BODY='+escape(location.href)

  • 表示サイトのタイトルを件名にしたGmailを起動します
  • Gmailを起動します。表示しているWebサイトのタイトルを件名に、本文スペースにWebサイトURLリンクを書き出した新規メール作成画面を表示します。
    javascript:(function(){x=document;y=window;if(x.selection)%20{Q=x.selection.createRange().text;}%20else%20if%20(y.getSelection)%20{Q=y.getSelection();}%20else%20if%20(x.getSelection)%20{Q=x.getSelection();};m='https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=&su=[FYI]%20'+encodeURIComponent(x.title)+'&body='+encodeURIComponent(x.title)+encodeURIComponent(Q)+encodeURIComponent('\n\n'+x.location);y.open(m,'addwindow','status=no,toolbar=no,width=575,height=510,resizable=yes');})();

ブックマークレット紹介サイトいろいろ


0 件のコメント:

コメントを投稿