スマホでのブラウジング効率をUP!
~おすすめブックマークレット7選~
Google ChromeやMicrosoft Edge等のデスクトップ版ブラウザと比べてしまうと、拡張機能の数も少なく、カスタマイズ性の低いiPhone用ブラウザ...ただ、ブックマークレットを活用すれば、スマホでのブラウジングでも作業効率を大幅にアップさせることができるんです。
本サイトでも特定ページのアクセシビリティを向上させるブックマークレットについて紹介したことがありますが、作業効率化に役立てられるブックマークレットは無数に存在しています。
そこで今回の記事ではそんなブックマークレットの使い方と、管理人のLUCAが自作したものを含めた便利なブックマークレット7つをご紹介したいと思います。
🔖前提: ブックマークレットの概要・使い方
LUCAのおすすめブックマークレットをご紹介する前に、まずはよく知らないという方に向けて、ブックマークレットの概要と使い方について解説したいと思います。
既にご存じの方は次項へ読み飛ばしてください。
ブックマークレットの概要
「ブックマークレット」とは一言で言うと「ブックマークに登録できるJavaScript」のことで、表示中のウェブページやそのコンテンツ等に様々な変更を加えることができる簡易的なプログラムのようなものです。
拡張機能のようにブラウザ全体に影響を与えることまではできないものの、デバイス・OS・ブラウザアプリを問わず幅広い環境で利用できるという特徴があります。
なお中身は通常のJavaScriptで記述されているため知識のある人であれば自由に作成・変更することができます。
例えば本記事でご紹介しているブックマークレットのうち、「リンク一覧化」はLUCAが自作したものなので、気になる方はブラウザに登録する際に内容を覗いてみてください。
※ブックマークレットの具体例: ウェブページを翻訳する、ページ内の画像や装飾を取り除く、SNSの共有状況を確認する、ページのアクセシビリティ/ユーザビリティを向上する等
ブックマークレットの使い方
ブックマークレットの使い方はとても簡単で、ブラウザのブックマークにスクリプト(指示)を保存して利用したい場面で呼び出すだけです。
とはいえiPhoneではデスクトップ版ブラウザと違い空の新規ブックマークを作る手順が少し面倒なので、下記の手順で一度作った無関係のブックマークを編集する方が楽かと思います。
- (1) 適当なウェブページを開いた状況でツールバーの「共有」ボタンを押下し、共有メニュー内から「ブックマークに追加」または「お気に入りに追加」を選択する
※記事執筆時、iOS26ではブックマーク管理画面のアクセシビリティが低下してしまっているため「お気に入り」に追加した上でアドレス入力画面から編集する方法を推奨します。
- (2) 保存後、ツールバーの「ブックマーク」画面またはアドレス編集時に表示されるお気に入り欄から追加したブックマークを探し長押しする
- (3) コンテキストメニューから「編集」を選択し、ブックマーク名に任意の名前、URL欄にコピーしたブックマークレットの内容を設定する
※本記事でご紹介しているブックマークレットは何れもワンクリックでコピーできるようになっているので、取得した内容をURL欄に直接貼り付けてご利用ください。
- (4) 保存し、利用するタイミングでブックマークを呼び出す
登録後に一度編集しなければならないとはいえ、基本的な使い方は一般的なブックマークと同じなので、それほど難しい手順ではないかと思います。
それでは本題、ここからLUCAのおすすめブックマークレットを7つ続けてご紹介します。
🔖1. サイト内検索
javascript:%20void%20((function%20()%20%7B%20%20%20function%20getDomainFromURL(url)%7B%20%20%20%20%20%20%20let%20domain%20=%20url.replace('https://','').replace('http://','').split('/')%5B0%5D;%20%20%20%20%20%20%20return%20domain;%20%20%20%7D;%20%20%20let%20input%20=%20prompt('%E3%82%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89%E3%81%AE%E5%85%A5%E5%8A%9B').replace(/%E3%80%80/g,%20'%20');%20%20%20if(input%20!=%20null)%7B%20%20%20%20%20%20%20let%20search_kw%20=%20input%20?%20%27%20%27+%20input%20:%20%27%27;%20%20%20%20%20%20%20let%20search_url%20=%20%27https://www.google.com/search?q=site%3A%27%20+%20getDomainFromURL(location.href);%20%20%20%20%20%20%20window.open(search_url%20+%20search_kw,%20%27newtab%27);%20%20%20%7D;%7D)())
最初のブックマークレットは「サイト内検索」。その名の通り、専用の検索フォームが用意されていないサイトでも簡単にドメイン・サブドメイン単位でサイト内検索を行えるものです。
実行すると検索ワードの入力ダイアログが表示され、探したい用語を入力・決定するとGoogleでの検索結果が新規タブに表示されます。
また検索ワードを入れずに実行するとウェブサイトの全ページが表示されるので、サイトマップの代わりにも利用できて便利です。
🔖2. ページ内検索
javascript:void%28s%3Dprompt%28%27%E3%81%93%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E6%A4%9C%E7%B4%A2%3A%27%2C%27%27%29%29%3Bs%3D%27%28%27+s+%27%29%27%3Bx%3Dnew%20RegExp%28s%2C%27gi%27%29%3Brn%3DMath.floor%28Math.random%28%29*100%29%3Brid%3D%27z%27%20+%20rn%3Bb%20%3D%20document.body.innerHTML%3Bb%3Db.replace%28x%2C%27%3Cspan%20name%3D%27%20+%20rid%20+%20%27%20id%3D%27%20+%20rid%20+%20%27%20style%3D%5C%27color%3A%23000%3Bbackground-color%3Ayellow%3B%20font-weight%3Abold%3B%5C%27%3E%241%3C/span%3E%27%29%3Bvoid%28document.body.innerHTML%3Db%29%3Balert%28%27%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%20%27%20+%20document.getElementsByName%28rid%29.length%20+%20%27%20%E4%BB%B6%27%29%3Bwindow.scrollTo%280%2Cdocument.getElementsByName%28rid%29%5B0%5D.offsetTop%29%3B
一方こちらは表示中のページ内で探したいフレーズを検索できるブックマークレット、「ページ内検索」です。
実行時に表示されるダイアログから検索ワードを入力するとヒット件数がアラートで表示されるとともに、ウェブページでは検索ワードと一致した単語・文章が協調表示されます。
協調表示された箇所はスクリーンリーダーでも周りの文章とは別フォーカスで読み上げられるため、アクセシビリティも比較的高いですよ。
🔖3. スーパーリロード
javascript:window.location.reload(true);
3つ目はPC版ブラウザのショートカットキー「Ctrl+F5」や「Shift+F5」で呼び出せるキャッシュクリア機能、別名「スーパーリロード」をスマートホンでも実行できるようにしたブックマークレットです。
掲示板・ニュースサイト等で情報が更新されない時、こちらを呼び出すだけでキャッシュのクリア・更新を試みることができます。
ただスマートホン用表示のサイトではJavaScriptでクリアできないほどキャッシュがしぶとく保持されてしまう場合もあり、どのサイトでも利用できる訳ではないという点に注意してください。
🔖4. リンク一覧化
javascript:(function()%7Btry%7Bvar%20as=%5B%5D.slice.call(document.querySelectorAll('a%5Bhref%5D'));var%20data=as.map(function(a,i)%7Bvar%20alt='';try%7Bvar%20img=a.querySelector('img%5Balt%5D');if(img)alt=img.getAttribute('alt')%7C%7C'';%7Dcatch(_)%7B%20%7Dvar%20txt=(a.getAttribute('aria-label')%7C%7Ca.textContent%7C%7Ca.getAttribute('title')%7C%7Calt%7C%7C'').trim().replace(/%5Cs+/g,'%20');return%20%7Bi:i+1,href:a.href,text:txt%7C%7C'(%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AA%E3%81%97)'%7D;%7D);var%20w=window.open('about:blank','_blank');if(!w)%7Balert('%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%81%8C%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E8%A8%B1%E5%8F%AF%E3%81%97%E3%81%A6%E3%81%8B%E3%82%89%E3%82%82%E3%81%86%E4%B8%80%E5%BA%A6%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82');return;%7Dvar%20d=w.document;var%20ttl='%E3%83%AA%E3%83%B3%E3%82%AF%E4%B8%80%E8%A6%A7:%20'+document.title;d.open();d.write('%3C!doctype%20html%3E%3Cmeta%20charset=%22utf-8%22%3E%3Ctitle%3E'+ttl+'%3C/title%3E%3Ch1%20id=%22top%22%3E'+ttl+'%3C/h1%3E%3Cp%3E%E6%8A%BD%E5%87%BA%E4%BB%B6%E6%95%B0:%20'+data.length+'%20%E4%BB%B6%3C/p%3E%3Cp%3E%3Cbutton%20id=%22copy%22%3E%E4%B8%80%E8%A6%A7%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%3C/button%3E%20%3Cbutton%20id=%22dl%22%3ETXT%E4%BF%9D%E5%AD%98%3C/button%3E%3C/p%3E%3Col%20id=%22list%22%20aria-labelledby=%22top%22%3E%3C/ol%3E%3Ctextarea%20id=%22txt%22%20style=%22position:absolute;left:-9999px;top:-9999px;%22%3E%3C/textarea%3E');d.close();var%20ol=d.getElementById('list');data.forEach(function(o)%7Bvar%20li=d.createElement('li');var%20a=d.createElement('a');a.href=o.href;a.textContent=o.text%7C%7Co.href;a.target='_blank';a.rel='noopener';li.appendChild(a);var%20url=d.createElement('div');url.textContent=o.href;li.appendChild(url);ol.appendChild(li);%7D);var%20plain=data.map(function(o)%7Breturn%20o.i+'.%20'+(o.text?o.text+'%20-%20':'')+o.href;%7D).join('%5Cn');var%20t=d.getElementById('txt');d.getElementById('copy').addEventListener('click',function()%7Bt.value=plain;t.focus();t.select();(d.execCommand?d:document).execCommand('copy');w.alert('%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F:%20'+data.length+'%20%E4%BB%B6');%7D);d.getElementById('dl').addEventListener('click',function()%7Bvar%20blob=new%20Blob(%5Bplain%5D,%7Btype:'text/plain;charset=utf-8'%7D);var%20url=w.URL.createObjectURL(blob);var%20a=d.createElement('a');a.href=url;a.download='links.txt';d.body.appendChild(a);a.click();setTimeout(function()%7Bw.URL.revokeObjectURL(url);a.remove();%7D,500);%7D);%7Dcatch(e)%7Balert('%E3%82%A8%E3%83%A9%E3%83%BC:%20'+(e&&e.message?e.message:e));%7D%7D)();
続いてはランディングページや検索結果、サイトマップなどでリンクだけを抜き取って表示させたい時に役立つ「リンク一覧化」です。
実行すると表示中のウェブページに含まれるリンク(A要素)が一斉に抜き出され、新規タブにリストとして表示されます。
また同時に「一覧をコピー」や「TXT保存」などのオプションも用意しているので、インデックス作成・参考サイト調査等幅広い用途にご利用いただけます。
🔖5. Amazon商品リンク短縮
javascript:(function()%7Bs=location.href;s='https://amazon.jp/dp/'+s.substr(s.search(/(%5C/product%5C/%7C%5C/dp%5C/)/)).split('/')%5B2%5D.substr(0,10);prompt(unescape('%25u77ED%25u3044URL%25u306F%25u4E0B%25u8A18%25u306E%25u901A%25u308A%25u3067%25u3059%25u3002'),s);%7D)();
Amazonの商品を共有したい時、特に日本語の商品名をエンコードした文字列がURL内に含まれていると、無駄にリンクが長くなってしまい扱いづらいと感じることはありませんか?
「Amazon商品リンク短縮」では表示中の商品ページから共有リンクを取得後、URLから不要な情報を切り取り、短縮形で表示してくれます。
BlueskyなどURLの長さが文字数制限に影響してしまうSNSでの共有時には役立ってくれるかと思います。
🔖6. W3C Validator
javascript:window.open('https://validator.w3.org/check?uri=%27+encodeURIComponent(window.location));void%200
こちらは用途が限られてしまうものの、ウェブ開発者にはうれしいHTML文法✓機能を直接利用できるようにしてくれるブックマークレットです。
呼び出すと表示中のページを直接W3CのMarkup Validation Serviceに渡し、別タブでチェック結果を表示することができます。
🔖7. Sa11y アクセシビリティチェック
javascript:(function(){ const sa11yDialog = document.getElementById("sa11y-csp"); const sa11yScripts = document.querySelectorAll("script[src*='sa11y']"); const createAlert = (message) => { const sa11yDialog = document.createElement("div"); sa11yDialog.id = "sa11y-csp"; sa11yDialog.role = "dialog"; sa11yDialog.textContent = message; sa11yDialog.style.position = "fixed"; sa11yDialog.style.display = "block"; sa11yDialog.style.bottom = "50px"; sa11yDialog.style.right = "50px"; sa11yDialog.style.margin = "auto 0"; sa11yDialog.style.width = "400px"; sa11yDialog.style.zIndex = "10000"; sa11yDialog.style.padding = "10px 80px 10px 10px"; sa11yDialog.style.backgroundColor = "#fff%22;%20%20%20%20%20%20%20%20sa11yDialog.style.border%20=%20%225px%20solid%20#ff0000%22;%20%20%20%20%20%20%20%20sa11yDialog.style.fontWeight%20=%20%22bold%22;%20%20%20%20%20%20%20%20sa11yDialog.style.fontSize%20=%20%2217px%22;%20%20%20%20%20%20%20%20sa11yDialog.style.fontFamily%20=%20%22system-ui,%20sans-serif%22;%20%20%20%20%20%20%20%20sa11yDialog.style.boxShadow%20=%20%220%200%2020px%204px%20rgba(154,161,177,.15),0%204px%2080px%20-8px%20rgba(36,40,47,.25),0%204px%204px%20-2px%20%20%20%20%20%20%20%20rgba(91,94,105,.15)%22;%20%20%20%20%20%20%20%20sa11yDialog.style.borderRadius%20=%20%225px%22;%20%20%20%20%20%20%20%20sa11yDialog.setAttribute(%22role%22,%20%22alert%22);%20%20%20%20%20%20%20%20document.body.appendChild(sa11yDialog);%20%20%20%20%20%20%20%20const%20closeButton%20=%20document.createElement(%22button%22);%20%20%20%20%20%20%20%20closeButton.id%20=%20%22csp-close%22;%20%20%20%20%20%20%20%20closeButton.textContent%20=%20%22Close%22;%20%20%20%20%20%20%20%20closeButton.style.position%20=%20%22absolute%22;%20%20%20%20%20%20%20%20closeButton.style.top%20=%20%2210px%22;%20%20%20%20%20%20%20%20closeButton.style.color%20=%20%22#000%22;%20%20%20%20%20%20%20%20closeButton.style.right%20=%20%2210px%22;%20%20%20%20%20%20%20%20closeButton.style.padding%20=%20%225px%2010px%22;%20%20%20%20%20%20%20%20closeButton.style.backgroundColor%20=%20%22#f6f6f6%22;%20%20%20%20%20%20%20%20closeButton.style.border%20=%20%222px%20solid%20#949494%22;%20%20%20%20%20%20%20%20closeButton.style.borderRadius%20=%20%225px%22;%20%20%20%20%20%20%20%20closeButton.style.cursor%20=%20%22pointer%22;%20%20%20%20%20%20%20%20closeButton.style.fontSize%20=%20%2215px%22;%20%20%20%20%20%20%20%20sa11yDialog.appendChild(closeButton);%20%20%20%20%20%20%20%20closeButton.addEventListener(%22click%22,%20()%20=%3E%20{%20%20%20%20%20%20%20%20%20%20sa11yDialog.remove();%20%20%20%20%20%20%20%20});%20%20%20%20%20%20%20%20const%20close%20=%20document.getElementById(%22csp-close%22);%20%20%20%20%20%20%20%20setTimeout(()%20=%3E%20close.focus(),%20300);%20%20%20%20%20%20%20%20document.addEventListener(%22keyup%22,%20(event)%20=%3E%20{%20%20%20%20%20%20%20%20%20%20if%20(event.key%20===%20'Escape')%20{%20%20%20%20%20%20%20%20%20%20%20sa11yDialog.remove();%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20});%20%20%20%20%20%20};%20%20%20%20%20%20const%20securityListener%20=%20()%20=%3E%20{%20%20%20%20%20%20%20%20if%20(typeof%20sa11y%20===%20'undefined')%20{%20%20%20%20%20%20%20%20%20%20createAlert('This%20website%20has%20a%20security%20policy%20that%20prevents%20Sa11y%20from%20working%20on%20its%20pages.%20Press%20Escape%20to%20dismiss%20this%20message.');%20%20%20%20%20%20%20%20}%20%20%20%20%20%20};%20%20%20%20%20%20const%20url%20=%20window.location.href;%20%20%20%20%20%20if%20(url.includes('bookmarklet')%20&&%20url.includes('sa11y'))%20{%20%20%20%20%20%20%20%20createAlert('Drag%20the%20%22Sa11y%22%20button%20into%20your%20bookmarks%20bar.%20Then%20click%20the%20bookmark%20on%20any%20webpage.');%20%20%20%20%20%20}%20else%20if%20(sa11yDialog%20==%20null%20&&%20sa11yScripts.length%20===%200)%20{%20%20%20%20%20%20%20%20const%20inject%20=%20document.createElement(%22script%22);%20%20%20%20%20%20%20%20inject.src%20=%20%22https://cdn.jsdelivr.net/gh/ryersondmp/sa11y@latest/bookmarklet/v2.js%22;%20%20%20%20%20%20%20%20document.body.appendChild(inject);%20%20%20%20%20%20}%20else%20{%20%20%20%20%20%20%20%20location.reload();%20%20%20%20%20%20}%20%20%20%20%20%20document.addEventListener(%22securitypolicyviolation%22,%20securityListener);%20%20%20%20%20%20setTimeout(()%20=%3E%20document.removeEventListener(%22securitypolicyviolation%22,%20securityListener),%20100);%20%20})();
最後にご紹介する「Sa11yアクセシビリティチェック」もやや開発者向けのブックマークレットで、表示中のページで発生しているアクセシビリティ上の問題点を細かく確認・表示してくれるものです。
呼び出すとページ右下に「アクセシビリティの確認」というボタンが表示され、こちらを展開することで発生中の問題・注意点の件数を確認できるようになっています。
また同時に問題発生個所それぞれに「エラー」や「警告」というボタンが表示され、それらを選択することで具体的な事象・改善案を確認することができます。
🔖まとめ
さて、今回はスマートホンでのブラウザ利用に便利なブックマークレットの使い方と、LUCAのおすすめ7選をご紹介しましたが、如何だったでしょうか。
記事中で取り上げているものにはやや偏りがあったかもしれませんが、ネット上には数えきれないほどの便利なブックマークレットが掲載されていますので、ぜひ日々のウェブ検索・ブラウジングに活用していただければと思います。