DesigningSmartphoneLab.2012年1月号シェアTweet執筆:丸茂朋弘SmartphoneLab.2012年1月号スマートフォン特有の操作「フリック」を導入するスマートフォンは、さまざまな点でPCとは異なるインターフェイスを備えているが、中でも「フリック」はタッチパネルを利用したスマートフォンならではの操作方法だ。フリックでコンテンツを滑らかにスライドさせていくのは心地よいものだ。今回は、「フリック」を実現する方法を解説しよう。jQueryプラグインで「フリック」を実装する「フリック」とは、タッチパネルをタッチしてから、そのまま指を離さずに移動し、目的の場所で指を離すという一連の動作のことを指す(01)。タッチパネルを備えたスマートフォン特有の操作方法であり、「かな」文字入力の際などで利用される。01フリック操作タッチした地点の座標と指を離した地点の座標の差で、どの方向にどれくらいフリックしたかを判断するフリックは、実はWebページでも利用することができる。スターバックスのスマートフォンサイトでは、トップページにフリック切り替え対応のメイン画像を設置している(02)。このほかにも、スマートフォンサイトでは、コンテンツを効果的に見せるためにフリックを採用しているところが増えてきている。フリックをスマートフォンサイトに実装するには、jQueryプラグインやJavaScriptライブラリを使うのが便利だ。今回は、jQueryプラグインを使った「フリック」機能の実装方法を解説していこう。02viewportフリックを導入しているサイト事例概念スターバックス:http://www.starbucks.co.jp/メイン画像がフリックできる仕様になっている。フリックを可能にするプラグインやライブラリフリック機能を実装する際に用いるjQueryプラグインやJavaScriptライブラリには、いくつかの種類がある。シンプルなものから画像ギャラリーに特化したものまで、それぞれ特性が異なるので、用途に合わせて選択しよう。jQuery.flickSimple.js汎用性・安定性の面でもっとも使いやすいといえるのが「jQuery.flickSimple.js」だ(01)。iPhone/Androidはもちろん、PCでもフリックが再現されるので、制作時のチェックが非常にやりやすい。設定はとてもシンプルで簡単な上にオプション要素も豊富なので、設定次第でさまざまな仕様に対応できる。次ページからは、このjQueryプラグインを使ったフリックの実装を解説していく。「jQuery.flickable」というjQueryプラグインもあるが(02)、こちらも汎用性が高く、カスタマイズしやすい。01jQuery.flickSimple.jsjQuery.flickSimple.js:http://www014.upp.so-net.ne.jp/makog/js/jquery_flicksimple/「makogの日記」の管理者であるmakog氏が作成したjQueryプラグイン。細かいところまで作りこまれていて非常に使いやすい。マニュアルサイトでは多数のサンプルと詳しい解説が掲載されている。左がスマートフォンでの表示で、右がPCのブラウザでの表示。PCでもフリックが可能で、スマートフォンサイトとほぼ同じ挙動が再現されるので制作中の検証がしやすい02jQuery.flickablejQuery.flickable:http://lagoscript.org/jquery/flickablelagos_on氏が作成したjQueryプラグイン。これもサンプルや解説が豊富でわかりやすいPhotoSwipe「PhotoSwipe」は、スマートフォン版ライトボックスとも言える、ギャラリー形式のフリックを実現するJavaScriptライブラリだ(03)。サムネイル画像をタップすると全画面サイズの画像ギャラリーになり、その後はフリックで別の画像に切り替えることができる。ギャラリー表示の際には画像の拡大/縮小や移動ができ、自動スライドショー再生も可能だ(04)。iPhone/Androidに対応しており、ブラウザによるが、PCでの表示にも対応している。03PhotoSwipePhotoSwipe:http://www.photoswipe.com/画像ギャラリーのような見せ方に特化したJavaScriptライブラリ。サムネイルからフリック対応の全画面表示へ切り替わる04PhotoSwipeのギャラリー表示ギャラリー状態では、ピンチアウト/インで画像の拡大縮小ができる。再生ボタンでデジタルフォトフレームのようなスライドショーも可能。Touchwipeフリックイベントを取得するためのjQueryプラグインだ(05)。イベントを取得するだけなので、発生後の挙動は別途用意する必要がある。CyclePlugin」と連携させてフリック対応のスライドショーを実装している。PCのマウスカーソルでのフリックには対応していないので、別途コントロールボタンなどが必要だ。Effect):http://www.netcu.de/jquery-touchwipeiphone-ipad-libraryフリックイベントを取得するためのjQueryプラグイン。シンプルなフリックインターフェイスを作るまずは、スマートフォンサイトでよく見かける、シンプルなデザインのフリックインターフェイスを制作してみよう。ここでは、HTMLとCSSの編集から「jquery.flicksimple.js」を用いた実装までを見ていく。今回はメイン画像にフリック機能を付加し、4つの画像を切り替えられるようにしよう。フリックは同じような要素の羅列なので、多くの場合、リストとしてマークアップされる。ここでは、ul要素を用いて01のようなHTMLを作成し、02のようなCSSを記述した。01と02のwidthの値は、仕様やデザインによって異なるため、それに合わせたカスタマイズが必要になる。01は「(リストの要素数)÷(一度に表示させる要素数)×100%」の値になる。ここでは、一度に表示する画像は1枚で、横に4要素なので「400%」にする。02は「100%÷(リストの要素数)」なので、この例では「25%」になる。これらの記述により、リスト要素がディスプレイ外に水平に並ぶようになる(03)。01フリック対象のマークアップ(HTML)フリック対象はリストでマークアップし、外側をid名を付けたdiv要素で囲む。6/7対策03フリックでスクロールする部分のイメージリストの子要素はフロートし、右に伸びる(当然、はみ出た部分は表示されない)形となる。PCではスクロールバーが表示され、iPhoneでは横スクロールが可能。AndroidはスクロールできないJavaScriptの記述JavaScriptの記述は非常に簡単だ。jQueryプラグインとして作成されているので、head要素内にjQueryファイルとプラグインファイルへのリンクを作成する。次に、先ほど作成したarticle要素の直後に、04のような記述をして、id「mainimg」にフリック機能を付加する。これでフリック操作が可能になる(05)。右から左にフリックすると、初期状態の画像が左に流れて、同時に右から画像が入ってくる。Androidにも対応している一度に複数の画像を表示したい時は?上の例では、一度に表示させる要素数が1つの場合を解説した。これを2つ、3つなど、複数表示させたい時には、CSSの設定を変更する必要がある。01の値を調整することになる。一度に2つの要素を表示させる時には、「4÷2×100%」で「200%」となる。これで、初期状態で2つの画像が表示され、一回のフリックで2つの画像が動く。フリックしていない状態。多機能なフリックインターフェイスを作ろうフリックを採用したスマートフォンサイトには、オプション機能を追加したものも存在する。ここでは、ページ数を表示するページインジケータ、フリックを想定していないユーザーのためのスライドボタン、一定時間で自動的にページが変わる自動スライドを実装してみよう。HTMLとCSSの設定まず、HTMLとCSSに若干の修正を加える。詳細は、サンプルファイルをダウンロードして参照してほしいが、主な変更点としては、スライドボタンとページインジケータを要素として設置(02)し、スタイルを適用している。ページインジケータは親要素のdiv要素の背景に非アクティブの画像、子要素のimg要素にアクティブの画像を設定している。これだけではまったく機能せず、ただ「置いてある」だけなので、JavaScriptを用いて実装する。01オプション機能を追加したインターフェイスオプション機能付きのフリック実装。ボタンタップでのページ送りができ、5,000ミリ秒(5秒)ごとに自動的にスライドする。ページインジケータは全ページ数と現在のページを自動取得する02スライドボタンとページインジケータの実装(HTML)article要素の中にaside要素を追加し、その中にスライドボタン、ページインジケータを設置した。それぞれidを付けてJavaScriptで制御するJavaScriptの記述article要素直後のscript要素に、03のようなコードを追記する。DOMへのアクセスを最小限に抑えるために、セレクタをキャッシュする(01)。次の「flickSimple」メソッドの中では、「縦位置から横位置(もしくはその逆)に持ち方が変わった時」「フリックが行われた時」のページインジケータの挙動を指定している(02)。この中の「19」という数字はページインジケータ画像の幅の指定だが、デザインによって変わる部分なので、個々に調整が必要になる。03の記述でスライドボタンを実装している。「#btnNext」をタップすると「次のページ」へ「1ページ分」進むようになっている。最後に、自動スライドの実装だ(04)。フリック範囲にタップしていなければ、5,000ミリ秒おきに自動で次のページにスライドする。これで、3種類のオプション機能を盛り込んだフリックインターフェイスが完成する。03オプション機能の実装(JavaScript)オプション機能を盛り込んだ場合のJavaScript。Reserved.特定商取引法に基づく表示プライバシーポリシーサイトマップ。