なにかツールを作るまでもないが、ブラウザ上での作業を簡略化したい場合、ブックマークレットを使うケースがあり、色々と工夫していたら一つの記事になりそうだなと思ったので、いつも使っているTIPSを共有します

ブックマークレットって？

ブックマークから起動する簡易的なプログラムです。ブックマークのURLのところにjavascript:からスタートする文字列を入れると、JavaScriptが動くというものです。 JavaScriptが動くので基本何でもできるのですが、入力欄が一行なので開業をベースとした通常のJavaScriptとは違った書き方を推奨されます。

書き方のコアコンセプト

基本的に短めにする
カンマやセミコロンなどで明示的に文の区切りを指定する

TIPS

クロージャーでくくる

ブックマークレットはグローバル変数を汚染するため、スコープを制限するためにクロージャーでくくることが推奨されています

Google Chromeでは下記のようにするだけでOKです

1
2
3
(()=>{
  // 実際の処理
})()

document等の外部変数を注入する場合は下記のように引数に追加します。

1
2
3
((d)=>{
  // 実際の処理
})(document)

まぁ推奨されているとはいえ、自分用の即席ツール作るようなときが多いのであんまりやってないことが多いです…(カッコが多くてよくわからんくなる)

bindを使ってよく使う関数を簡略化する

ブラウザ上で動くツールを作る際、基本的にその画面に作用するような処理を書くことになるかと思います。

document.querySelector()
document.createElement()

これらは非常に便利な反面、文字数が非常に多いので、下記のように短縮し、処理の最初の方に記述しておきます

1
2
3
4
d=document,
s=d.querySelector.bind(d),
ss=d.querySelectorAll.bind(d),
c=d.createElement.bind(d)

こうすることによって

1
2
- document.querySelector('h1')
+ s('h1')

のような形で記述することが出来ます。ここで大事なのはbindを使うことです。bindを使わないとIllegal invocationエラーが発生します。

クリップボードにコピーする

クリップボードにコピーするには、devtool上で使えるcopy()は使えないため、DOM操作をした上で、 execCommand('copy') をして上げる必要があります。

クリップボードにコピーする際はタブ文字等HTMLタグに影響する文字列もコピーしたいケースがあるので、個人的には textareaタグを用いてコピーするのが好みです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 必要な変数の定義
b=d.body,
t=c('textarea'),

// コピーしたい文字列
t.value="挿入したい文字列",

// 実際のページに反映されないように外に逃がす
ts=t.style,
ts.position='fixed',
ts.left='-100%',

// カーソル指定
t.selectionStart=0,
t.selectionEnd=t.value.length,

// DOM反映
b.appendChild(t),

// フォーカスしてコピって外して消す
t.focus(),
d.execCommand('copy'),
t.blur(),
b.removeChild(t) 

コピーしたいときは、スプレッドシートに貼り付けたいケースだったりするので、文字列を配列にしてタブ文字で結合するのも簡単なTIPSになります。

1
2
3
4
5
t.value='"'+[
s('#title').innerText,
s('a').getAttribute('href'),
...[...ss('div.class')].map(e=>e.innerText)
].join('"\t"')+'"'

最後に結合する

上記のままでは当然ブックマークバーに入りません。一行にする必要があるのですが、僕はVIMをよく使っているので、下記のコマンドを実行することで簡単に結合しています。

1
2
ggVGJ # 全部選択して一行にする
:%s/, /,/g # 基本的にカンマ区切りで実装しているため、カンマのあとにスペースが来るようになるため、そのスペースを除去

まとめ

ブックマークレットを使いこなすことによって、作業効率が上がるケースは多いかと思います。ここにないTIPSなどあれば教えてもらえると嬉しいです！

Bookmarkletの作成Tips

Contents