Nuxt.jsで写真のポートフォリオサイトを作る

今や個人でポートフォリオサイトを持っているのが当たり前になってきました.

インターンや就活でもポートフォリオサイトで自分のスキルを主張すると良いなんて聞きますね.私もしょぼいのを持っていますが,作ったサイトやアプリを取り上げていたため,これまで写真に特化したものは作ったことがありませんでした.

写真は見た目の重要度が 100% なので如何に綺麗に魅せるかが鍵になると思いますが,サイト自体が重くなってしまうのもまた事実.しかも,ビュワーを用意するのがまた手間のかかる作業になります.

そんなことを考えていたら,とても良さげなビュワーモジュール Viewer.js を見かけたので,これを使ってテストサイトを作成してみました.

デモサイト

Viewer.js を使うとどんな感じになるのかということで,見た目はテストサイトで確認してみてください.

https://gallery.mktia.com/images/animals

ちなみに,タイル状に並んでいるのは HTML, CSS で制御しているためで,Viewer.js によるものではありません.

画像をタップしたときに出る画像表示モードに注目してください.

Viewer.js

fengyuanchen/viewerjs は個人開発のビュワーのようです.

めちゃめちゃ出来がよく,テストサイトで確認してみるとわかるかもしれませんが,様々な機能がついています.画像の拡大縮小回転・反転スライドショーも可能です.

(上記テストサイトではスマホ表示の場合は機能を限定して表示していますが…)

Nuxt.js への導入方法

導入のしやすさを考えて,mirari/v-viewer を使用します.

terminal
$ yarn add v-viewer

基本的な実装方法は以下の通りです.

<template>
  <viewer :images="images">
    <img v-for="name in images" , :src="`/images/${name}`" , :alt="name" />
  </viewer>
</template>

<script>
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

export default {
  data() {
    return {
      images: ['image01.jpg', 'image02.jpg', 'image03.jpg', 'image04.jpg'],
    }
  },
}
</script>

viewer コンポーネントに画像ファイル名の配列 images を渡し,その内部で v-for を使って順に取り出し <img> で展開すればビュワーが利用できます.

ちなみに,上記の例では @/static/images ディレクトリに画像が格納されているものとしており,ディレクトリ構造に応じて変更が必要です.

この他に,より快適に利用するために付随する機能を二つ紹介します.

オプションの設定

ツールバーの内容などはオプションを設定することで制御できます.これを使えば,各機能ボタンの表示・非表示やボタン自体の大きさを変更可能です,

各機能に対して数字を割り当てることで表示する条件を指定できます.0 は常に非表示,1-4 は画面幅に応じて表示・非表示が切り替わります.

Vue.use(Viewer, {
  defaultOptions: {
    toolbar: {
      zoomIn: 2,
      zoomOut: 2,
      oneToOne: 2,
      reset: 2,
      prev: 1,
      play: {
        show: 1,
        size: 'large',
      },
      next: 1,
      rotateLeft: 2,
      rotateRight: 2,
      flipHorizontal: 2,
      flipVertical: 2,
    },
  }
)

サムネイルの使用方法

<template>
  <viewer :images="images">
    <img v-for="name in images" , :src="`/thumbnails/${name}`" , :alt="name" />
  </viewer>
</template>

<script>
...
Vue.use(Viewer, {
  defaultOptions: {
    url(image) {
      return image.src.replace("thumbnails", "images");
    },
  },
});
</script>

Viewer.js 自体にサムネイル生成機能はありませんが,src を置き換える機能を使ってサムネイルを指定することができます,

上記の例では thumbnails, images ディレクトリにそれぞれ同一ファイル名のサムネイル画像とオリジナル画像を用意したとき,画像一覧ではサムネイル画像を使用し,それぞれの画像をタップするとオリジナル画像が開かれるようになっています.

オプションで srcthumbnailsimages に置き換えるように指定しているからです.

サムネイルも自動で生成したい場合は Nuxt.js で画像編集ライブラリ sharp を用いた自作モジュールを作成すれば可能です.