サイトで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ビギナーズガイド

iPhone12シリーズ購入前に検討したいアイテム

iPhone12シリーズの予約が始まり、そろそろ発売になるので、今iPhone XS maxと一緒に実際使っている周辺機器やガジェットをメモがてら紹介。

Anker PowerWave+ Pad with Watch Holder Apple watchホルダー付き(ケーブル別途必要)の置くだけ充電

在宅中、Apple watchは外し、Galaxy efitをつけた状態で仕事をすることが多いので、置くだけ充電とApple watchを並べて置くために購入。重さがあり、付属のケーブルは太めですが、動いたりしない(普通のqi充電のものは軽いので大体動く・・・)のでおすすめです。

NITEIZE(ナイトアイズ) ヒッチ & マイクロロック カラビナ スマホ キーホルダー ケースとiPhoneの間に挟みLightningポート用のホールから出して使うストラップ用ホルダー

iPhoneを落としたり、盗難に遭ったりするのを防ぐためにストラップをつけたいと考えていた時に見つけたアイテム。
これのおかげでストラップだけを持っても外れて落下することがないので落とすことがなくなりました。 ケースにLightningケーブル用のホールがあり、1mm程度の厚みがあってもケースが変形しないぐらいの余裕がないとケースが湾曲したりしてしまうので、TPUやシリコン系の多少分厚いケースが相性よさそうです。

エレコム TypeC to Lightning ケーブル LightningとUSB-Cのケーブル

自宅で使うことはあまりないのですが、外出先などでモバイルバッテリーと繋ぐ時にすごく便利な短いケーブル。 USB-C/PD対応のバッテリーだと急速充電もできるので数本あると便利です。

Anker Soundcore Liberty 2 Pro Qi充電にも対応のワイヤレスイヤホン

この価格帯でバランスドアマチュアとダイナミック2方式を搭載したハイブリッド型のイヤホン。 発売当初はホワイトノイズなど酷かったのですがファームウェアの更新でいい感じになりました。 プライムセールなどでたまに1万円ぐらいになるのでその期間を狙うのもありかと・・・ イヤーピースはアユート AZLA SednaEarfit XELASTECを使っています。以前はラディウス radius ディープマウントイヤーピースを使っていて、こちらも装着感いい感じでした。どちらもつけたままケースにしまえます(実は結構しまえないイヤピースあります・・・)

Anker PowerCore III Fusion 5000 バッテリー内蔵の充電器

USB-PD対応のバッテリー内蔵充電器で普通のUSBとUSB-C端子があるタイプ。 iPadなどへも給電できる出力をがあり、1台あると何かと便利です。

Anker PowerCore Slim 10000 PD  iPhoneのサイズと同じぐらいのサイズなモバイルバッテリー 

iPhone XS maxより少し小さいぐらいのサイズなので短いケーブルと一緒によく使っています。 写真を転送したりなど大容量の通信やゲームをしたりしない限りは急速に充電できるモバイルバッテリーです。

SwitchBot スイッチボット リモコンハブと温度湿度計セット IoT向け、温度湿度計とリモコンハブ

最初デジタル表示の温度湿度計が欲しくて見つけたIoT対応のもので、こちらはリモコンハブとのセット。 別途iPhoneアプリやAndroidアプリを入れてセットアップを行うとSiriやGoogle ホーム、Alexaと連携して温度や湿度の変化に応じてリモコンやWifiにつながって対応しているIoT機器のタスクを操作できます。
コンセントプラグやカーテンレールに対応した製品もあり、iPhoneをリモコン代わりにデスクで仕事しながら操作できたりとほんとに便利です。

Tipsとしてはエアコンの操作が複雑なのでエアコンの設定をリモコンで操作してスイッチをONするときの赤外線点射をリモコンハブに登録して、特定の操作をできるようにしています。

Anker PowerCore Solar 10000  非常用にLEDライト内蔵のソーラー充電対応モバイルバッテリー

まだ実際に使う事態にはなったことがないソーラー充電対応のモバイルバッテリー。 カラビナなどをつけられるホールもあるのでバックパックなどに吊り下げたまま外出するとバッテリーにソーラー充電できるもので、多少曇っていても充電します。もちろん普通にUSB充電器などからも充電可能。

エナジャイザー モバイルバッテリー PSE適合品 ERG-BY-000002 Qi充電可能なモバイルバッテリー

昔、かっこいい乾電池といえばエナジャイザーとデュラセルだった記憶があり、モバイルバッテリーを出すということで買ったもの。 置くだけ充電に対応、micro usbとUSB-Cの端子もあり、汎用性の高いバッテリーです。
Ankerのものと比べると少し大きいですが軽いです。 そしてデザインがかっこいい。

紹介したものモバイルバッテリー多いですが、ついつい新製品出ると買ってしまいがちです・・・

自己紹介など

秋の写真

Webをメインにフリーランスのクリエイター・エンジニアとして活動しているKentaro KITAGAWA(北川 健太郎)のブログです。

ここでは日常のことから仕事、趣味まであらゆるものを「no theme」として書き綴っています。 
フロントエンド、Web開発のカテゴリーはこちら

