👨🏻‍🔧 🛀🏿 🤛🏿 HTML5タッチスクリーンインターフェイス用のライトボックスを作成する 👸🏼 👸🏼 🕕

FlickrのフロントエンドエンジニアであるStephen Woodsは、簡単なジェスチャーベースのライトボックスの作成方法を説明し、タッチインターフェイスの認識とパフォーマンスを改善するためのヒントを提供します。

必要な知識：中級CSS、中級上級JavaScript

要件： AndroidまたはiOSデバイス

費やした時間： 2-3時間

ソースをダウンロード

デモを見る

Lightboxウィジェットは、lightbox.jsの最初のバージョンが2005年にリリースされて以来、Web上で標準になりました。 Lightboxはモーダルダイアログボックスを作成し、通常は[次へ]ボタンと[前へ]ボタンを使用してスライド間を移動する大きな画像を表示します。

タッチデバイスの使用のブーム以来、Webサイトはライトボックスを更新して、さまざまな成功度でのジェスチャーの相互作用をサポートしています。このチュートリアルでは、ジェスチャをサポートするシンプルなライトボックスを作成する方法を示します。その過程で、実際のパフォーマンスを改善するためのいくつかの簡単なトリックと同様に、タッチインターフェイスの知覚されるパフォーマンスの改善について少し学びます。

タッチデバイス用のコードの記述は、デスクトップ用のコードの記述とは大きく異なります。できるだけ多くのコードをデスクトップと組み合わせることができます（また、そうすべきです）が、それらの間には常に大きな違いがあります。

比較テストでは、最も一般的なタッチデバイスのパフォーマンスが1998年頃のデスクトップコンピューターに匹敵することが示されています。通常、元のiMacと同等の約256 MBのRAM、CPUパフォーマンスを備えています。デスクトップで「ただ動作する」ために使用する方法は、携帯電話やタブレットでは正しく動作しません。幸いなことに、これらのデバイスは通常、グラフィックス、特に画面上のアイテムの移動用に最適化されています。 IOSおよびAndroid 3.0+デバイスには、ハードウェアアクセラレーショングラフィックスがあります。

実際、これらのデバイスは、まともなグラフィックスカードを備えた安っぽいコンピューターであると想像できます。

私たちは過去20年間、同じ方法でコンピューターと対話してきました。マウスポインターを移動し、コントロールボタンをクリックします。ボタン、閉じるブロック、リンク、およびスクロールバーは、ユーザーおよび開発者にとって第2の性質です。タッチインターフェイスは、まったく異なる一連の規則を表しています。最も一般的なのは「スワイプ」です。「スライド」すると、いくつかの要素が一列に並んでいるかのように表示され、ユーザーは「スライド」ジェスチャを使用して要素間を移動できます。

スライドは非常に一般的なパターンであるため、ユーザーにそれを知らせる必要さえありません。ユーザーがリストに似たものを見ると、本能的にスクロールしようとします。

多くの場合、特に低速の接続と低速のデバイスを扱う場合、コードを少し速く実行することはできません。しかし、知覚の最適化に焦点を合わせると、インターフェイスをより高速に見せることができます。

知覚されるパフォーマンスを最適化する私のお気に入りの例はTiVoです。 13年前、最初のTiVoが到着したとき、それらは非常に低速でした（16 MB RAMと54 MHz CPU！）。特に何かを再生したり録音したりする場合は、リモコンで何かを押してから何かが起こるまでに、非常に長い時間を要していました。しかし、誰もTiVoが遅いと文句を言いませんでした。私の意見では、これは音によるものです。 TiVoインターフェースの最も馴染みのある部分は、ボタンを押した後に鳴るメロディーです。その音はすぐに再生されました。 TiVoのエンジニアは、次に何が起ころうとも、インターフェースが死んでいないことをユーザーが知っているように、できるだけ早くサウンドをロードしました。この短い曲は、ユーザーの要求が聞かれたことをユーザーに伝えました。

ネット上で、私たちは同じことを行う契約を作成しました：スピナー。クリック後、スピナーがすぐに表示されるため、ユーザーは自分が聞いたというメッセージを受け取ります。携帯電話では、別の方法で行う必要があります。

ジェスチャーは、クリックなどの個別のアクションではありません。ただし、インターフェイスを高速に見せるために、ユーザーにフィードバックを提供する必要があります。彼らが身振りで示すように、何らかの方法でインターフェイスを動かし、彼らが私たちに「聞いている」ことを知らせます。

ツール

レスポンシブインターフェイスでは、要素ができるだけ速く移動する必要があります。移動することにより、インターフェイスがリクエストに応答していることをユーザーに示します。これにはJavaScriptアニメーションの使用が遅すぎます。代わりに、CSS変換とトランジションを使用します。パフォーマンスのためのトランスフォームとトランジションを使用して、JavaScriptの実行をブロックせずにアニメーションが機能するようにします。

このチュートリアルでは、すべての動きとアニメーションに対して、CSS変換と遷移を使用します。

可能な限り使用したい別の最適化は、「書き込み専用DOM」と呼ばれるものです。 DOMからのプロパティと値の読み取りは複雑で、通常は不要です。ライトボックスの場合、初期化フェーズですべての測定値を組み合わせてみます。その後、JavaScriptで状態を維持し、必要に応じて単純な算術演算を行います。

ライトボックスの作成

このチュートリアルでは、いくつかのサムネイルを含むページを作成します。サムネイルをクリック（または指でタッチ）すると、ライトボックスが起動します。その後、ライトボックスで、ユーザーは指で画像をスクロールし、画像にタッチしてライトボックスを終了できます。

ジェスチャのインターフェイスを作成するときは、知覚されるパフォーマンスの重要性に注意してください。ライトボックスでは、これは、画面上での指のスライドによりスライドが移動することを意味します。ユーザーがジェスチャーを停止すると、スライドは次の位置に移動するか、スライドの長さが十分でない場合は前の位置に戻る必要があります。

リターンアニメーションは重要です。彼女のおかげで、ユーザーはインターフェースが死んでいるとは思わないでしょう。

開始する

次のファイルを作成します。

lightbox/ 
      

        
        
        
      

     reset.css 
      

        
        
        
      

     slides.css 
      

        
        
        
      

     slides.html 
      

        
        
        
      

     slides.js

模様

HTMLはシンプルになります。これはデモのためだけではありません。複雑なDOMツリーは、定義により遅くなります。スタイル、要素DOM抽出、および視覚効果は、より複雑なDOMツリーではすべて難しくなります。私たちは「安っぽいコンピューター」に焦点を合わせているので、すべてが重要なので、最初から物事をシンプルに保つことが重要です。

Eric Meyerのreset.cssを使用してCSSの無効化を開始しています。また、スケーリングしないようにビューポートを調整します。

ネイティブの「ズームのクリック」をオフにして、ジェスチャーに干渉しないようにしました。クリックに対する正しい応答がJavaScriptに実装されます。「ズームするにはクリック」は別のレッスンに値するため、ここでは省略します。

JS側では、jQuery構文を備えた非常に軽量なプラットフォームであるzepto.jsを使用します。実際、プラットフォームは必要ありませんが、このプラットフォームは一部のタスクの作業を少しスピードアップします。実際のジェスチャインタラクションでは、組み込みAPIを使用します。

 <div class="main"> <div class="welcome"> <h1>Welcome to an amazing carousel!</h1> <p>This is an example of a nice touch interface</p> </div> <div class="carousel"> <ul> <li> <a href="http://www.flickr.com/photos/protohiro/6664939239/in/photostream/"> <img data-full-height="427" data-full-width="640" src="http://farm8.staticflickr.com/7142/6664939239_7a6c846ec9_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664957519/in/photostream"> <img data-full-height="424" data-full-width="640" src="http://farm8.staticflickr.com/7001/6664957519_582f716e38_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664955215/in/photostream"> <img data-full-height="640" data-full-width="427" src="http://farm8.staticflickr.com/7019/6664955215_d49f2a0b18_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664952047/in/photostream"> <img data-full-height="426" data-full-width="640" src="http://farm8.staticflickr.com/7017/6664952047_6955870ecb_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664948305/in/photostream"> <img data-full-height="428" data-full-width="640" src="http://farm8.staticflickr.com/7149/6664948305_fb5a6276e5_s.jpg"> </a> </li> </ul> </div> </div> </body> <script src="zepto.min.js" type="text/javascript" charset="utf-8"></script> <script src="slides.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> //this code initializes the lightbox and shows it when the user //clicks on a slide $(document).ready(function(){ var lightbox = new saw.Lightbox('.carousel'); $(document).on('click', 'a', function(e){ e.preventDefault(); lightbox.show(this.href); }); }); </script> </html>

サムネイルのスタイリング

次に、素敵な小さなサムネイルとその他の視覚効果を追加します。

 html { background: #f1eee4; font-family: georgia; color: #7d7f94; } h1 { color: #ba4a00; } .welcome { text-align: center; text-shadow: 1px 1px 1px #fff; } .welcome h1 { font-size: 20px; font-weight: bold; } .welcome { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin:5px; padding:10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); border-radius: 5px; } .carousel { margin:5px; } .carousel ul li { height: 70px; width: 70px; margin: 5px; overflow: hidden; display: block; float: left; border-radius: 5px; box-shadow: 1px 1px 2px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,1); }

メインライトボックス

ライトボックス用のJavaScriptは、いくつかの異なる処理を行う必要があります。

ライトボックスデータを収集して初期化する
ライトボックスの表示と非表示
ライトボックスラッパー用のHTMLを作成する
スライドを作成する
ジェスチャーのイベントを処理する

サービス機能

「-webkit-transform」と「translate3d」を何度も書く代わりに、いくつかのユーティリティ関数を作成して、それらが私のために仕事をするようにします。

 function prefixify(str) { var ua = window.navigator.userAgent; if(ua.indexOf('WebKit') !== -1) { return '-webkit-' + str; } if(ua.indexOf('Opera') !== -1) { return '-o-' + str; } if(ua.indexOf('Gecko') !== -1) { return '-moz-' + str; } return str; } function setPosition(node, left) { // node.css('left', left +'px'); node.css(prefixify('transform'), "translate3d("+left+"px, 0, 0)"); } function addTransitions(node){ node.css(prefixify('transition'), prefixify('transform') + ' .25s ease-in-out'); node[0].addEventListener('webkitTransitionEnd', function(e){ window.setTimeout(function(){ $(e.target).css('-webkit-transition', 'none'); }, 0) }) } function cleanTransitions(node){ node.css(prefixify('transition'), 'none'); }

ライトボックスウィジェットは、ページが読み込まれると初期化され、速度が向上します。初期化では、ページ上のすべてのサムネイルを検索し、データモデルを作成します。 HTMLの作成とイベントハンドラーのアタッチのためにライトボックスが提供されるのを待ちます。

初期化

ライトボックスの場合、ブロックセレクターを唯一のパラメーターとして使用するコンストラクターを使用します。

 //clean namespacing window.saw = (function($){ //the lightbox constructor function Lightbox (selector) { var container_node = $(selector), wrapper, chromeBuilt, currentSlide = 0, slideData =[], boundingBox = [0,0], slideMap = {}; function init(){ //init function } return { show: show, hide: hide }; } return { Lightbox:Lightbox }; }($));

init関数は、すべてのliタグをキャプチャし、サムネイルを見つけて、slideData配列に情報を書き込みます。同時に、「slideData」配列に「href」サムネイルを表示する「slideMap」オブジェクトを作成します。これにより、配列内のすべてのデータを循環したり、追加情報でDOMを装飾したりすることなく、クリックでデータをすばやく検索できます。

 function init(){ var slides = container_node.find('li'); slides.each(function(i, el){ var thisSlide = {}, thisImg = $(el).find('img'); thisSlide.url = thisImg.attr('src'); thisSlide.height = thisImg.attr('data-full-height'); thisSlide.width = thisImg.attr('data-full-width'); thisSlide.link = $(el).find('a').attr('href'); //push the slide info into the slideData array while recording the array index in the slideMap object. slideMap[thisSlide.link] = slideData.push(thisSlide) - 1; }); }

初期化の残りは「show」メソッドで行われます。

 //this is the function called from the inline script function show(startSlide){ if(!chromeBuilt){ buildChrome(); attachEvents(); } wrapper.show(); //keep track of the viewport size boundingBox = [ window.innerWidth, window.innerHeight ]; goTo(slideMap[startSlide]); }

シェル作成

buildChrome関数は、ライトボックスのHTMLラッパーを作成し、ユーザーがライトボックスを非表示または表示するたびにラッパーが再構築されないようにセマフォを設定します。使いやすくするために、HTML自体に別のテンプレート関数を作成しました。

 var wrapperTemplate = function(){ return '<div class="slidewrap">'+ '<div class="controls"><a class="prev" href="#">prev</a> | <a class="next" href="#">next</a></div>'+ '</div>'; } function buildChrome(){ wrapper = $(wrapperTemplate()).addClass('slidewrap'); $('body').append(wrapper); chromeBuilt = true; }

シェルを作成する最後の手順は、次リンクと前リンクのイベントハンドラーを追加することです。

 function handleClicks(e){ e.preventDefault(); var targ = $(e.target); if(targ.hasClass('next')) { goTo(currentSlide + 1); } else if(targ.hasClass('prev')){ goTo(currentSlide - 1); } else { hide(); } } function attachEvents(){ wrapper.on('click', handleClicks, false); }

これで、ライトボックスシェルは複数のスライドを使用する準備ができました。ショー機能では、goTo（）を呼び出して最初のスライドをロードします。この関数は、パラメーターで識別されるスライドを表示しますが、必要に応じてゆっくりとスライドを作成します。（重要：「goto」はJavaScriptの予約語であるため、小文字で「goTo」関数を指定しないでください）。

スライド作成

これで、私が見ているスライドは表示領域にあり、前のスライドと次のスライドはそれぞれ、画面の表示領域の左右にあります。ユーザーが[次へ]ボタンをタッチすると、現在のスライドが左に移動し、次のスライドに置き換えられます。

 //for the slides, takes a "slide" object function slideTemplate(slide){ return '<div class="slide"><span>'+slide.id+'</span><div style="background-image:url('+slide.url.replace(/_s|_q/, '_z')+')"></div></div>'; }

代わりに使用するのは、（少なくとも今のところ）モバイルブラウザのレンダリングが背景画像よりもはるかに遅いためです。モバイルデバイスを使用する場合、通常は速度が優先されます。アクセシビリティの問題は、 ARIA Roleで簡単に解決できます。

それ自体では、「buildSlide」関数はより複雑です。スライドテンプレートを介してデータを移動することに加えて、コードはスライドを表示領域に合わせる必要があります。一致しない場合に画像を拡大縮小する方法を見つけるのは簡単な作業です。ブラウザにサイズ変更を処理させることができます。

 function buildSlide (slideNum) { var thisSlide, s, img, scaleFactor = 1, w, h; if(!slideData[slideNum] || slideData[slideNum].node){ return false; } var thisSlide = slideData[slideNum]; var s = $(slideTemplate(thisSlide)); var img = s.children('div'); //image is too big! scale it! if(thisSlide.width > boundingBox[0] || thisSlide.height > boundingBox[1]){ if(thisSlide.width > thisSlide.height) { scaleFactor = boundingBox[0]/thisSlide.width; } else { scaleFactor = boundingBox[1]/thisSlide.height; } w = Math.round(thisSlide.width * scaleFactor); h = Math.round(thisSlide.height * scaleFactor); img.css('height', h + 'px'); img.css('width', w + 'px'); }else{ img.css('height', thisSlide.height + 'px'); img.css('width', thisSlide.width + 'px'); } thisSlide.node = s; wrapper.append(s); //put the new slide into the start poisition setPosition(s, boundingBox[0]); return s; }

goTo

「GoTo」は、要求された隣接するスライドをビューポートに移動します。

 function goTo(slideNum){ var thisSlide; //if the slide we are looking for doesn't exist, lets just go //back to the current slide. This has the handy effect of providing //"snap back" feedback when gesturing, the slide will just animate //back into position if(!slideData[slideNum]){ return; } thisSlide = slideData[slideNum]; //build adjacent slides buildSlide(slideNum); buildSlide(slideNum + 1); buildSlide(slideNum - 1); //make it fancy addTransitions(thisSlide.node); //put the current slide into position setPosition(thisSlide.node, 0); //slide the adjacent slides away if(slideData[slideNum - 1] && slideData[slideNum-1].node){ addTransitions(slideData[slideNum - 1 ].node); setPosition( slideData[slideNum - 1 ].node , (0 - boundingBox[0]) ); } if(slideData[slideNum + 1] && slideData[slideNum + 1].node){ addTransitions(slideData[slideNum + 1 ].node); setPosition(slideData[slideNum + 1 ].node, boundingBox[0] ); } //update the state currentSlide = slideNum; }

現時点では、ライトボックスは多かれ少なかれ機能しています。次のスライドと前のスライドに移動して、非表示と表示を切り替えることができます。最初または最後のスライドにいつ到達するかを知ることが理想的です。たとえば、灰色のコントロールを表示できます。これは、デスクトップとタッチデバイスの両方に適用されます。

ジェスチャーサポートの追加

ほとんどのタッチデバイスには、写真ビューアが組み込まれています。これらのさまざまなアプリケーションは、iPhone用のオリジナルのフォトビューアーに続いて、インターフェイスに同意しました。指を左にスライドすると、次のスライドが表示されます。フィードバックをまったく提供しないこの対話の実装をいくつか見ました。ジェスチャーが完了すると、スライドは単純に置き換えられます。適切なアプローチは、ライブフィードバックを提供することです。ユーザーが指をスライドさせると、スライドも一緒に移動し、方向に応じて、次または前のスライドが表示されます。これにより、ユーザーが写真のストリップを引っ張っているような錯覚が生じます。

タッチイベント処理

Zeptoを含む多くのライブラリには、タッチイベントのサポートが含まれています。一般に、それらの使用はお勧めしません。タッチイベントを処理する場合、ユーザージェスチャとともに要素を更新します。遅延がユーザーに気付くと、インターフェイスが遅く感じられます。イベントにライブラリを使用した主な理由の1つは、ブラウザーでの正規化を許可することです。タッチイベントをサポートするすべてのモバイルブラウザーには同じAPIがあります。

この例では、touchstart、touchmove、touchendの3つの感覚イベントがあります。また、何らかの理由（プッシュメッセージなど）でジェスチャが中断されると、touchcancelイベントが発生します。開発中に、それらを正しく処理する必要があります。

 function attachTouchEvents() { var bd = document.querySelector('html'); bd.addEventListener('touchmove', handleTouchEvents); bd.addEventListener('touchstart', handleTouchEvents); bd.addEventListener('touchend', handleTouchEvents); }

イベントハンドラーはTouchEventオブジェクトを受け取ります。 touchstartイベントとtouchmoveイベントには、touch配列のオブジェクトであるtouchesプロパティが含まれています。指をスライドするには、「clientX」というプロパティが1つだけ必要です。これには、ページの左上隅に対するタッチ位置の値が含まれています。

iOSデバイスは、最大11の同時タッチをサポートします。 Android（Ice Cream Sandwichの前）は1つしかサポートしません。ほとんどのインタラクションには、ワンタッチが必要です。より複雑なジェスチャーは、複数のタッチを心配させます。

関数「handleTouchEvents」

最初に、状態をサポートするためにこの関数の外側にいくつかの変数を定義します。

 var startPos, endPos, lastPos;

次のブランチは、イベントオブジェクトのtypeプロパティに基づいています。

 function handleTouchEvents(e){ var direction = 0; //you could also use a switch statement if(e.type == 'touchstart') { } else if(e.type == 'touchmove' ) { } else if(e.type == 'touchend) { }

touchstartイベントは、任意のタッチイベントの開始時に発生するため、これを使用してジェスチャが開始された場所を記録します。これは後で役立ちます。タグ内に残っている可能性のある変換をすべて取り除きます。

 if(e.type == 'touchstart') { //record the start clientX startPos = e.touches[0].clientX; //lastPos is startPos at the beginning lastPos = startPos; //we'll keep track of direction as a signed integer. // -1 is left, 1 is right and 0 is staying still direction = 0; //now we clean off the transtions if(slideData[currentSlide] && slideData[currentSlide].node){ cleanTransitions(slideData[currentSlide].node); } if(slideData[currentSlide + 1] && slideData[currentSlide + 1].node){ cleanTransitions(slideData[currentSlide + 1].node); } if(slideData[currentSlide - 1] && slideData[currentSlide -1].node){ cleanTransitions(slideData[currentSlide -1].node); } } else if(e.type == 'touchmove' ) {

「touchmove」で、タッチが「clientX」に沿って移動した時間を決定し、現在のスライドを同じ距離だけ移動します。スライドが左に移動する場合は、次のスライドも移動し、右に移動する場合は、それに応じて前のスライドを移動します。この方法では、2つのブロックのみを移動しますが、これによりストリップ全体が移動しているように見えます。

 }else if(e.type == 'touchmove'){ e.preventDefault(); //figure out the direction if(lastPos > startPos){ direction = -1; }else{ direction = 1; } //make sure the slide exists if(slideData[currentSlide]){ //move the current slide into position setPosition(slideData[currentSlide].node, e.touches[0].clientX - startPos); //make sure the next or previous slide exits if(direction !== 0 && slideData[currentSlide + direction]){ //move the next or previous slide. if(direction < 0){ //I want to move the next slide into the right position, which is the same as the //current slide, minus the width of the viewport (each slide is as wide as the viewport) setPosition(slideData[currentSlide + direction].node, (e.touches[0].clientX - startPos) - boundingBox[0]); }else if(direction > 0){ setPosition(slideData[currentSlide + direction].node, (e.touches[0].clientX - startPos) + boundingBox[0]); } } } //save the last position, we need it for touch end lastPos = e.touches[0].clientX; }else if(e.type == 'touchend'){

スライドの最後で、さらに動作を決定する必要があります。円を描くか、最後のスライドで停止します。ユーザーを最後のスライドに置いたままにして、スライドをスクロールしようとすると、スライドを元の位置に戻す必要があります。これにより、スライドが変更されなかった理由をユーザーにフィードバックできます。

 }else if(e.type == 'touchend'){ //figure out if we have moved left or right beyond a threshold //(50 pixels in this case) if(lastPos - startPos > 50){ goTo(currentSlide-1); } else if(lastPos - startPos < -50){ goTo(currentSlide+1); }else{ //we are not advancing, so we need to "snap back" to the previous position addTransitions(slideData[currentSlide].node); setPosition(slideData[currentSlide].node, 0); if(slideData[currentSlide + 1] && slideData[currentSlide + 1].node){ addTransitions(slideData[currentSlide + 1]); setPosition(slideData[currentSlide + 1].node, boundingBox[0]); } if(slideData[currentSlide - 1] && slideData[currentSlide - 1].node){ addTransitions(slideData[currentSlide - 1]); setPosition(slideData[currentSlide - 1].node, 0 - boundingBox[0]); } } }

これで、基本的な要素はすべて整いました。シンプルなタッチライトボックスがあります！

翻訳者から：

翻訳エラーを見つけた場合は、プライベートメッセージで登録を解除してください。ありがとう

HTML5タッチスクリーンインターフェイス用のライトボックスを作成する

ツール