わずか2タップ!iPhoneのSafariで一番下まで一瞬でスクロールする方法

iPhoneやiPadで縦に長いサイトを読んでいるとき、一気にページ最下部までスクロールしたい!と思うことがありますよね。「あとどれだけ親指動かせば一番下までたどり着くのコレ…」みたいなときです。

一気に一番下までスクロールして移動するのは初期設定のままのiPhoneでは無理ですが、実はブックマークレットというモノを使えば可能になります。

最初にちょっとだけ手間がかかりますが、一番下へのスクロールがかなり手軽に出来ます。

手順としては、「一番下までスクロールするボタン」を自分で作る

それをタップして最下部まで一瞬でスクロール!
という感じです。

「ボタン」とはちょっと違うのかもしれませんが、2タップで一番下まで移動できますのでイメージとしてはそんな感じで合ってると思います。

この記事では、この方法を図解でできるだけ分かりやすくまとめてみたいと思います。

ちなみに、iPhone・iPadだけでなくPCのブラウザでも使える方法です。

Sponsored Link

一番下までスクロールした実際の様子がこちら

はじめに、Safariでページ最下部まで一気に移動する様子をご覧ください。

iPhone・iPadのSafariで一瞬で下まで一気にスクロールする方法

2タップで最下部へ移動。

こんな感じで、2回タップするだけで一番下まで画面がスクロールされます。

スクロールというよりも、「瞬間移動」のようにパッと一番下までたどり着くイメージです。

※ サンプルとして表示しているのは『Windows10のシャットダウンが超簡単になるショートカットボタンの作成手順』という記事です。

【図解】具体的な設定方法

では次に、設定方法について詳しく見ていきたいと思います。

おおまかな手順はこんな感じです。↓

  1. 適当な(任意の)サイトをブックマークする
  2. そのブックマークのURL部分を編集してJavaScriptのコードを設定する
  3. タップしやすいようにブックマークの位置を調整する

コピペで出来ますし、だいたい5分もあれば終わる作業だと思います。

① なんでも良いのでサイトをブックマークする

まず、iPhoneのSafariで好きなサイトを開きます。ここでは、Yahoo!のトップページにアクセスしてみます。

いつもiPhoneでサイトをブックマークするときと同じように、開いたページをブックマークしてください。

より素早くアクセスできるので、「お気に入り」のほうに追加するのがオススメです(詳しくは後述します)。

任意のサイトをブックマークする

好きなサイト・ページでOKです。

ページをお気に入り(ブックマーク)に追加

「お気に入り」に追加します

サイト名(ページ名)の部分を好きな名前に変更して、右上の保存をタップします。

「一番下までスクロール」や「最下部へ」など、意味の分かる名前だと分かりやすいと思います。

ここではシンプルに「↓」という名前に変更してみました。

iPhone:Safariでブックマーク名の変更

✕印をタップで消します

ブックマーク名を好きな名前に変更

分かりやすい名称に変更

ここで作成したブックマークが、一番下までスクロールする「ボタン」の素材となります。

② ブックマークを編集してJavaScriptコードを挿入する

次に、いま追加したYahoo!トップページのブックマークを編集していきます。

具体的には、URLの部分をスクロールに関するJavaScriptコードに差し替えるという作業です。

まず、さきほど追加したブックマークを表示します。

iPhoneのブックマーク編集

ブックマーク一覧を開きます

iPhoneのブックマークを編集

さきほど追加したフォルダを開きます

次に、右下の「編集」をタップし、先ほど追加したブックマークの部分をタップします。

iPhoneのブックマーク編集

右下の「編集」をタップ

iPhoneのブックマーク編集

編集したいサイトの部分をタップ

すると、サイト情報の編集画面に移りますので、URL部分をすべて消して下のJavaScriptコードをコピペで貼り付けてください。

javascript:scroll(0,document.getElementsByTagName(%27body%27)%5B0%5D.scrollHeight);
iPhoneのブックマークURLの編集

URLは消してJavaScriptコードを貼り付け

ブックマークのURL部分にJavaScriptコード挿入

貼り付けたら「完了」をタップ

URL部分にJavaScriptコードを貼り付けたら「完了」をタップし、次の画面でもういちど「完了」をタップすれば編集作業は終わりです。

JavaScript
JavaScriptとは、大ざっぱに言えば「Webサイトに動きをつけるプログラミング言語」です。新規ウィンドウのポップアップ、画像のスライダー表示、入力フォーム、ファイルの参照ボタンなど、インターネットで見慣れた動作はJavaScriptが動かしています。

③ ブックマークの位置を調整する

さらに便利にするために、作成したブックマークの表示位置を調整するのがオススメです。

iPhoneSafariのブックマークとお気に入りの違い

追加先には2種類ある

iPhoneのSafariでサイトをブックマークするとき、その登録先(追加先)には2種類があります。

お気に入りに追加」と「ブックマークを追加」の2つです。

「お気に入りに追加」した場合、上部の検索バーをタップするだけで登録したサイト・ページが表示されますので、「お気に入り」に追加するほうが良いと思います。

こうすることで、検索バーをタップ→「下までスクロール」のブックマークをタップという2タップで最下部までスクロールできるようになります。

さらに、お気に入りの中での位置を調整して、最もタップしやすい場所にブックマークを移動すれば、タップするストレスが減ると思います。

私の場合、一番上の行の右端がもっともタップしやすいのでそこに配置しています。

「お気に入り」と「ブックマーク」の違いについては、こちらの記事で詳細に解説しています。よろしければご覧ください。↓

使い方

作成したブックマークを利用して一番下までスクロールするためには、

  1. 検索バーをタップして「お気に入り」を表示
  2. 登録したブックマークをタップ

とやるだけです。

