TOP
サイトマップbookblock.jsを使って本をめくるモーションを付ける
本をめくるように画像を切り替えるjQuery「Bookblock.js」を使って、画像をめくるモーションをつける解説をします。
Bookblock.jsのデフォルト設定で使うと、画像が小さくて、レスポンシブ対応がされていなかったので、ちょっと改造して、レスポンシブ対応にしました。
Bookblock.jsを紹介するきっかけ
Twitterで仲良くしてくださっているフォロワーさんの「ちびこママ@あかえほ」さんが運営している、「あかえほ」というサイトがありまして、赤ちゃんから4歳くらいのお子様が楽しめる絵本を手作りしているサイトがございます。
ここで紹介されている絵本は会員登録不要ですべて無料で楽しむことができます。
しかも印刷して使うと絵本になるように工夫されているPDFも用意されています。
ちびこママさんから、bookblock.jsがワードプレスでうまく動かないと相談をいただきまして、私、一応、WEBクリエイターじゃないですか。
これぐらいちゃちゃっとできることを証明するぜ！と。
頼ってもらえたんなら応えたいじゃないですか。というわけで全力で解説します！
ワードプレスでもちゃんと動作確認できたので多分大丈夫なはず！
Bookblock.js 完成図
この下にあるのが完成版です。
画像の下にあるボタンを押すと画像が本をめくるように切り替わります。
まずはbookblock.jsのダウンロード
bookblock.js一式をダウンロードします。
上記サイトに入って、以下のボタンをクリックしてください。
そうすると色々詰まったファイルがダウンロードできます。
そのファイルを解凍して中身を見ると以下の通りです。
BookBlock設置方法 まずはサンプルを見よう
bookblock.jsには色々種類があるんですが、今回はDEMO1の設置を紹介します。
サンプルページを開いたら、DEMO1を表示して、右クリックからソースを確認しましょう。
開いたソースで使われているファイルが今回必要なファイルになります。
JavaScriptファイル 4つ
modernizr.custom.js
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
jquerypp.custom.js
jquery.bookblock.min.js
CSS 2つ
bookblock.css
demo1.css
※default.cssもサンプルでは使っていますが、これはサンプルページのデザイン用CSSなので今回は不要です。
JavaScriptの設置の注意点
サンプルページを見ると「modernizr.custom.js」というのがCSSの直後に書かれていました。
よくわからなかったのでググってみたら、CSSのブラウザ違いを修正してくれるライブラリみたいなのです。
なくてもいいんじゃないかと思って削除したら、表示ができなくなったので読み込みが必要です。
なので<head>～</head>の間に「modernizr.custom.js」を読み込みます。
jQueryは必ず最初に読み込ませる
jQueryを利用するライブラリを使う時は、jQueryをまず最初に読ませるのが鉄則です。
jQueryを利用するライブラリはjQueryの記述で書かれているので、jQueryを読まないとエラーになるからです。
jQueryもバージョンが色々あるんですけどね、サンプルに従ってCDNの同じバージョンを使いました。
※CDN：Content Delivery Network(コンテンツデリバリーネットワーク) の略で、ファイルをダウンロードせずに外部から読み込むことができる。
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
これだけ絶対パスで書かれていて、googleのサーバーから呼び出しています。
Jqueryを呼び出したら、「jquerypp.custom.js」、「jquery.bookblock.min.js」を読みます。
これらのJavascriptは</body>の直前に記述して問題ありません。
読み込み系のファイル 設置方法まとめ
設置方法をまとめます。
<head>に記述するもの
CSSとmodernizr.custom.jsをhead内で呼び出します。
パスはお使いの環境に合わせて変更してください。
<link rel="stylesheet" href="css/bookblock.css"> <link rel="stylesheet" href="css/demo1.css"> <script src="js/modernizr.custom.js"></script> </head>
</body>の直前に読み込ませるもの
</body>の直前じゃなくてもいいんですけどね、読み込みを早くするために、Javascriptは最後に書くのが今のトレンドです。
なので、</body>には書き込めない、という場合は書き込み可能な一番下に書いとけば大丈夫です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquerypp.custom.js"></script> <script src="js/jquery.bookblock.min.js"></script>
bookblock.jsのjQueryをコピペする
今回はDEMO1の動きを再現するのがゴールなので、何も考えないでサンプルからコピペしましょう。
それで問題ありませんでした。
<script>
var Page = (function() {
var config = {
$bookBlock : $( '#bb-bookblock' ),
$navNext : $( '#bb-nav-next' ),
$navPrev : $( '#bb-nav-prev' ),
$navFirst : $( '#bb-nav-first' ),
$navLast : $( '#bb-nav-last' )
},
init = function() {
config.$bookBlock.bookblock( {
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
} );
initEvents();
},
initEvents = function() {
var $slides = config.$bookBlock.children();
// add navigation events
config.$navNext.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'next' );
return false;
} );
config.$navPrev.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'prev' );
return false;
} );
config.$navFirst.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'first' );
return false;
} );
config.$navLast.on( 'click touchstart', function() {
config.$bookBlock.bookblock( 'last' );
return false;
} );
// add swipe events
$slides.on( {
'swipeleft' : function( event ) {
config.$bookBlock.bookblock( 'next' );
return false;
},
'swiperight' : function( event ) {
config.$bookBlock.bookblock( 'prev' );
return false;
}
} );
// add keyboard events
$( document ).keydown( function(e) {
var keyCode = e.keyCode || e.which,
arrow = {
left : 37,
up : 38,
right : 39,
down : 40
};
switch (keyCode) {
case arrow.left:
config.$bookBlock.bookblock( 'prev' );
break;
case arrow.right:
config.$bookBlock.bookblock( 'next' );
break;
}
} );
};
return { init : init };
})();
</script>
<script>
Page.init();
</script>
多分speedとかいじるとページ送りの速度が調整できると思います。
speed : 800,
shadowSides : 0.8,
shadowFlip : 0.7
このへん。お好みで調整してみてください。
htmlの設置 だいたいコピペでOK
htmlファイルもほぼコピペで大丈夫です。
が、私の環境では、ページ送りのボタンを<a>で指定すると、Javascriptのエラーが出ました。
これはもともとサイトで使っているJavascriptと競合してしまったのが原因です。
これを専門用語でコンフリクトと呼んでいます。
なので、少しサンプルと記述が変わっています
他にも、レスポンシブ対応にするためにCSSもいじったんですけど。
最後に改造版CSSもダウンロードできるようにしておきますので、お楽しみに。
<div class="main clearfix"> <div class="bb-custom-wrapper"> <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <img src="画像パス" alt="image01"/> </div> <div class="bb-item"> <img src="画像パス" alt="image02"/> </div> <div class="bb-item"> <img src="画像パス" alt="image03"/> </div> <div class="bb-item"> <img src="画像パス" alt="image04"/> </div> <div class="bb-item"> <img src="画像パス" alt="image05"/> </div> </div> <nav> <span id="bb-nav-first" class="bb-custom-icon bb-custom-icon-first">First page</span> <span id="bb-nav-prev" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</span> <span id="bb-nav-next" class="bb-custom-icon bb-custom-icon-arrow-right">Next</span> <span id="bb-nav-last" class="bb-custom-icon bb-custom-icon-last">Last page</span> </nav> </div> </div>
変更が必須なのは、読み込ませたい画像のパスです。
ここは画像のファイルによって書き換えてください。
bookblock.jsをレスポンシブに改造する
ここからサンプルにはない調整をしていきます。
レスポンシブ対応です！
いじるのはCSSとJqueryの2か所。
どこをどういじったか覚えてないのでちょっと割愛しますが、CSSの横幅の指定があったものを100%に変更しました。
これで横幅のサイズ調整はできますが、スマホで見たときに表示が崩れるので、ウィンドウの横幅を取得して、「#bb-bookblock」の高さを動的に変更する処理を追加しました。
追加したJquery 高さを取得
ここの数字は私の環境と、私の写真サイズに合わせての数値になっているので、お使いの環境に合わせて調整が必要です。
<script>
let windowWidth = $(window).width();
if(windowWidth <= 1200){
let hh = windowWidth * 0.666;
$("#bb-bookblock").height(hh);
}else{
$("#bb-bookblock").height(511);
}
$(window).resize(function() {
let windowWidth = $(window).width();
if(windowWidth <= 1200){
let hh = windowWidth * 0.666
$("#bb-bookblock").height(hh);
}else{
$("#bb-bookblock").height(511);
}
});
</script>
調整が必要な3個所×2
3行目、11行目の 「 if(windowWidth <= 1200)」
4行目、12行目の 「 let hh = windowWidth * 0.666」
7行目、15行目の 「 $("#bb-bookblock").height(511); 」
この3か所をお使いの環境に合わせて調整する必要があります。
PCとSP(タブレット)のブレイクポイントが1200pxで、表示させる写真のサイズが4：3の場合、調整なしでも大丈夫じゃないかと思います。
これはPC用とSP用でレイアウトが変わる作りの場合のブレイクポイントの横幅を指定します。
レスポンシブ対応の調整について
説明がややこしくなりますが、少しだけ解説をいれます。
if(windowWidth <= 1200) と0.666について
横幅を取得する処理が2か所入ってまして、
1個めが「if(windowWidth <= 1200)」これ。
これはページを開いた時点での横幅を取得して、1200以下だったら、横幅に0.666を掛けた高さにせよ、と書かれています。
0.666はなんなのかというと、写真のサイズが3：2なので 「1：0.666」になると。
ここで表示させたい比率を「1：X」で求めてここに書くと。
1200にはブレイクポイントとなるピクセル数を入力してください。
$(window).resize(function() {について
同じような記述が2回書かれています。
ほぼ同じなんですが、resizeの方は、ウィンドウの幅が見ている途中に変わった時の処理を入れています。
あんまりウィンドウ幅なんか変更しないとおもうじゃないですか。
スマホ横にするとかわるんですよね。めんどくさいけど、いちおう対応しておきましょうと。
ここに記述している内容は、さっき説明したことと同じことをやっています。ので割愛。
$("#bb-bookblock").height(511);について
$("#bb-bookblock").height(511); これはなんなのかというと、ウィンドウ幅が1200px以上のときの縦幅の調整です。
写真とシャドウの間にスキマができていたのでその調整のため。
レスポンシブ対応したファイル一式はこちら
今回紹介した改造済みのbookblockの設定ファイルはこちらからダウンロードできます。
※これを使って不具合が発生しても責任は負えません。
環境に応じて調整が必要な個所があります。
あらかじめご了承ください。
ワードプレスで動かすには？
これでBookBlock.jsの実装は完了なのですが、ちびこママさんのお悩みはワードプレスで動かない、という課題がありました。
これも検証したところ、無事動作確認ができました。
では動かなかった原因はなにかと考えると。
ファイルのパスがずれている可能性が高い
ここから先は環境にもよるのですが、基本的にワードプレスであってもJqueryを使うことは可能です。
やっかいなのが、パスの位置がわかりづらく、おそらくそこの指定がずれているのではないかという点。
この問題を手っ取り早く解決するには、わかりやすいところにファイルをUPして、絶対パスで読み込むというのが良いのではないかと思います。
FTPを使って、ドメイン直下にフォルダを作り、そこをhttpから始まるファイル名で指定してやると、読み込みはうまくいくはず！
CSSもJSも絶対パスで記述しても問題ないので、それでうまくいくのではないかと思います。
投稿画面に全部書く
Jqueryなどはheader.phpをカスタマイズして書きなさいとか、スタイルシートは<head>～</head>に書けとか言われますが、全部無視して、投稿画面に全部突っ込みましょう。
効率化などを考えると話が変わってきますが、都度都度つかうJavascriptは共通化しない方が良いです。
全ページに読み込ませると、使わないファイルのロードが発生してしまうため。
また、CSSはheadに書かないと動かないと思われがちですが、そんなことはなく、どこに書いても読み込めます。
なので、投稿画面のBOXに<link rel="stylesheet" href="パス">と書いても問題ありません。
多分、これでいけると思います！
LINEで送る
Tweetする
Facebook
