Mac使っているのにゲーミングマウスにたどり着く

今年の入るまで10年以上magic mouseを使っていたのですが、コロナ禍の在宅ワークのおかげでキーボードをHHKBデビューし、4Kディスプレイを使い始めたところから、マウスの動きが遅い…となり、ロジクールのMX Masterなども考えたのですが、感度で言えばゲーミングとなり、

当初G604(写真左)を使い始めました。

その後、無線でたまに他の機器と干渉したり、うまく接続できないことが諸所あり、有線のG PRO hero(写真右)が新しく出たので、メインで使うそれに切り替えました。

コードが邪魔になるかと思いきや、軽くて柔らかく細いコードで使いやすく、マウス自体も軽いので操作性がとてもいいマウスで左ボタン側サイドのキーに仮想デスクトップの移動を、ホイールとその下のボタンで感度の+ーを専用アプリでアサイン・設定して使っています。

業務用とそのほかでMacを2つ使うのでUSB切替器を使ってマウスとコンデンサーマイクは同時に切り替えられるようにして、快適。できれば、HHKBも有線対応にして切替対応してしまいたい・・・

代々木公園のバラをオールドレンズ で

写真 2020 10 25 16 11 30

今日は代々木公園のバラが見頃ということでオールドレンズ を持って出かけました。

写真 2020 10 25 14 36 09

代々木公園に行く前に世田谷代田でコーヒー。

写真 2020 10 25 15 32 33

代々木公園のバラは痛みの激しいものが少ない印象で、木々の陰もあり、いい感じにボケができる写真がたくさん撮れました。

 

写真 2020 10 25 15 33 03

レンズはsmc PENTAX-M 135mmブラックミストNo.1を使用。
若干ソフトになり、フレアも抑えられました。

 

写真 2020 10 25 15 35 32

日光の側でも被写体が日差しを浴びない限りはしっかりした写り。

 

写真 2020 10 25 15 37 35

バラの花びらの質感がいい感じに撮れました。

 

写真 2020 10 25 15 59 53

今日はほぼ半月。

 

写真 2020 10 25 16 04 49

芝は枯れておらずの状態でまだ暖かい。

 

写真 2020 10 25 16 07 29

こちらは28mmで撮ったバラ。

 

写真 2020 10 25 16 21 42

代々木公園から撮った渋谷スクランブルスクエア。

 

写真 2020 10 25 16 42 40

その渋谷スクランブルスクエア前から撮った羽田空港へ向かう飛行機。

飛行機の位置によってはいくつか渋谷のビルに映り込んだ飛行機が撮れそうな感じだったので次夕方に来るときは狙ってみようと思います。

メンズコスメのいろいろと自分が使っているもの

IMG 1482 1 4

写真左から FIVEISM×THREE インジーニアスタッチ バー(ファンデーション)クリニーク フォーメン デオドラントロールオン(制汗剤)Aesop ハーバルボディロールオン(ボディ用乳液)、Aesop フライト コンセントレート(スキンオイル)

上記は自分が使っているもので、ファンデーションは年に何度かぐらいの頻度、そのほかはほぼ毎日。

最近のメンズコスメ、特に基礎化粧品類が色々出てきて、ようやく時代が来たと思いつつ、価格と効果を考えると女性向けのものや普通にドラッグストアにある医薬品を使ったほうが普通に効果があったりと悩ましい現実。

形状や使いやすさは男性向けの方がよくて、ファンデーションなんかはスティックタイプの固形で使いやすい。
ただ、消費も早いので毎日使う場合は結果的にリキッドやパウダーの方がコスパは断然いい(はず)。
そこまで時間をかけられない&多少高くても買うような層がメンズコスメを使う現状ではまだいいのかもしれない。

ハンドクリームハンドクリームはAesopとTHREE

身近に買えるようになってきた

実際に試すとなると店頭になってしまうものの、メーカーがECをやっていて、例えばFIVEISM×THREEは公式にAmazonで販売していてネイルアーマーという名前で往年のスポーツカーの人気カラーをイメージしたネイルを出していたりする。
クリニークは楽天に公式ショップがあり、メンズラインのクリニークフォーメンも一通りシェービングからスキンケアまでラインナップが揃っていたりと、自分に合ったものが見つかれば通販で買えるようになり便利な時代になりました。

少し前までは、デパートの化粧品フロアでメンズラインの製品を取り扱っているのかどうか聞かないとわからなかったものが、今ではロフトなどにもメンズコスメのコーナーができ、アラミスのラボシリーズなど高級なものも増えてきているのでもっと低価格で使いやすいものが増えてくると嬉しい。

自分が実際に使って進められるところ

これから始めようという人には、とりあえず、メンズコスメを取り扱っている化粧品売り場や路面店で一度店員さんにしっかり聞いてみると何が必要か足りないかわかるのでおすすめです。
個人的にはキールズクリニークフォーメンあたりがあまり香料がきつくないので使いやすく、アラミスのラボシリーズは高いので効くという印象です。トムフォード、一度使って見たいが高い・・・

普段使っているスキンケア周り

保湿は化粧水にキュレル ディープモイスチャー スプレー、乳液をキュレルローション、乾燥がひどい時は第3類医薬品のエフカイ20α

洗顔はクレンジングリサーチ ウォッシュクレンジング b、くすみをとりたいときはクリニーク フェース スクラブを使っています。

保湿も洗顔も基本的にはこの10年ぐらい変わらず、キュレル関連を選ぶことが増えてきたぐらいで特別高いものは使わず、大型量販店や通販で手軽に買えるもので習慣化してケアし続けるのが大事と考えています。

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