Hatena::ブログ(Diary)

ザリガニが見ていた...。 このページをアンテナに追加 RSSフィード

2010-06-06

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/? を削除して完了
404 Not Found
  • ページ内検索のブックマークレットの実態は以下のコードだった。
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
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:// を削除して完了
ss-o.net

URL文字列をリンクにする

  • Webページの中には、たまにリンク扱いになっていないURLがあったりする。
http://d.hatena.ne.jp/zariganitosh/
ttp://d.hatena.ne.jp/zariganitosh/
  • MacBookでも不便を感じるが、iPadではさらに不便な思いが強まる。そんな時は...

■URIリンク化

  • タッチしてリンク先に移動
  • Safariのブックマークに登録
  • ブックマークの編集で、URL欄先頭の http://blog.alice.gs/? を削除して完了
404 Not Found

Evernoteに記録する

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

Evernote WebClip

  • リンク長押しでJavaScriptをコピー
  • どこか適当なページをブックマーク
  • ブックマークの編集でURL欄にペースト
  • 先頭の http://necojita/ を削除して完了
necojarashi

ブックマークレット関連ページ

ブックマークバーを常に表示

こうして、自分のSafariのブックマークバーは、以下のようになった。

  • もちろん、iPadの設定 >> Safari >> ブックマークバーを常に表示:オン に設定。
  • ちなみに、ブックマークレットは英大文字、というのは自分ルール。

f:id:zariganitosh:20100606181003p:image

かなり満足!

愛パッド愛パッド 2010/06/07 12:03 表示中のページを閉じる機能

サムネイルから消す方法は嫌いなの?
(ブックマークアイコンの左の)

zariganitoshzariganitosh 2010/06/07 13:02
サムネイルから消す方法は以下の3ステップが必要になります。
1.サムネイル化アイコンをタッチ
2.閉じたいサムネイルのXマークをタッチ
3.戻りたいサムネイルをタッチ

どうも手順が多くて、好きになれないんです...。
面倒臭がり屋なもので、それを閉じるブックマークレットのワンタッチで済ませたいと思ってしまったのです。

moch1729moch1729 2010/06/07 19:53 Evernoteに記録する,を実践したいのですが,最後のステップができません。カーソルを,適当な位置に持っていくことができないのです。何か良い方法はあるでしょうか。

LiosKLiosK 2010/06/07 20:10 「# 改行を加えて整形すると、以下のコードが見えてくる。」のコードが間違っていそうです。タグが消えてしまっていてわけがわからなくなっています。

zariganitoshzariganitosh 2010/06/07 21:55 moch1729さん
「先頭の http:// を削除して完了」の部分でカーソルを移動できないということでしょうか?
そうであれば、自分の場合はテキスト部分を長押しして、拡大鏡を表示して、カーソル移動してます。

zariganitoshzariganitosh 2010/06/07 22:03 LiosKさん
見直しましたが、JavaScriptコードは大丈夫そうです。
aタグのhref属性の内容を載せているので、タグは含まれない状態が正常です。

moch1729moch1729 2010/06/08 00:23 ありがとございます。おかげさまでうまく行きました!

BanBan 2010/08/13 01:02 有難うございます!特にCloseで便利になりました!調子に乗ってNew window機能も作ってしまいました。

れろれろれろれろ 2010/08/14 17:45 閉じるブックマークレットで閉じられないことが多いので
javascript:window.open('','_self');window.close();
にすると良いですね

zariganitoshzariganitosh 2010/08/15 09:12 れろれろ さん
そうなんです!window.close();で閉じられるのは、履歴なしの新規で開いたばかりのページのみで、
ベージを移動してしまうと、window.close();が効かなくなっていました...。(悩んでました)

早速、教えていただいたwindow.open('','_self');window.close();を使ってみました。
例外なく、確実にウィンドウが閉じるようになりました!(素晴らしいです)

しかし、一つだけ問題があります。ウィンドウが閉じた後、常にページ一覧が表示されてしまうのです。

一方、window.close();では、ウィンドウが閉じた後、直前に開いていたページに移動してくれました。
(但し、確実な動作ではなかったのです。メモリ不足に陥っていない状況の時だけです)

ここで、元のページに戻るのに、どれだけのコストが必要になるか、考えてみました。
- 例外なく閉じるけど、常に2タッチが必要。
- 履歴なしの新規ページしか閉じないけど、調子が良ければ1タッチでOK。

何だか究極の選択です。そもそも、Safariが不完全なんですよね。
いずれソフトウェアがアップデートされて改善されるでしょうが、それまでは悩みの種です。
個人的には、写真アプリのように縮小ピンチで閉じるというジェスチャーが、システム共通の概念になって欲しいと思っています。
もちろん、メモリ不足でも確実に直前のページに戻るべきです。

たかが閉じる、されど閉じる。奥が深いです。
もう少しjavascriptを勉強してみようと思います。
ありがとうございました!

Ban さん
便利さを感じていただき、嬉しいです!
でも、上記のような悩みに直面していることと思います。
もし、既に解決されていたら、ぜひ教えて頂きたいです。

zariganitoshzariganitosh 2010/08/15 13:12 れろれろ さん
すいません、iPad再起動したら、ワンタッチでちゃんと直前のページに戻るようになりました!
つまり、window.open('','_self');window.close();最高です!
ありがとうございました!

きみきみ 2011/07/12 18:15 ブックマークレット関連登録方法のブログで、一番わかりやすかったです!感謝

zariganitoshzariganitosh 2011/07/13 05:02 嬉しいコメント、ありがとうございます。
本来はこんなことせず、ブックマークと同じように登録できるべきですよね。

geniusissimogeniusissimo 2011/08/14 16:35 ずーっと念願だったiPad版のAutopagerizeが実現できてすごいうれしいです。
ありがとうございました。

通り通り 2011/10/29 09:31 ページ内検索は普通に検索バーからできますけど。。。

zariganitoshzariganitosh 2011/10/30 16:15 そうなんですよ。
そういう意味では、iOS5でiPadのSafariはタブブラウザにもなりましたから、今となっては閉じるブックマークレットも不要ですね。
ところが、自分が初代iPadを手にした1年前までは、ページ内検索も、タブブラウズも出来なかったのです。
もっと言えば、iPhone3GSを手にした2半年前までは、コピー&ペーストも出来なかったのです。
スマートフォンやタブレットのタッチUIの歴史って、実はまだ始まったばかりなんですよね。
自分たちはその創世期の製品を経験できる時代にいるんですね。
今後、どのような進化を遂げるか、とっても楽しみです。
この日記で書いたことすべてが「何でこんなバカなことで悩んでるんだろう」と思える時代が来ると嬉しい限りです。

中村賢吾中村賢吾 2012/06/29 12:42 iPod Touchはとても便利にお使いになれます。
タッチの感触は格別です!
このiPod Touchの詳細についてはhttp://ipodtouchapps.net

ヤスタカヤスタカ 2012/08/02 12:46 http://www.saharamarocain.net
このサイトはサハラ砂漠について紹介しているサイトです。
サハラ砂漠というのは、環境破壊の象徴的なものになっています。
サハラ砂漠を知ることで環境の事を考えましょう。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証