WD Online

課題解決のためのUI実装講座 Web Designing 2016年1月号

カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」(2/2) スワイプ対応タブメニューを実装してみよう

スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

[SWIPE TAB 01]タブ部分を配置し横スクロールに対応させる

それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さらに、タブの切り替時えにアニメーションをつけて、変化をわかりやすくしてみよう。

使用するフレームワークとプラグイン

今回は、jQueryのほかに「Bootstrap※1」というフレームワークと、「Hammer.js※2」というタッチジェスチャーに特化したJavaScriptライブラリを使用する。この二つを組み合わせることによって、上記で述べたような操作に対応したタブメニューを実装できる。

タブ部分の配置と横スクロール対応

まず、Bootstrapを使い、ベースとなるタブメニューを実装する(01)。

<div class="nav-tabs-outer">
  <ul class="nav nav-tabs js-tabs">
    <li class="active text-center"><a href="#tab1" data-toggle="tab">TAB1</a></li>
    省略
    <li class="text-center"><a href="#tab10" data-toggle="tab">TAB10</a></li>
  </ul>
</div>
01 HTMLの抜粋(sample01/index.html)。Bootstrapで作成したタブのマークアップ

そのままでは、タブの数が多くなると画面内に回りこんでしまうので(02)、CSSとJavaScriptで常に横一列になるようにし、横スクロールに対応させる。

11c4b3c52ab7666d3d717767a6d14a12.jpg
02 Bootstrapで実装したタブ
Bootstrapのコンポーネントのままだと、タブ数が多くなると、回りこんでしまう

JavaScriptでタブを囲っている要素に対して横幅を指定する(A)。このとき、タブの全体数を取得し、その分の横幅を指定しよう。タブの全体数は実装後に変動することがあるので、固定値にしないほうが汎用性があってよい。

$(function(){

  var $jsTabs = $('.js-tabs');
  var $jsTabsLi = $('.js-tabs li');

  var tabsLiLen = $jsTabsLi.length;
  var tabsLiWid = $jsTabsLi.eq(0).width();

  //タブエリアの横幅指定
  $jsTabs.css('width',tabsLiWid * tabsLiLen);  //--------A

});
03 JavaScript(sample01/js/main.js)。スクリプトでタブメニューの幅を指定する

さらに、それを囲うdiv要素にCSSで「overflow-x:scroll;」を適用し(B)、そのdiv要素からはみ出た部分を横スクロールで表示できるようにする。

.nav-tabs-outer{
  overflow-x:scroll;  //--------B
}

.nav-tabs-outer .nav-tabs li{
  display: block;
  width: 100px;
}
04 CSS(sample01/css/style.css)。タブメニューを囲む要素で、overflow-xプロパティをscrollにする

これらの処理により、画面上に表示されるタブメニューの範囲が制限され、ユーザーの操作性を考慮したサイズ・配置を実装することができる。

wd175_ui_05.PNG
05 調整後のタブ
CSSとJavaScriptで横スクロール対応のタブにしたところ

[SWIPE TAB 02]スワイプでタブが切り替わるようにする

タブメニューを配置して横スクロールに対応させたところで、次はタブによって切り替わるコンテンツ部分の挙動を実装していこう。コンテンツ部分に対し、スワイプ操作によってタブ切り替えができるようにし、使い勝手をよくする。

コンテンツ部分のスワイプの実装

スワイプ操作が有効なコンテンツ部分(ここではclass属性「.js-swipe」のdiv要素)に対して、jQueryでswipeleftイベントと、swiperightイベントを登録する。これらはjQueryには用意されていないイベントだが、Hammer.jsを導入することによって使用可能になる。

