事例紹介 - 20thingsilearned.com のページめくり効果

Hakim El Hattab

はじめに

2010 年、F-i.com と Google Chrome チームは、HTML5 ベースの教育用ウェブアプリ「20 Things I Learned about Browsers and the Web」（www.20thingsilearned.com）を共同で開発しました。このプロジェクトの背景にある重要なアイデアの 1 つは、書籍のコンテキストで提示するのが最適であるというものでした。本書の内容はオープンウェブテクノロジーに関する内容なので、コンテナ自体をオープンウェブテクノロジーの見本にして、オープンウェブテクノロジーを現在実現できることが重要であると感じました。

「ブラウザとウェブについて学んだ 20 のこと」の表紙とホームページ — 「20 Things I Learned About Browsers and the Web」の表紙とホームページ（www.20thingsilearned.com）

Google は、現実世界の本のような感覚を実現する最善の方法は、ナビゲーションなどの分野でデジタル領域のメリットを活用しながら、アナログ読書エクスペリエンスの良い部分をシミュレートすることであると判断しました。読書の流れ、特に書籍のページがページ間を移動する際のグラフィカルでインタラクティブな処理には多くの労力が注ぎ込まれました。

スタートガイド

このチュートリアルでは、キャンバス要素とさまざまな 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 要素が含まれています。section 要素内には、コンテンツの div ラッパーがあります。これは、コンテンツのレイアウトに影響を与えずにページの幅を変更できるようにするために必要です。div の幅は固定されており、section はオーバーフローを非表示にするように設定されているため、section の幅は div の水平マスクとして機能します。

書籍を開きます。 — 紙のテクスチャと茶色の本のジャケットを含む背景画像が書籍要素に追加されます。

ロジック

ページめくりを実現するために必要なコードはそれほど複雑ではありませんが、手続き的に生成されるグラフィックを多数使用するため、非常に大規模になります。まずこのコード全体で使用する定数値について説明します

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 オブジェクトを定義する必要があります。これらは書籍を操作するたびに常に更新され、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
});
}

まず、セクション要素の Z-Index を整理して、最初のページが一番上、最後のページが一番下になるように、ページが正しく階層化されるようにする必要があります。flip オブジェクトの最も重要なプロパティは、progress 値と target 値です。これらの値は、現在ページをどの程度折りたたんだかを判断するために使用されます。-1 は左端、0 は本の死点、+1 は書籍の右端を意味します。

進行状況。 — Flip の進捗状況とターゲットの値を使用して、折りたたみページを `-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 &amp;&amp; page - 1 >= 0) {
    // We are on the left side, drag the previous page
    flips[page - 1].dragging = true;
}
else if (mouse.x > 0 &amp;&amp; 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 では、まずマウスが左ページと右ページのどちらで押下されたかを確認し、どの方向にめくるかを判断します。また、最初のページまたは最後のページに存在する可能性があるため、その方向に別のページが存在することも確認します。これらの確認後に有効な反転オプションが使用可能な場合は、対応する反転オブジェクトの dragging フラグを true に設定します。

mouseUpHandler に到達したら、すべての flips について、dragging のフラグが付けられていてリリースすべきものがあるかどうかを確認します。フリップを離すと、現在のマウス位置に応じてフリップする面に一致するようにターゲット値を設定します。また、このナビゲーションを反映してページ番号も更新されます。

レンダリング

ロジックのほとんどができたので、キャンバス要素に折り紙をレンダリングする方法を学びます。このほとんどは render() 関数内で行われます。この関数は 1 秒あたり 60 回呼び出され、すべてのアクティブな反転の現在の状態を更新して描画します。

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 );
}

}
}

flips のレンダリングを開始する前に、clearRect(x,y,w,h) メソッドを使用してキャンバスをリセットします。キャンバス全体をクリアするとパフォーマンスが大幅に低下するため、描画する領域のみをクリアする方がはるかに効率的です。このチュートリアルはトピックの説明を続けるため、キャンバス全体をクリアしておきます。

切り替えボタンをドラッグする場合は、target 値をマウスの位置に合わせて更新しますが、実際のピクセル数ではなく -1 ～ 1 のスケールに変更します。また、progress を target までの距離の一部分だけ増分します。これにより、フレームごとに更新されるため、切り替えがスムーズでアニメーション化されます。

各フレームですべての flips を調べるため、アクティブなもののみを再描画する必要があります。フリップが本の端にそれほど遠くない（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';

コードのこのセクションでは、最初に現実的な方法で折り目を描画するために必要な視覚的な変数を計算します。ここでは、描画するページめくりの progress 値が重要な役割を果たします。これは、ページの折りたたみが表示される場所であるためです。ページめくり効果に奥行きを加えるために、紙を書籍の上下端の外側に広げます。この効果は、めくりが本の背に近づくと最大になります。

切り替え — ページをめくったりドラッグしたりすると、ページが折りたたまれた状態で表示されます。

すべての値が準備されたので、あとは紙を描くことだけです。

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 &amp; 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();

キャンバス API の translate(x,y) メソッドは、座標系をオフセットするために使用されます。これにより、ページめくりで背の上部を 0,0 の位置として描画できます。また、描画が完了したら、キャンバスの現在の変換行列を save() し、restore() する必要があります。

翻訳する — これは、ページめくりを描画する点です。元の 0,0 のポイントは画像の左上にありますが、translate(x,y) でこれを変更すると、描画ロジックが簡素化されます。

foldGradient は、折りたたまれた紙の形状を塗りつぶし、現実的なハイライトとシャドウを設定します。また、明るい背景でも紙が消えないように、紙の図形描画の周囲に非常に細い線を追加します。

あとは、上記で定義したプロパティを使用して、折り紙の形状を描画するだけです。紙の左右は直線として描画され、上下の辺は曲がって、折りたたまれた紙のような曲がった感触になります。この紙の湾曲の強さは、verticalOutdent の値によって決まります。

これで、これで、ページめくりのナビゲーションが完全に機能するようになりました。

ページめくりのデモ

ページめくりの効果は、適切なインタラクティブ感を伝えることが目的であるため、画像を見ても適切に機能しません。

次のステップ

ハードフリップ — このチュートリアルのソフトページめくりは、インタラクティブなハードカバーなどの他の本のような機能と組み合わせると、より強力になります。

これは、canvas 要素などの HTML5 機能を利用して実現できることの一例にすぎません。www.20thingsilearned.com でこの手法を抜粋した、より洗練された書籍エクスペリエンスをご覧になることをおすすめします。ページめくりを実際のアプリケーションで適用する方法や、他の HTML5 機能と組み合わせた場合の効果を確認できます。

リファレンス

Canvas API の仕様