WEBデザイン制作に役立つリソースとAutopagerize 対応SITEINFO

autopagerizeSITEINFO

最後にまとめてSITEINFOを掲載しておきますが、各画像をクリックすると個別でSITEINFOを表示するようにもしておきました。

CSSギャラリー

CSS Remix

nextLink:     '//div[@id="view-more"]/div[@class="pagination"]/a[last()]',
insertBefore: '//div[@id="sites"]/following-sibling::node()',
pageElement: '//div[@id="sites"]',

CSS Mania

        url:          'http://cssmania.com/',
        nextLink:     '//div[@id="main"]/div[@class="mtpag"]/p/a',
        insertBefore: '//div[@id="main"]/ul[@class="caps"]/following-sibling::node()',
        pageElement: '//div[@id="main"]/ul[@class="caps"]',

Showcase CSS Gallery - css design, web design gallery, css design gallery

        url:          'http://www.csselite.com/category/showcase/',
        nextLink:     '//div[@id="showcase"]/p[@class="pagenav"][2]/a[contains(text(),"Next")]',
        insertBefore: '//div[@id="showcase"]/p[@class="foot"]',
        pageElement: '//div[@id="showcase"]',

Gallery

        url:          'http://www.unmatchedstyle.com/gallery/',
        nextLink:     '//div[@class="navigation"]/div[@class="alignleft"]/a[contains(text(),"Previous")]',
        insertBefore: '//div[@id="content"]/following-sibling::node()',
        pageElement: '//div[@id="content"]',

Download Free Vector Graphics at Vecteezy!

        url:          'http://www.vecteezy.com/gallery',
        nextLink:     '//div[@id="main"]/div[@class="pagination"]/ul/li/a[contains(text(),"next")]',
        insertBefore: '//div[@id="main"]/ul[@class="pictures"][2]/following-sibling::node()',
        pageElement:  '//div[@id="main"]/ul[@class="pictures"]',

Free Photoshop Brushes at Brusheezy!

        nextLink:     '//div[@id="main"]/div[@class="pagination"]/ul/li/a[contains(text(),"next")]',
        insertBefore: '//div[@id="main"]/ul[@class="pictures"][2]/following-sibling::node()',
        pageElement:  '//div[@id="main"]/ul[@class="pictures"]',

Deziner Folio

        url:          'http://www.dezinerfolio.com/',
        nextLink:     '//div[@class="wp-pagenavi"]/a[position()=last()-2]',
        insertBefore: '//div[@class="pageborhack"]/following-sibling::node()',
        pageElement:  '//div[@class="pageborhack"]',

Pipes: Rewire the web

        url:          'http://pipes.yahoo.com/pipes/',
        nextLink:     '//a[starts-with(text(),"Next")]',
        insertBefore: '//ul[@class="pipelist"]/following-sibling::node()',
        pageElement:  '//ul[@class="pipelist"]',

Latest jQuery Plugin Releases | jQuery Plugins

Most Popular Plugins | jQuery Plugins

        url:          'http://plugins.jquery.com/',
        nextLink:     '//div[@class="pager"]/a[@class="pager-next active"]',
        insertBefore: '//div[@class="view view-latest-release" or @class="view-content view-content-popular-plugins"]/following-sibling::node()',
        pageElement:  '//div[@class="view view-latest-release" or @class="view-content view-content-popular-plugins"]',

stock.xchng - the leading free stock photography site

       url:          'http://www.sxc.hu/',
        nextLink:     '//a[starts-with(text(),"Next")]',
        insertBefore: '//div[@id="thumbs"]/following-sibling::node()',
        pageElement:  '//div[@id="thumbs"]',

とりあえず、以上です。他にも嗜好で使っているサイトのSITEINFOなどもありますが、マメにtemp - SITEINFO避難所にアップしています。

以下は、まとめてのSITEINFOです。

