【Safari機能アップ】iPhoneでのブックマークレット使い方

2022 8/10

2022-08-10

iPhoneブラウザのSafariの機能をグレードアップしてくれるブックマークレットを登録しましょう

例えば、英語サイトの翻訳やサイトをPDFで保存したりなどワンタップで実現可能になります

紹介するブックマークレットは4つ

英語サイトを翻訳
住所からGoogleマップ表示
ページを一番下までスクロールする
Youtubeをリピート再生

iPhoneブラウザのSafariに便利なブックマークレットを登録してみましょう

CONTENTS

ブックマークレットとは

※ブックマークレットについて知っていてコードが知りたい方はSafariブックマークレット4選からお読みください

ブラウザのブックマークから呼び出せる便利機能のことです

登録するコードによって追加できる機能は変わります

例えば、住所をGoogle Mapで検索するブックマークレット

住所をGoogle Mapで検索することは手動でもできます

ただ、ブックマークレットの魅力はブックマークからワンタップで実行できることです

例えば、住所をGoogle Mapで検索するには

住所をコピーする
Google Mapサイトを開く
検索窓に住所をペーストする
検索する

の4つの手順がブックマークレットは登録してあるブックマークをタップするだけで実行できます

Safariにブックマークレットを登録する方法

iPhoneのSafariにブックマークレットを追加する手順をみていきます

ブックマークレットの登録はブックマークを編集して作成します

どのページでもいいのでブックマークを作る
新しく作成したブックマークを編集モードにする
わかりやすいタイトルに変更
追加したい機能のコードを貼り付ける

4つの手順でブックマークレットを追加することができます

ブックマークを作成する

まずはどのサイトでもいいのでページをSafariで表示します

今回はAppleの公式サイトをブックマークに追加してみます

共有ボタンをタップしてメニューを開きます

「ブックマークを追加」をタップします

表示されていたサイトとURLが表示されます

ブックマークレットが増えてくると管理が大変になるのでフォルダを作っておきましょう

フォルダは初期設定ではお気に入りが選択されています

場所の項目をタップすると新規フォルダ項目がでてくるので選択します

フォルダの名前を入力してフォルダの保存先をブックマークにします

保存をタップすると場所に新しく作ったブックマークレットフォルダが選択されていますね

ブックマークを追加画面で保存を押せばブックマークの保存は完了です

ブックマークレットに変更する

新しく作ったブックーマークをブックマークレットに変更します

Safariのブックマークアイコンをタップシてブックマーク一覧を表示します

先程作ったブックマークレットフォルダ内にブックマークがありますね

編集をタップして編集モードにします

変更するブックマークをタップします

※画像ではAppleのブックマークですね

上部がブックマークレットの名前、下にコードを貼り付けます

英語サイトを翻訳するブックマークレットを作ってみます

コードは下記をコピーして貼り付けます

javascript:void(0);void(0);void(0);void(0);void(%27Add%20this%20text%20into%20the%20code%20to%20suppress%20the%20tooltip%20with%20long%20script%27);void(0);void(0);void(0);void(0);void(0);void(0);void(0);q=location.href;void(location.href=%27http://translate.google.com/translate?hl=ja&sl=en&u=%27+q);

戻るをタップすると編集は完了です

右下の完了をタップして編集モードが終わります

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

登録したブックマークレットを使うにはブックマークから呼び出します

ブックマーク一覧を表示
ブックマークレットをタップする

英語サイトで作ったブックマークレットをタップするだけです

ちゃんと翻訳されたページが表示されました

Safariブックマークレット4選

ブックマークレットはいろんなものがありますが4つ選びましたので使ってみてください

英語サイトを翻訳
住所からGoogleマップ表示
ページを一番下までスクロールする
Youtubeをリピート再生

英語サイトを翻訳

先程の英語サイトの翻訳ですね

コード

javascript:void(0);void(0);void(0);void(0);void(%27Add%20this%20text%20into%20the%20code%20to%20suppress%20the%20tooltip%20with%20long%20script%27);void(0);void(0);void(0);void(0);void(0);void(0);void(0);q=location.href;void(location.href=%27http://translate.google.com/translate?hl=ja&sl=en&u=%27+q);

住所からGoogleマップ表示

ページ内にある住所を読み取ってGoogle Mapsのアプリを起動して表示してくれます

下記画像では東京駅のWikipediaで使用してみました

コード

javascript:(function(){var%20f=document.body.innerHTML;var%20m=f.match(/[0-9]{2}.[0-9]{3,},[0-9]{3}.[0-9]{4,}/);if(m!=null){document.location.href='http://maps.google.com/maps?q='+m;}else{alert('%E5%9C%B0%E5%9B%B3%E3%81%AF%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%89%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%82%88%E3%81%86%E3%81%A0');}})()

ページを一番下までスクロールする

iPhoneは画面上部のステータスバーをタップするとページの一番上に移動する機能がありますが一番下に移動はありません

ブックマークレットを使うと見ているページの一番下に移動してくれます

コード

javascript:window.scrollTo(0,document.body.clientHeight);

Youtubeをリピート再生

Youtubeをリピート再生してくれるようになるブックマークレットです

ちゃんとリピート再生されているのを確認しました

コード

javascript:(() => { if(location.host.includes('youtube')) location.href = location.href.replace('youtube', 'listenonrepeat'); })();