Nuxt.jsで一年ほど前に実装した頃から1ページ構成だったサイトを複数ページ構成にひとまず変更しました。
続きを読む “コーポレートサイトのページコンテンツを複数ページ構成にしました”
diary, something & keeblife is colorful | blog by Kentaro Kitagawa.
在宅で仕事をする時間・日数が増える中、Webサービスの仕事をするため、絶対必要になるのがインターネットの回線。
フリーランスになってから色々試していった結果、契約をしているのが
続きを読む “フリーランスエンジニア・クリエイターのネット環境事情”前回に続き、次はサイトトップで実装しているカルーセルについて。
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>
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のコンポーネントプラグインで簡単に実装しているのでまた記事にしたいと考えています。
cdbk.net CREATIVES | https://cdbk.tokyo
参考書籍など