iPhoneブラウザのSafariの機能をグレードアップしてくれるブックマークレットを登録しましょう
例えば、英語サイトの翻訳やサイトをPDFで保存したりなどワンタップで実現可能になります
紹介するブックマークレットは4つ
- 英語サイトを翻訳
- 住所からGoogleマップ表示
- ページを一番下までスクロールする
- Youtubeをリピート再生
iPhoneブラウザのSafariに便利なブックマークレットを登録してみましょう
ブックマークレットとは
ブラウザのブックマークから呼び出せる便利機能のことです
登録するコードによって追加できる機能は変わります
例えば、住所をGoogle Mapで検索するブックマークレット
住所をGoogle Mapで検索することは手動でもできます
ただ、ブックマークレットの魅力はブックマークからワンタップで実行できることです
例えば、住所をGoogle Mapで検索するには
- 住所をコピーする
- Google Mapサイトを開く
- 検索窓に住所をペーストする
- 検索する
の4つの手順がブックマークレットは登録してあるブックマークをタップするだけで実行できます
Safariにブックマークレットを登録する方法
iPhoneのSafariにブックマークレットを追加する手順をみていきます
ブックマークレットの登録はブックマークを編集して作成します
- どのページでもいいのでブックマークを作る
- 新しく作成したブックマークを編集モードにする
- わかりやすいタイトルに変更
- 追加したい機能のコードを貼り付ける
4つの手順でブックマークレットを追加することができます
ブックマークを作成する
まずはどのサイトでもいいのでページをSafariで表示します
今回はAppleの公式サイトをブックマークに追加してみます
共有ボタンをタップしてメニューを開きます

「ブックマークを追加」をタップします
表示されていたサイトとURLが表示されます
ブックマークレットが増えてくると管理が大変になるのでフォルダを作っておきましょう
フォルダは初期設定ではお気に入りが選択されています

場所の項目をタップすると新規フォルダ項目がでてくるので選択します
フォルダの名前を入力してフォルダの保存先をブックマークにします

保存をタップすると場所に新しく作ったブックマークレットフォルダが選択されていますね
ブックマークを追加画面で保存を押せばブックマークの保存は完了です

ブックマークレットに変更する
新しく作ったブックーマークをブックマークレットに変更します
Safariのブックマークアイコンをタップシてブックマーク一覧を表示します

先程作ったブックマークレットフォルダ内にブックマークがありますね
編集をタップして編集モードにします

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

上部がブックマークレットの名前、下にコードを貼り付けます
英語サイトを翻訳するブックマークレットを作ってみます
コードは下記をコピーして貼り付けます
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'); })();
【Safari機能アップ】iPhoneでのブックマークレット使い方 まとめ
- ブックマークレットはSafariブラウザに機能を追加する
- ブックマークを編集してブックマークレットを作成する
ちょっとコードを見てびっくりしてしまったかもしれませんがコピーして貼り付けるだけなのでコードの内容は考えなくてOKです
便利機能だけ使えるようにしておきましょう
コメント