テック・ガジェット・写真とか

Androidのブックマークレットの登録方法と使い方

AD

AndroidのChromeのブラウザでブックマークレットを登録して使う方法をまとめてみた。

Androidのブックマークレットの登録方法

Androidのブックマークレットの登録方法だが、まずは適当なWebページをChromeで開いて右上のサブメニューをタップする。

AndroidのSafariのサブメニュー選択

サブメニューが開いたら星アイコンをタップしてブックマークを追加する。

AndroidのSafariのブックマーク追加

すると画面の下部にブックマークを保存したと案内が表示されるのでタップする。時間が経つと消えるので、消えている場合には再度サブメニューを開いて星アイコンをタップ。

Androidで保存したブックマークをタップ

するとブックマークの編集画面に移動するので、ブックマークの名前を①「あ」のように少ない文字数で名前を入力する。というのも、Androidはブックマークの名前を呼び出しして使うため、あまり長いと入力が面倒でブックマークレットの呼び出しが億劫になるからだ。終わったら②URL欄を削除しておこう。

Androidのブックマークを編集

そしたら下記ブロックの右上のCopyをタップしてブックマークレットのコードをコピーする。

Awesome AMZ Bookmarklet Ver1.2Copy
javascript:(function(){var d=document,b=d.body,e=d.createElement.bind(d),s=e("style"),m=e("div"),c=e("div"),g=(l,k)=>l.setAttribute("style",k),h=l=>{if(l.target===m)m.remove()},p=(l,t,u)=>c.innerHTML+=`<a href="${u}" class="amz-link" onclick="return ${l}">${t}</a>`,q=/\/(?:dp|product)\/([A-Z0-9]{10})/,t=location.href,u=t.includes("amazon.co.jp"),v=u?t.match(q):null,w=v?v[1]:"";window.amzRemove=_=>m.remove()||!1;window.amzOpen=u=>(window.open(u,"_blank"),window.amzRemove(),!1);s.textContent=`.amz-modal,.amz-modal *{all:revert;box-sizing:border-box}.amz-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;display:flex;justify-content:center;align-items:center;font-family:Arial,sans-serif}.amz-content{background:#fff;padding:20px;border-radius:5px;max-width:80%;max-height:80%;overflow-y:auto;width:300px}.amz-link{display:block;padding:10px 0;text-decoration:none}.amz-link,.amz-link:link,.amz-link:visited{color:#333}.amz-content p{font-size:16px}`;b.appendChild(s);m.className="amz-modal";c.className="amz-content";m.appendChild(c);b.appendChild(m);m.addEventListener("click",h);if(!u){p("amzOpen('https://hep.eiz.jp/article/az-sale-search/?utm_source=hep-bookmarklet')","割引検索を開く","#");p("amzOpen('https://hep.eiz.jp/article/az-check-price-sp-browser/?utm_source=hep-bookmarklet')","使い方を見る","#")}else if(!w){c.innerHTML+="<p style='color:#e50c0c'>商品詳細ページを開いてください</p>";p("amzOpen('https://hep.eiz.jp/article/az-sale-search/?utm_source=hep-bookmarklet')","割引検索を開く","#");p("amzOpen('https://hep.eiz.jp/article/az-check-price-sp-browser/?utm_source=hep-bookmarklet')","使い方を見る","#")}else{p("amzOpen('https://keepa.com/#!product/5-"+w+"')","価格推移をKeepaでチェック","#");p("amzOpen('https://sakura-checker.jp/search/"+w+"')","サクラレビューチェック","#");p("amzOpen('https://hep.eiz.jp/article/az-sale-search/?utm_source=hep-bookmarklet')","割引検索を開く","#");p("amzOpen('https://hep.eiz.jp/article/az-check-price-sp-browser/?utm_source=hep-bookmarklet')","使い方を見る","#")}})();

そしたら、URL欄にコピーした①ブックマークレットのコードを貼り付けて、②確定し、③戻る。これで準備は完了。

Androidのブックマークレットを保存

Androidのブックマークレットの使い方

ブックマークレットを登録したら、今度は使い方を見てみよう。

Androidの場合は、ブラウザのアドレスバーをタップ。

AndroidのChromeのアドレスバーをタップ

そしたら、先程登録した①ブックマークレットの名前を入力し、表示され②あ／モバイルのブックマークを選択する。

AndroidのChromeのブックマークレットを呼び出す

そうするとブックマークレットのプログラム内容の機能が実行される。先ほど追加したブックマークレットはAmazonを利用する際に便利なブックマークレットとなっている。

軽くメニューの紹介。

  1. 割引検索を開く
    • 当ページで用意したAmazonの割引検索ページにアクセスできる。
  2. 使い方を開く
    • 当サイトで用意したAmazonの価格推移をスマホブラウザで見るためのページが開く
Androidのブックマークレットの機能①

Amazonの商品詳細ページで同じブックマークレットを実行すると下記のメニューが利用できる。

  1. 価格推移をKeepaでチェック
    • 商品詳細ページで開いてる商品の価格推移をKeepaのサイトで簡単に確認できる。
  2. サクラレビューチェック
    • 商品詳細ページで開いている商品のレビューが怪しいかをサクラレビューのサイトで確認できる
Androidのブックマークレットの機能②

ブックマークレットでChromeが動かない

ブックマークのURL欄の記述を確認する

ブックマークのURL欄に削除したはずの文字列が残っていないか確認を。

コードにコメントがある

自分でブックマークレットを開発している人でコメントを残している場合には動かないので削除を。

コードに問題がある

単純にコードに問題がある場合は動作しない。

例えば、下記のシンプルなコードをブックマークレットに登録して動くかを検証。動くようであれば、コードに問題があるということになる。

Hello WorldCopy
javascript:alert('Hello World');

その他にも特殊文字がないかを確認を。

ブラウザの仕様よっては動かない

ChromeでもPCで問題ないのに、Androidだと動かない、iPhoneで動くのにAndroidだと動かないという事もある。

デバイスの環境、ブラウザの仕様に依存する部分があるので、とりあえず他のブラウザや他のデバイスのブラウザで試すしかない。

関連記事