SoGap に「タイトルのみ表示」機能と AutoPagerize 機能を実装しました

Web

SoGap - ソーシャルサービス間での話題性の「ギャップ」ランキング の表示関係についての意見をいくつか見かけたので、それらの意見を参考に「タイトルのみ表示」機能と AutoPagerize 機能を実装しました。

「タイトルのみ表示」機能

各種詳細ページは通常、

  • タイトル（＋ドメイン、GapRating 算出時の各種ソーシャルボタンのカウント、GapRating）
  • 画像と本文（ともに、取得できた場合）
  • ソーシャルボタン

と言う構成になっていますが、右上にある「表示形式」の「タイトルのみ」ボタンを押すと、タイトル部分のみが表示されるようになります。「表示形式」、および「フィルタ」のクリック状態は Cookie に記憶しています。

AutoPagerize 機能

各種詳細ページの左下にある「+」ボタンをクリックすると、次のページ内容が、ページ遷移せずに直接表示されます。

AutoPagerize と言いつつクリックが必要なので「Auto」じゃないんですが、この類の機能は AutoPagerize と言う単語で認知されているような気がするのでそう呼んでおきます。

マウスホイールによる一般的な AutoPagerize 機能にしなかったのは、「いつまでたってもフッタに辿り着けない問題」を回避するためです。これは、PC 用のレイアウトではそこまで問題にはならないのですが、スマートフォンから閲覧した場合、レイアウトの関係上サイドバーが（なかなか）表示されず不便に感じられるケースが発生しそうだったのでこの形にしました。

AutoPagerize 機能の実装には、jQuery.autopager を使用しています。また、ローディング中である事を伝えるための画像（くるくる回ってるやつ）は、ローディング画像 - みんなの知識【ちょっと便利帳】 より利用させてもらいました。

<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.autopager.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
    $.autopager({
        content : '.contents-body',
        autoLoad : false,
        
        load : function(current, next) {
            document.getElementById("loading").style.display = "none";
            $(this).before('<hr style="margin-top:1em" />');
            //sogap.initialize();
        },
        
        start : function(current, next) {
            document.getElementById("loading").style.display = "block";
        }
    });
    
    $('a#autopager').click(function() {
        $.autopager('load');
        return false;
    });
});
//]]>
</script>

Related Pages