とあるところでFirefoxを使ってたのだが、
なんかGoogle検索の次にをクリックしようと思ったら、次のページが自動で読み込まれた。
気持ち悪い機能であるが便利である。
その正体だが、AutoPagerizeというユーザースクリプトであった。
ユーザースクリプトって知ってるかな。
Webページの表示を加工するJavaScriptですね。
Firefoxのアドオン、GreaseMonkeyの上で動かすんですけどね。
実は以前取り上げたことがあって、「font-familyを書き換えてClearTypeを有効利用しよう」の記事で使ってます。
これはMS PゴシックとなっているところをIPAMonaPGothicに置換するというもの。
今でも使ってますよ。これでClearTypeが適用される文字に置換して見てます。
で、このAutoPagerizeもユーザースクリプトでして、これは一定のルールに基づいて作られたページの、
端に近づいたら次のページを読み込むというもの。
AutoPagerize for GreasemonkeyよりInstallをクリックする。
GreaseMonkeyが入ってれば簡単にインストールできるはず。
これでGoogle検索とかしてみると、右上に緑色のが見える。
この右上の四角が動作状態を示している。緑色のが見えれば動作中ということ。
下にスクロールして見ていくと、ほら次のページが読み込まれた。
今までに導入したか、今導入した人は気付いてるかも知れないけど、
このページ、AutoPagerize使えるのよね。
比較的簡単にAutoPagerize対応できる方法。
まずlink要素を設定する。
link要素というとスタイルシートとか、RSSの設定とかに使いますね。
ただこんな風にnextとかprevとかindexとかこういう関係を示すものなんですね。
こういう関係の中にスタイルシートという関係とかがあるわけです。
さて、必要なのはnextだけです。
これを実現するためにBlognplusを改造しました。
テンプレートの{BACKPAGE}～{/BACKPAGE}は、過去のページに進めるときはリンクを用意するでしたが、
これを過去のページがあるときだけ表示するという意味に変更。
そしてリンク作成のためのURLは{BACKPAGEURL}で得ることとした。
//$skin = preg_replace("/(\{BACKPAGE\})([\w\W]+?)(\{\/BACKPAGE\})/", "<a href=\"index.php".$url."page=".$backpage."\">\\2", $skin);
$skin = preg_replace("/(\{BACKPAGE\})([\w\W]+?)(\{\/BACKPAGE\})/", "\\2", $skin);
$skin = preg_replace("/(\{BACKPAGEURL\})/", "index.php".$url."page=".$backpage, $skin);
1行目のようなものを下の2行で書くことにしたと。
テンプレートについては{BACKPAGE}過去{/BACKPAGE}としてきたのなら、
{BACKPAGE}<a href="{BACKPAGEURL}">過去{/BACKPAGE}
このような表記ができるようになると。
これを利用してlink要素を{BACKPAGE}～{/BACKPAGE}で囲んで作成すると。
同様にNEXTPAGEについても行いました。それぞれ2箇所修正するだけですね。
ここで注意するのはBlogの過去の方向に読み進めていくから、
rel=”next”とBACKPAGE、rel=”prev”とNEXTPAGEが対応するということには注意しなければ。
これで次のページの内容のブロックをautopagerize_page_elementクラスに設定する。
そしてこれの前に次のページの内容を割り込ませるブロックにautopagerize_insert_beforeクラスを設定する。
このBlogであれば、title , main , toolbox , footerのブロックから成っているわけだが、
このうち内容はmainブロック。これをfooterブロックの前に割り込ませると。
だから2ページ目のmainブロックが入ってくると、title , main , toolbox , main(2) , footerとなるわけ。
このmainの割り込みの前に罫線とページ番号の表示が入る。
これがそれぞれautopagerize_page_separatorクラスとautopagerize_page_infoクラスに属している。
だけどこの罫線とページ番号の表示がおかしくなるのでCSSに追加。
.autopagerize_page_separator , .autopagerize_page_info { clear:left; width:100%; }
このページではfloatでブロックを配置してるけど、
autopagerize_page_separatorとautopagerize_page_infoについてはそれをリセットすると。
まぁこうするのが一番うまくいきます。
これで基本的にはOKです。
フッダーの内容がAutoPagerizeを使ってるときはまともに見えなくなるから、
この内容をサイドバーにうつしました。コピーライトなどという項目ね。
あとは続きのページを読み込んだときにコメント投稿フォームを折りたたむスクリプトが、
AutoPagerizeで読み込んだときには実行されないというのがあったので、
JavaScriptでCSSを追加することにした。
JavaScriptが使える人だけ、フォームを折りたたみたいから、
いままではJavaScriptで折りたたんでたけど、JavaScriptでCSSを追加して折りたたませると。
[暴満館] JavaScriptによるCSSの操作のaddRule関数を使わせてもらった。
本当はこんな関数はいらんような気はするけどね。
それでindex.jsにこの関数を書いて、カウンターを回すことと、addRuleを使って、
addRule("div.compost","display : none");
これでコメントフォームを折りたたむとJavaScriptで定義したと。
JavaScriptを使わないなら当然折りたたまれないし、
JavaScriptを使ってるから成功すれば折りたたまれる。
これはコメント投稿のリンクで開くことができる。
というわけで、突貫工事でやってみたものの、結構使えるものになってます。
詳しい仕様は理解せずにやってるので、これから詳しく調べていこうと思うけど。
単独記事表示で使うと便利かも知れませんね。
このBlogは1ページに複数記事を表示するときは、10記事表示するんだよね。
だから多くの人に取っては次に進む前に用が済んでしまうと。
そういう面は確かにあるんですが、時々便利かなと思いましてね。
便利に使う人は便利に使ってくれるとありがたいですね。