はじめに
2010 年、F-i.com と Google Chrome チームは、HTML5 ベースの教育用ウェブアプリ「ブラウザとウェブについて学んだ 20 のこと」（www.20thingsilearned.com）を共同で開発しました。このプロジェクトの背後にある主なアイデアの 1 つは、書籍のコンテキストで提示するのが最適であるというものでした。この書籍の内容はオープンウェブ技術に重点を置いているため、コンテナ自体を、これらの技術によって今日実現できることの例にすることで、その内容に忠実であることが重要だと感じました。
現実の書籍のような感覚を実現するには、ナビゲーションなどの分野でデジタル領域のメリットを活用しながら、アナログの読書体験の良い部分をシミュレートするのが最善の方法であると判断しました。読み上げフローのグラフィックとインタラクティブな処理に、特に書籍のページをめくる方法に、多くの労力をかけました。
スタートガイド
このチュートリアルでは、canvas 要素と大量の JavaScript を使用して、独自のページめくり効果を作成するプロセスについて説明します。変数の宣言やイベント リスナーの登録など、基本的なコードの一部はこの記事のスニペットから除外されているため、動作例を参照してください。
始める前に、デモを確認して、何を構築しようとしているのかを把握しておくことをおすすめします。
マークアップ
キャンバスに描画したものは、検索エンジンによってインデックス登録されたり、訪問者によって選択されたり、ブラウザ内検索で見つかったりすることはできません。そのため、扱うコンテンツは DOM に直接配置し、JavaScript が利用可能な場合は 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 の値も更新する必要があります。
次に、ページごとにフリップ オブジェクトを定義する必要があります。これらのオブジェクトは、書籍の操作に応じて常に更新され、フリップの現在のステータスを反映します。
// 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 を整理して、ページが正しく重ねられていることを確認する必要があります。フリップ オブジェクトの最も重要なプロパティは、progress 値と target 値です。これらの値は、ページを現在どの程度折りたたむべきかを決定するために使用されます。-1 は左端、0 は書籍の中央、+1 は書籍の右端を意味します。
ページごとにフリップ オブジェクトを定義したので、ユーザー入力をキャプチャして使用し、フリップの状態を更新する必要があります。
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 では、まず、左側または右側のページでマウスが押されたかどうかを確認します。これにより、どちらの方向にフリップするかを判断できます。また、最初のページまたは最後のページにいる可能性があるため、その方向に別のページが存在することも確認します。これらのチェック後に有効なフリップ オプションが使用可能な場合は、対応するフリップ オブジェクトの 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 としてフラグが立てられている場合は、アクティブと見なされます。
すべてのロジックが設定されたので、現在の状態に応じてフリップのグラフィカルな表現を描画する必要があります。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 & 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() し、それに restore() する必要があります。
foldGradient は、折りたたまれた紙の形状に塗りつぶして、リアルなハイライトとシャドウを作成します。また、紙の描画の周囲に非常に細い線を追加して、明るい背景に置いたときに紙が消えないようにします。
残す作業は、上記で定義したプロパティを使用して、折りたたまれた紙の形状を描画することだけです。紙の左右は直線で描き、上下は曲線で描いて、折りたたまれた紙の曲がりを表現しています。この紙の曲げの強さは、verticalOutdent 値によって決まります。
これで、これで、完全に機能するページ切り替えナビゲーションが完成しました。
ページ切り替えのデモ
ページめくり効果は、適切なインタラクティブな感覚を伝えることを目的としています。そのため、画像で確認しても、その効果を正確に把握することはできません。
次のステップ
これは、キャンバス要素などの HTML5 機能を活用することで実現できることの一例にすぎません。このテクニックの抜粋である、より洗練された書籍エクスペリエンスについては、www.20thingsilearned.com をご覧ください。実際のアプリでページめくりを適用する方法と、他の HTML5 機能と組み合わせた場合の強力な効果を確認できます。
参照
- Canvas API 仕様