当サイトは創作絵本サイトです＾＾オリジナル絵本を作って無料公開しています。
どういう形で公開しているかというと、
- パラパラめくれるウェブ絵本
- 印刷できるPDF絵本
- スクロールして紙芝居のように読める絵本
- スワイプして読める絵本（スクロール絵本の画像をタッチ）
この4通りの形で公開しています。
この記事を書いている時点で50作品以上の創作絵本がありますが、すべての絵本についてこの4つの読み方ができます。
今回ご紹介するのは、1のパラパラめくれるウェブ絵本の作り方についてです。
こういうものです。使うシーンは限られると思いますが、ご参考までに＾＾
BookBlockについてと、このプラグインを使い始めた経緯
これは既存のjQueryプラグインです。
複数枚の画像にパラパラとページをめくる動作をつけて、本のように見せることが可能になります。
これは本来、CMS（コンテンツ・マネジメント・システム。ブログサービスなどのこと）を使わずにゼロからウェブサイトを作る方向けのプラグインだと思います。
詳しい設置方法は、申し訳ないですが本記事内で解説はしません。こちらの記事に詳しく書かれていますので、ご参考にしてくださいm(_ _)m
私のサイトはワードプレスを使用していて、元々はワードプレス向けのプラグインを使用していました。
実は、本をパラパラめくるような動きを出せるプラグインは複数あるんです。
そもそも、絵本サイトを作るにあたりワードプレスを選んだ理由が、パラパラ本をめくるプラグインが存在したからなんですよね。
で、最初は良かったんですが、テーマを今使っているCocoonに変えたところ、それまで使用していたプラグインが使えなくなってしまったんです。
Cocoonは高速化などの対策があらかじめ取られた至れり尽くせりなテーマなんですが、そのせいかプラグインとの相性が悪かった。
他のプラグインを色々試したのですが、どれも絵本というより電子書籍向けで、薄い紙をぺらっとめくるような感じなんですよね。
それで、あれこれ探してたどり着いたのがBookBlockだったんです。
ワードプレスでも使えるが、Cocoonの場合は少々手間がかかる
ワードプレス内でBookBlockを使う方法も、先ほどご紹介した記事の中に載っています。
私はテーマとの相性以前にワードプレスでBookBlockを使う方法がどうしても分からず、これまでワードプレスの外にhtmlファイルを作っていました。
で、今回、↑の記事を書いてくださった方のおかげで、ワードプレスの中で無事に動かすことができました。Cocoon以外のテーマでは。
Cocoonは高機能ゆえ、何かが競合しているもよう。
テキストエディタに全部入れるとこうなっちゃいます。↓
これは画像ですが、このように真っ白になってしまってページも動きません。
ザックリと結論を書くと、CocoonでBookBlockを使う場合は、スクリプトやらをカスタムフィールドで「head_custom」と「footer_custom」に入れればきちんと動く、ということが分かりました。
カスタムフィールドが投稿画面にもし表示されていなかったら、
- Gutenbergなら、右上の「…（←これの縦向き）」アイコン→「オプション」
- クラシックエディタなら、右上の「表示オプション」
より、「□カスタムフィールド」にチェックを入れてください。
で、カスタムフィールドに「head_custom」と「footer_custom」を新規追加し、
- <head>内に書くべきものを「head_custom」へ
- </body>の直前に読み込ませるものとjQueryを「footer_custom」へ
あとは、html部分を投稿エディタのカスタムhtml/テキストエディタに入れれば、正しく表示されるはずです。
あとは、ご自身の環境に合わせて、色々数値やCSSを調整してくださいm(_ _)m
なお、「head_custom」、「footer_custom」は、Simplicity、Simplicity2、Cocoonでは備わっている機能である、と。（ほかは分からないです）
↑こちらの記事を参考にさせていただきました。
あ、ちなみにLazy Loadをオンにしていると、ページをめくったときに一瞬白いページとaltタグにいれた言葉が表示されてしまいます。
私のサイトはメインコンテンツが絵本なので、Lazy Loadの利用は諦めました。
今後、ワードプレスではLazy Loadが標準装備になるという噂なのでちょっと心配。
Cocoonで使うために試したこと
Cocoonで使えるようになるまでに、色々と試しました。まず、まっさらな状態で動くかどうか。
私の場合、あれこれカスタマイズを加えているので、一切何も手を加えていない状態でも動かないか確認しました。
ローカル環境にCocoonを入れてみて、何もいじらずにBookBlockを設置してみる。
動かず。
BookBlockの記事を書いてくれたStart Pointのfuchiさんに色々相談した中の一つで、ダメもとで
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js…”></script>
↑これを削除してみる。
動かず。
↓こちらの記事に書いてあることもダメもとで全部試す。
やはり動かず。
その後、どうやって辿り着いたか忘れたけど、Cocoonフォーラムでこのページを発見↓
この中で、Cocoonの作者であるわいひらさんが、
スクリプトやCSSで特定のファイルを読み込ませる場合は、カスタムフィールドのhead_customを利用した方が良いかと思います。
特定固定ページでのみで使用するjsの記載方法について
と回答されていたのを見て、試してみたらできた、という流れです。
なお私はウェブに詳しい人間ではありません。（最後に）
最後に、この記事を書いた経緯を少し。
無事にCocoon内でBookBlockが動いて、何気ないツイートをしました。
テストページのURLをつけて、ふーっ、って気持ちで呟いちゃったんです。
そしたら、ブロガー界の凄い方々が反応してくださって。
最初に引用RTしてくれたぽんひろさん。
ここからあれよあれよと、私が凄い人みたいな扱いで広まってしまって。(-_-;)
肩書を申し上げますと、ただの専業主婦です。
絵本サイトを作りたいという執念で、その場その場で必要な情報を集めて付け焼き刃的にこれまでやってきました。
カスタマイズ記事も書いていますが、ウェブの勉強をしてきた人間ではありません。
ごめんなさい！！( ;∀;)
繰り返しになりますが、BookBlockは既存のjQueryプラグインです。
今回お世話になった記事はこちらですm(_ _)m
最後までお読みいただき、ありがとうございました。