Golbym!: iPhone で閲覧中のページを簡易表示化する Simplify Styles ブックマークレット

ブックマークレット第2弾です。

iPhone の Mobile Safari のリーダー機能、Clippable Mobile や Readable ブックマークレット、デスクトップなら Readability や Evernote Clearly といったブラウザ拡張、などのコンテンツ抽出系ツールはとても便利でよく愛用しているのですが、ページによっては抽出に失敗し内容が削られすぎたり、そもそも抽出用ボタンが表示されない（リーダー機能）、Safari 以外では使えない（リーダー機能）、コンテンツに含まれる画像まで非表示とされてしまう等様々な問題も存在します。そこで、閲覧中のページからスタイルシートを取り払い、ほぼ素の HTML コンテンツとして表示するブックマークレットを作りました。

既存のコンテンツ抽出系ツールと異なるところは、スタイルを置き換えるのみで、表示するコンテンツ自体は削除せず残す点です。広告やナビゲーション用のパーツなど不要な部分も残りますが、テキストコンテンツは失いません。カラーが目に優しくないページ、バナーや追尾型広告が鬱陶しいページ、フォントサイズが小さ過ぎる/大き過ぎるページ、装飾やレイアウトがごちゃごちゃしていて集中力を削がれるページ、青空文庫の XHTML 等 viewport 指定のないプレインな長文テキストコンテンツ、等の閲覧に向いていると思います。

できること

閲覧中ページからスタイルを取り除き、簡易表示する
ジェスチャでフォントサイズを拡大/縮小（50%〜200%）
ジェスチャでカラーテーマを切り替え（ライト/ダーク）
ページ内高速スクロール
明らかにメインでは無さそうな部分コンテンツの折りたたみ（HTML5 アウトライン+α）
コンテンツ折りたたみ機能を利用し、コンテンツの一部だけを印刷可能
表示設定内容をセッションで記憶（フォントサイズ、カラーテーマ）。セッションは同一タブ、同一ドメインでのみ有効
自動バージョンアップ（実行しているスクリプトをこちらで勝手にアップデートします）
リンクを跨いで継続実行＆表示設定維持（PJAX 有効時）

できないこと

メインのコンテンツだけを抜粋して表示。その他、表示に関しては「既知の問題」参照
折りたたんだ/展開したコンテンツの記憶
表示設定内容を永続化
自動実行

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

以下の「Simplify Styles」リンクを開き、適当な名称でブックマーク登録後、URL 先頭の http://t.co/? を削除して保存してください。「そもそもブックマークレットってなんぞ！？」という方はググりましょう。慣れている方はコードを直接コピペしてお使いください。

Simplify Styles v0.7 - WTFPL
javascript:(function(a,b,c,d,e)%7Bb=(b=='https:')?b:'http:';c='//amberjack115.herokuapp.com/share/';d=0%7Cnew%20Date().getTime()/1000/60/6;e=a.createElement('scr'+'ipt');e.src=%5Bb,c,'js/simplifystyles.js?',d%5D.join('');e.charset='utf-8';e.async='async';(a.head%7C%7Ca.body%7C%7Ca.documentElement).appendChild(e);%7D)(document,location.protocol);

ブックマークレットの使用方法

簡易表示したいページにて本ブックマークレットを実行。ページの HTML 読み込みが完了してから動作を開始するため、読み込みの途中で実行した場合はしばらくお待ち下さい。実行後のページでは表示スケールが1.0になるため、元ページのスケール/スクロール状態によっては画面が左端に縮小して表示されますが、ページをダブルタップすればスクリーン幅に丁度収まる様に調整されます
TipTapRight および TipTapLeft でフォントサイズが変更出来ます（MobileSafari 用フォントサイズ変更ブックマークレットを参照）
ページ上で2本の指を使い左右どちらかの方向へ60度以上回転すると、ダークカラーテーマになります。回転を実行する度にライト/ダークカラーテーマが入れ替わります
ページ左端をタッチしたまま上または下へスライドすると高速スクロールします。この機能は iOS 5 以上でのみ有効となります。
左端をタッチした指は、画面から離さない限り左右好きな場所へずらしてもスクロール操作が続行出来ます
埋め込みオブジェクト（YouTube 動画など）、および iframe（Like ボタンなど）、特定サイズを超えない画像ファイルはデフォルトで非表示となります。表示するには、ページ右端下部から右端上部までを指先でなぞってください
画像の表示/非表示切り替えのジェスチャとは逆に、上から下へなぞると PJAX を使ったページ間移動が有効になります（試験的導入）

