iPhoneでブックマークレットを登録する方法

iPhoneでのブックマークレットの登録方法と使い方についてをまとめてみた。

ブックマークレットとは？
iPhoneのブックマークレットの登録と使い方
ブックマークレットが動かない
関連記事

ブックマークレットとは？

ブックマークレットは、ユーザーがiPhoneやAndroidなどのスマホ、及びPCのブラウザのブックマークから起動し、特定の処理を行う簡易的なJavaScriptのプログラムだ。

実際にはブックマークのURL欄にJavaScriptの簡易的なプログラムを貼り付けて保存し、実行する際にはそのブックマークを呼び出しして使う。

ブックマークレットのプログラム例として下記のようなものがある。

表示中のページのタイトルとURLをクリップボードにコピーする
選択したキーワードを特定のサイトで検索する
特定のサービスに投稿や連携して保存する
選択したキーワードをGoogle翻訳などで翻訳する

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

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

まずは、iPhoneのブックマークレットを登録する方法。

Safariブラウザで適当なページを開き、画面下部の共有アイコンをタップする。

メニューが表示されたらブックマークを追加を選択。

ブックマーク編集画面が表示されるので、①ブックマークの名前、②保存場所をブックマークに指定し、③保存をタップで一旦保存する。

上記手順で保存するとブックマークの編集画面が閉じるが、再度編集するために画面下部のブックマークアイコンをタップ。

メニューが開いたら編集をタップする。

そしたら先程追加したブックマークを選択する。

URL欄の X をタップしてURLを削除する。

そしたら下記ブロックの右上のCopyをタップして、ブックマークレットのコードをコピーする。このブックマークレットは、Amazonを利用するうえで便利な機能を色々と盛り込んでいるブックマークレットだ。詳細は後ほど使い方で解説してみたいと思う。

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欄にブックマークレットのコードを貼り付けて、キーワードの完了をタップする。

前の画面に戻ったら右下の完了をタップしてブックマークレットの登録を完了させる。

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

登録したブックマークレットの使い方だが、Webページを開いて画面下部のブックマークアイコンをタップ。

ブックマークが表示されたら登録したブックマークレットを選択する。

すると下記のようなAmazonに関連したメニューが表示される。

上記のメニューの説明。

割引検索を開く: Amazonの割引検索ができる当サイトで用意したページが開く; 関連 Amazonの割引検索！90% Offの商品も簡単に探せる
使い方を見る: 当ページの価格推移でスマホを見るためのページが開く。; 関連 Amazonの価格推移をスマホブラウザで確認する方法

さらにこのブックマークレットのおすすめポイントはブラウザでAmazonの商品詳細ページを開いている時にブックマークレットを使用すると、下記のようなAmazonのメニューが表示される。

①価格推移をKeepaでチェック: Amazonの商品詳細ページの商品を価格推移のKeepaのページで開いて素早く確認できる
②サクラレビューチェック: Amazonの商品詳細ページの商品をサクラレビューのページで開いて素早く確認できる

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

まずはChromeのブラウザで適当なWebページを開き、画面右下のサブメニューをタップ。

メニューが開いたらブックマークに追加を選択。

ブックマークを追加するとメニューが閉じるので、再度、画面右下のサブメニューをタップ。

メニューが開いたら今度はブックマークを編集を選択。

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

タイトルとURLをコピーCopy
javascript:(function(){var t=document.title,u=location.href;navigator.clipboard.writeText(t+'\n'+u).then(function(){alert('タイトルとURLがコピーされました。')}).catch(function(e){alert('コピーに失敗しました: '+e)})})();

再度Chromeのブックマークの編集画面に戻って、①ブックマークレットの名前を入力、URL欄にコピーした②ブックマークレットのコードを貼り付け、③完了をタップでブックマークレットを保存する。

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

Chromeブックマークレットを使うには、画面右下のサブメニューをタップ。

メニューが開いたら左上のブックマークの星アイコンをタップ。

そしたら作成したブックマークレットを選択。

するとブックマークレットが実行される。サンプルの例はアラート画面が表示されて表示中のページのタイトルとURLをコピーできる。実際にコピーできたかどうかはメモ帳などに貼り付けて確認をしてもらえれば。

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

ブックマークレットが動かない場合は下記を確認してもらえれば。

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

ブックマークレットを登録する時のブックマークのURL欄に文字列消し忘れの文字がないかを確認。

ブックマークレット以外のコードが残っていると動かない。

公開されているコードに問題がある

公開されているコードに問題があると動作しない。これはコードを公開している作者に確認してみるといいだろう。

コードにコメントがある

自分でコードを開発している人は、コードの開発時にコメントがあると動かないので削除を。

ブラウザが対応していない

筆者が公開したAmazonのブックマークレットだが、記事執筆時点で動作確認したのは下記のブラウザとなっている。

iPhone	Android
Safari	Chrome

iPhoneのChromeは、記事執筆時点で筆者が確認する限りでは動作しなかった。

しかし、さらに検証した結果、コードそのものがうまくChromeで動作しなかったようで、iPhoneのChromeであっても下記のような簡単なブックマークレットだったら問題なく動作した。なので、これはブラウザがコードに対応していないと考えられるので、稼働するコードに変更するかブラウザを変更するといいかと。

タイトルとURLをコピーCopy
javascript:(function(){var t=document.title,u=location.href;navigator.clipboard.writeText(t+'\n'+u).then(function(){alert('タイトルとURLがコピーされました。')}).catch(function(e){alert('コピーに失敗しました: '+e)})})();