« アクセスバブル | トップページ | 【LDRize】PictPop:サイト毎の設定が可能になりました »

2009/05/11

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

LDRize使用時、画像ファイル(PNG/JPEG)へのリンクがある任意のページで、画像をその場で表示できるGreasemonkeyスクリプトを試作してみました。
要は
【LDRize】Google 画像検索で画像をその場で見る拡張スクリプト
と同じようなことを、任意のサイトで出来ないかな~という試みです。
[j]キーの押しすぎで腱鞘炎にならないように充分注意しましょう(笑)。
■Greasemonkeyスクリプト
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つだけ表示されます。

    Leppsample001

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

    Leppsample002_2

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

    Leppsample003

    Leppmenu

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

    Leppsample004

    Leppmode

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

    Leppsample005

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

    Leppsample006_2

    のように画像がその場で表示されます。
    また、[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とか)。

« アクセスバブル | トップページ | 【LDRize】PictPop:サイト毎の設定が可能になりました »

おもいつき」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

これはまたすばらしいスクリプトですね!

ただ,PC Watch のようなところでは有効でないのがやはり残念です・・・
http://pc.watch.impress.co.jp/

ぴくとぽっぷのhtml対応版のように進化すればと楽しみにしています(^^)

taro さん(だと思うのですが、違っていたら失礼)、どうもです。

ぴくとぽっぷのように、リンク先がHTMLの場合に解析するモードを追加してみました(ver.0.02)。宜しければお試し下さい。
http://furyu-tei.sakura.ne.jp/script/LDRizeExtPictPop.user.js

1. リンク先解析なし(拡張子判断)・対象:JPEG/PNG
2. 1+GIF
3. リンク先解析あり・対象:JPEG/PNG
4. 3+GIF
デフォルトは3で、[w]キーを押すと、解析モードが変更出来ます。
http://pc.watch.impress.co.jp/
だと、画像がほとんどGIFみたいなので、4.にしないと効果がないかも……。

また、[W]([Shift]+[w])キーで、3/4の場合に、解析対象をサムネイルがあるリンクのみに限るかどうかを切替できます。

なお、変更したモードは、サイト(document.domain)単位で記憶されます。

念のため、旧版も置いておきます。
http://furyu-tei.sakura.ne.jp/script/LDRizeExtPictPop_ver001.user.js

ありがとうございますm(__)m

先日のコメントに名前を入れるのを忘れました。

早速使わせていただきました!
自分の理解が悪いのかもしれませんが,以下で試してみたのですが,
軒並みエラーとなってしまいます。
http://pc.watch.impress.co.jp/docs/column/hothot/20090513_168362.html

これが仕様ということであれば,そのように理解いたします(泣)

それと,センタリングの件,改めてありがとうございます。

センタリングするなら,
POS_LEFT=0;
でいいだろうと,このように設定しました。
ただ,私のところでは何ドットか左に寄るようです??

ofleft=~~((csize.x+POS_LEFT-((tgtImg)?tgtImg.width:0)-24)/2-PADDING);

この24を20にすると真ん中になったのですが,24ドットは何の数値なのでしょうか?

ついでの縦もセンターにしようと思ったのですが,今度は16という数値があります。
これも何かに関係あるかと思うのですが,もしよろしければご教示いただければ,
お手数をかけずに,なんとか自分で頑張ってみたいと思うのですが・・・m(__)m

| 軒並みエラーとなってしまいます。
http://pc.watch.impress.co.jp/docs/column/hothot/20090513_168362.html

すみません、拡張子の判別でミスってました(*.jpg.htmlを画像として処理してました)。
修正しましたが、いかがでしょうか(ver.0.02a)。

| この24を20にすると真ん中になったのですが,24ドットは何の数値なのでしょうか?

まだセンタリングを考慮していなかったときに、スクロールバーを避けるために適当に(汗)入れた値です(値そのものには深い意味無し・16も同様)。
var MIN_MARGIN_RIGHT=18;
と名前をつけて、パラメータとしてユーザが調整出来るようにしておきました。

なお、ver.0.02aから、縦もセンタリング可能になりました。
var VERT_CENTERING=false;
のfalseをtrueに変えてお試し下さい。
(縦のセンタリングは個人的にはあまり好みじゃないので、デフォルトfalseにしております。悪しからず)

動きました!

ただ,なぜ,PC Watchでは動かなくて,デジカメ WatchやGAME Watchで動いたので,
こちらで確認しています。

何かPC Watchでスクリプトがヘンな覚え込みをしたからでしょうか?

センタリング,またまたありがとうございます。