{ url: 'http://cssmania.com/', nextLink: '//div[@id="main"]/div[@class="mtpag"]/p/a', insertBefore: '//div[@id="main"]/ul[@class="caps"]/following-sibling::node()', pageElement: '//div[@id="main"]/ul[@class="caps"]', }, { url: 'http://www.cssremix.com/', nextLink: '//div[@id="view-more"]/div[@class="pagination"]/a[last()]', insertBefore: '//div[@id="sites"]/following-sibling::node()', pageElement: '//div[@id="sites"]', }, { url: 'http://www.csselite.com/category/showcase/', nextLink: '//div[@id="showcase"]/p[@class="pagenav"][2]/a[contains(text(),"Next")]', insertBefore: '//div[@id="showcase"]/p[@class="foot"]', pageElement: '//div[@id="showcase"]', }, { url: 'http://www.unmatchedstyle.com/gallery/', nextLink: '//div[@class="navigation"]/div[@class="alignleft"]/a[contains(text(),"Previous")]', insertBefore: '//div[@id="content"]/following-sibling::node()', pageElement: '//div[@id="content"]', }, { url: 'http://www.brusheezy.com/brushes', nextLink: '//div[@id="main"]/div[@class="pagination"]/ul/li/a[contains(text(),"next")]', insertBefore: '//div[@id="main"]/ul[@class="pictures"][2]/following-sibling::node()', pageElement: '//div[@id="main"]/ul[@class="pictures"]', }, { url: 'http://www.vecteezy.com/gallery', nextLink: '//div[@id="main"]/div[@class="pagination"]/ul/li/a[contains(text(),"next")]', insertBefore: '//div[@id="main"]/ul[@class="pictures"][2]/following-sibling::node()', pageElement: '//div[@id="main"]/ul[@class="pictures"]', }, { url: 'http://www.dezinerfolio.com/', nextLink: '//div[@class="wp-pagenavi"]/a[position()=last()-2]', insertBefore: '//div[@class="pageborhack"]/following-sibling::node()', pageElement: '//div[@class="pageborhack"]', }, { url: 'http://plugins.jquery.com/', nextLink: '//div[@class="pager"]/a[@class="pager-next active"]', insertBefore: '//div[@class="view view-latest-release" or @class="view-content view-content-popular-plugins"]/following-sibling::node()', pageElement: '//div[@class="view view-latest-release" or @class="view-content view-content-popular-plugins"]', }, { url: 'http://www.sxc.hu/', nextLink: '//a[starts-with(text(),"Next")]', insertBefore: '//div[@id="thumbs"]/following-sibling::node()', pageElement: '//div[@id="thumbs"]', }, { url: 'http://pipes.yahoo.com/pipes/', nextLink: '//a[starts-with(text(),"Next")]', insertBefore: '//ul[@class="pipelist"]/following-sibling::node()', pageElement: '//ul[@class="pipelist"]', },

Dezignus.com - All around design surfer

    {
        url:          'http://dezignus.com/',
        nextLink:     '//div[@id="bg"]/div[@class="wp-pagenavi"]/a[position()=last()-1 or position()=last()-2]',
        insertBefore: '//div[@id="page"]/following-sibling::node()',
        pageElement:  '//div[@id="page"]',
    },

このサイトも作ってみてみたものの、WPのページネーションでちょっと理解できなくなってしまい、数ページまでしか対応できていませんがSITEINFO紹介しておきます。

Autopagerize

Autopagerize、ページ分割されたサイトで「次のページ」「next」など次のページのリンクをクリックすることなく、ページを閲覧することができるスクリプトです。

私もこのスクリプトの存在をこちらのエントリー（autopagerizeがすごすぎる。 - Muibrog）を読んで以来使っています。とても役立っており、サイト閲覧がとてもスムーズになりました。

そういえば、Web2.0ポッドキャスト: 第39回 GreaseMonkey + AutoPagerize + LDRize + minibufferというポッドキャストがあって、Vでその便利さを説明してくれています。一度どんなに便利なのか見てみるとよくわかると思います。（しゃべっている方がガンダムのアムロの声に似ているようなｗ）

autopagerize導入

使用・導入には、Firefox・greasemonkey・autopagerizeスクリプトが必要です。

Greasemonkey :: Firefox Add-ons

http://userscripts.org/scripts/show/8551

SITEINFO追加

自分でautopagerize SITEINFOを追加していくには、

HD：＞Document&Setting＞users＞application Data＞mozilla＞firefox＞Profile＞...コード...＞gm_scripts＞autopagerize.js

上記のアドレスでスクリプトを選択して、お使いのエディタで編集します。

編集部分は、44行目からの

var SITEINFO = [
],

上記の部分にこれからご紹介するコードを追加することで、autopagerizeが対応されるようになります。

本来ならひとつのサイトで管理されるようになっているスクリプトですが、そうそう更新もしていられないと思いますので、随時自分で対応サイトのSITEINFOをつくり、それをtemp - SITEINFO避難所にあげていくといったかんじでしょうか。

autopagerize対応サイト確認

• AutoPagerize (swdyh)
• temp - SITEINFO避難所-対応済置き場

上記のサイトで対応サイトを確認できます。

temp - SITEINFO避難所対応前のSITEINFOがおいてあるので、そこからも情報を取得することもできます。（こちらは、情報を自分でSITEINFOに追加していくといった形で対応させていくということになります。）

ご自分でSITEINFOを作るのは、こちらのAutoPagerize用のXPathをかんたんに作るためのブックマークレット AutoPagerize IDE - bits and bytesエントリーが参考になります。 また、firebugも使うとノードを確認しやすいです。慣れるとfirebugだけでSITEINFOが作れるようになります。

Xpathリソース

• XPathXML -TECHSCORE-
• XML Path Language (XPath)
• Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex
• CSSのセレクタをXPathに変換する - nazonoDiary

またいくつかSITEINFOが増えたら、エントリーにしてアップするようにします。