AutoPagerizeに対応する

Ruby on Rails ソフトウェア

AutoPagerizeという素晴らしい！ソフトウェアに出会った。Firefoxの機能拡張スクリプトだ。どのような機能を提供してくれるかというと、webページの下までスクロールしてくると、普通は「次ページ」などのリンクをクリックしてその続きを読み込むことになる。ここでもしAutoPagerizeがインストールされていれば、下までスクロールしてくると自動的に次のページを取得して、その同じページに継ぎ足してしてくれる。
この自動的に続きのページが継ぎ足されていくところが素晴らしいところ。次のリンクを探したり、クリックしてからの若干の読み込み時間が気になったり、ということがなくなる。途切れること無く集中してページを読み続けることができるのだ。一度体験すると病みつきになる。もう次ページをクリックする操作に戻りたくない。

  • 気になることも出てきた。自動でページ挿入されると、レイアウトによってはfooter周辺の情報が見難くなってしまうこともある...。

  • 飾り気の無いサンプルで分かり難いかもしれないが、水平ライン下のpage: 2、page: 3が自動的に継ぎ足されたページ。

インストールから使い方まで、ウノウラボ Unoh Labs/ Webブラウジングを快適にするAutoPagerizeのページで簡潔に紹介されている。（感謝です。）それを参考に同じように自分でやってみた。

インストール

Greasemonkey
AutoPagerize

自分で開発したRailsサイトもAutoPagerizeに対応したい！

  • 現在試行錯誤中の複数モデル同時保存のサンプルコードで以下のように対応させてみた。3つの属性を設定するだけでOK。 
<%# AutoPagerize %>
<%# http://d.hatena.ne.jp/swdyh/20070701/1183239979 %>

<h1>Listing slips</h1>

<%# AutoPagerize: class="autopagerize_page_element" 属性タグが自動読み込みで描画される範囲になる %>
<div class="autopagerize_page_element">
<table>
  <tr>
  <% for column in Slip.content_columns %>
    <th><%= column.human_name %></th>
  <% end %>
  </tr>
  
<% for slip in @slips %>
  <tr id="<%= partial_path(slip) %><%= dom_id(slip) %>">
  <% for column in Slip.content_columns %>
    <td><%=h slip.send(column.name) %></td>
  <% end %>
    <td><%= link_to 'Show', :action => 'show', :id => slip %></td>
    <td><%= link_to 'Edit', :action => 'edit', :id => slip %></td>
    <td><%= link_to 'Destroy', { :action => 'destroy', :id => slip }, :confirm => 'Are you sure?', :method => :post %></td>
  </tr>
<% end %>
</table>

<%= link_to 'Previous page', { :page => @slip_pages.current.previous }, {:rel=>'prev'} if @slip_pages.current.previous %>
<%# AutoPagerize: rel="next" 属性で自動的に読み込まれる次ページへのリンクを指定する %>
<%= link_to 'Next page', { :page => @slip_pages.current.next }, {:rel=>'next'} if @slip_pages.current.next %>

<br />
</div>

<%# AutoPagerize: class="autopagerize_insert_before" 属性の手前に次ページの描画結果が挿入される %>
<div class="autopagerize_insert_before"></div>

<%= link_to 'New slip', :action => 'new' %>

rel属性について以下のページが大変参考になりました。感謝です。

これで、ページ最初のスクリーンショットの状態になった。（次ページを自動読み込みするタイミングは、スクロール動作で下に近づいた時のようなので、本来はスクロールバーが表示されている状況。）