主な活動履歴(cdbk.tokyoより)

Kentaro KITAGAWA / 北川 健太郎
Creator / Engineer (Specializes in web service design and image processing) クリエイター / エンジニア(Webのサービス・フロントエンド・画像全般)

滋賀県生まれ。 大学では造形学部芸術情報学科を専攻、Web、グラフィックデザイン、DTP、プログラミング、DTMなどを学び、卒業とともに上京。
制作会社、採用コンサルティング会社などでWebサービスのデザイン、プログラミング、コーディングや運用、ディレクションなどを行う。

2010年にcdbk.net CREATIVESを個人事業として立ち上げ、現在は大手企業のWebサービスのフロントエンド開発、中小企業のWebサービスの開発や運用コンサルティングなどを行っています。 2019年より神奈川県横浜市在住。 東京・横浜を中心にWeb制作・開発・運営に関わるクリエイティブ、コンサルティング活動を行っています。 写真は2016年ごろより一眼レフカメラで本格的に開始。作品掲載はPENTAX100周年記念企画とっておきPhoto+など。

そのほかのWebサイトなど

cdbk.net CREATIVES. 制作活動に関する屋号ドメインのサイト (Nuxt + Flickr API、一部WordPress API)

cdbk.blue 撮影した写真の中で青を基調としたものだけを掲載するコンセプトサイト (Nuxt + Flickr API)

問い合わせ先

問い合わせはtwitterインスタグラムFacebookなどSNS経由でお願いいたします。

最後に欲しいものリスト

昼下がりは西荻窪で

IMG 1470 1

昨日は神代植物公園へ行ったあと西荻窪の「Typica 浅煎りコーヒーと自然派ワインのお店」でコーヒーとプリンを愉しんできました。

IMG 1471 1

ここでは香りと味を存分に楽しめるようにシングルオリジンのコーヒーや和紅茶などもワイングラスで飲む、珍しいスタイル。

IMG 1414 1

9月のオープンしてすぐに行った時はパフェを食べたので、今回はピスタチオプリン。

癖になりそうなおいしさで大好きな味でした。

お店は14時オープンで夜は食事も楽しめる。定休日は今のところ木曜日。

週末の神代植物公園

IMG 1436 1

昨日、約一年ぶりに東京の調布にある神代植物公園へ行ってきました。

目的はオールドレンズ の使用感を見つつ、秋を前にどんな状態なのかのチェックでした。

持っていったレンズは、

smc PENTAX-M 2.8mm f2,8
smc PENTAX-M 135mm f3.5
smc PENTAX-DA 18-135mm 
PENTAX-HD 20-40mm Limited

だったのですが、前半はオールドレンズ 、最後の花(ダリヤ)は18-135mmレンズを使ってました。

カメラからの画像読み込みはiPhone経由でLightroom、darkroom、その後パソコンからブログに貼り付けています。

smc系のレンズにはブラックミストNo.1フィルターをつけていたのでそのおかげもあってかソフトな仕上がりとフレアなしでボケの形以外は普通のレンズと同じような、DAレンズなどと比べると彩度が少し低いかな?程度の仕上がりになりました。

IMG 1437 1

カメラのセンサーが感度高いので曇り空でも少し夏っぽい空背景

IMG 1438 1

オールドレンズ のボケ感

IMG 1439 1

青紅葉をメインに丸ボケ

IMG 1440 1

こちら2目盛絞っての五角形ボケ

IMG 1441 1

くると撮る、草原のような場所。

IMG 1442 1

いつも撮る消火栓達を後ろから

IMG 1443 1

消火栓とホース格納庫を正面から

IMG 1444 1

IMG 1445 1

IMG 1446 1

青紅葉

IMG 1447 1

IMG 1448 1

空のグラデーションと紅葉

IMG 1449 1

白いダリヤと丸ボケ。

 

その他、過去に撮った写真はflickrに掲載しています。

この秋は紅葉をいくつかみに行けそうなので、今回使ったレンズをメインで撮っていこうと計画中です。

使った機材など

Pentax smc PENTAX-M 28mm F2.8 Kマウント
Pentax smc M 135 mm f / 3.5
PENTAX ズームレンズ 防滴構造 DA18-135mmF3.5-5.6ED AL[IF] DC WR Kマウント APS-Cサイズ 21977
PENTAX リミテッドレンズ 標準ズームレンズ HD PENTAX-DA20-40mm F2.8-4ED Limited DC WR ブラック 23000
Kenko レンズフィルター ブラックミスト No.1 55mm ソフト描写用 715581
PENTAX デジタル一眼レフカメラ KP ボディ ブラック 防塵 防滴 -10℃耐寒 アウトドア 5軸5段手ぶれ補正 KP BODY BLACK 16020
Adobe Creative Cloud フォトプラン(Photoshop+Lightroom) with 1TB|12か月版|Windows/Mac対応|パッケージコード版
Western Digital SC QD101 microSDカード 64GB WD Purple 監視カメラ WDD064G1P0C【国内正規代理店品】