iPadのSafariに不足しているものを補う - ザリガニが見ていた...。

指でダイレクトに触ってなめらかに反応する、あのiPadのUIは、あっという間に使う人々を魅了する。しかし、そのまま使い続けているうちに、実はMacBookのようなマウスを利用したUIほど細かい操作ができないことに、いずれ気付く。

iPadのUIには、指先での操作を考慮して、適度なサイズと間隔が保持されている。そのため、マウスのUIほど機能を詰め込むことが出来ず、厳選した機能のみが提供されることになるのだろう。

iPadのSafariに不足しているもの

それにしても、今のSafariにどう考えても不足していると感じる機能が、二つある。

表示中のページを閉じる機能
ページ内検索

表示中のページを閉じる機能

例えば、http://b.hatena.ne.jp/hotentry で、気になる記事へのリンクをクリックすると、新規ページが開いてリンク先にジャンプする。
気になる記事を読み終わったら、今のページを閉じて、元の http://b.hatena.ne.jp/hotentry のページへ戻りたい。
MacBookなら、command-Wのショートカット一発で、素早く閉じて戻ることができる。
しかし、iPadでは以下の3ステップが必要となる。
- ツールバーのページ切替ボタンを押す。
- ページ一覧から閉じたいページのXボタンを押して、閉じる。
- ページ一覧から戻りたいページをタップする。
MacBookのショートカットを知っている人にとっては、あり得ない面倒臭さ...。
この問題は、iPhoneの頃から感じていた。

そもそも、表示中のページを閉じるボタンがあれば、問題は解決しそうなのだが、現状はないのである。

ページ内検索

ページ内検索は、MacBookで言うcommand-Fで呼び出す、表示中のページ内の単語検索である。
Googleの検索フィールドはちゃんと提供されている。
しかし、Googleの検索結果のリンク先にジャンプしても、ページが広過ぎて目的の情報がどこにあるか、すぐに見つけられないことがある。
そんな時、MacBookならcommand-Fすれば、Google検索の第1キーワードをキーに、ページ内の単語検索をすぐ実行できる。

ところが、iPadにはそもそもページ内を検索する機能さえないのだ。困った...。

MacBookのOSX環境では、AppleScriptを利用して、大抵の欲求は満たすことが出来た。
しかし、iPadのiPhoneOS環境では、AppleScriptなんて使えない...。どうするべきか？

JavaScript

ところで、WebブラウザにはJavaScriptがある。JavaScriptはブラウザ共通のスクリプト言語である。（細かい部分はブラウザ間の実装の差異があって苦労するのだけど）そのJavaScriptによって、ブラウザの挙動を工夫次第でかなりの部分コントロールできるのである。

表示中のページを閉じるJavaScript

例えば、現在表示中のページを閉じる場合は、シンプルに以下のコードで実現できてしまう。

javascript:window.close();

試しに、上記コードをURL欄に入力して実行すると、ウィンドウが閉じた。但し...
- 状況によっては閉じなかったり、その後の表示が止まってしまう場合があった。
- MacBookでは正常に動くのだが、iPadでは元のページが表示されないことがあった。
- なんでだろう？
- 元のページが表示されない時は、ページ一覧で再選択するか、あるいはSafariを再起動すると、直った。

コメントで教えて頂いた改良版なら、必ず閉じる！

javascript:window.open('','_self');window.close();

ブックマークレット

そして、URL欄に書いたJavaScriptは、ブックマークとして登録することができる。
同様に、aタグに埋め込まれたJavaScriptも、ブックマークとして登録することができる。

<a href="javascript:window.close();">ウィンドウを閉じる</a>

ブックマークとして登録したJavaScriptは、ブックマークレットと呼ばれている。

ブックマークレットの登録方法

MacBookなら簡単に登録できる。
- URL欄にjavascript:window.close();と入力して、ブックマークバーにドラッグ＆ドロップする。
- あるいは、JavaScriptのリンクを、ブックマークバーにドラッグ＆ドロップする。

でも、iPadではちょっと面倒。以下の手順で登録できた。
- 「どこか適当なページ」をブックマークする。
- Safariのツールバーのブックマークアイコンをタッチする。
- 表示された吹き出しウィンドウの右上「編集」ボタンを押す。
- さっき登録した「どこか適当なページ」のタイトルをタッチする。
- URLをjavascript:window.close()に変更して、登録完了。

ページ内検索するブックマークレット

ウィンドウを閉じるコードはシンプルなのですぐ思い付くが、ページ内を検索するには、自分の知識ではちょっと手間がかかりそう。
ところが、世の中には経験豊かなJavaScriptの達人がいて、素晴らしく便利なブックマークレットを公開してくれていた。（感謝です！）

