ブックマークレット

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

ブックマークレットとは、ウェブページ上から特定の操作を実行できる、Webブラウザ用のスクリプトです。

ブックマークレットを使用することで、ブラウザの設定を変更したり、Webサイト上の情報を検索したり、Webサイトをカスタマイズしたりすることが可能になります。

  • ブックマークレットは
    • JavaScriptというプログラミング言語を使用して作成されている
  • ブックマークレットを作成するには
    • Webサイトに表示されているソースコードを取得し
      • JavaScriptで書かれたスクリプトを作成する必要がある

ブックマークレットを使用することで、Webサイトをより便利に使用できるようになります。

ブックマークレットを作成する方法

まずJavaScriptで書かれたスクリプトを作成する必要があり、それには、まずウェブページに表示されているソースコードを取得し、それを修正してデバッグする必要があります。

ブックマークレットを作成するためには、JavaScriptの技術が必要です。

ブックマークレットを作成したら、それをWebブラウザのブックマークに登録する必要があります。

登録する際には、JavaScriptのコード全体が含まれている必要があります。

最後に、ブックマークレットを使用するためには、Webブラウザ上でそのブックマークをクリックするだけです。

手順をまとめます。

  1. ウェブページに表示されているソースコードを取得
  2. 修正してデバッグし、ブックマークレットを作成
  3. Webブラウザのブックマークに登録
  4. Webブラウザ上でブックマークをクリックして使用する

ブックマークレットのサンプルコード

Webページの選択した文字列をテキストに保存するサンプルコードです。

javascript:(function() {
  var url = location.href;
  var currentTime = new Date().toLocaleString();
  var text = window.getSelection().toString();  
  var data = url + '\n' + currentTime + '\n' + text + '\n';


  var file = new Blob([data], { type: 'text/plain' });
  var title = document.title.replace(/[/\\?%*:|"<>]/g, '-');
  var filePath = 'WEBメモ_' + currentTime +  '_' + title + '.txt';
    
  var a = document.createElement('a');
  a.href = URL.createObjectURL(file);
  a.download = filePath;
  a.click();
})();

ブックマークレットの説明

このブックマークレットは、ウェブページ上でテキストを選択した後、ブックマークレットをクリックすることで、選択したテキストを「WEBメモ_タイムスタンプ_ページタイトル.txt」ファイルに追記します。

例:「WEBメモ_2023_2_21 23_43_14_python】作りながら覚えるデスクトップアプリ開発|PySimpleGUI - よなを.txt」

また、追記する際には、URLと現在のタイムスタンプをテキスト内に付与します。

また、replace(/[/\\?%*:|"<>]/g, '-'); は、タイトルに使えない文字を「-」に置き換える処理です。

ブックマークレットの作成手順

このブックマークレットを作成する手順は、以下の通りです。

  1. ブラウザのブックマークバーに新しいブックマークを作成
    • ブックマックバーを右クリックして「ページを追加...」をクリック
  2. ブックマークのURL欄に、上記のコードをコピー&ペースト
  3. ブックマークの名前を入力
    • 「WEBメモBML」など(BML:Bookmarklet)
  4. 完了ボタンをクリックしてブックマークを保存

以上でブックマークレットの作成が完了しました。

選択したテキストをWEBメモ.txtファイルに出力したいときは、ウェブページでテキストを選択した後、作成したブックマークをクリックしてください。

タイトルとURLをコピーしました