デスクトップ版ブラウザ用キーボードショートカット

Ctrl + Alt + 9: フォントサイズを10%拡大
Ctrl + Alt + 8: フォントサイズを10%縮小
Ctrl + Alt + 7: 画像と埋め込みオブジェクトの表示/非表示切り替え
Ctrl + Alt + 6: カラーテーマ切り替え（ページ内ダブルクリックでも可）
Ctrl + Alt + 0: PJAX を使ったページ間移動を有効にする

その他

デスクトップ版の Chrome や Firefox、Safari でも動作します。IE/Opera その他ブラウザは対象外
ブックマークレットを実行する際は、前回紹介した WebViewExMenu や SpellBook、 LibraMagico を使うと便利です
Mobile Safari 以外のブラウザや UIWebView を使った他のアプリ（JailBreak 環境下のみ）でも大体は動作すると思いますが、現状では標準の Mobile Safari のスクリプト処理が最も高速です。UIWebView を使ったアプリで特別な処理をしている場合（ジャスチャやページ整形など）はおかしな挙動をすることがあると思います
pre 要素や table 要素は横スクロール出来るようにしていますが、iOS 4.x 以前と Android では指一本でのスクロールが出来ません。二本の指でスワイプしスクロールしてください
実行時に amberjack115.herokuapp.com および ajax.aspnetcdn.com へアクセスします。そのため、オフライン環境や上記ホストへのアクセスがブロックされた環境では利用できません
何かお気づきの点があれば Twitter か Google+ まで

既知の問題

元ページのスタイル指定を無効にしている都合上、ページの造りによっては表示が乱れたり、動的なパーツが機能しなくなる場合があります（ポップアップメニューをはじめ、通常非表示とされている部分が表示されてしまうなど）
コンテンツのボリュームの大きなページでは実行にそれなりの時間がかかります
HTML の table でレイアウトを組んでいるページでは表示が乱れる場合があります（例：東京新聞ほか新聞各社のサイト）
スクリプトで touch イベントや gesture イベントを処理しているページでは、本ブックマークレットのジェスチャと干渉し、どちらかが上手く動作しない場合があります
HTML の ul や ol などのリスト要素、blockquote 要素をネストしている場合、またはそれらの要素内に大きなサイズの画像が貼られている場合、コンテンツがディスプレイ縦幅に収まらず、途切れてしまう場合があります
フレームを使ったページでは動きません。また、iframe 内のコンテンツは処理対象外です
ページ読み込み後にスクリプトで動的に追加されるコンテンツ、動的に適用されるスタイル指定は処理対象外です
Yahoo!ニュースモバイル版ではライト/ダーク何れのカラーテーマも適用されません。原因は時間に余裕のある時に調べます
Lightbox（このページをデスクトップ版ブラウザで見た時の「スクリーンショット」で使われているような画像や動画の開き方）は大抵動きません。画像をタップ＆ホールドして別タブで開いて下さい

PJAX について


