bookblock.jsを改造してレスポンシブ化してみた

bookblock.jsを改造してレスポンシブ化してみた

本をめくるJqueryライブラリ bookblock

#116 bookblock

WEB制作

本をめくるように写真を見せるJqueryライブラリ「bookblock.js」をレスポンシブ化してみました。 ワードプレスで動かないときの確認すべき点も書きました。 モーションがキレイだと写真の見え方も変わりますね。

公開日:
最終更新日:

サイトマップサイトマップ

bookblock.jsを使って本をめくるモーションを付ける

本をめくるように画像を切り替えるJquery「Bookblock.js」を使って、画像をめくるモーションをつける解説をします。

Bookblock.jsのデフォルト設定で使うと、画像が小さくて、レスポンシブ対応がされていなかったので、ちょっと改造して、レスポンシブ対応にしました。

Bookblock.jsを紹介するきっかけ

Twitterで仲良くしてくださっているフォロワーさんの「ちびこママ@あかえほ」さんが運営している、「あかえほ」というサイトがありまして、赤ちゃんから4歳くらいのお子様が楽しめる絵本を手作りしているサイトがございます。

ここで紹介されている絵本は会員登録不要ですべて無料で楽しむことができます。
しかも印刷して使うと絵本になるように工夫されているPDFも用意されています。

読み込み中

ちびこママさんから、bookblock.jsがワードプレスでうまく動かないと相談をいただきまして、私、一応、WEBクリエイターじゃないですか。
これぐらいちゃちゃっとできることを証明するぜ!と。

頼ってもらえたんなら応えたいじゃないですか。というわけで全力で解説します!

ワードプレスでもちゃんと動作確認できたので多分大丈夫なはず!

Bookblock.js 完成図

この下にあるのが完成版です。

image01
image02
image03
image04
image05

画像の下にあるボタンを押すと画像が本をめくるように切り替わります。

まずはbookblock.jsのダウンロード

bookblock.js一式をダウンロードします。

読み込み中

上記サイトに入って、以下のボタンをクリックしてください。

ダウンロードはこちら
BookBlockのダウンロード

そうすると色々詰まったファイルがダウンロードできます。
そのファイルを解凍して中身を見ると以下の通りです。

ダウンロードはこちら
BookBlock 解凍後のフォルダ

BookBlock設置方法 まずはサンプルを見よう

bookblock.jsには色々種類があるんですが、今回はDEMO1の設置を紹介します。

サンプルページを開いたら、DEMO1を表示して、右クリックからソースを確認しましょう。

右クリックでソースを確認
右クリックでソース確認

開いたソースで使われているファイルが今回必要なファイルになります。

JSファイル 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なので今回は不要です。

JSの設置の注意点

サンプルページを見ると「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>に書けとか言われますが、全部無視して、投稿画面に全部突っ込みましょう。

ワードプレスの記述場所
ここに書いてOK

効率化などを考えると話が変わってきますが、都度都度つかうJavascriptは共通化しない方が良いです。
全ページに読み込ませると、使わないファイルのロードが発生してしまうため。

また、CSSはheadに書かないと動かないと思われがちですが、そんなことはなく、どこに書いても読み込めます。
なので、投稿画面のBOXに<link rel="stylesheet" href="パス">と書いても問題ありません。

多分、これでいけると思います!

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

2,376円(税込)

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

独習JavaScript 新版

2,950円(税込)

独習JavaScript 新版

JavaScript 第7版

5,060円(税込)

JavaScript 第7版

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 「いちばんやさしい教本」シリーズ

2,178円(税込)

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 「いちばんやさしい教本」シリーズ

図解! JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編

2,138円(税込)

図解! JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編

JavaScript コードレシピ集

3,114円(税込)

JavaScript コードレシピ集

JavaScript[完全]入門

2,653円(税込)

JavaScript[完全]入門

bookblockの関連ページ

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

車用スマホホルダー
1位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

SVG背景
2位

SVG背景

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

ノートPCスタンド
3位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

MusicBeeのレイアウト変更方法
4位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

GA4カスタムイベント
5位

GA4カスタムイベント

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

アンカーリンクナビ
6位

アンカーリンクナビ

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

音楽再生
7位

音楽再生

パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。

PHPで作るカレンダー
8位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

MusiceBee
9位

MusiceBee

PCで音楽の再生と管理をするならiTunseよりもMusicBeeがオススメです。軽くて早くて便利で使いやすい。

ロリポップサーバー設定
10位

ロリポップサーバー設定

ロリポップサーバーのアクセラレーターの設定方法やPHPのバージョン変更などの簡単にできるサーバ設定5つを解説!

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

2,376
(税込)