カテゴリー: フロントエンド

Nuxtとvue-carouselを使ってFlickrの写真をサイトトップに実装する

、
Kentaro Kitagawa

前回に続き、次はサイトトップで実装しているカルーセルについて。

Photographyでは<li>を反復させているものをvue-carouselプラグインをインポートして<slide>を反復するように変更するのみです。
その際、slideとcarouselがうまく行かないことがあるので

nuxt.jsにvue-carouselを導入してスライダーを作成
Nuxtでvue-carouselを使用していたら’ReferenceError: window is not defined’が出たお話

などなど参考に別途インポートすると動くと思われます。

実際のコードのサンプルは以下

<template>
  <carousel :navigation-enabled="true" :per-page="1" :loop="true" :scrollPerPage="true" :autoplay="true" :autoplayHoverPause="true"  :autoplayTimeout="5000" :paginationPadding="4">
    <slide v-for="(photo, index) in data['photo']" :key="photo.id">
      <img :data-src="photo['url_l']" :width="photo['width_l']" :height="photo['height_l']" :alt="photo['title']" v-lazy-load>
    </slide>
  </carousel>
</template>
<script>
import Carousel from '~/components/vue-carousel/Carousel.vue'
import Slide from '~/components/vue-carousel/Slide.vue'
export default {
  components: {
    Carousel,
    Slide
  },
  data() {
    return {
      data:{}
    }
  },
  async mounted() {
      const url = 'https://www.flickr.com/services/rest/?{{flickrAPI}};
      const data = await this.$jsonp(url, {
        callbackName: 'getWall'
      });
      return this.data = data.photoset;
  },
}
</script>

サイトでFlickrの写真をNuxtを使って表示させたときの実装など

、
Kentaro Kitagawa
https://cdbk.tokyo のPhotographyコンテンツ

cdbk.tokyoのサイトをリニューアルするときに、もっと写真を大量に載せられる仕組みを作りたくなり、写真を保存しているflickrのAPIを利用して画像情報を取得、表示するようにしました。

flickrと自分のサイト間は別ドメインなので通信する際の`Access-Control-Allow–Origin` の問題はついて回るのですが、いわゆるjsonp形式で受け取ることができるのでnuxtの環境に`vue-jsonp`　を追加してjson形式で扱えるようにしています。

実装時のコードは下にモーダルの処理などを端折ったものを載せたのですが、実質、`data` に通信で受け取った情報を渡すだけの処理`async mounted()` 内のコードのみで(別途pluginsのjs追加はあるものの)できるので、jQueryなどで実装するよりかなり楽でコンポーネント内のスタイルなどに注力できNuxtは楽だなというのを実感しました。

Photographyコンポーネントのサンプルコード

<template>
  <section class="content" id="photography">
    <h2 class="contentTitle2 en">Photography</h2>
    <div v-if="data"  class="contentGalleryView">
       // v-bindでdataを受け取り次第表示させるためのクラスを付与
      <ul class="contentGallery" v-bind:class="{ 'is-show': data }">
　　　// v-forで受け取ったdata(画像情報の配列)を反復させて表示させる
        <li v-for="(photo, index) in data['photo']" :key="photo.id" class="contentGallery__item">
          <div @click="モーダル表示のイベント" :data-photo-index="index">
            <a :href="'https://www.flickr.com/photos/oratnekcdbk/' + photo['id']"></a>
　　　　// 画像の遅延読み込みは `nuxt-lazy-load` を使用
            <img :data-src="photo['url_s']" :width="photo['width_m']" :height="photo['height_m']" v-lazy-load>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        data:{}
      }
    },
    methods: {
      // モーダル表示、非表示のイベントなど
    },
    async mounted() {
        // APIのURL
        const url = 'https://www.flickr.com/services/rest/?method={{flickrのAPI}}';
        // 下記でjsonp形式のデータを受け取り、json化した配列をコールバックで受け取る
        const data = await this.$jsonp(url, {
          callbackName: 'getData'
        });
        // 受け取った配列をdataに引き渡し、表示するための材料が揃う
        return this.data = data.photoset;
    },
  }
</script>
<style>
</style>

また、cdbk.tokyoはNuxtのSSRではなく、完全にgenerateさせた静的HTMLを載せているのでSPAなサイトよりかなりLPページよりの構造です。

flickrから呼び出しているのは自分で設定した公開しているアルバムで、画像の順序や何を載せるかといった管理は完全にflickr側で行い、指定しているアルバムを呼び出して表示しているのみとなります。

flickr自体の操作や写真の追加などはブラウザーやスマホのアプリででき、コマンドなどを打たなくてもコンテンツを追加・変更できるようになり、以前のような、画像を適切なサイズにリサイズしてFTPでアップロードして・・・といった手間を省くことができるようになりました。

Photography以外のトップ画像のカルーセルなども同様にFlickrとVueのコンポーネントプラグインで簡単に実装しているのでまた記事にしたいと考えています。

flickr my still

cdbk.net CREATIVES | https://cdbk.tokyo

参考書籍など

Hello!! Nuxt.js Hello!!Vue&Nuxtシリーズ

Nuxt.jsビギナーズガイド