$(function(){
  var ACTIVE_SELECTOR = '.nav-tabs > .active';

  var $jsTabs = $('.js-tabs');
  var $jsTabsLi = $('.js-tabs li');

  var $jsSwipe = $('.js-swipe');
  var $scrollContainer = $('.nav-tabs-outer');

  var tabsLiLen = $jsTabsLi.length;
  var tabsLiWid = $jsTabsLi.eq(0).width();

  //タブエリアの横幅指定
  $jsTabs.css('width',tabsLiWid * tabsLiLen);

  //スワイプイベント登録
  $jsSwipe.hammer().on('swipeleft',next);  //--------C
  $jsSwipe.hammer().on('swiperight',prev);

  function next() {
    tabManager($(ACTIVE_SELECTOR).next('li'));
  }
  function prev() {
    tabManager($(ACTIVE_SELECTOR).prev('li'));
  }                                        //--------C

  // 指定されたタブをカレントし要素にスクロールする
  function tabManager($nextTarget){
    $nextTarget.find('a').trigger('click');  //--------D

    if($nextTarget.index() != -1){
      $scrollContainer.scrollLeft($nextTarget.index() * tabsLiWid);  //--------E
	  
    }
  }

});
06 JavaScript(sample02/js/main.js)

スワイプした方向によってタブが前後に移動するので、カレント処理をしている関数に対して、引数で次にカレントにする要素を渡して実行する(C)。

そして、関数側で受け取った要素に対してclickイベントを実行し、カレント位置を移動させる(D)。

カレント処理について

タブメニューを横スクロールすると、カレントのタブが画面外に隠れてしまうことがある。ユーザーが現在位置を見失うので、どのタブがカレントなのかわかりやすいように、タブ切り替えが行われた際、画面上にカレントのタブが移動してくるようにする(E)。こうすれば、ストレスなく情報が入ってくる。

wd175_ui_07.PNG
07 完成したサンプル
タブメニュー部分だけでなく、コンテンツ部分でもスワイプでタブ切り替えができるようになった(sample02)

スワイプ実装の注意点

スワイプを実装する際には、通常のページスクロール操作に反応しないように制御が必要だ。この制御を省いてしまうと、ユーザーの予期せぬタイミングでタブが切り替わったり、ページスクロール中にスワイプが反応してしまったりして、逆に使いづらいUIになってしまう。Hammer.jsはその辺りも対応しているが、一から自作で実装するときは注意しよう。

1525b78fa587e5781118f01ed3513b32.jpg
08 タブ移動を視覚的にする
応用編として、タブが切り替ったことがよりわかりやすくしたサンプルを用意した(sample03)。カレントのタブの背景に色を付け、さらにアニメーションを追加して「タブが切り替わった」ことが視覚的に伝わるようにしている。実際に操作してみるとsample02との違いが体感できるので、ぜひダウンロードして試していただきたい

※1 HTML、CSS、JavaScriptのフレームワークの中でメジャーなものの一つ。サンプルでは、全体のstyleとベースとなるタブ切り替えで使用している。http://getbootstrap.com/
※2 今回はスワイプのイベント登録に使用しているが、他にもさまざまなジェスチャーが用意されている。また、サンプルのようにjQueryプラグインとして使用することも可能だ。http://hammerjs.github.io/

464f409ca3721528ec7a36babe9fa3e0.jpg
町田なつみ
デジタルハリウッドにて、グラフィックデザインを専攻。卒業後は制作会社にてWebデザイナー/ディレクターを経験し、2014年より(株)LIGに参画、Webデザイナーとして業務に従事している。
a75fcfaf8af9649a7f85e9440a2fbc33.jpg
古川佑太朗
2011年、東京デザイナー学院を卒業。同年、Web制作会社で働きはじめ、代理店経由の案件を数多く経験する。その後、2015年より(株)LIGにフロントエンドエンジニアとして入社。現在は、新規案件の開発業務を中心に従事している。

掲載号

Web Designing 2016年1月号

Web Designing 2016年1月号

2015年12月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

グロースハック/「キーワードツール」活用講座

サンプルデータはこちらから

■ 特集:今日から始める“成長戦略”グロースハック
 世界の急成長サービスが特集 実践するデジタル時代のマーケティング手法

