小粋空間  -  a cheap joke and a play on words site

iPhoneでブックマークレットを利用する方法

iPhoneのSafariでブックマークレットを利用する方法を紹介します。iPhoneビギナー向けの記事です。iPadやiPod touchでもブックマークレットの方法は同じです。

もしかしたら他のブラウザを使えばもっと簡単にブックマークレットできるかもしれませんが、ここではデフォルトブラウザのSafariを使うための方法として紹介しています。

１．ブックマークレットとは

「ブックマークレット」とは、JavaScriptで記述したちょっとしたプログラムのことを指し、ブラウザのブックマークやブックマークツールバーに登録して利用することからこの名称となったようです。 登録したブックマークをクリックすることでブックマークレットが機能します（一部Wikipediaより引用）。

Wikipedia - ブックマークレット

２．PCとiPhoneのブックマークレット登録方法の違い

WindowsやMacのブラウザでブックマークレットを利用している方であればご存知のとおり、公開されているブックマークレットのリンクをそのままブックマークに登録すれば使えるのですが、iPhoneのSafariではブックマークレット用のリンクを長くタップしても下のようなメニューが表示されるだけで、ブックマークもできませんし、開くこともできません。またリンクをコピーするメニューも表示されません。

ブックマークレットのリンクを長くタップしたところ

３．ブックマークレットを登録する流れ

iPhoneのSafariにブックマークレットを登録するには、次のような流れになります（具体的な登録方法は４項以降で説明し、ここでは考え方のみ解説します）。

まず、ブックマークレットを公開する側は、ブックマークレットのJavaScriptの直前にページとして表示できるURLを付与した形で公開します。

例として、次のようなリンクになります。href属性の中にある赤色の部分がブックマークレットとして動作するJavaScriptです。

<a href="http://user-domain/index.html?javascript:window.scrollTo(0,document.documentElement.scrollHeight);">このリンクをブックマーク</a>

次にブックマークレットを利用する側は、このリンクをタップしてページを開き、ページをブックマークします。この時点ではまだブックマークレットとして機能しません。

さらにこのブックマークを編集し、そのとき表示されているURL、

http://user-domain/index.html?javascript:window.scrollTo(0,document.documentElement.scrollHeight);

から、

http://user-domain/index.html?

をまるっと削除し、ブックマークレットのJavaScript、

javascript:window.scrollTo(0,document.documentElement.scrollHeight);

のみを残して保存します。

これで登録したブックマークがブックマークレットとして機能するようになります。

４．サンプルブックマークレット

３項の練習用にサンプルブックマークレットを作りました。このブックマークレットを実行するとページの一番下にスクロールしてくれます。

まず、iPhoneでこのページにアクセスして、下のリンクをタップしてください。

一番下にスクロール

アクセスしたページで下にある真ん中のアイコンをタップ。

「ブックマークに追加」をタップ。

何も変更せずに「保存」をタップしてブックマークを保存します。この時点ではURLは編集できません。

続いてURLの編集作業に移ります。ブックマークアイコンをタップ。

左下の「編集」をタップ。

さきほどブックマークした「一番下にスクロール」をタップ。

ここでURLを編集できるようになるので、先頭の「http://user-domain/index.html?」を削除し、右下の「完了」をタップ。

左下の「完了」をタップ。これでブックマークレットして機能するようになります。

動作確認してみます。Yahoo!のページを開いてブックマークアイコンをタップ。

「一番下にスクロール」をタップ。

一番下にスクロールしました。

５．ブックマークレットを登録する方法2

３項の方法では、ブックマークレットを提供する側がiPhone用のリンクに整形してくれていますが、PC向けのブックマークレットのリンクはそのようになっていません。

おおむね次のような感じになっていると思います。

<a href="javascript:window.scrollTo(0,document.documentElement.scrollHeight);">このリンクをブックマーク</a>

このような形式になっているとリンクのコピーもできないのでブックマークレットとして登録することができません。

そこで「iPhoneでブックマークレットを簡単に登録できるようにするブックマークレット」を利用することをおすすめします。

このブックマークレットは、PC向けのブックマークレット用リンクの前に「http://ip.muumoo.jp/bm#」という文字列を付与してくれるものです。

たとえばあるページで、

<a href="javascript:window.scrollTo(0,document.documentElement.scrollHeight);">このリンクをブックマーク</a>

というブックマークレット用リンクが公開されている場合、このページを開いた状態でさきほどの「iPhoneでブックマークレットを簡単に登録できるようにするブックマークレット」を実行すれば、ブックマークレット用リンクが、

<a href="http://ip.muumoo.jp/bm#javascript:window.scrollTo(0,document.documentElement.scrollHeight);">このリンクをブックマーク</a>

に書き換わります。

これで書き換わえられたリンクをクリックすれば、ウェブページとして表示できるので、ブックマークができるようになります。

あとは３項に示した手順でブックマークのURLを編集すればブックマークレットとして利用できるようになります。