メディア掲載_Web Designing

Web Designing 2012年1月号

執筆:丸茂朋弘 執筆:丸茂朋弘

SmartphoneLab.2012年1月号

スマートフォン特有の操作「フリック」を導入する

スマートフォンは、さまざまな点でPCとは異なるインターフェイスを備えているが、中でも「フリック」はタッチパネルを利用したスマートフォンならではの操作方法だ。フリックでコンテンツを滑らかにスライドさせていくのは心地よいものだ。今回は、「フリック」を実現する方法を解説しよう。

jQueryプラグインで「フリック」を実装する

「フリック」とは、タッチパネルをタッチしてから、そのまま指を離さずに移動し、目的の場所で指を離すという一連の動作のことを指す(01)。タッチパネルを備えたスマートフォン特有の操作方法であり、「かな」文字入力の際などで利用される。

01フリック操作

01 フリック操作

タッチした地点の座標と指を離した地点の座標の差で、どの方向にどれくらいフリックしたかを判断する

フリックは、実はWebページでも利用することができる。たとえばスターバックスのスマートフォンサイトでは、トップページにフリック切り替え対応のメイン画像を設置している(02)。このほかにも、スマートフォンサイトでは、コンテンツを効果的に見せるためにフリックを採用しているところが増えてきている。
フリックをスマートフォンサイトに実装するには、jQueryプラグインやJavaScriptライブラリを使うのが便利だ。今回は、jQueryプラグインを使った「フリック」機能の実装方法を解説していこう。

02viewportフリックを導入しているサイト事例概念

02 viewportフリックを導入しているサイト事例概念

スターバックス:http://www.starbucks.co.jp/
メイン画像がフリックできる仕様になっている。各画像にはリンクが張られており、タップするとそれぞれのページへ遷移する

02 viewportフリックを導入しているサイト事例概念

あきゅらいず美養品:http://www.akyrise.jp/sp/
メイン画像のボタン付きフリックや、Twitterのタイムラインの縦方向フリック、アコーディオンメニューの中のフリックなど、トップページだけで複数のフリックが導入されている

SECTION1 フリックを可能にするプラグインやライブラリ

フリックを可能にするプラグインやライブラリ

フリック機能を実装する際に用いるjQueryプラグインやJavaScriptライブラリには、いくつかの種類がある。シンプルなものから画像ギャラリーに特化したものまで、それぞれ特性が異なるので、用途に合わせて選択しよう。

jQuery.flickSimple.js

汎用性・安定性の面でもっとも使いやすいといえるのが「jQuery.flickSimple.js」だ(01)。iPhone/Androidはもちろん、PCでもフリックが再現されるので、制作時のチェックが非常にやりやすい。また、設定はとてもシンプルで簡単な上にオプション要素も豊富なので、設定次第でさまざまな仕様に対応できる。次ページからは、このjQueryプラグインを使ったフリックの実装を解説していく。「jQuery.flickable」というjQueryプラグインもあるが(02)、こちらも汎用性が高く、カスタマイズしやすい。

01jQuery.flickSimple.js

01 jQuery.flickSimple.js例

jQuery.flickSimple.js:http://www014.upp.so-net.ne.jp/makog/js/jquery_flicksimple/
「makogの日記」の管理者であるmakog氏が作成したjQueryプラグイン。細かいところまで作りこまれていて非常に使いやすい。マニュアルサイトでは多数のサンプルと詳しい解説が掲載されている。左がスマートフォンでの表示で、右がPCのブラウザでの表示。PCでもフリックが可能で、スマートフォンサイトとほぼ同じ挙動が再現されるので制作中の検証がしやすい

02jQuery.flickable

02 jQuery.flickable例

jQuery.flickable:http://lagoscript.org/jquery/flickable
lagos_on氏が作成したjQueryプラグイン。これもサンプルや解説が豊富でわかりやすい

PhotoSwipe

「PhotoSwipe」は、スマートフォン版ライトボックスとも言える、ギャラリー形式のフリックを実現するJavaScriptライブラリだ(03)。サムネイル画像をタップすると全画面サイズの画像ギャラリーになり、その後はフリックで別の画像に切り替えることができる。ギャラリー表示の際には画像の拡大/縮小や移動ができ、自動スライドショー再生も可能だ(04)。iPhone/Androidに対応しており、ブラウザによるが、PCでの表示にも対応している。

03PhotoSwipe

03 PhotoSwipe例

PhotoSwipe:http://www.photoswipe.com/
画像ギャラリーのような見せ方に特化したJavaScriptライブラリ。サムネイルからフリック対応の全画面表示へ切り替わる

04PhotoSwipeのギャラリー表示

04 PhotoSwipe のギャラリー表示

ギャラリー状態では、ピンチアウト/インで画像の拡大縮小ができる。また、再生ボタンでデジタルフォトフレームのようなスライドショーも可能。縦横どちらの持ち方にも対応している

jQuery Touchwipe

フリックイベントを取得するためのjQueryプラグインだ(05)。イベントを取得するだけなので、発生後の挙動は別途用意する必要がある。作者のサイトでは、「jQuery CyclePlugin」と連携させてフリック対応のスライドショーを実装している。また、PCのマウスカーソルでのフリックには対応していないので、別途コントロールボタンなどが必要だ。

05jQuery Touchwipe

05 jQuery Touchwipe例

jQuery Touchwipe
(iPhone, iPad, iPodTouch Gesten Gestures Event Wischeffekt/ Wipe Effect):http://www.netcu.de/jquery-touchwipeiphone-ipad-library
フリックイベントを取得するためのjQueryプラグイン。上にフリックすると画像を表示し、下にフリックすると非表示になるといったような、操作後の挙動は自分で作成する

