第14回　スクロール位置がボックス境界にスナップするページ

今回はシングルページサイトの構築で、1つの情報になるのかが分かりにくい場合などにマウスホイールに応じて、ページの先頭部分に自動的にフィットするサンプルを作成します。

最近のWebサイト構造のひとつに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル（単一）ページという構造もよく見られるようになりました。

シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐことができ、また最近のスマートフォンでのサイト閲覧においても、片手でスムースにスピーディーに情報を得ることができるので、とくに新商品、新サービスのキャンペーン系の特設サイトやランディングページに適した構造と言えるでしょう。

しかし、こういったシングルページサイトの構造は、どこからどこまでは1つの情報になるのかが分かりにくい場合があります。もちろん、デザインでそれを分かりやすく伝えることは大切でありますが、伝え手側がうまくユーザーを誘導するようにすることも1つの方法です。今回はシングルページ内のそれぞれのコンテンツの適正な位置に、自動的にユーザーを誘導する仕組みを実装してみます。

■今回作成したサンプル

●表示領域の位置補正を行うwindowsプラグインについて

ユーザーがサイトを閲覧しているときに、自動的にスクロール位置を適正な位置に補正するとき、あたかも何かに吸い付くような動きをすることから「スナップ」するとも表現され、今回サンプルに使用した「windowsプラグイン」はそういった用途に利用できるjQueryプラグインで、スナップスピードやタイミングを制御できるオプションなども用意されています。

windowsプラグインは、スナップ先としたいコンテンツ（※以下、スナップコンテンツ）を内包する要素からwindows()メソッドを実行することで実行され、以後スナップコンテンツとユーザのスクロール位置は常に監視されます。

例えば、ユーザーがページ下方向にスクロールダウンすると、それに応じてページ内に配置されたすべてのHTML要素は上方向に流れて行き、その中でスナップコンテンツも上方向に流れます。そして、スクロールダウンを止めると、スナップコンテンツの縦位置がブラウザ画面表示領域（※以下、スクリーン）上端よりも少し上にはみ出ます。そして、通常ならば、ユーザーが少し上方向にスクロールをして、要素を下方向に移動するように位置を調整しながらコンテンツを読み進めていくことになりますが、windowsプラグインの機能が実行されると、スナップコンテンツに指定した要素が自動的にスクリーンの上端の位置にくるように、スクロール位置を調整してくれます。

しかし、前述のように多少の上方に行き過ぎた程度の位置のズレであれば、スナップコンテンツの始まりの位置をスクリーン上端に移動するよう補正してくれますが、そのスナップコンテンツの縦幅の半分以上の距離分上方に行き過ぎた場合は、そのスナップコンテンツへの補正は行われず、次のスナップコンテンツがスクリーン上端まで上方に移動します。

逆方向も同様で、スクリーンを上方にスクロールアップすると、要素はすべて下方向に流れて行くため、スナップコンテンツの縦幅半分以上がスクリーン上端よりも下に移動していれば、さらに上方にスクロールアップされ、前のスナップコンテンツの始まりの位置まで移動されます。

●windowsプラグインで位置補正機能を実装する

サンプル（sample_basic.html）は、各コンテンツの位置が自動補正されていることが分かりやすいようにページの背景色を色分けし、連番の番号をページの中心に設置しています。

また各コンテンツの縦幅は常にスクリーンサイズ（ブラウザ表示領域）の縦幅と一緒になるように、Javascriptで補正しています。このような仕様にすることで、常にスクリーンの縦半分より上か下かで、スナップする方向が変わるので動作がわかりやすくなります。

<div id="contentContainer">
<div id="columnContainer">
<div id="column1" class="column">
<p class="number">1</p>
</div>

<div id="column2" class="column">
<p class="number">2</p>
</div>

<div id="column3" class="column">
<p class="number">3</p>
</div>

<div id="column4" class="column">
<p class="number">4</p>
</div>

<div id="column5" class="column">
<p class="number">5</p>
</div>

<div id="column6" class="column">
<p class="number">6</p>
</div>

</div>
<!--/ columnContainer -->

</div>
<!--/ contentContainer -->

;(function (d, $) {
  var jQdm_adjustContent;
  jQdm_adjustContent = function(){
    // 初期設定
    var prop = {
      $window: $(window),
      snapTarget: '.column',
      snapSpeed: 500,
      snapInterval: 500
    }
    function init(){
      // スナップ（位置補正）させる要素をキャッシュ
      var _$t = $(prop.snapTarget),
      _$w = prop.$window;
      // ページロード時とリサイズ時に、スナップ要素のサイズをウィンドウサイズに合わせるように設定
      _$w.on('load', function(){
        fitWindowScale(_$t);
      });
      _$w.on('resize', function(){
        setTimeout( function() {
          fitWindowScale(_$t);
        }, 200);
      });
      // スナップ対象要素にスナップ機能を付与する
      _$t.windows({
        snapping: true,
        snapSpeed: prop.snapSpeed,
        snapInterval: prop.snapInterval
      });
    }
    // 要素をウィンドウワイズにあわせる
    function fitWindowScale(_$t){
      var _w = window.innerWidth,
      _h = window.innerHeight,
      _$num = _$t.find('.number');

      _$t.css({
        height: _h
      });
      _$num.css({
        top: _h / 2 - _$num.height() / 2 - 20,
        left: _w / 2 - _$num.width() / 2
      });
    }
    // 文字列置換処理
    function replaceString(_str, _bf, _af, _flg){
      var _reg = new RegExp(_bf || '[€€.#]', _flg || '');
      return _str ? _str.replace(_reg, _af || '') : false;
    }
    init();
  };
  jQdm_adjustContent();
})(document, jQuery);

上記で紹介したサンプルの他に書籍の方ではナビゲーションを追加したパターンやコンテンツの写真を追加し、フェードで出現するパターンなども作成しております。

●ナビゲーションを追加した例
url. http://www.html5-memo.com/sample/jq-books/15/sample_plus_nav.html

●コンテンツに写真を追加した例
url. http://www.html5-memo.com/sample/jq-books/15/sample_photo.html

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

2015/3/4

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！