flavors.me/amberjack

January 10, 2012

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

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

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

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

できること

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

できないこと

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

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

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

Simplify Styles v0.7 - WTFPL

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

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

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

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