jtk

2019年後期のWebサイト

2019年後期のWebサイト

2019年後期で気になったWebサイトをまとめておきます。
前期 同様、デザイン/実装ともに好みのものです。

「IDOLY PRIDE」ティザーサイト

f:id:jotaki:20191209085628p:plain だいたい画像文字なのですが、このくらい生かしてるサイトもなかなか見なくなってきた
https://idolypride.jp/

KYOTO in TOKYO

f:id:jotaki:20191209085642p:plain くすんだ緑やベージュがWebっぽくない色使いで新鮮
https://www.kyotokan.jp/

YOY

f:id:jotaki:20191209085656p:plain マウスオーバーのインタラクション
https://yoy-idea.jp/ja/

みんなでつくる新しい街 | 下北線路街

f:id:jotaki:20191209085706p:plain 文字大きくてもださくない Nuxt
https://senrogai.com/

LAMM,Inc - JILL LAMM

f:id:jotaki:20191209085714p:plain グリッチ
https://lamm.tokyo/

秋田人形道祖神

f:id:jotaki:20191209085724p:plain グラフィックなデザインでWebサイト
https://dosojin.jp/

Patra

f:id:jotaki:20191209085732p:plain これもイラスト的にグラフィック方向だけど実装もしっかりしてる感じ
https://patrainc.jp/

みさとと。——島根県美郷町魅力再発見プロジェクト

f:id:jotaki:20191209085747p:plain 町おこし?系のWebでごりごり技術使ってデザインもいい
http://www.town.shimane-misato.lg.jp/misatoto/

新村デザイン事務所

f:id:jotaki:20191209085802p:plain そんな新しくないかもですが、Works一覧の色とかおもしろい
http://www.shinmura-d.co.jp/

&Post f:id:jotaki:20191209085814p:plain コンセプトがそうなんで紙っぽいデザインなのですがモチーフの入れ方とかうまい感じ
https://andpost.jp/

Web Design Conference Tokyo - Awwwards f:id:jotaki:20191209085827p:plain 流行りの感じですが海外の人に受けそうな
https://conference.awwwards.com/tokyo/

日本気象協会 f:id:jotaki:20191209085846p:plain カッチリしたイメージの企業だけど写真・スペース大きめで今っぽいコーポレートサイト
https://www.jwa.or.jp/

TRANS BOOKS

f:id:jotaki:20191209085741p:plain 今まで見たことないWebサイト、ということでこれが今年ベストな気がします。毎年楽しみ。
https://transbooks.center/2019/

今年読んだ本

フロントエンド

Vue.js / Nuxt.js

UI/UXデザイン

開発手法

AWS関連

自己啓発・その他

まとめ

厳密には昨年の11月くらいからですが約20冊 こうしてみるとVueは一通り読んだけど、身についているかというと全くダメなので量より質というか、インプット方法をもう少し考えなきゃなと思います。

通勤中とかに読むとなるとがっつり頭使う系はなかなか難しくて、どうしてもUI/UX関係の本とかがメインになってしまいますね。 JSコードレシピ集や、Vue猫本やVue基礎とかはもう一度読み返したりしようかなと思います。

Vue.js・Nuxt.js を使用したサイトまとめ

Vue.js or Nuxt.js を使ったサイト、日本のまとめあまりないのでまとめておきます。

デザインギャラリーサイト経由で見つけた多いのでWebアプリではなくサイトが多め。
採用サイトで結構使われているのは技術採用しやすいからかなと思いました。
Webアプリもっと深堀りすれば出てきそうですが、相鉄など企業のコーポレートサイトでも今後増えてきそうな気がします。

Vue.js

amana recruit 2021

http://recruit.amana.jp/ f:id:jotaki:20191206092327p:plain

S-GROOVE(エス・グルーヴ)2020新卒採用

https://www.s-groove.co.jp/freshers/ f:id:jotaki:20191206092346p:plain

Webデザイン制作・開発の実績|東京のWeb制作会社 クーシー(COOSY)

https://coosy.co.jp/work/ f:id:jotaki:20191206092409p:plain

BAUS(バウス)|クリエイターのためのクレジットデータベース

https://baus.jp/ f:id:jotaki:20191206092442p:plain

Nuxt.js

相鉄グループ

https://www.sotetsu.co.jp/ f:id:jotaki:20191206092450p:plain

魅力がグッと伝わるWebサイトを作ります | Web制作会社 LIG

https://web.div.liginc.co.jp/soudan f:id:jotaki:20191206092502p:plain

株式会社ROXX

https://roxx.co.jp/ f:id:jotaki:20191206092512p:plain

BizReach Designer Recruitment

https://recruitment.bizreach.design/ f:id:jotaki:20191206092522p:plain

agent bank Company

https://company.agent-bank.com/ f:id:jotaki:20191206092534p:plain

ALIS | 信頼できる記事と人々を明らかにする全く新しいソーシャルメディア

https://alis.to/ f:id:jotaki:20191206092554p:plain

無料まんが・試し読みが豊富!ebookjapan

https://ebookjapan.yahoo.co.jp/ f:id:jotaki:20191206092603p:plain

