【LDRize】PictPop：任意サイトで画像をその場で見る拡張スクリプト

LDRize使用時、画像ファイル(PNG/JPEG)へのリンクがある任意のページで、画像をその場で表示できるGreasemonkeyスクリプトを試作してみました。

要は

【LDRize】Google 画像検索で画像をその場で見る拡張スクリプト

と同じようなことを、任意のサイトで出来ないかな～という試みです。

[j]キーの押しすぎで腱鞘炎にならないように充分注意しましょう(笑)。

■Greasemonkeyスクリプト

LDRize拡張スクリプト【PictPop】：任意サイトで画像をその場で表示

Minibuffer＋LDRize導入済のFirefoxで、上記Greasemonkeyスクリプトをインストールして使用します。
なお、Minibuffer＋LDRizeより先に読み込む必要があるので、『ユーザスクリプトの管理』（ツール(T)→Greasemonkey(G)→ユーザスクリプトの管理(M))画面で、"LDRizeExtPictPop"を"Minibuffer"よりも上に持ってきて下さい。

■機能

1. [E]キー：サイト(ドメイン)毎に有効／無効切替。
   はじめてのサイトでは、デフォルトは無効状態。
2. [v]キー：その場で画像を表示
3. [a]キー：自動表示モードへ
   [j][k]押下により移動した先の画像を自動的に表示。
4. [o]キー：別タブで画像を表示
5. [q]キー：画像表示方法切替
   画面内に表示→元サイズで表示→横幅あわせ→縦幅あわせ。
6. [m]キー：現在のモードを表示
7. [w]キー：リンク先解析モード切替【ver.0.02以降】
   
8. [W]キー：解析対象リンク切替(サムネイル付リンクのみ/全リンク)【ver.0.02以降】
   
9. [V]キー：リンク先へ画面遷移【ver.0.02以降】
   

■サンプル
画像スレまとめ2で試した使用例。

1. インストール後に初めて訪れたサイトでは、デフォルトでは、LDRizeExtPictPop（以下LEPP）は無効になっています。
   ショートカットキーは2つだけ表示されます。

   

   また、[m]キーを押すと、

   

   のように表示されます。
   Firefox拡張のNoScriptが有効なときには動作しない場合があります。
   大抵の場合はそのサイトでスクリプトを許可してやれば動作しますが、まれにそれでも動かないケースもあるようです。
2. そこで、[E]（[Shift]+[e])を押します。すると、ページがリロードされ、LEPPが有効になります。
   使用可能なショートカットキーが増えます。

   

   

   また、[m]キーを押すと、

   

   

   のような表示がなされます。
3. LDRizeの機能により、通常通り[j][k]で移動出来るようになります。

   

4. [v]キーを押すと、

   

   のように画像がその場で表示されます。
   また、[a]キーを押下後に[j][k]を押すと、移動先の画像が自動的に表示されるようになります。
5. 一度[E]キーにより設定しておくと、以降はそのサイトのドメイン下ではLEPPが有効になっています。
   無効にしたい場合は、[E]キーを再度押して下さい。
6. 【ver.0.02から追加された機能】
   
   1. リンク先が画像以外の場合には、リンク先のHTMLを解析して画像を抽出します。
      [w]キーを押すと、解析モードを変更出来ます。
      1. リンク先解析なし(拡張子判断)・対象：JPEG/PNG
      2. リンク先解析なし(拡張子判断)・対象：JPEG/PNG/GIF
      3. リンク先解析あり・対象：JPEG/PNG
      4. リンク先解析あり・対象：JPEG/PNG/GIF
      デフォルトは「リンク先解析あり・対象：JPEG/PNG」です。
      リンク先に画像が複数ある場合、[j][k]で表示を切り替えます。
   2. [W]([Shift]+[w])キーで、解析対象とするリンクを、サムネイル付きのものに限るか、全リンクを対象とするかを選択できます。
      デフォルトはサムネイル付きリンクのみ対象。
   3. [a][q][w][W]で変更したモードは、サイト(document.domain)毎に保存されます。
   4. [V]([Shift]+[v])キーで、現在のタブのままリンク先に遷移します。

■覚書とか

1. 似たようなスクリプトとしては

   Greased Lightbox, enhance browsing on websites that link to images - Shifting Pixel
   ぴくとぽっぷ：ページ上から直リンクしている画像を順次表示するブックマークレット
   

   なんかがありますね。
   これらはリンク先が画像ファイル以外の場合でも画像のURLを抽出するような機能を持っていますが、本スクリプトはそのような機能はありません。リンク先がPNG/JPEGの場合のみの手抜き実装です本スクリプトでも同様の機能を追加してみました(ver.0.02以降)。
   なるべく手間が少なくすむ方法があれば機能追加するかも知れませんが……

   1. どのリンク要素を対象とするかの判定。
   2. リンク先が画像以外の場合の解析(画像URLの取り出し)。

   を、サイト毎の情報を自分で持つことなく汎用的かつ容易に実装出来て速度もはやい方法無いかなぁ（をぃ）。
   →とりあえず、拡張子判別に加えて、リンク先解析モードも追加し、解析モード切替＋対象リンク切替(サムネイル付／全リンク)機能を付けて、それらのモードをサイト(document.domain)毎に保存出来るようにしてみました。
2. あるDOM要素が現在表示されているかどうか(当該要素及び先祖要素のComputedStyleがdisplay:noneになっていないかどうか)って、簡単に調べる方法、ありませんでしたっけ？
3. NoScriptで禁止設定されているサイトだと、うまく動作しません。setTimeout()でコールされた関数は、ユーザスクリプト扱いにしてくれない、のかな？
   
   LDRizeがロード完了イベントを発行してくれれば助かるのですが……(AutoPagerizeみたいに)。
   もっとも、どちらにしてもsetTimeout()やsetInterval()使えないとなるとちょっと辛いけど。
   禁止設定してないサイトでも、NoScriptが動いていると何故かダメなケースがありました（GIGAZINEとか）。