毎日頑張るあなたを応援する記事を更新中

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

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

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

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

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

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

CONTENTS

ブックマークレットとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブックマークを作成する

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

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

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

iphone_bookmarklet_add

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

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

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

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

iphone_bookmarklet_add02

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

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

iphone_bookmarklet_add03

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

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

iphone_bookmarklet_add04

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

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

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

iphone_bookmarklet_add05_0

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

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

iphone_bookmarklet_add05

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

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

iphone_bookmarklet_add06

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

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

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

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);
iphone_bookmarklet_add07

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

iphone_bookmarklet_add08

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

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

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

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

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

iphone_bookmarklet_use02

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

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

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

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

英語サイトを翻訳

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

コード

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で使用してみました

iphone_bookmarklet_map

コード

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は画面上部のステータスバーをタップするとページの一番上に移動する機能がありますが一番下に移動はありません

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

iphone_bookmarklet_scroll

コード

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

Youtubeをリピート再生

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

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

iphone_bookmarklet_repeat

コード

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

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

  • ブックマークレットはSafariブラウザに機能を追加する
  • ブックマークを編集してブックマークレットを作成する

ちょっとコードを見てびっくりしてしまったかもしれませんがコピーして貼り付けるだけなのでコードの内容は考えなくてOKです

便利機能だけ使えるようにしておきましょう

シェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

iPhoneを3GSから愛用
使用したiPhoneアプリは5000を超えるiPhoneラバーでありガジェット好き
ワーキングホリデーを利用して一年間ニュージーランドで生活
30歳を超えてから発達障害であることが判明
社会とズレがあると感じていたことがスッキリして心が晴れる
発達障害のギフトを活かしつつ、iPhoneや便利ツール・メンタルテクニックなどを駆使して自分らしく生きられる方法の探求者

コメント

コメントする

CAPTCHA


CONTENTS