検索フィールドをタップでお気に入りを表示

検索窓をタップで「お気に入り」を表示

最下部までスクロールするブックマークをタップ

今回作ったブックマークをタップ

2タップで済みますので、結構便利だと思います。

ご注意
iPhone・iPadのSafariの設定でJavaScriptがOFFになっているとスクロールされません。「設定」>「Safari」>「詳細」>「javaScript」でON/OFFの切り替えが可能です(初期設定でオンになっているはずです)。

Sponsored Link

(ご参考)仕組みの説明

以上、iPhoneで一気に下までスクロールする方法でした。

最後に、参考までに今回ご紹介した方法の仕組みを整理しておきたいと思います。

JavaScriptについては完全に素人なので理解するのに苦労しましたが、素人目線の解説も逆に分かりやすいのかもしれません。

JavaScriptはURL欄に打ち込むことでも実行できる

JavaScriptはサイト作成者が事前にコードを書いておくことで動作させるのが通常ですが、この方法とは別の動かし方もあります。

それは、閲覧者(ユーザー)がURL欄に直接JavaScriptコードを打ち込む方法です。

例えば、PCのChromeブラウザで

javascript:alert( 'test' );

とURLバーに打ち込んでEnterを押すと、下のようなメッセージがポップアップして出てきます。

javascriptでメッセージを表示

ダイアログボックスに文章が出現

※コピペしても”javascript:”の部分はペーストされないので、手打ちしてください。

ただ、ブラウザによってはURL欄に直接JavaScriptコードを入力しても動いてくれないモノもあります。

iPhoneのSafariもその一つですが、URL欄に直接打ち込むのではなくブックマークを使うことでJavaScriptを動かすことができます。

上でブックマークのURLをJavaScriptコードに差し替えたのはこういう意味です。

JavaScriptコードの意味

次に、ブックマークに登録したJavaScriptのコード↓

javascript:scroll(0,document.getElementsByTagName(%27body%27)%5B0%5D.scrollHeight);

の意味についてお話しします。意味不明のものを使うのはちょっと怖いですが、意味を知っておくとその感覚が無くなるかもしれません。

なお、コードは↓のサイトを参照しています。

まず、JavaScriptコードの意味を図解するとこんな具合になります。↓

JavaScriptコードの意味

クリックタップで拡大します。

うわ。。。

という声が聞こえてきましたが、めげずに番号をつけた部分ごとに順番に見ていきます。

Sponsored Link

① 先頭の”javascript:”の意味

まず、javascript:の部分はURL欄でJavaScriptを動かす際に先頭に付ける文字列です。

これは特に問題ないと思います。

② “scroll(0,~);”の意味

次は、上図で緑色でハイライトしたscroll(0,~);の部分についてです。

JavaScriptの構文の1つに

window.scroll(x,y)

というものがあります。

これは「ウィンドウを文書内の特定の位置までスクロールする」という意味でして、()内のxとyはそれぞれ水平方向・垂直方向の位置を表しています。

例えば、

window.scroll(0,500);

と書けば、「縦方向に500pxだけスクロールする」という意味になります。

なお、先頭の”window.”の部分は省略可能なので、今回ブックマークに登録したJavaScriptコードでは省かれています。

参考サイト

③ 「~(Y)」の部分の意味

次に、scroll(0,);の部分に書かれた謎の文字列についてです。

②で見たように、この文字列が「垂直方向へスクロールする高さ」を指定しています。

抜き出してみます。↓

document.getElementsByTagName(%27body%27)%5B0%5D.scrollHeight

“.scrollHeight”の部分はelement.scrollHeightプロパティと呼ばれるもので、ある要素(element)の高さを返します。

なので、この部分の意味は

document.getElementsByTagName(%27body%27)%5B0%5D

で指定される要素(element)の高さ、となります。

参照HTML DOM scrollHeight Property-w3schools.com

④ .getElementsByTagName()

document.getElementsByTagName()

という関数は、()内のタグの名称から要素を指定します。

今回のJavaScriptコードの

document.getElementsByTagName(%27body%27)%5B0%5D

の文字列がどんな要素を指定しているのかといえば、<body>要素を指定しています。

上のコードでは()の中が(%27body%27)のように良く分からない感じになっていますが、普通に書くと(‘body’)となります。

“%27″や末尾の”%5B”・”%5D”の部分は「パーセント・エンコーディング」と呼ばれる書き方で、URLとして使用できない文字をURLとして無理やり記述する際に使われます。

パーセント・エンコーディングなしで上記コードを書くと

document.getElementsByTagName('body')[0]

のようになります。

<body>要素って何?

Webサイトは基本的に↓のようなHTML構造で出来ています。

<html>
<head>
<title>タイトル</title>
</head>
<body>
コンテンツ
</body>
</html>

このHTML構文のうち、ブラウザ上で実際に見えるのは

<body>
コンテンツ
</body>

の部分(<body>要素)です。

なので、<body>要素の高さだけスクロールすれば、ページ最下部までスクロールされるわけです。

もう一度コード全体を見てみる

ここまでのお話をふまえて下図を見ると、ゴチャゴチャした図もちょっとは分かりやすく感じるかもしれません。

JavaScriptコードの意味

クリックタップで拡大します。

・・・いや、分かりにくいですね。はい。

まとめ

最後のほうのJavaScriptコードのお話は完全に自己満足でしたが、2タップで一番下までスクロールして移動できるのは結構便利だと思います。

例えば、2ちゃんねるとか縦長のセールスページとかを見る場合には、サクッと一番下まで行けます。

ブックマークを作るのがちょっとだけ面倒ではありますが、是非やってみてください。

Sponsored Link

この記事が気に入ったら
いいね ! しよう

  • 0
  • 0
  • 0

0 comments