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

flipbook-vueとは

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

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

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

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

【動画サイズ：456KB】

環境

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

検証ソースはこちら

ライブラリの取得

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

npm i -S flipbook-vue

yarn add flipbook-vue

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

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

導入手順

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

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

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

ES6等で実装する場合

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

UMDで実装する場合

CDN読み込みのみ

step.2 JavaScriptを設定

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

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コンポーネントライブラリでした。

今日はこの辺でー