昨日の朝は毎年行っている、大岡川に桜を撮りに行き、写真も増えてきたのでflickrにまとめはじめました(後述)
続きを読む “2021年に撮った桜の写真をflickrでまとめてみました”
タグ: flickr
国営昭和記念公園の秋
今日はイチョウが見頃と聞いて東京都立川市にある国営昭和記念公園に行ってきました。
何気に毎年来ていて去年来たときはイチョウがほとんど散っていたので今年はタイミングを見てきました。
先週は宇都宮と日光へ -2020年秋の紅葉-(2日目)
2日目。(1日目はこちら)
ひとまず、宇都宮駅から日光駅へ
この日は2020年秋の日光の紅葉をということで6時半前の宇都宮発日光行きの電車で日光駅へ。
少しややこしいのですが、JRと東武鉄道でJRは宇都宮、東武鉄道は東武宇都宮駅があり、JRの場合は宇都宮からJR日光線で終点の日光駅まで、東武鉄道の場合は宇都宮駅からバスに乗って東武宇都宮駅へ行き、そこから新栃木へ電車で行き、そこから東武日光線で東武日光駅に行くルートになります。
先週は宇都宮と日光へ(1日目)
先週後半に栃木県の宇都宮と日光に行ってきました。
もともとGoToキャンペーンで行けるところを探していて、よく乗っている電車の終点が宇都宮だったのでそこに決め、せっかく行くので日光へも行ってみようということで決めた今回の旅行でした。
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を使って表示させたときの実装など
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
参考書籍など
AndroidからDropsyncを使って自動でFlickrへアップロード
DropBoxがカメラ用のフォルダに保存された画像を自動でアップロードしてくれるようになったものの、それ以外のフォルダに保存された画像をそのままではアップロード出来ないのでDropsyncを使ってDropBoxへアップロード、そしてさらにDropBox AutomatorでFlickrへアップロードできるようにしてみました。
まずはDropBoxを登録。Androidアプリもインストールし、その後、DropBox AutomatorへDropBoxのアカウントを使ってログイン、「Create a new automation」を押すとフォルダごとにタスクを設定できるのでPhotosフォルダにある画像をFlickrへアップロードするように設定。ここまでの状態ではDropBox上のPhotosフォルダに画像を入れないとFlickrには反映されないので「Dropsync」を使います。
DropsyncはPROが複数設定できるのですが、有料なので今回は普通のバージョンを使い、自分が使っているカメラが画像を保存するフォルダを指定、同期先をDropBoxのPhotosフォルダに設定。すると設定した時間毎に同期をしてくれます。
大量にとって後でどれを消すか一つ一つ見ていくより、アップロードされたものはとりあえず削除できるようになるので、容量が切迫するようなことを防ぐことができます。
iPhoneなどiOS向けにはPogoplugを利用するとPogoplugのクラウド上へ自動アップロードしてくれるのでiPhone出と考えている方は一度使ってみてはいかがでしょうか？
近々Pogoplug モバイルを導入する予定なのででき次第またブログを更新します。
linked by blog-tools