近年、「グロースハック」という言葉を耳にすることが増えてきました。しかし、その本当の中身を正しく理解している人はあまりいないようです。チップス? テクニック? スタートアップ企業向けの秘密のノウハウ? いえ、そうではないんです。グロースハックとは、これからのデジタル時代に必須の「マーケティングの考え方」のことなのです。今回はさまざざな角度からグロースハックの考え方を紹介していきます。

■ 集中企画:ネットビジネスを有利にするための「キーワードツール」活用講座
 SEOやリスティング広告対策に! 事前にユーザーの検索行動がわかる

「キーワードツール」は、インターネットにおける検索行動量を手早く調査できるツールです。つまり、あるキーワードが「どれくらいのユーザーにリーチするのか」を事前に推定できます。ここでは、ツールの概要とともに、その活用術について解説します。

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
GREEN NAME/LIFE IS A GIFT/ORCHESTRE DE PARIS/KAI FACT magazine/Deja vu/くばら あごだしチャレンジ/キリンメッツ スター・ウォーズ/google STARWARS/LACOSTE-F/W OUTWEAR/Christmas Express/めぐみ野 スペシャルコンテンツ「トマトになった男の子」/Japan Sumo Cup/沖縄戦 全記録|NHKオンライン/Typetone

■ ビジネス・EC
 □ ECサイト業界研究
 カンバセーションコマース:Facebook を利用した会話によるEC

 □ 月刊店舗設計
 ULYSSES:適切な場所での情報発信がビジネスの可能性を広げる

 □ モバイルビジネス最前線
 MYALO:禅×脳科学によるストレスコントロール「マインドフルネス」をアプリで学ぶ

 □ 知的財産権にまつわるエトセトラ
 作者以外にも著作権は認められる

 □ Bay Area Startup News
 画像やテキストを判別して自動でサイトをつくる「The Grid」

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 ユーザーインタビューで有効なコンテンツを見定める

 □ ハギハラ総研
 日本人の半分はまだECを利用していない

 □ デジタルプロモーションの舞台裏
 ビジネス展開を見越し運用体制の強化を図った“マーケティングツール”サイト

 □ 行動デザイン塾
 ブームは「なじみの行動」が火付け役に

 □ 課題解決のためのUI実装講座
 カテゴリーが多いスマホサイトで役立つ「スワイプ対応タブメニュー」

 □ 解析ツールの読み方・活かし方
 買収したサイトを最小限のコストでリノベーションする

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]誰のためにつくるのか?: John Lewis Christmas Advert 2015 眞鍋海里
 [デジタルプロモーション]「ノーデジタル」の拡散:The Gun Shop 築地 Roy 良
 [Webサービス]上質な表現の「場」:Medium 仲暁子
 [IoT]なんとなくの心地よさ:kizuki. 神谷憲司

 □ モノを生むカイシャ
 1→10drive:「体験」をデザインするプロ集団

 □ 清水幹太の「Question the World」
 Julia Kaganskiy:美人マッドサイエンティストによる、やばい実験計画

 □ ツクルヒト
 榊原澄人:「フレーム」を超えて動き出す世界

 □ 最果タヒの「詩句ハック」
 第19回 あみだく詩゛

 □ デザインにできることMonologue
 Vol.143 パブリッシュ

 □ エキソニモのドーン・オブ・ザ・ボット
 コンピュータに「嗅覚」を与えるチップがインターネットのニオイ体験を可能に!?

■ インフォメーション
 □ Topics
 突破クリエイティブアワード2015/ココノヱPresents らくがきミュージアム/第19回 文化庁メディア芸術祭/BB-8 by Sphero

 □ Movement&News
 水族館+動物園+美術館?!「NIFREL(ニフレル)」オープン!/「スター・ウォーズ」のキャラクターや乗り物を使った作品を発表するフランス人写真家の日本初個展/数万枚もの写真をコラージュして1枚の地図をつくりあげる西野壮平 ほか
 [アドテック東京 2015]属性から個人へ。エンゲージメントを高めるトレンド/[Adobe Falsh Professional]時代とユーザーの潮流にあわせ「Animate CC」として新生/Twitter Japan担当者が語るTwitter広告成功のために必要なこと ほか

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています