実装例: 20thingsilearned.com のページめくり効果

HTML5 Rocks

はじめに

2010 年に F-i.com(リンク先は英語)と Google Chrome チームが共同で、「ブラウザやウェブについて知っておきたい 20 のこと」(www.20thingsilearned.com)という絵本を HTML5 をベースとした教育用ウェブ アプリとして作成しました。このプロジェクトの背景となるアイデアについては、この本の作成の経緯(リンク先は英語)をご覧になるとよくわかります。この本の内容は主にオープン ウェブ テクノロジーについてなので、このテクノロジーで現在何ができるかの一例を、そのコンテナそのもので作成することにより、テクノロジーを支持することが重要だと考えました。

「ブラウザやウェブについて知っておきたい 20 のこと」の表紙とホームページ
「ブラウザやウェブについて知っておきたい 20 のこと」の表紙とホームページ(www.20thingsilearned.com

本をリアルに再現するには、実際の読書の優れた点をシミュレートし、その一方で、ナビゲーションのように、デジタル世界での利点も活用することが一番よいと判断しました。読書の流れ、特に本を 1 ページずつめくる方法を、画像でインタラクティブに処理するために、多大な労力をかけました。

はじめに

このチュートリアルでは、canvas 要素と JavaScript を活用して、独自のページめくり効果を作成するプロセスについて順を追って説明します。変数宣言、イベント リスナー登録など、一部の基本的なコードはこのチュートリアルでは省略しているので、必ず実際のサンプル コードを参照してください。

チュートリアルを読む前に、デモを確認して、何を作成しようとしているかを把握することをおすすめします。

マークアップ

キャンバスに描画したものは、検索エンジンではインデックス登録できず、ユーザーは選択できず、ブラウザ内の検索で検索できないことに留意するのは常に重要です。このため、扱うコンテンツを、DOM で直接表し、利用可能であれば、JavaScript で処理します。これに必要なマークアップは最小限です:

<div id="book">
  <canvas id="pageflip-canvas"></canvas>
  <div id="pages">
    <section>
      <div> <!-- Any type of contents here --> </div>
    </section>
    <!-- More <section>'s here -->
  </div>
</div>

本のメインとなるコンテナ要素が 1 つあり、その中に本の各ページと canvas 要素が含まれます。canvas 要素に、めくるページを描きます。section 要素の中には、コンテンツ用に div ラッパーがあります。このラッパーは、コンテンツのレイアウトに影響を与えずにページの幅を変更できるようにするために必要です。div には固定の幅を設定し、section は、オーバーフローした部分を隠すように設定します。その結果、section の幅は、div の水平方向のマスクとして機能します。

開いている本
紙のテクスチャと茶色の本のカバーを含む背景画像を book 要素に追加しています。

ロジック

ページめくりの処理に必要なコードはそれほど複雑ではありませんが、自動生成する画像を大量に含むため、長くなっています。まず、このコード全体で使用する定数値について説明します。

var BOOK_WIDTH = 830;
var BOOK_HEIGHT = 260;
var PAGE_WIDTH = 400;
var PAGE_HEIGHT = 250;
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
var CANVAS_PADDING = 60;

CANVAS_PADDING をキャンバスのまわりに追加して、ページをめくる際に、本の外側にも紙がはみ出すことができるようにしています。ここに定義している定数の一部は、CSS でも設定されます。そのため、本のサイズを変更する際は、CSS の値も更新する必要があります。

定数
コード全体で、インタラクションの追跡とページめくりの描画に使用する定数値です。

次に、各ページの flip オブジェクトを定義する必要があります。これは、本に対するインタラクションの際に、常に更新され、めくっている現在の状況を反映します。

// Create a reference to the book container element
var book = document.getElementById( "book" );

// Grab a list of all section elements (pages) within the book
var pages = book.getElementsByTagName( "section" );

for( var i = 0, len = pages.length; i < len; i++ ) {
    pages[i].style.zIndex = len - i;

    flips.push( {
    progress: 1,
    target: 1,
    page: pages[i],
    dragging: false
  });
}

section 要素の z インデックスを設定して、ページのレイヤを正しく構成し、最初のページが一番上、最後のページが一番下になるようにします。flip オブジェクトの最も重要なプロパティは、progresstarget の値です。これらの値は、ページを現在どこまでめくるかを示します。-1 は左の端まで、0 は本の中央、+1 は本の右端です。

状況
flip の progress と target の値は -1+1 の範囲で、めくっているページの位置を判断するのに使用します。

これで flip オブジェクトを各ページで定義したので、次に flip の状態を更新するために、ユーザー入力のキャプチャとその利用を開始する必要があります。

function mouseMoveHandler( event ) {
  // Offset mouse position so that the top of the book spine is 0,0
  mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
  mouse.y = event.clientY - book.offsetTop;
}

function mouseDownHandler( event ) {
  // Make sure the mouse pointer is inside of the book
  if (Math.abs(mouse.x) < PAGE_WIDTH) {
    if (mouse.x < 0 && page - 1 >= 0) {
      // We are on the left side, drag the previous page
      flips[page - 1].dragging = true;
    }
    else if (mouse.x > 0 && page + 1 < flips.length) {
      // We are on the right side, drag the current page
      flips[page].dragging = true;
    }
  }

  // Prevents the text selection
  event.preventDefault();
}

function mouseUpHandler( event ) {
  for( var i = 0; i < flips.length; i++ ) {
    // If this flip was being dragged, animate to its destination
    if( flips[i].dragging ) {
      // Figure out which page we should navigate to
      if( mouse.x < 0 ) {
        flips[i].target = -1;
        page = Math.min( page + 1, flips.length );
      }
      else {
        flips[i].target = 1;
        page = Math.max( page - 1, 0 );
      }
    }

    flips[i].dragging = false;
  }
}

mouseMoveHandler 関数は mouse オブジェクトを更新し、常にカーソルの最新の位置に対して処理を行うようにします。

mouseDownHandler では、マウス ボタンが左ページと右ページのどちらかで押されたかどうかのチェックを開始し、めくる方向を確認します。最初のページや最後のページの場合もあるので、めくる方向に残りのページがあるかどうかも確認します。これらの確認後、めくる選択が有効であれば、対応する flip オブジェクトの dragging フラグを true に設定します。

mouseUpHandler が呼び出されたら、すべての flip について、dragging のフラグが立っているものがあるかどうかを調べ、ページめくりを開始する必要があります。ページめくりを開始する際、現在のマウスの位置に応じて、めくる側に合わせて target 値を設定します。この移動に合わせて、ページ番号も更新します。

レンダリング

ロジックをほとんど設定したので、次に canvas 要素上での、めくっている紙のレンダリング方法について説明します。レンダリングのほとんどは render() 関数で行います。この関数は、毎秒 60 回呼び出されて、すべてのアクティブな flip の現在の状態を更新し、描画します。

function render() {
  // Reset all pixels in the canvas
  context.clearRect( 0, 0, canvas.width, canvas.height );

  for( var i = 0, len = flips.length; i < len; i++ ) {
    var flip = flips[i];

    if( flip.dragging ) {
      flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
    }

    // Ease progress towards the target value
    flip.progress += ( flip.target - flip.progress ) * 0.2;

    // If the flip is being dragged or is somewhere in the middle
    // of the book, render it
    if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
      drawFlip( flip );
    }

  }
}