WordPress に Vue.js を スモールスタートで入れてみる その7

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その7
最後は細かいテクニック的なところについて

f:id:jotaki:20190212100544p:plain

ローディング

API から投稿データ取得するまでローディング、取得後に解除する
DOM更新後にローディング解除したいので $nextTick を使う

mounted: function () {
  this.$nextTick(function () {
    // 処理
  })
}

loading.vue

<template>
  <transition name="fade">
    <template v-if="!loading">
      <p>loading</p>
    </template>
    <template v-else>
      <child-component></child-component>
    </template>
  </transition>
</template>

<script>
import ChildComponent from './childComponent';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      loading: true
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.loading = false;
    })
  }
};
</script>

配列からオブジェクトへ変換

array

[
  [
    "https://siteUrl/image01.jpg",
    1718,
    1150,
    false
  ],
  [
    "https://siteUrl/image02.jpg",
    896,
    1248,
    false
  ],
  [
    "https://siteUrl/image03.jpg",
    1722,
    1148,
    false
  ]
]

formattedArray

[
  {
    "src": "https://siteUrl/image01.jpg",
    "w": 1718,
    "h": 1150
  },
  {
    "src": "https://siteUrl/image02.jpg",
    "w": 896,
    "h": 1248
  },
  {
    "src": "https://siteUrl/image03.jpg",
    "w": 1722,
    "h": 1148
  }
]

にしたい

array.forEach(function(v){
  const temp = {
    src: v[0], // 画像URL
    w:   v[1], // 横幅
    h:   v[2]  // 縦幅
  };
  formattedArray.push(temp)
});

とすると formattedArray は欲しいフォーマットになる

ループでランダムな数値をつける

最初にデータの整形とランダム数値の付与

imagesArray

[
  "https://siteUrl/image01.jpg",
  "https://siteUrl/image02.jpg",
  "https://siteUrl/image03.jpg"
]

imagesObject

[
  {
    "src": "https://siteUrl/image01.jpg",
    "delay": "0.20"
  },
  {
    "src": "https://siteUrl/image02.jpg",
    "delay": "0.47"
  },
  {
    "src": "https://siteUrl/image03.jpg",
    "delay": "0.72"
  }
]

にしたい。
ここも forEach だけど、他のやり方がありそう

const imagesObject = [];
imagesArray.forEach((value) => {
  const delayRandomNum = (Math.random() * 1 + 0).toFixed(2); // 0 〜 1 までの乱数(小数点2桁に丸める)をアニメーション遅延させる
  imagesObject.push({
    src: value,
    delay: delayRandomNum
  })
});
this.imagesObject = imagesObject

オブジェクトを作成処理ができたら <template> 箇所で

<template>
  <div
    v-for="(image, index) in imagesObject"
    :key="index"
  >
    <img
      :src="image.src"
      :style="{ transitionDelay: image.delay + 's' }"
    >
  </div>
</template>

とする。HTMLは

<div><img src="https://siteUrl/image01.jpg" style="transition-delay: 0.20s;"></div>
<div><img src="https://siteUrl/image02.jpg" style="transition-delay: 0.47s;"></div>
<div><img src="https://siteUrl/image03.jpg" style="transition-delay: 0.72s;"></div>

となるのであとはcssで調整

WordPress に Vue.js を スモールスタートで入れてみる その6

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その6
今回はPhotoSwipeのvueモジュールについて

f:id:jotaki:20190212100544p:plain

v-photoswipe

バニラJSのフォトギャラリープラグイン PhotoSwipe
スワイプなど、スマホの各アクションにも対応しているのでlightbox系ではこれを最近よく使っています。

Vueモジュールでも用意されているのでそれを使います。

GitHub: Leesson/v-photoswipe: Vue plugin for image preview base on PhotoSwipe
npm: v-photoswipe - npm

最終的には前回のIsotopeと併用したので組み合わせが必要ですがPhotoSwipeのところだけ抜き出し

サムネイル部分は決まった形なので a要素に @click="showPhotoSwipe(index)" をつけて datamethods も指定しておく。

