f:id:bulldra:20150718071109j:plain

ページシークバーの作成

　長々と縦にスクロールされていく長文記事を読んでいると、以下のようなことを思う事があります。

どこまで読み終わったのかを把握したい
前の段落まで一気に戻りたい

　それらの要件が解決できるインターフェイスデザインを考えていて、動画再生時に表示される水平なシークバーを縦スクロールされる文章と同期させるスクリプトをJQueryで作成しました。

　『Pocket』にも同様なインターフェイスがあるのですが、シークバーからの操作も行える点が異なります。いわゆる「PAGE TOP」ボタンの機能も兼ねさせているのです。

f:id:bulldra:20150718071846j:plain

ページシークバーの設置方法

　はてなブログのデザイン画面→ヘッダに以下のコードをコピー＆ペーストします。スタイルシート内の変更をすることで、下側に表示させたり、色を変更することができます。スマートフォンでの動作も確認しています。ソースコードの記事内への転載はご遠慮ください。

<div id="pagebar"></div>
<div id="pagebar-bg"></div>
<style type="text/css">
#pagebar {
    position: fixed;
    top: 0px;
    left: 0px;
    width:0px;
    height:8px;
    background-color:#944;
    z-index:128;
}

#pagebar-bg {
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    height:8px;
    opacity: 0.5;
    background-color:#ddd;
    z-index:256;
}

#pagebar-bg:hover {
    background-color:#bbb;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/* http://bulldra.hatenablog.com/entry/page-seekbar */
$(function(){
  var viewSeekbar = function() {
   $('#pagebar').css('width', (($(window).scrollTop() + $(window).height()) / $('body').height() * 100.0) + "%");
  }
  viewSeekbar();
  $(window).scroll(viewSeekbar);
  $('#pagebar-bg').click(function(e){
    $('html,body').animate({ scrollTop: $('body').height() * (e.pageX - e.target.offsetLeft) / $(window).width() - $(window).height()}, 300);
    return false;
  });
});
</script>

文章にも動画的なインターフェイスを取り入れる

　そんなわけで、記事内のスクロールと横軸のシークバーを同期させる処理を作成しました。段落見出しや強調表示などの位置を読み取って、それにあわせた区切り線をシークバー内に入れることも考えたのですが、まずは簡単な実装にしています。

　長文記事を取り回すためのインターフェイスは大切だと思っていて、今回は動画再生のような水平シークバーを取り入れてみました。1画面では収まりきらない縦軸の文章を1画面分の横軸に変換することで、直感的に把握できるようになると思いますので、よかったら利用してみてくださいね。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

<a href="http://bulldra.hatenablog.com/entry/blog-parts-copype">はてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから</a>