ブックマークレットを作るときの注意点など

ブックマークレットを作るときに気をつけるべき点とかメモ。

スコープ

  • スコープを汚さないために、(function(){})()で囲います。
    • 例えば、alert("hoge")を実行したいなら、javascript:(function(){alert("hoge")})()と書きます。
  • さらに万全を期すならjavascript:void((function(){alert("hoge")})())という風に、void()で囲って書きます。
    • void()で囲う理由は、ブックマークレットを実行した際に何かしらの値を返してしまうと、それに応じてページ遷移してしまうのを防ぐためです。

クオートの種類

ブログなどでブックマークレットを配布する場合、

<a href='javascript:alert("hoge")'>ブックマークレット</a>

みたいな感じで、aタグのhref属性の中に、埋め込む形になると思いますが

 

以下のように

<a href="javascript:alert("hoge")">ブックマークレット</a>
  • ダブルクォーテーションの中にダブルクォーテーションを入れ込んでしまったり
  • シングルクォーテーションの中にシングルクォーテーションを入れ込んでしまったり

などをすると動きません。

ブックマークレット ←動かないサンプルです(デベロッパーツールでソースコードを見てみてください)

 

これを防ぐには、以下の2通りの方法があります。

  • 同じクォーテーションを入れ子にしない
    • 例えば、aタグでダブルクォーテーションを使う場合は中ではシングルクォーテーションを使い、aタグでダブルクォーテーションを使う場合は中ではシングルクォーテーションを使う
  • クォーテーションをURLエンコードする
    • 例えば、alert("hoge")ならalert(%22hoge%22)みたいな感じで、ダブルクォーテーションを%22という形に変換する。

 

ブックマークレットへの変換ツールはググれば色々出てきますが、ツールによっては

  1. 空白と改行だけを削除してくれるツール
  2. 空白と改行を削除して、javascript:の形に整形してくれるツール
  3. 空白と改行を削除して、javascript:の形に整形し、URLエンコードしてくれるツール
  4. 空白と改行を削除して、javascript:の形に整形し、URLエンコードし、void()を付け加えてくれるツール
  5. 空白と改行を削除して、javascript:の形に整形し、URLエンコードし、void()を付け加え、最終的にminifyしてくれるツール

みたいな感じでいろいろあります。

 

例えば、以下のサイトは5.をすべて満たすサイトです。

https://bookmarklets.org/maker/

 

日本語で検索して出てくるサイトはほとんど機能がショボかったりするので、できれば上のサイトを使ってブックマークレットを作ったほうが良いと思います。

 

 

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

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