最近、「ちょっとした不便」を解消する目的でブックマークレットをいくつか試してみました。
ブラウザだけで完結する手軽さがあり、拡張機能を作るほどでもないけれど、毎回手作業なのは面倒…という場面にちょうどよいと感じています。
今回は、実際に試してみた内容に加えて、簡単なサンプルコードも交えながらまとめてみます。
まずは最小構成（Hello World）
ブックマークレットはこんな感じで書けます。
javascript:(function(){
alert('Hello World');
})();
これをブックマークのURL欄に貼り付けるだけで、クリック時に実行されます。
「とりあえず動くもの」を作るには十分です。
1. 画面内の金額を合計する
やりたかったこと
一覧画面やサブリストの合計をすぐに把握したい
サンプルコード
javascript:(function(){
let sum = 0;
document.querySelectorAll('body *').forEach(el => {
const text = el.textContent.trim();
if (/^[0-9,]+$/.test(text)) {
sum += parseInt(text.replace(/,/g, ''), 10);
}
});
alert('合計: ' + sum.toLocaleString());
})();
ポイント
-
カンマ付き数値に対応
-
雑に拾っているので「ざっくり確認」用途向け
使ってみた感想
ワンクリックで合計が出るので、確認作業がかなり楽になります。
2. 一覧をCSV化する
やりたかったこと
画面の表データをそのまま持ち出したい
サンプルコード
javascript:(function(){
let csv = '';
document.querySelectorAll('table tr').forEach(tr => {
let row = [];
tr.querySelectorAll('th, td').forEach(td => {
row.push('"' + td.innerText.replace(/"/g, '""') + '"');
});
csv += row.join(',') + '\n';
});
const blob = new Blob([csv], { type: 'text/csv' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'export.csv';
a.click();
})();
ポイント
-
表をそのままCSV化
-
軽いデータ加工用途に便利
使ってみた感想
標準エクスポートよりも気軽に使えます。
3. ステータスの色分け
やりたかったこと
未処理・完了などを視覚的に判断したい
サンプルコード
javascript:(function(){
document.querySelectorAll('td').forEach(td => {
if (td.innerText.includes('未処理')) {
td.style.backgroundColor = '#ffcccc';
}
if (td.innerText.includes('完了')) {
td.style.backgroundColor = '#ccffcc';
}
});
})();
ポイント
-
シンプルに文字判定
-
CSSを上書きして視認性を向上
使ってみた感想
スクロールしても状態がすぐ分かるようになり、想像以上に快適です。
4. 入力補助（テスト用）
やりたかったこと
テスト時の入力を自動化したい
サンプルコード
javascript:(function(){
document.querySelectorAll('input').forEach((input, i) => {
if (input.type === 'text') {
input.value = 'test_' + i;
}
if (input.type === 'email') {
input.value = 'test@example.com';
}
});
})();
ポイント
-
inputのtypeで分岐
-
テストデータを一括投入
使ってみた感想
入力の手間が減るだけでなく、入力漏れ防止にもなります。
全体的な所感
今回試した内容はいずれも小さな工夫ですが、日々の作業にしっかり効いてくる改善になりました。
特によかった点は以下です。
-
ブラウザだけで完結するため導入が簡単
-
思いついたらすぐ試せる
-
影響範囲が限定的で安心
まとめ
「ツールを作るほどではないけれど、毎回少し面倒」と感じる作業は意外と多くあります。
そうした部分にブックマークレットを当ててみると、ちょうどよいバランスで効率化できると感じました。
まずはHello Worldのような簡単なものから試し、少しずつ自分の作業に合わせて育てていくのがよさそうです。
今後も気軽に試しながら、小さな改善を積み重ねていきたいと思います。
