先週は宇都宮と日光へ -2020年秋の紅葉-(2日目)

IMG3968 1

2日目。(1日目はこちら)

ひとまず、宇都宮駅から日光駅へ

この日は2020年秋の日光の紅葉をということで6時半前の宇都宮発日光行きの電車で日光駅へ。

少しややこしいのですが、JRと東武鉄道でJRは宇都宮、東武鉄道は東武宇都宮駅があり、JRの場合は宇都宮からJR日光線で終点の日光駅まで、東武鉄道の場合は宇都宮駅からバスに乗って東武宇都宮駅へ行き、そこから新栃木へ電車で行き、そこから東武日光線で東武日光駅に行くルートになります。

続きを読む “先週は宇都宮と日光へ -2020年秋の紅葉-(2日目)”

先週は宇都宮と日光へ(1日目)

IMG3663 1

先週後半に栃木県の宇都宮と日光に行ってきました。

もともとGoToキャンペーンで行けるところを探していて、よく乗っている電車の終点が宇都宮だったのでそこに決め、せっかく行くので日光へも行ってみようということで決めた今回の旅行でした。

続きを読む “先週は宇都宮と日光へ(1日目)”

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

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

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を使って表示させたときの実装など

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

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

flickrと自分のサイト間は別ドメインなので通信する際の`Access-Control-AllowOrigin` の問題はついて回るのですが、いわゆる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ビギナーズガイド