HRR Co., Ltd.

技術的な記録を残していくことを目的としています。1次情報を大事にしています。

ブックマークレットのススメ(今更)

はじめに

ブックマークレット、一周回って知らない人が多いのではないのかと思います(要出典)。
しかし使いこなすとちょっとした不便の解消になったりしますので、ぜひ作って使ってみるといいと思います。

ブックマークレットとは

ja.wikipedia.org

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。

とのこと。
定義には言語の記載がありませんが、大抵JavaScriptが使われるのではないかと思います(要出典)。

説明よりも実際に見てみるのが早いと思います。

例) 今日の日付をクリップボードにコピーする

下記をブラウザのお気に入りとして、URL欄に入れて保存してみてください。 タイトルは適当でOKです。

作成したお気に入りをクリックすると、クリップボードに日付が「2020/08/07(金)」こんな書式でセットされます。

javascript:function getToday() {
  var dateObj = new Date();
  var yyyy = dateObj.getFullYear();
  var mm   = ('0' + (dateObj.getMonth() + 1)).slice(-2);
  var dd   = ('0' + dateObj.getDate()).slice(-2);
  var aaa  = ['日','月','火','水','木','金','土'][dateObj.getDay()];
  var date = yyyy + "/" + mm + "/" + dd + "(" + aaa + ")";
  if (navigator.clipboard) {
    navigator.clipboard.writeText(date);
  }
};getToday();

※ if文を使っていますが、Chrome 84で動いております。
※ また、どこかWebサイトを開いているときでないとコピーできません。
 (ブラウザの空ページ、blankページだとダメ)

ちょっとした制約がありますが、日付を貼り付けるときにとっても便利!

例) 英単語検索窓(Collins版)

javascript:(function(){
var word = window.prompt("Plz input a word.", "");
if (word !== null && word !== "") {
    var url = "https://www.collinsdictionary.com/dictionary/english/" + word + "/";
    window.open(url);
}
})()

こちらも使い方は一緒。
登録したお気に入りをクリックすると、こんな窓が表示されると思います。

f:id:hrroct:20200731235724p:plain
単語を入れろと書いてある

そこに何でもいいですが、英単語を入れると…collinsというサイトで英単語が検索されたページが別タブで表示されると思います(Chrome系ブラウザで確認済み)。

私はcollinsの英英辞書が好きなので、簡単に検索ができるようなブックマークレットを作ってみました。
これにありがたみを感じるかというと…人によるかもしれません…。

他にも…

  • Chatworkでの宛先の整形
  • 選択中のGoogleドライブのファイルの名前を取得する

みたいなものを私は使っていました。
特定のWebアプリケーションに足りない機能を追加する形で使うのはとっても便利ですが…。
サイト側に変更があるとすぐに使えなくなったりするので、それはそれでメンテナンスが大変だったりもします…。

最後に

イデア次第で可能性は無限大なので、ぜひぜひ自分にとって便利なブックマークレットを開発してみてください。

例示が少なくてすみません…。