SECTION2 シンプルなフリックインターフェイスを作る

シンプルなフリックインターフェイスを作る

まずは、スマートフォンサイトでよく見かける、シンプルなデザインのフリックインターフェイスを制作してみよう。ここでは、HTMLとCSSの編集から「jquery.flicksimple.js」を用いた実装までを見ていく。

HTMLとCSSの設定

今回はメイン画像にフリック機能を付加し、4つの画像を切り替えられるようにしよう。フリックは同じような要素の羅列なので、多くの場合、リストとしてマークアップされる。ここでは、ul要素を用いて01のようなHTMLを作成し、02のようなCSSを記述した。0102のwidthの値は、仕様やデザインによって異なるため、それに合わせたカスタマイズが必要になる。01は「(リストの要素数)÷(一度に表示させる要素数)×100%」の値になる。ここでは、一度に表示する画像は1枚で、横に4要素なので「400%」にする。02は「100%÷(リストの要素数)」なので、この例では「25%」になる。これらの記述により、リスト要素がディスプレイ外に水平に並ぶようになる(03)。

01フリック対象のマークアップ(HTML)

01 フリック対象のマークアップ

フリック対象はリストでマークアップし、外側をid名を付けたdiv要素で囲む。画像サイズは揃っていなくて構わない

02フリック部分のCSS

02 フリック部分のCSS

id「mainimg」のpositionプロパティの設定はIE 6/7対策

03フリックでスクロールする部分のイメージ

03 フリックでスクロールする部分のイメージ

リストの子要素はフロートし、右に伸びる(当然、はみ出た部分は表示されない)形となる。PCではスクロールバーが表示され、iPhoneでは横スクロールが可能。Androidはスクロールできない

JavaScriptの記述

JavaScriptの記述は非常に簡単だ。jQueryプラグインとして作成されているので、head要素内にjQueryファイルとプラグインファイルへのリンクを作成する。次に、先ほど作成したarticle要素の直後に、04のような記述をして、id「mainimg」にフリック機能を付加する。これでフリック操作が可能になる(05)。

04フリック機能を付加する

04 フリック機能を付加する

id「mainimg」に対して、このスクリプトを実行させることで「jquery.flicksimple.js」が起動する

05フリックしたときの様子

05 フリックしたときの様子

右から左にフリックすると、初期状態の画像が左に流れて、同時に右から画像が入ってくる。Androidにも対応している

一度に複数の画像を表示したい時は?

上の例では、一度に表示させる要素数が1つの場合を解説した。これを2つ、3つなど、複数表示させたい時には、CSSの設定を変更する必要がある。つまり、01の値を調整することになる。
たとえば、一度に2つの要素を表示させる時には、「4÷2×100%」で「200%」となる。
これで、初期状態で2つの画像が表示され、一回のフリックで2つの画像が動く。

一度に複数の画像を表示したい時の見本

フリックしていない状態。フリック操作で、この2枚の画像から次の2枚の画像へ切り替わる

SECTION3 多機能なフリックインターフェイスを作ろう

多機能なフリックインターフェイスを作ろう

フリックを採用したスマートフォンサイトには、オプション機能を追加したものも存在する。ここでは、ページ数を表示するページインジケータ、フリックを想定していないユーザーのためのスライドボタン、一定時間で自動的にページが変わる自動スライドを実装してみよう。

HTMLとCSSの設定

まず、HTMLとCSSに若干の修正を加える。詳細は、サンプルファイルをダウンロードして参照してほしいが、主な変更点としては、スライドボタンとページインジケータを要素として設置(02)し、スタイルを適用している。ページインジケータは親要素のdiv要素の背景に非アクティブの画像、子要素のimg要素にアクティブの画像を設定している。
しかし、これだけではまったく機能せず、ただ「置いてある」だけなので、JavaScriptを用いて実装する。

01オプション機能を追加したインターフェイス

01 オプション機能を追加したインターフェイス

オプション機能付きのフリック実装。ボタンタップでのページ送りができ、5,000ミリ秒(5秒)ごとに自動的にスライドする。ページインジケータは全ページ数と現在のページを自動取得する

02スライドボタンとページインジケータの実装(HTML)

02 スライドボタンとページインジケータの実装(HTML)

article要素の中にaside要素を追加し、その中にスライドボタン、ページインジケータを設置した。それぞれidを付けてJavaScriptで制御する

JavaScriptの記述

article要素直後のscript要素に、03のようなコードを追記する。
まず、DOMへのアクセスを最小限に抑えるために、セレクタをキャッシュする(01)。次の「flickSimple」メソッドの中では、「縦位置から横位置(もしくはその逆)に持ち方が変わった時」「フリックが行われた時」のページインジケータの挙動を指定している(02)。この中の「19」という数字はページインジケータ画像の幅の指定だが、デザインによって変わる部分なので、個々に調整が必要になる。
そして、03の記述でスライドボタンを実装している。「#btnNext」をタップすると「次のページ」へ「1ページ分」進むようになっている。
最後に、自動スライドの実装だ(04)。フリック範囲にタップしていなければ、5,000ミリ秒おきに自動で次のページにスライドする。これで、3種類のオプション機能を盛り込んだフリックインターフェイスが完成する。

03オプション機能の実装(JavaScript)

03 表示例

オプション機能を盛り込んだ場合のJavaScript。各値を変更することで、ページの送り方や方向、速さなどの調整ができる

お問い合わせはこちらからどうぞ