ブックマークレットでブラウザを便利に使う

デザイン ライフハック
bookmarklet Web 便利ツール
liquid-man
liquid-man

ブックマークレットとは？

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

出典: フリー百科事典『ウィキペディア（Wikipedia）』

ブックマークレット。便利ですよね。活用できるブックマークレットをまとめました。

Contents

    Mobile Friendly Test

    サイトがモバイル表示に適しているかをチェックするツールです。

    javascript:(function(l){q=l.href;if(q)window.open('https://search.google.com/test/mobile-friendly?url=%27+encodeURIComponent(q),%27_blank%27);})(location);

    表示中のWebサイトのタイトルとURLをクリップボードにコピー

    [ページタイトル](URL)という形式でサイト名とURLをコピーしクリップボードに保存します。

    javascript:(()=>{const e=`[${document.title}](${location.href})`,t=document.createElement("textarea");t.textContent=e,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),console.log(`Copyed this website title and URL: ${e}`)})();
    Zenn
     
    表示しているページのタイトルをコピーするブックマークレット

    ページのフォントを確認

    表示しているページのフォントを教えてくれるブックマークレットです。

    javascript:void((function(d)%7Bvar%20e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://www.typesample.com/assets/typesample.js?r=%27+Math.random()*99999999);d.body.appendChild(e)%7D)(document));javascript:void((function(d)%7Bvar%20e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://www.typesample.com/assets/typesample.js?r=%27+Math.random()*99999999);d.body.appendChild(e)%7D)(document));
    Typewolf
     
    Easily Identify Any Webfont With Type Sample · Typewolf
    Type Sample is a bookmarklet for identifying, testing and sampling webfonts.

    ワード翻訳

    選択した範囲のテキストをDeepL翻訳サイトで翻訳し結果を表示します。

    javascript:(function(){str=window.getSelection()+'';if(!str){alert("%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E9%81%B8%E6%8A%9E%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93");}else{window.open('https://www.deepl.com/translator#en/ja/'+str);}})();
    note（ノート）
     
    簡単にDeepL翻訳できるブックマークレットを作りました｜metatetsu｜note
    Google翻訳を上回る精度のDeepLが話題です。 しかし毎回サイトを開いて文を貼り付けるのが面倒なので、1クリックで行えるブックマークレットを作りました。 コード(文字を選択しないとエラーが出るVer.) javascript:(function(){str=window.getSelection()+'';if(!str){alert("テキストが選択されていません");}else{window.open('https://www.deepl.com/translator#en/ja/'+str);}})(); コード(エラーが出ないVer.) - 5/1追記 ja

    OGPチェッカー

    SNSシェアなどで使用されるOGPをチェックするツールです

    javascript:window.open('https://rakko.tools/tools/9/?url=%27+location.href+%27&utm_source=bookmarklet%27)
    ラッコツールズ
     
    OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコ...
    URLを入力すると各SNS（facebook・twitter・はてなブックマーク・LINE）でページをシェアした際のOGP画像・タイトル・説明文を確認できるOGPデバッガー・シミュレーター。PC版・スマートフォン版・アプリ版で表示サイズ・表示文字数が異なるものも全て確認できます。画像をアップしての確認も可能で、画像は50枚まで選択可能です。

    今回はこちらのサイトを参考にさせていただきました。今後も便利なブックマークレットを追加していきます。

    参考サイト： もぐでざ MoguMoguDesign | https://mogumogu-design.com/bookmarklet/