目次

Edge でブックマークレットを実行したい

今回の投稿は、ウェブブラウザの Microsoft Edge マイクロソフト エッジ で、ブックマークレットを新規作成して実行するテストを行ってみたいと思います。

ブックマークレットは、ウェブブラウザのお気に入り、ブックマークの URL 設定欄に Javascript ジャバスクリプトの命令文を記述して、ウェブブラウザから実行できる機能のようです。

Edge のお気に入りの追加の画面です。お気に入りの URL に Javascript ジャバスクリプトのコードを入力しています。
Edge のお気に入りの追加の画面です。お気に入りの URL に Javascript ジャバスクリプトのコードを入力しています。

テストに使用する Microsoft Edge  のバージョンは 111.0.1661.62 、パソコンの OS は Windows11 Home 64 ビットです。

以下、ステップ 1 から 3 までありますが、良ければご覧下さい。

目次まで戻る

1. お気に入りバーを表示

まずは、 Edge のお気に入りバーを表示してみます。

  1. Edge の右上に表示されている「 ... 」をクリックして、「設定など」を開きます。「Alt + F」のキーボードショートカットでも開くようです。(下図 1)
  2. 下の方にある「設定」をクリックします。(下図 2)
Edge の「設定など」を開いた状態です。
Edge の「設定など」を開いた状態です。
  1. 左側の「外観」をクリックします。(下図 1)
  2. 「外観」ページを下の方にスクロールしていくと、「ツール バーのカスタマイズ」という項目があります。その配下の「お気に入りバーの表示」の項目を探します。(下図 2)
  3. 「お気に入りバー」の表示方法を「常に表示」「なし」「新しいタブのみ」の中から選択します。今回は「常に表示」を選んでみました。(下図 3)
  4. 「設定」ページを閉じるか、前のページに戻って完了です。(下図 4)
Edge の外観設定ページです。お気に入りバーの表示方法を選択可能です。
Edge の外観設定ページです。お気に入りバーの表示方法を選択可能です。
  1. お気に入りバーが表示されました。私の場合は 9 個のお気に入りを既に登録していたので、 A ~ I まで 9 個のお気に入りがお気に入りバーに表示されています。
    I はフォルダになっていて、この中にもお気に入りが複数入っています。(下図 1)
お気に入りバーが表示された画面です。
お気に入りバーが表示された画面です。

補足

正式な方法では無いかもしれませんが、 Edge で「edge://settings/appearance」にアクセスしても「外観」設定のページを表示出来ました。

「edge://」から始まる特殊な URL なので Edge 固有の URL のようです。

ウェブブラウザの Firefox ファイヤーフォックス で「edge://settings/appearance」にアクセスしようとしたところ、検索エンジンの検索結果ページに飛びました。

「edge://settings/appearance」にアクセスして「外観」設定のページを表示しました。
「edge://settings/appearance」にアクセスして「外観」設定のページを表示しました。

目次まで戻る

2. ブックマークレットを新規作成

次は、新規のブックマークレットを追加してみます。

  1. ☆ 印に横棒 3 本の「お気に入り」をクリックします。「Ctrl + Shift + O(オー)」のキーボードショートカットでも同じ動作になるようです。(下図 1)
  2. 「...」をクリックします。その他オプションが表示されます。(下図 2)
  3. 「お気に入りページを開く」をクリックします。(下図 3)
「お気に入りページを開く」の表示方法です。
「お気に入りページを開く」の表示方法です。
  1. 「お気に入りバー」をクリックします。(下図 1)
  2. 「お気に入りバー」の中のお気に入りが表示されています。(下図 2)
  3. 余白のような何もない所で、右クリックします。(下図 3)
  4. 「お気に入りの追加」をクリックします。(下図 4)
「お気に入りの追加」操作画面
「お気に入りの追加」操作画面
  1. 「名前」の項目に自由な名前を入力します。今回は「test テスト」と入力してみました。日本語でも良いようです。(下図 1)
  2. 「URL」の項目に Javascript ジャバスクリプト の命令文を入力します。今回は以下の文字を入力しました。(下図 2)
    画面にメッセージを表示する Javascript の記述です。「Javascript:(コロンの記号)」から始まる書式になっています。
    「alert("abc");(セミコロンの記号)」が実際の命令文になっています。
    javascript:alert("abc");
  3. 「保存」をクリックします。(下図 3)
お気に入りの追加の「名前」と「URL」を入力している画面。
お気に入りの追加の「名前」と「URL」を入力している画面。
  1. 「お気に入りバー」をクリックします。(下図 1)
  2. 「お気に入りバー」の中に「test テスト」という名前のお気に入りが追加されています。(下図 2)
  3. 上部に表示されている「お気に入りバー」の中にも「test テスト」という名前のお気に入りが追加されています。(下図 3)
  4. 「お気に入りバー」の中に隠れているお気に入りは「>」をクリックして表示できます。(下図 4)
  5. 隠れているお気に入りが表示されています。(下図 5)
  6. 新しいタブを開きます。「 Ctrl + T 」のキーボードショートカットでも同じ動作になるようです。(下図 6)
ブックマークレットが新規追加されました。
ブックマークレットが新規追加されました。

補足

  1. またしても補足ですが、 Edge で「edge://favorites/」の URL にアクセスしても「お気に入りページ」を開くことができました。
    ウェブブラウザ Firefox で「edge://favorites/」を開こうとしたところ、検索結果のページに移動しました。
    やはり「edge://」から始まる URL は Edge 専用の画面のようです。(下図 1)
  2. 「お気に入りページ」が表示されている。(下図 2)