flip のレンダリングを開始する前に、clearRect(x,y,w,h) メソッドを使って canvas をリセットします。canvas 全体をクリアするとパフォーマンスが悪くなり、描画する領域のみをクリアする方が効率がはるかによくなりますが、パフォーマンスの改善は、このチュートリアルのトピックからそれるので、canvas 全体をクリアするままにしておきます。

ページをドラッグしてめくる場合、その target 値をマウスの位置に合わせて更新しますが、実際のピクセル数ではなく、-1~1 の範囲で設定します。progress も、target 値までの距離に対して小刻みに増やすことで、フレームごとに更新されるので、ページをめくるスムーズなアニメーションとなります。

フレームごとにすべての flip を調べるので、アクティブなものしか再描画しないようにする必要があります。flip をアクティブと見なすのは、本の端から離れている(BOOK_WIDTH の 0.3% を超える)場合、または dragging のフラグが立っている場合です。

これでロジックをすべて設定したので、flip の現在の状態を描画します。drawFlip(flip) 関数の最初の部分を示します。

// Determines the strength of the fold/bend on a 0-1 range
var strength = 1 - Math.abs( flip.progress );

// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );

// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;

// How far outside of the book the paper is bent due to perspective
var verticalOutdent = 20 * strength;

// The maximum widths of the three shadows used
var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(1 - flip.progress, 0.5), 0);
var rightShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);
var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);

// Mask the page by setting its width to match the foldX
flip.page.style.width = Math.max(foldX, 0) + "px";

コードのこのセクションではまず、めくっているページをリアルに描画するために必要な画像変数の値を計算しています。ここでは、描画している flip の progress 値が大きな役割を果たしています。この値は、ページをそこまでめくることを表します。ページめくり効果に奥行きを出すため、紙を本の上下からはみ出して描画します。このはみ出し効果は、本の背の近くまでめくったときに最も大きくなります。

flip
ページをめくっている、またはドラッグしているときのページの様子です。

すべての変数が準備できたので、あとは、紙を描画するだけです。

context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );

// Draw a sharp shadow on the left side of the page
context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();

// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0,
              foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');

context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();

// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(
    foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');

context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
context.lineTo(foldX - foldWidth, 0);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
context.fill();

// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(
    foldX - paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, '#fafafa');
foldGradient.addColorStop(0.73, '#eeeeee');
foldGradient.addColorStop(0.9, '#fafafa');
foldGradient.addColorStop(1.0, '#e2e2e2');

context.fillStyle = foldGradient;
context.strokeStyle = 'rgba(0,0,0,0.06)';
context.lineWidth = 0.5;

// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2),
                         foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX - foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);

context.fill();
context.stroke();

context.restore();

canvas API の translate(x,y) メソッドを使用し、座標系のオフセットを設定してページめくりを描画できるようにします。本の背の最上部の位置を 0,0 とします。save() を使用して、canvas の現在の変換マトリクスを保存し、描画の終了後にそれを restore() で元に戻すことも必要です。

translate
ページめくりを描画する際の原点を示します。0,0 の元の位置は、画像の左上ですが、translate(x,y) を使用してこれを変更し、描画のロジックを簡単にします。

foldGradient では、めくっている紙の図形の中を塗りつぶして、リアルな陰影を付けます。紙の周囲に非常に細い線も追加して、明るい背景の中でも紙が見えなくならないようにします。

あとは、上記で定義したプロパティを使用して、めくっている紙の図形を描画するだけです。紙の左側と右側は、直線とし、上部と下部は、曲線にして、めくる紙が曲がっていることを表します。この紙の曲がり具合の強さは verticalOutdent 値で決まります。

これで完了です。ページめくりのナビゲーション機能が完成しました。

ページめくりのデモ

ページめくり効果は、適切なインタラクションを表現することなので、画像を見るだけでは真価がわかりません。下記のリンクからアクセスして、最終結果をお試しください。

実際に動くサンプルを表示する

ソース コード(75 k .zip)をダウンロードする

次のステップ

表紙をめくる
このチュートリアルでの柔らかい紙のページめくりは、堅い表紙のインタラクションなど、本を模した他の機能と組み合わせると、さらに強力になります。

これは、HTML5 の canvas 要素などの機能を活用して実現できるほんの一例です。さらに高度な本のサンプルを www.20thingsilearned.com でご覧になることをおすすめします。このチュートリアルのテクニックはここからの抜粋です。実際のアプリケーションにどのようにページめくりを適用できるか、そして HTML5 のその他の機能を組み合わせるとどのように強力になるかをご覧いただくことができます。

参考資料

  • Canvas API 仕様(英語)

Comments

0