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

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

Posted at November 28,2012 1:33 AM
Tag:[iPad, iPhone]

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

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

1.ブックマークレットとは

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

Wikipedia - ブックマークレット

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

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

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

3.ブックマークレットを登録する流れ

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

まず、ブックマークレットを公開する側は、ブックマークレットの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);

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

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

4.サンプルブックマークレット

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

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

一番下にスクロール

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

アクセスしたページ

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

ブックマークに追加

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

ブックマークを保存

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

ブックマーク

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

編集

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

一番下にスクロール

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

編集

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

完了

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

Yahoo!のページ

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

一番下にスクロール

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

一番下にスクロールしたところ

5.ブックマークレットを登録する方法2

3項の方法では、ブックマークレットを提供する側が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>

に書き換わります。

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)