真似をしてgoogleの方もやってみました。
が,浅はか故にVERT_CENTERINGの箇所を変更するだけでは動きませんね(^^;
うむむ・・・

いずれにしましても,ここ数日感動しています。
待ち望んでいたものばかりです。

ありがとうございます。

| 何かPC Watchでスクリプトがヘンな覚え込みをしたからでしょうか?

関連するとしたら[w]キーで変更出来るモードだと思うのですが。
Link analytic mode: JPEG/PNG(analyze linked page)
になっていても動きませんか?

センタリングの件、Google画像検索版の方もVERT_CENTERINGパラメータを追加しておきました(ver.0.01d)。
http://furyu-tei.sakura.ne.jp/script/LDRizeExtGIS.user.js

こんばんは(^^)

wキーで切り替えて切り替えてみましたが,
動作があまり正常っぽくない印象のページが多いです。
あるいはこれが仕様であれば,それはそれで納得するのですが。

Google画像検索版はリンク先の元画像を表示してくれますし,
ご承知のように greased lightbox も同様の動作をします。

ただ,こちらのスクリプトは,
縮小画像と元画像を共に表示することがあります。

また,こちらのページでは w でモードを色々切り替えてみたのですが,
Errorとなって思うように表示されませんでした。
http://plusd.itmedia.co.jp/pcuser/articles/0905/13/news071.html

動作仕様をとらえ間違っていたら申し訳ありませんm(__)m

| ただ,こちらのスクリプトは,
| 縮小画像と元画像を共に表示することがあります。

えーと、これはまぁ仕様といえば仕様です。
Google画像検索版やGreased Lightboxの場合には、リンク先URLを適宜加工することにより、画像のURLを"ただひとつ"決定しています。

一方、本スクリプトの場合、(画像リンク以外は)リンク先(HTML)をとりあえず読込んだうえで、そのページ上のIMG要素を抽出しています。
ですので、IMG要素が複数あった際には、それが順次表示されることになります。

どれが見たい画像かの判別は自動ではほぼ不可能ですし、複数を順次みたい場合もあるので。
というか、ブックマークレット版ぴくとぽっぷもそうなんですが、もともと任意のページで
(1)現在のページ上に貼付けてある画像(IMG要素)
(2)リンク(A要素)先画像
(3)リンク(A要素)先ページ(HTML)上にある画像(IMG要素)
をシーケンシャルに見る、というのが基本コンセプトでした。

ただ、確かにリンク先に余計な画像がたくさんあったりすると煩わしいので、サイト毎の設定が出来るようにもしてみました(ver.0.03)。
http://furyu-tei.sakura.ne.jp/script/LDRizeExtPictPop.user.js
結構いろいろいじったので、前のバージョン(ver.0.02a2)も置いておきます。
http://furyu-tei.sakura.ne.jp/script/LDRizeExtPictPop_ver002a2.user.js

SITE_CONFIGSに特定のサイト用の設定を追加すれば、Greased Lightboxライクな画像選択が可能です。
※説明はちょっと面倒なので省略(すみません)。taroさんにコメントいただいたサイト(PC Watch、ITmedia +D PC USER)の例を書いてありますので、参考にして下さい。
※ちなみに、Google画像検索版スクリプトの代わりに、本スクリプトを@excludeを外して使えば、Google画像検索でも動くようになりました。

http://plusd.itmedia.co.jp/pcuser/articles/0905/13/news071.html
こちらのサイトはちょっと事情が違いました(Greased Lightboxでも表示出来ないはず)。
リンク先のURLが*.jpgであるにも関らず、取得できるのはhtmlで、実際の画像のURLは違うものとなっています。
例)
[リンク先]
http://image.itmedia.co.jp/l/im/pcuser/articles/0905/13/l_ht_0904ab01.jpg
[実際の画像ファイル]
http://image.itmedia.co.jp/pcuser/articles/0905/13/l_ht_0904ab01.jpg

さらに、特殊なリファラのチェックをしているようで、Greasemonkey単独で画像を表示する方法が当方にはわかりませんでした。

本スクリプトのver.0.03を使用し、かつ、RefControlの設定で、
サイト(S): image.itmedia.co.jp
動作 カスタム(C): http://www.itmedia.co.jp
にすると、表示されるようになります。

なお、当該サイトで横に並んでいる画像でLDRizeのカーソル画像(>)が右端にくっついたまま動かないのは仕様です(苦笑)。
※CSSのfloatが設定されているとこうなるみたいです(LDRizeの動作)。

ver.0.03試しました。
風柳様は神様か何かではないでしょうか・・・
何でも思い通りに作ることができるのですね。
ただ,驚くばかりです。

RefControlで設定しますと,ITmediaの画像もみれました。
感動です・・・言葉が他にありません。

1点だけ,わからない動作がありまして,
jキーでみていくと画像の最後で「START」と表示されます。
最後なのに「START」?
これは,またどうしてでしょうか?

| 何でも思い通りに
できたらいいんですけどね~、プログラムに限定したとしても、現実はなかなかそうはいきません(苦笑)。

| 最後なのに「START」?
| これは,またどうしてでしょうか?

これはですね、メビウスの帯のごとく、ねじれて繋がっているんです……嘘です、ごめんなさい。

え~、LDRizeの仕様なのか当方のミスなのか不明ですが、一番最後までいくと最初のリンクが返されてくるんですよね。
LDRizeを有効にするためには最低ひとつは対応したリンクが必要なので、本スクリプトで埋めこんでいるのですが……最初は、バランスよく[START][END]二つのリンク(アイコン)を挿入していたんですが、どうも最後に[END]を入れておくと、AutoPagerizeでページが繋がったときにおかしな動きになることがあったので、[END]を外したんです。
なので、最後までいくと[START]だけが表示されることになってしまったという(苦笑)。

でもやっぱり不自然なので、アイコンを進入禁止マークに変えてみました(笑)。いかがでしょうか。

とても便利なスクリプトだと思います。いつも使わせていただいてます。
が、Firefoxをアップデートしたら動かなくなってしまいました。
Firefox3.6.9、greasemonkeyの0.9.0に戻したら動くようになったのですが…。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/161784/44975521

この記事へのトラックバック一覧です: 【LDRize】PictPop:任意サイトで画像をその場で見る拡張スクリプト:

« アクセスバブル | トップページ | 【LDRize】PictPop:サイト毎の設定が可能になりました »

戻るリンク追加

カレンダー

2017年10月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