ページ内検索

タッチしてリンク先に移動

Safariのブックマークに登録

ブックマークの編集で、URL欄先頭の http://blog.alice.gs/ikazuchi/? を削除して完了

http://blog.alice.gs/ikazuchi/item/129

ページ内検索のブックマークレットの実態は以下のコードだった。

http://blog.alice.gs/ikazuchi/?javascript:void%28s%3Dprompt%28%27このページを検索%3A%27%2C%27%27%29%29%3Bs%3D%27%28%27+s+%27%29%27%3Bx%3Dnew%20RegExp%28s%2C%27gi%27%29%3Brn%3DMath.floor%28Math.random%28%29*100%29%3Brid%3D%27z%27%20+%20rn%3Bb%20%3D%20document.body.innerHTML%3Bb%3Db.replace%28x%2C%27%3Cspan%20name%3D%27%20+%20rid%20+%20%27%20id%3D%27%20+%20rid%20+%20%27%20style%3D%5C%27color%3A%23000%3Bbackground-color%3Ayellow%3B%20font-weight%3Abold%3B%5C%27%3E%241%3C/span%3E%27%29%3Bvoid%28document.body.innerHTML%3Db%29%3Balert%28%27検索結果%20%27%20+%20document.getElementsByName%28rid%29.length%20+%20%27%20件%27%29%3Bwindow.scrollTo%280%2Cdocument.getElementsByName%28rid%29%5B0%5D.offsetTop%29%3B

上記のJavaScriptはブックマークレットとしてURLエンコードされている。
以下のサイトで、デコードしてみた。
URL エンコード/デコードフォーム（感謝です！）
改行を加えて整形すると、以下のコードが見えてくる。

http://blog.alice.gs/ikazuchi/?
javascript:void(s=prompt('このページを検索:',''));
s='('+s+')';
x=new RegExp(s,'gi');
rn=Math.floor(Math.random()*100);
rid='z' + rn;
b = document.body.innerHTML;
b=b.replace(x,'$1');
void(document.body.innerHTML=b);
alert('検索結果 ' + document.getElementsByName(rid).length + ' 件');
window.scrollTo(0,document.getElementsByName(rid)[0].offsetTop);

1行目の「http://blog.alice.gs/ikazuchi/?」は、iPadやiPhoneで簡単にブックマークレットを登録するためのおまじない。
http:で始まるページなので、iPadやIPhoneでも、ブックマークとして登録できるようになるのだ。
「どこか適当なページ」をブックマークする手間と、URLをコピーする手間が不要になった。賢い！

このように、ブックマークレットは、手軽にWebブラウザに便利な機能を追加してくれることが分かった。すると、もう少し欲が出てくる。さらにあと三つ、機能が欲しくなった。

AutoPagerize（自動的に次のページをロード）

一度、MacBookでこれを経験すると、もはや自分で次のページへのリンクを探してクリックするのが、ひどく億劫になる。
ユーザースクリプトを自動ロードする機能拡張は無理だが、ページごとにブックマークバーをタッチして、AutoPagerizeモードにすることぐらいは出来ると思う。
そして、AutoPagerizeとlivedoor Readerのショートカット操作を可能にする、スペシャルなブックマークレットも公開されていた。（感謝です！）

(AutoPager&LDR)ize

リンク長押しでJavaScriptをコピー

どこか適当なページをブックマーク

ブックマークの編集でURL欄にペースト

先頭の http:// を削除して完了

Loading...

URL文字列をリンクにする

Webページの中には、たまにリンク扱いになっていないURLがあったりする。

http://d.hatena.ne.jp/zariganitosh/
ttp://d.hatena.ne.jp/zariganitosh/

MacBookでも不便を感じるが、iPadではさらに不便な思いが強まる。そんな時は...

■URIリンク化

タッチしてリンク先に移動

Safariのブックマークに登録

ブックマークの編集で、URL欄先頭の http://blog.alice.gs/? を削除して完了

http://blog.alice.gs/ikazuchi/item/143

Evernoteに記録する

MacBookなら、Webページの気になる情報も右クリック一発で、Evernoteに記録できる。たいへん便利。
しかし、iPadではSafariでコピーして一旦終了、Evernoteを起動してペースト、という面倒な手順が必要。
そんな時は、以下のブックマークレットを登録しておけば、1タッチでEvernoteに記録できるようになった。（感謝です！）

Evernote WebClip

リンク長押しでJavaScriptをコピー

どこか適当なページをブックマーク

ブックマークの編集でURL欄にペースト

先頭の http://necojita/ を削除して完了

http://necojarashi.blogspot.com/2010/05/ipadevernotewebclip.html