　　　　　　　　 ,. -‐'''''""¨¨¨ヽ
　　　　 　 　 (.＿＿_,,,... -ｧァﾌ|　　　　　　　　　　あ…ありのまま 今　起こった事を話すぜ！
　 　 　 　 　 |i i|　 　 }!　}} /／|
　　　　 　 　 |l､{　 　j}　/,,ｨ//｜　　　　　　　『リンクをクリックして次ページを開こうと
　　　　　　　 i|:!ヾ､_ﾉ／ u {:}//ﾍ　　　　　　　　思ったらいつのまにか表示されていた』
　　　　　　　 |ﾘ u' }　 ,ﾉ　_,!V,ﾊ |
　　 　 　 ／´fト､_{ﾙ{,ィ'ｅﾗ　, ﾀ人　　　　　　　　な…　何を言ってるのか　わからねーと思うが
　　　　 /' 　 ヾ|宀| {´,)⌒`/ |<ヽﾄiゝ　　　　　　　　おれも何をされたのかわからなかった…
　　　　,ﾞ　 ／ )ヽ iLﾚ 　u' |　| ヾｌﾄﾊ〉
　　 　 |／_／　 ﾊ !ニ⊇　'／:} 　V:::::ヽ　　　　　　　　頭がどうにかなりそうだった…
　　　 /／ 二二二7'T'' ／u'　__ /:::::::/｀ヽ
　　　/'´r　-―一ｧ‐ﾞＴ´　'"´ ／::::／-‐ 　＼　　　　催眠術だとか超スピードだとか
　　 / // 　 广¨´ 　/'　　 ／:::::／´￣｀ヽ ⌒ヽ　　　　そんなチャチなもんじゃあ　断じてねえ
　　ﾉ ' /　 ノ:::::`ー-､___／:::::／/ 　 　 　 ヽ　　}
_／｀丶　/::::::::::::::::::::::::::￣`ー-{:::...　　　 　　　もっと恐ろしいものの片鱗を味わったぜ…

PJAX とは: AJAX の進化系です。どのような事が起こるかをありのままに話すと、リンククリック（タップ）時、元ページからは移動しないまま、リンク先のページ内容を元ページへ表示し、かつブラウザアドレスバーの URL はリンク先ページのものに置き換わる。な…何を言ってるのかわからねーと思うが(ry、挙動としてはそんな感じ
何が嬉しいのか: 面白いから導入しただけというのが第一の理由ですが、理由は他にもあります。リンククリック時、表示内容とアドレスは変わりますが、ブックマークレットを実行した元ページから別のページへ移動しているわけではないので、ブックマークレットの実行は最初の一度だけで済みます。カラーテーマやフォントサイズの変更もそのまま維持します。 また、PJAX で取得したページ内容はあらかじめスタイル指定やスクリプトを除去して表示するので、普通にページを開いてからブックマークレットを実行する場合よりも速い（…ことが多い、たぶん）です。一般的な AJAX/PJAX の利用法とは違い、部分更新でなくページ全体を取得し処理＆表示しているため速度的な恩恵はさほど期待出来ません
どうやって使うのか: ページ右端最上部から下部へ向かって右手人差し指ですーっとなぞります（画像の表示/非表示切り替えのジェスチャと逆方向です）。なぞってもページがスクロールしない箇所があるので、慣れれば一発で実行出来ると思います。デスクトップ版ブラウザの場合は Ctrl + Alt + 0 で有効になります。一度 PJAX を有効にすると、「有効にしたよ」メッセージが表示され、以降はページをリロードするまではオフに出来ません
制約その他: PJAX で開けるページは、「元ページと同じドメイン（ホスト）、同じプロトコル」の場合のみです。元ページが http://aaa.bbb.com/foo.html の場合、http://aaa.bbb.com/bar.html や http://aaa.bbb.com/bar/baz.html は開けますが、https://aaa.bbb.com/ や http://aaa2.bbb.com/ は PJAX では開けないため新しいタブで開きます; リンク先をちゃんと開けない場合がままあります。うまく開けなかった場合は放棄して普通に（PJAX ではなく）リンク先を開くので察してください; WebKit 系ブラウザ（Safari、Chrome 18 以下）の場合、ブラウザの「戻る」ボタンを押した際にスクロール位置を復元出来ません。ただし、現在のページと一つ前のページの URL が同じ場合（#以降が違っていても良い）は、スクロール位置が復元出来ます。また、フォームを POST 送信したページへ戻る際、POST した内容の再送信は行いません。Firefox ではスクロール位置を復元し、POST 内容を再送信します; リンク先ページのスクリプトを実行しないので、普通にブックマークレットを実行した時よりも表示や挙動がおかしくなるかも; 画像やその他ファイル（メディア、Office 文書、PDF など）へのリンクは強制的に新しいタブで開きます; 最初にブックマークレットを実行したページとリンク先のページの文字コードが異なる場合は文字化けします; 今のところ、iOS 5 の Mobile Safari では特に問題なく動いていますが、iOS 4.x の Mobile Safari では、「リンクをタップするとページ表示内容が変わるが、アドレスバーの URL は変わらない。しかし、リロードするとちゃんとリンク先ページがリロードされる。戻るボタンで戻れない（履歴が増えてない）」という謎な状態になるようです。また、iOS 5 でも一部のサードパーティ製ブラウザやアプリはこれと似たような挙動をするものがあります。これは、PJAX が利用している HTML5 History API に関して、OSやフレームワークレベルではサポートされているが、アプリ側がそれに対応出来ていないために起こっているのだと思われます（iOS 4 はそもそも History API 自体が動かないと思っていたら、動いちゃった！）; Android の WebKit 系ブラウザは 2.2.x/2.3.x でのみ利用可能