簡単にページめくりエフェクトを実装できる「jQuery Booklet」使ってみた。
今月から、雑誌メディア系の会社に転職したので、現在その媒体のポータルサイトを制作しております。
雑誌媒体は印刷費が結構かさんでしまうので、ポータルサイトを立ち上げて広告収入を得たり、雑誌で使用したデータを二次利用したり、あるいは紙媒体で表現できない部分（動画とかインタラクティブ性とか）を補完しなくちゃいけないわけで、結構大切なんです。
現在僕が手がけているのは
・PC向け媒体ポータルサイト×２
・スマホ向け媒体ポータルサイト×２
・PC向け求人検索サイト
・スマホ向け求人検索サイト
といった感じです。
要は、雑誌媒体２つ分のPC&スマホ向けサイトを２つと、PC&スマホ向け求人検索サイトを作る…ということになってます。
全部合わせて大体「250～300万円/月」の売上を見込んでます。
転職時の面接で、今の会社の社長に自分のプランをプレゼンしたところ、是非やって欲しいということになったので、後には引けないという（笑）。
プレゼンどおりの売り上げを達成出来るかどうかは分かりませんが、それなりのポテンシャルのサイトを作らにゃならんということで毎日ひいひい言っております。
それはさておき…。
ポータルサイトをやるってことは、そこで媒体のバックナンバーを見れるようにしておいたほうがいいわけで、なんかページめくりするエフェクトのプラグインないかな…ってことで探したのが、「jQuery Booklet」です。
プレーンな状態から自分で作るって人は上記のサイトからDLすればいいのですが、今回は既に加工されてる奴をDLしてきて使っちまいましょう。
まずはこちらをご覧ください。
例によって「Coderops」から使わせていただきましょう。
こんな感じです。
このまますぐに使えちゃいます。
基本構造はとっても簡単。
<div id="mybook">
<div class="b-load">
<div>
1ページ目のコンテンツ
</div>
<div>
2ページ目のコンテンツ
</div>
<div>
3ページ目のコンテンツ
</div>
<div>
4ページ目のコンテンツ
</div>
<div>
5ページ目のコンテンツ
</div>
<div>
6ページ目のコンテンツ
</div>
・
・
・
</div>
</div>
こんな感じでそれぞれのコンテンツがdivの中に入っていて、切り替えてるだけです。
今回は、すべてのページを画像ファイルとして表示させるので「<div class="b-load">～</div>」の中を
<div>
<img src="/ファイルフォルダ名/画像ファイル名" />
</div>
で回すことにしました。
必要なファイルは以下のようにして読み込みます。
<!--jQuery読み込み-->
<script src="jquery.min.js" type="text/javascript"></script>
<!--jQuery-UI読み込み-->
<script src="jquery-ui.min.js" type="text/javascript"></script>
<!--jQuery-easing読み込み-->
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<!--Booklet Files 読み込み-->
<script src="jquery.booklet.1.2.0.min.js"" type="text/javascript"></script>
<link href="jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet" media="screen" />
Coderopでダウンロードしてきたものは、上記以外のファイル読み込みやら設定がしてあるので、カスタマイズするだけです。
今回僕が行なったカスタマイズは
・各ページへのリンク（ページャー）を付ける。
・媒体が右開きなので、最初に表示するページを逆にする
くらいです。
まあ、ページ全てが画像なので、そんなにカスタマイズするところはなかったりして。
各ページを[001.jpg],[002.jpg],[003.jpg]…という連番で保存しているので、PHPを使ってページとページャーはループ生成してます。
例えば、こんな感じですね。
<?php
//ファイル一覧取得
if ($dir = opendir("ファイルフォルダ名")) {
while (($file = readdir($dir)) !== false) {
if ($file != "." && $file != "..") {
$data[] = $file;
}
}
closedir($dir);
}
foreach ($data as $val){
print <<< EOF
<div>
<img src="/ファイルフォルダ名/{$val}" />
</div>
EOF;
}
?>
上記のコードを「<div class="b-load">～</div>」の中にぶっ込めば、すべてのページが生成出来ます。
ただ、右開きのページなので連番のふり方をページとは逆にするか、配列をソートし直す必要があります。
配列のソート関数は「arsort()」とか「krsort()」とかを使います。
さて、ここからがカスタマイズ内容。
今回作ったページャーのソースはこんな感じです。
<div class="menu">
<ul>
<li><a href="#" class="gopage toppage" data-page="0">表紙</a></li>
<li><a href="#" class="gopage" data-page="3">2～3ページ</a></li>
<li><a href="#" class="gopage" data-page="5">4～5ページめ</a></li>
</ul>
</div>
見開きでページを移動するので、ページャーはひとつ飛ばしで生成しているというところに注意してください。
昇順で並べている場合には、トップページ（表紙）のページ番号を取得します。
ちょっとややこしいんですけど、降順の場合は表紙のページ番号が「１番最後のページ」になります。
左開きではなく、右開きなので。
「全てのページ数=表紙のページ番号」ということになります。
全てのページ数を取得するためには「<div class="b-load">～</div>」の中のdivの数を数獲ればいいので
$(".b-load div").size();で取得することが出来ます。
ちなみに、jQuery-Bookletのオプションはこんな感じ。
$.fn.booklet.defaults = {
name: null,
width: 600,
height: 400,
speed: 1000,
direction: 'LTR',
startingPage: 0,
easing: 'easeInOutQuad',
easeIn: 'easeInQuad',
easeOut: 'easeOutQuad',
closed: false,
closedFrontTitle: null,
closedFrontChapter: null,
closedBackTitle: null,
closedBackChapter: null,
covers: false,
autoCenter: false,
pagePadding: 10,
pageNumbers: true,
manual: true,
hovers: true,
overlays: true,
tabs: false,
tabWidth: 60,
tabHeight: 20,
arrows: false,
arrowsHide: false,
cursor: 'pointer',
hash: false,
keyboard: true,
next: null,
prev: null,
auto: false,
delay: 5000,
pause: null,
play: null,
menu: null,
pageSelector: false,
chapterSelector: false,
shadows: true,
shadowTopFwdWidth: 166,
shadowTopBackWidth: 166,
shadowBtmWidth: 50,
before: function(){},
after: function(){}
}全オプションの解説は本家サイトのドキュメントを見ていただくとして…。
ページを読み込んだ時に最初に表示させるページの設定は「startingPage:」です。
オプションの設定の前に
var startPage = $(".b-load div").size();とでもやってページ数を取得しておき、
startingPage:startPage,
で表紙の設定が完了です。
あとは、以下のコードを書けば、思い通りに動いてくれると思います。
//=====表紙へのリンクのdata-pageの値（ページ番号）をページ数に変更
$("a.toppage").attr('data-page',startPage);
//ページャー
$("a.gopage").click(function(){
var pageNo = $(this).attr('data-page');
pageNo-=0;//マイナスゼロをして文字列型を数値型に変換
$("#mybook").booklet(pageNo);//ページ移動
});
本家サイトのドキュメントによれば、各ページ移動は以下のようにして呼び出すみたいなので。
//move to the next page
$("#mybook").booklet("next");
//move to the previous page
$("#mybook").booklet("prev");
//move directly to a specific page number, 0 indexed
$("#mybook").booklet(5);
サンプルを置いておきますので、ダウンロードして見てみて下さい。
サンプル（300KB）