v-photoswipeitems に フルサイズの画像もバインドしておく。
このフルサイズは形がきまっているので、下記のようになるよう調整しておく必要がある。
fullsizes.forEach(function(v, i, a){... のところ)

items

[
  {
    "src":"https:\/\/siteUrl.com\/image01.jpg",
    "w":1280,
    "h":620
  },
  {
    "src":"https:\/\/siteUrl.com\/image02.jpg",
    "w":1280,
    "h":620
  }
]

sampleGallery.vue

<template>
  <ul v-if="sampleGallery">
    <li
      :key="index"
      v-for="(image, index) in sampleGallery"
    >
      <a
        href="javascript:void(0);"
        @click="showPhotoSwipe(index)"
      >
        <img
          :src="image.sizes.thumbnail"
          :width="image.sizes['thumbnail-width']"
          :height="image.sizes['thumbnail-height']"
        >
      </a>
    </li>
  </ul>
  <div>
    <v-photoswipe
      :isOpen="photoSwipeIsOpen"
      :items="PhotoSwipeFullsizes"
      :options="PhotoSwipeOptions"
      @close="hidePhotoSwipe">
    </v-photoswipe>
  </div>
</template>

<script>
import { API_POST_URL } from './../variable'
import axios from 'axios';
import { PhotoSwipe } from 'v-photoswipe'

export default {
  components: {
    'v-photoswipe': PhotoSwipe
  },
  data() {
    return {
      sampleGallery: '',
      // PhotoSwipe
      photoSwipeIsOpen: false,
      PhotoSwipeOptions: {
        // ref: https://photoswipe.com/documentation/options.html
        index: 0,
        history: false,
        bgOpacity: '.9',
        preload: [1,3],
      },
      PhotoSwipeFullsizes: []
    }
  },
  mounted() {
    axios
      .get(`${API_POST_URL}/POSTTYPE/${POST_ID}/`)
      .then(response => {
        this.sampleGallery = this.post.acf.sample_gallery
        /*
        * PhotoSwipe の画像を取得してdataに格納
        */
        // フルサイズ
        const fullsizes = response.data.sample_gallery_images
        const fullsizeItems = []
        fullsizes.forEach(function(v, i, a){
          const fullsize = {
            src: v[0], // 画像URL
            w:   v[1], // 横幅
            h:   v[2]  // 縦幅
          };
          fullsizeItems.push(fullsize)
        });
        this.PhotoSwipeFullsizes = fullsizeItems
      })
  },
  methods: {
    // PhotoSwipe ギャラリー形式ではなくサムネイル + フルサイズの組み合わせで表示するメソッド
    showPhotoSwipe (index) {
      this.photoSwipeIsOpen = true
      this.$set(this.PhotoSwipeOptions, 'index', index)
    },
    // PhotoSwipe クローズメソッド
    hidePhotoSwipe () {
      this.photoSwipeIsOpen = false
    }
  }
};
</script>

WordPress に Vue.js を スモールスタートで入れてみる その5

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その5 今回はモジュールについて

f:id:jotaki:20190212100544p:plain

Isotope

レンガ式のレイアウトをするためにnpmモジュールがいろいろあります。
vue-masonry を最初使ってましたが、実行タイミングが早かったり、vue-masonry-cssCSSでレイアウトするので軽いのですがflexboxではレイアウトがうまくいかなかったりで結局 isotope-layout を使いました。

今回の場合は、各投稿のACFギャラリー形式で登録した画像をIsotopeでレイアウトしたい
ACFギャラリー: https://www.advancedcustomfields.com/resources/gallery/
フィールド名は sample_gallery とする
画像URLとwidth/heightが入っているので、img に指定しておく

読み込み時にガタガタしないようにするにはもう少し調整が必要

sampleGallery.vue

<template>
  <ul class="sampleGallery" v-if="sampleGallery">
    <li class="grid-sizer"></li>
    <li class="gutter-sizer"></li>
    <li
      class="sampleGallery__image"
      :key="index"
      v-for="(image, index) in sampleGallery"
    >
      <img
        alt=""
        :src="image.sizes.thumbnail"
        :width="image.sizes['thumbnail-width']"
        :height="image.sizes['thumbnail-height']"
      >
    </li>
  </ul>
</template>

<script>
import { API_POST_URL } from './../variable';
import axios from 'axios';
const Isotope = require('isotope-layout');

export default {
  data() {
    return {
      sampleGallery: ''
    }
  },
  mounted() {
    axios
      .get(`${API_POST_URL}/POSTTYPE/${POST_ID}/`)
      .then(response => {
        this.sampleGallery = this.post.acf.sample_gallery
        this.layoutGallery()
      })
  },
  methods: {
    // Isotope レイアウト
    layoutGallery() {
      this.iso = new Isotope('.sampleGallery', {
        itemSelector: '.sampleGallery__image',
        masonry: {
          columnWidth: '.grid-sizer',
          gutter: '.gutter-sizer'
        }
      });
      this.iso.layout();
    }
  }
};
</script>

次回はPhotoSwipeのvueモジュール編

WordPress に Vue.js を スモールスタートで入れてみる その4

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その4
今回は記事ページでの情報取得について

f:id:jotaki:20190212100544p:plain

詳細ページで記事情報のAPIにアクセス

テンプレートファイル側(.php)で投稿IDを取得して変数 POST_ID に格納しておく

SAMPLE-POSTTYPE-single.php

<?php
$id = get_the_ID();
?>
<script>
  // 投稿IDを.js側へ受け渡す
  const POST_ID = `<?php echo $id; ?>`;
  document.addEventListener('DOMContentLoaded', function() {
    renderSamplePostType()
  })
</script>

.vue 側では

<script>
import { API_POST_URL } from './../variable'
import axios from 'axios';

export default {
  data() {
    return {
      post: [],
    }
  },
  mounted() {
    axios
      .get(`${API_POST_URL}/SAMPLE-POSTTYPE/${POST_ID}/`)
      .then(response => {
        this.post = response.data
      })
  }
}

みたくしたけど、、もう少しよいやり方はありそうな気がしています。
次回は使ったvueモジュール編