忘れないように記録しとこ

カバの樹

Vue.jsで本をめくるよな画像Viewerを実装する「flipbook-vue」

flipbook-vueとは

flipbook-vueは、まるで本をめくるように画像を切替えることができるViewerコンポーネントライブラリです。

2対の画像を1ページとして表現しています。
これにより本のようなページ構成を実現しています。

画像を拡大する機能も搭載されています。

オプションでページめくりの向きを変更することが可能です。

 

ココがポイント

  • 本のようなめくりアニメーション
  • 画像の拡大機能
  • ページめくりの向き変更

 

【動画サイズ:456KB】

 

環境

この記事は、以下の管理人の検証環境にて記事にしています。

vue.js 2.6.10
flipbook-vue 0.10.1

検証ソースはこちら

 

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm

npm i -S flipbook-vue

yarn

yarn add flipbook-vue

CDN

<script src="https://cdn.jsdelivr.net/npm/flipbook-vue@0.10.1/dist/flipbook.min.js"></script>

gitリポジトリは以下から取得できます。

 

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、本をめくるように画像を切替えることができるViewerを実装します。

 

step.1 ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。

ES6等で実装する場合

import Flipbook from 'flipbook-vue'
export default {
  components: { Flipbook }
}

UMDで実装する場合

CDN読み込みのみ

 

step.2 JavaScriptを設定


pagesという変数に、画像のパスを配列形式で設定します。

もっと詳しく

基本は2対の画像で1ページなので、最初のページを1枚だけ表示したい場合は、配列の先頭にnullを設定してください。

今回はダミーの画像を大量に使用します。

new Vue({
  el: '#app',
  data: {
    pages: [
      null,
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B1%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B2%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B3%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B4%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B5%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B6%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B7%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B8%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B9%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B10%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B11%5D%20640X960%20',
      'https://placehold.jp/3d4070/ffffff/640x960.png?text=%5B12%5D%20640X960%20',
    ]
  }
});

 

step.3 テンプレートを準備

<flipbook>タグを配置します。
pages に上記で設定した変数を設定します。

サンプルはケバブケースで記載しています。

<div id="app">
  <flipbook class="flipbook" :pages="pages2" v-slot="flipbook">
    <div class="flipbook-head">
      <button @click="flipbook.flipLeft">Previous Page</button>
      <button @click="flipbook.flipRight">Next Page</button>
    </div>
  </flipbook>
</div>

step.3 スタイルを適用

.flipbook {
  width: 90vw;
  height: 90vh;
}
.flipbook-head {
  text-align: center;
}

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

 

さいごに

まるで本をめくるように画像を切替えることができるViewerコンポーネントライブラリでした。

今日はこの辺でー

 

  • B!