記事を作成する際、他のWebページを紹介したり、書籍を検索したりなど、記事執筆以外に必要な工程があります。
その度に記事を書く手をとめて他の作業をしなくてはならなくては、集中力が落ちるだけではなく、効率が悪くなってしまうこともあります。
そこで今回は、記事執筆の中で必要になる作業をワンクリックで行える、便利なブックマークレット5選を紹介します。
設定方法も解説しているので、ぜひ参考にしてみてはいかがでしょうか。
このニュースを読んだあなたにオススメ
コンセプトコピーの重要性と具体的イメージ
【ライター必見】記事を書くときに便利なクロームの拡張機能15選
ライター、編集者は知っていて当然？よくある間違った漢字の使い方10選
ブックマークレットとは
ブックマークレットとは、ブックマークに登録できるJavaScriptで記述されたスクリプトのことです。
ブックマークに登録しておくことで、Webページを閲覧中にすぐに該当機能を呼び出すことが可能で、手作業で行うと手間のかかる作業をワンクリックで済ませることが可能です。
例えば、Webページに含まれる用語を検索したり、閲覧中のWebページへのリンクを自分のブログの投稿ページに貼った状態で起動してくれたりなど、かゆいところに手がとどく機能ばかりです。
知っていると便利なブックマークレット5選
1.shareHtml
https://dl.dropboxusercontent.com/u/2271551/javascript/sharehtmlmk.html
記事の中で、他のWebサイトの記事を紹介する際に非常に便利なブックマークレットです。
このブックマークレットでは、主に以下の4つのことができます。
・閲覧中のWebページのスクリーンショットの作成・縮小が可能
・登録されている「はてなブックマーク」の数が表示される
・ページタイトルが表示される
・ポップアップウィンドウでコメントの入力が可能
なお、スクリーンショットとページのタイトルのどちらでも、クリックすると該当のWebページへ遷移することができます。
※このブックマークレットはChrome上では動作しないので、他のブラウザで利用しましょう。
作成方法
まず、Chrome以外のブラウザでshareHtmlにアクセスして、項目を全て入力します。
初心者の方は「書式テンプレート」のみ選択し、その他の項目はデフォルトのまま使用することをオススメします。
続いて「Bookmarkletを生成する」をクリックします。
するとパソコンでの表示用とiPhoneでの表示用の2種類を選択する画面が表示されます。
使用したい方のURL(青色の文字で表記されています)を、ドラックアンドドロップで「ブックマーク」または「お気に入り」に登録します。
ブックマークバーに登録しておくと、ワンクリックで使用することができるのでオススメです。
(なお、以下全て「ブックマークバーに登録」と表記します。)
登録したら、任意のWebページにChrome以外のブラウザでアクセスし、ブックマークバー上のshareHtmlをクリックします。
するとポップアップが表示されるので、コメントを入力してください。
これでOKをクリックすれば完了です。
閲覧中のWebページ上部にソースコードが、その下にプレビュー画面が表示されます。
作成後、しばらく(10分前後)サムネイル画像が表示されない場合がありますが、時間が経過すると解消されますので、サムネイルが表示されない場合はそのまましばらく放置してください。
最後に、ブログ等の投稿画面にソースコードをコピーアンドペーストすれば、サムネイル、タイトル、コメント付きのリンクを作成することができます。
なお、ブラウザ環境がChromeしかない場合は、以下の「GetTabInfo」というChrome拡張機で同じ機能を使用することも可能です。
GetTabInfo
2.類語辞典
選択した語句の類義語を検索できるブックマークレットです。
記事執筆をする時は、どのようなカテゴリであれ豊富な語彙力が必要です。
語彙力に自信がなくても十分補える非常に便利なブックマークレットです。
使用方法
まず、上記のURLにアクセスしてブックマークバーに登録します。
その後、URLを編集して、以下のソースコードをそのままコピーアンドペーストして変更してください。
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;
これで設定完了です。
設定が完了したら、任意のWebページを開いて、文字列をドラッグします。
ドラッグできたら、あらかじめブックマークバーに登録した「類語辞典」をクリックします。
すると自動で新しいウィンドウが開き、類義語を表示してくれます。
3.書籍横断検索システム
http://book.tsuhankensaku.com/hon/
Amazonや楽天ブックスなどのオンライン書店の書籍詳細ページ上で、他のオンライン書店での検索もできるブックマークレットです。
このブックマークレットでは、ブクログなどの読書管理サイト、カーリルなどの図書館の蔵書検索サイトなど、合計20以上の書店・Webサイトに対応しています。
使用方法
まず、上記のURLにアクセスします。
すると「ブックマークレット」というボタンがありますので、このボタンをドラックアンドドロップしてブックマークバーに登録してください。
ドラックアンドドロップで登録できない場合は、上記のURLにアクセスしてブックマークバーに登録し、URLをそのままコピーアンドペーストして下記のソースコードに変更してください。
javascript:(function(u)%7Bvar s%3Ddocument.createElement(%27script%27)%3Bs.charset%3D%27UTF-8%27%3Bs.src%3Du%3Bdocument.body.appendChild(s)%7D)(%27http://www.tsuhan.me/api/booksearch.js%27)
これで設定完了です。
設定が完了したら、任意のWebページを開いてください。
開いた状態で、あらかじめブックマークバーに登録した「書籍横断検索システム」をクリックします。
すると自動で書籍横断検索システムが開き、対応している書店・Webサイトの一覧が表示されます。
4.Type Sample
Webページ上のフォントを調べることができるブックマークレットです。
記事の作成にはもちろん、デザイナーの方にもオススメできるツールです。
使用方法
まず、上記のURLにアクセスします。
すると「Install the bookmarklet」という表記のしたに、青いボタンがありますので、ドラックアンドドロップでブックマークバーに追加します。
ドラックアンドドロップで登録できない場合は、上記のURLにアクセスしてブックマークバーに登録し、URLをそのままコピーアンドペーストして下記のソースコードに変更してください。
javascript:void((function(d)%7Bvar e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//www.typesample.com/assets/typesample.js?r='+Math.random()*99999999);d.body.appendChild(e)%7D)(document));
これで設定完了です。
設定が完了したら、任意のWebページを開いてください。
あらかじめブックマークバーに登録した「Type Sample」をクリックし、フォントを調べたい文字列にカーソルを合わせます。
カーソルを合わせると自動で該当箇所のフォントが表示されます。
5.ヨメレバ
記事上で書籍を紹介する際に、Amazonや楽天ブックスなどのオンライン書店へのリンクを表示させるためのブックマークレットです。
書籍紹介をする際に、その都度URLやサムネイル画像を取得するのは手間がかかりますが、このブックマークレットを使用すればワンクリックでリンクを取得することができます。
取得できる情報は、主に以下の5つです。
・該当書籍のタイトル
・オンライン書店のURL
・著者名
・出版社
・刊行日
使用方法
まず、上記のURLにアクセスします。
そのまま下にスクロールしていくと、ユーザーデータを入力する画面が表示されます。
このフォーム内に、ブログのWebサイト名と使用しているオンライン書籍のアフェリエイトIDを入力してください。
ここでは便宜的に「ferret」としています。
なお、Webサイト名とAmazonアフェリエイトIDは、入力必須です。
入力したら、フォーム下にある「保存」をクリックします。
これで「ヨメレバ」へのアフェリエイトIDの登録が完了です。
続いて、画面を上にスクロールし「利用方法」の項目を見ます。
すると「ヨメレバブックマークレット」という表示が確認できますので、これをドラックアンドドロップでブックマークバーに登録してください。
ドラックアンドドロップで登録できない場合は、上記のURLにアクセスしてブックマークバーに登録し、URLをそのままコピーアンドペーストして下記のソースコードに変更してください。
javascript:window.open('http://yomereba.com/blogparts/?&url='+encodeURI(document.location.href));undefined;
これで設定完了です。
続いて、任意のWebページを開きます。
開いた状態で、あらかじめブックマークバーに登録した「ヨメレバ」をクリックします。
自動でヨメレバが開き、記事内に埋め込むソースコードが表示されます。
ここで表示されたソースコードをそのままコピーアンドペーストして記事に貼り付けると、リンクが表示されます。
まとめ
今回ご紹介したブックマークレットを活用し、作業工数はなるべく短縮し、執筆に集中することができれば、仕事のパフォーマンスを向上させることができます。
ブックマークレットは、仕様の変更により使用できなくなることもありますが、今回紹介したものは比較的変更が少ないものばかりです。
どれも非常に便利なのでまずは利用してみることをオススメします。
このニュースを読んだあなたにオススメ
コンセプトコピーの重要性と具体的イメージ
【ライター必見】記事を書くときに便利なクロームの拡張機能15選
ライター、編集者は知っていて当然？よくある間違った漢字の使い方10選