「edge://favorites/」からお気に入りページを表示出来ました。
「edge://favorites/」からお気に入りページを表示出来ました。

目次まで戻る

3. ブックマークレットを実行

  1. 「新しいタブ」が表示されています。「新しいタブ」では無くても通常のウェブページ上でもブックマークレットを実行できるようです。
    「edge://」から始まる Edge の専用画面ではブックマークレットを実行出来ないようです。(下図 1)
  2. 「test テスト」をクリックします。上記で新規に作成したブックマークレットです。(下図 2)
  3. 「javascript:alert("abc");」のジャバスクリプトが実行されて「abc」のメッセージが表示されました。(下図 3)
  4. 「OK」でメッセージを閉じます。(下図 4)
ジャバスクリプト「javascript:alert("abc");」の実行結果です、
ジャバスクリプト「javascript:alert("abc");」の実行結果です、

目次まで戻る

複数行のブックマークレット

複数行のジャバスクリプトを実行するブックマークレットのテストも行ってみたいと思います。

  1. ウィンドウズの「メモ帳」アプリを開きます。(下図 1)
  2. 複数のジャバスクリプトのコードを記述しました。(下図 2)
  3. すべての文字を選択してコピー(Ctrl + C)します。(下図 3)
メモ帳で複数行のジャバスクリプトのコードを作成しました。
メモ帳で複数行のジャバスクリプトのコードを作成しました。
javascript:
var a=1+2+3;
alert(a);
  1. Edge で「お気に入りバー」の中に新規のお気に入りを追加します。名前は「複数行のブックマークレット」としてみました。(下図 1)
  2. 上記でコピーしたジャバスクリプトのコードを、そのまま貼り付けます(Ctrl + V)。そうすると 1 行の URL のように自動で整形されて表示されました。(下図 2)
  3. 「保存」します。(下図 3)
複数行のジャバスクリプトのコードを URL に入力しました。
複数行のジャバスクリプトのコードを URL に入力しました。
  1. Edge で「お気に入りバー」の中に登録されている「複数行のブックマークレット」を実行してみると「6」という足し算の計算結果がメッセージとして表示されました。(下図 1)
計算結果が表示されました。
計算結果が表示されました。

目次まで戻る

関数を呼び出すブックマークレット

関数を呼び出すブックマークレットの作成テストも行ってみたいと思います。

  1. ウィンドウズの「メモ帳」アプリで以下のジャバスクリプトのコードを作成しました。このコードをすべてコピー(Ctrl + C)します。(下図 1)
メモ帳で関数を呼び出すジャバスクリプトのコードを作成しました。
メモ帳で関数を呼び出すジャバスクリプトのコードを作成しました。
javascript:ab();

function ab() {
var a=document.title;
var b=location.href;
document.open();
document.write("<div style=\"font-size:3em;\"><p>"+a+"</p>"+"<p>"+b+"</p></div>");
document.close();
}
  1. Edge で「お気に入りバー」の中に新規のお気に入りを追加します。今回の名前は「関数を呼び出すブックマークレット」としてみました。(下図 1)
  2. 上記のジャバスクリプトのコードを、そのまま貼り付けます(Ctrl + V)。貼り付けると 1 行のコードのように表示されると思います。(下図 2)
  3. 「保存」します。(下図 3)
関数を呼び出すブックマークレットを新規追加しています。
関数を呼び出すブックマークレットを新規追加しています。

Edge で当ブログの以下のページを表示して「お気に入りバー」に保存されている「関数を呼び出すブックマークレット」を実行してみます。

スマホにイヤホン端子の差し込み口が無い場合は USB タイプ C 変換ケーブルが便利です。 – pulogu.net
https://pulogu.net/blog/010-leisure/smartphone-earphone-terminal-no-outlet-usb-type-c-conversion-cable/

ページのタイトルは「スマホにイヤホン端子の差し込み口が無い場合は USB タイプ C 変換ケーブルが便利です。 – pulogu.net」になっています。

URL は「https://pulogu.net/blog/010-leisure/smartphone-earphone-terminal-no-outlet-usb-type-c-conversion-cable/」になっています。

  1. 「https://pulogu.net/blog/010-leisure/smartphone-earphone-terminal-no-outlet-usb-type-c-conversion-cable/」のページで「関数を呼び出すブックマークレット」を実行しました。(下図 1)
  2. ページのタイトルが取得されて表示されました。元のページのタイトルと一致しています。(下図 2)
  3. ページの URL が取得されて表示されました。 URL も一致していますね。(下図 3)
ウェブブラウザの画面にウェブページのタイトルと URL が出力されている。
ウェブブラウザの画面にウェブページのタイトルと URL が出力されている。

実行結果を以下にコピー、ペーストしてみました。

スマホにイヤホン端子の差し込み口が無い場合は USB タイプ C 変換ケーブルが便利です。 – pulogu.net

https://pulogu.net/blog/010-leisure/smartphone-earphone-terminal-no-outlet-usb-type-c-conversion-cable/

目次まで戻る

編集

追加したブックマークレットを右クリックして「編集」をクリックすると、「お気に入りの編集」を行えるようです。 JavaScript のコードを修正できるようです。

「お気に入りの編集」画面です。
「お気に入りの編集」画面です。

目次まで戻る

テスト環境

  • Microsoft Edge バージョン 111.0.1661.62
  • Windows11 Home 64 ビット

以上、閲覧ありがとうございました。

目次まで戻る

[ Amazon.co.jp アソシエイト ] JavaScript 関係の本
https://amzn.to/48EoeGM

同じカテゴリの投稿(ブラウザ)

前後の投稿