jtk

WordPress + Nuxt.js でポートフォリオサイトを作る その5

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その5

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

Pug と Nuxt.js(Vue.js)

はじめてpug使ってみたのでちょっととまどったところ
属性名と属性値はぜんぶ () の中に突っ込めばOKという感じですね

<NuxtLink>

html

<p><NuxtLink :to="`/work/${item.slug}/`">detail</NuxtLink></p>

pug

p
  nuxt-link(:to="`/work/${item.slug}/`") detail

<childComponent>

html

<ul>
  <ChildComponent
    v-for="(post,index) in posts"
    :item="post"
    :key="index"
  >
</ul>

pug

ul
  ChildComponent(
    v-for="(post,index) in posts"
    :item="post"
    :key="index"
    )
  )

:src (v-bind:src)

html

<img :src="image.url" alt="title">
img(
  :src="image.url"
  :alt="title"
)

@click (v-on:click)

html

<li>
  <a
    @click="clickedEvent('hoge')"
  >Hoge</a>
</li>

pug

li
  a(
    @click="clickedEvent('hoge')"
  ) Hoge

【読書メモ】UX(ユーザー・エクスペリエンス)虎の巻-ユーザー満足度を向上する設計開発テクニック

会社の課題でUXに関する本を読む目標を立てていたので、入門書的な標題の本を読みました。

概要・ポイント

  • 第1章 UX概論
  • 第2章 UXの前提
  • 第3章 UX向上メソッドの紹介
  • 第4章 UX向上の実践
  • 第5章 UX向上の具体例
  • 第6章 UX向上のためのUI設計
  • 第7章 UXの神髄

3章までが概要や歴史、4・5章が手法やケーススタディ、その他がまとめ的な構成です。

虎の巻と書いているだけあって
概要面ではUXの歴史のような背景から、今の時代になぜ求められているか、
手法面ではペルソナやカスタマージャーニーマップなどの基礎手法も含められており初学者にもやさしい内容と思いました。
気になった点を何点かメモしておきます。

UXの学説

何個か有名なのがある。

  • 「誰のためのデザイン?」(affordance)/ D.A.Norman
  • UXのハニカム構造 / Peter Morville
  • ユーザーエクスペリエンスの要素 / Jesse James Garrett

参考:

UXの追い風となる時代の流れ

(a).「人月ビジネス」から「パッケージビジネス」へ
(b).「属人型」から「自己完結型」へ
(c).「大企業向け」から「中小企業向け」へ
(d).「売り逃げ」から「体験版」へ
(e).「売切型」から「継続課金型」へ
(f).「モノ」から「コト」へ

ざっくりですが以上のような時代変化(傾向)によってよりUXが求められる時代になっている。

UX向上プロセス

UX品質の評価及び改善を体系的に行っていくためのプロセスには、ソフトウェア工学における「ユースケース」の考え方を用いることが重要。

手順としては下記を踏むのがベースとなる。

  1. ユースケースを洗い出す
  2. ユースケースの詳細を決める
  3. UXチェックリストを作成する
  4. UXテストを実施する
  5. UX品質の評価を行う
  6. 設計の改善につなげる

UXテストの実施

UXテストでは、ユーザーの感情というつかみところのない曖昧な観点を品質評価の観点に盛り込む必要性があります。 この「感情」という厄介な相手をいかにして合理的な形でテストして評価すべきかということが大きな課題です。

UX品質の評価を行う

ここまでの議論で語ってきましたが、UXは定性的で柔らかいものであるため、つかみどころがありません。よって、UX向上の効果を測定するのは難しい課題です。

とした上で、極力結果を数値化することに努めるのが大事。
例としては想定したユースケースの数や、UXチェックリストの作成/消化件数など。

良かった点

  • UXに関して時代の流れや基本原則的なことの知識がついた
  • 手法に関しても一通り網羅ができ、具体例も一部学べてよかった

惜しかった点

内容で触れられてもいますが、いずれもこの本では網羅できない領域なので他の書籍で具体例などを探すのが良いと思いました。

まとめ

実際に導入するのは難しいなとは思いつつ、中で触れられていたアンチパターンを作ってその点は破らないようにするなど、気軽に導入できる点からはじめるのがよいかなと思いました。

もう少し具体例も欲しいのとやっぱり始めやすい領域はUIなので、その点から深くもっと知れたらいいなと感じています。

WordPress + Nuxt.js でポートフォリオサイトを作る その4

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その4

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

Netlify にデプロイ

Netlifyのサイト にデプロイできたので手順メモ

  • Netlify でアカウント/サイト作成
  • GitHubリポジトリと紐付け
  • nuxt.config.js の設定変更
  • 記事更新時の自動デプロイ有効化

nuxt.config.js の設定変更

記事の更新時に静的HTMLの生成(npm run generate)できるように nuxt.config.js 仕込む

  const apiURL = 'https://works.yuheijotaki.com'
  // ...
  generate: {
    interval: 1000,
    routes() {
      return Promise.all([
        axios.get(`${apiURL}/wp-json/wp/v2/posts?per_page=100&page=1&_embed=1`)
      ]).then((data) => {
        const posts = data[0]
        return posts.data.map((post) => {
          return {
            route: '/work/' + post.slug,
            payload: post
          }
        })
      })
    }
  },
  // ...

記事更新時の自動デプロイ有効化

WP側でプラグイン JAMstack Deployments をインストール&有効化。
「設定」 > 「Deployments」からフック対象のカスタム投稿を選択、Build Hook URL をコピーしておく。

Netlify管理画面側で「Deploy settings」 > 「Build hooks」にビルドフックを追加。

以上でGitHubの対象(master)ブランチにプッシュするたび/WordPressの記事更新するたびにデプロイされる環境作成ができた。

f:id:jotaki:20200109144217p:plain

参考:

残りやること

  • データ登録・調整
  • 全体スタインリン
  • meta 調整

WordPress + Nuxt.js でポートフォリオサイトを作る その3

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その3

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt

作業フォルダを src/階層にまとめる

nuxt.config.js に

export default {
  ...
  srcDir: 'src/',
  ...

を追記して src/ フォルダ作成後、
assets/components/layouts/middleware/pages/plugins/static/store ディレクトリを src/ 以下に移動

参考: API: srcDir プロパティ - NuxtJS

.scss を使う

前回sass を使う と同じ方法でOK

.pug を使う

今回は .vue ファイルでテンプレートエンジンとして pug を使ってみようと思うので pug モジュールも追加する。
これもsass loaderと同じでかんたんですね

$ npm i -D pug pug-loader pug-plain-loader

components/Logo.vue

<template lang="pug">
  h1
    nuxt-link(to="/") index
</template>

でできた。

参考: nuxt.js(v2)でpug/stylusを利用する - Qiita

残りやること

  • データ登録・調整
  • 全体スタインリン
  • Netlify へホストする

WordPress + Nuxt.js でポートフォリオサイトを作る その2

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その2

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt

クリックイベントと $emit / props

コンポーネント名を Filter.vue にしようと思ったのですが、予約語だったので Search.vue に修正
コードは下記ですが一部省略

components/Search.vue ではクリックしたカテゴリーを $emit する

<template>
  <div>
    <ul>
      <li><a @click="clickedCategoryEvent('All')">All</a></li>
      <li><a @click="clickedCategoryEvent('Front-end')">Front-end</a></li>
      <li><a @click="clickedCategoryEvent('WordPress')">WordPress</a></li>
      <li><a @click="clickedCategoryEvent('Web Design')">Web Design</a></li>
      <li><a @click="clickedCategoryEvent('Tumblr')">Tumblr</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    clickedCategoryEvent(category) {
      this.$emit('clickedCategory',category);
    }
  }
}
</script>

一度 pages/index.vue で受け取り、 components/WorksList.vue へ props する

<template>
  <div>
    <Search @clickedCategory="selectedCategory" />
    <WorksList :filterCategory="propsCategory" />
  </div>
</template>

<script>
export default {
  ...
  data () {
    return {
      category: 'All'
    }
  },
  methods: {
    selectedCategory (category) {
      this.category = category
    }
  },
  computed: {
    propsCategory: function() {
      return this.category
    }
  }
}
</script>

components/WorksList.vue で受け取る

<script>
export default {
  ...
  props:{
    'filterCategory': {
      type: String,
      default: 'All'
    }
  },
  ...
}
</script>

クリックされたカテゴリーを絞り込み表示

components/WorksList.vue
mounted :function(){ にてAPIから投稿を引っ張ってきて
computed: {... にてpropsしてきたカテゴリーに属する投稿をフィルタリング

...
<script>
import axios from "axios";

export default {
  name: 'WorksList',
  components: {
    WorksItem
  },
  props:{
    'filterCategory': {
      type: String,
      default: 'All'
    }
  },
  data () {
    return {
      posts: []
    }
  },
  mounted :function(){
    axios.get( 'https://works.yuheijotaki.com/wp-json/wp/v2/posts?per_page=100' )
    .then( response => {
      this.posts = response.data
    })
    .catch( error => {
      console.log(error)
    })
  },
  computed: {
    filterWorks: function() {
      const posts = this.posts
      const filterCategory = this.filterCategory
      if ( filterCategory !== 'All' ) {
        return this.posts.filter( function( post ) {
          if ( post.category_name.indexOf(filterCategory) >= 0 ) {
            return post
          }
        })
      } else {
        // 初期表示 or `All` を選択した場合
        return this.posts
      }
    }
  }
}
</script>

<template> は computed で絞り込んだ投稿からループする。

<template>
  <ul>
    <WorksItem
      v-for="(post,index) in filterWorks"
      :item="post"
      :key="index"
    />
  </ul>
</template>

残りやること

  • 作業ファイルを src/ にまとめる
  • データ登録・調整やスタインリン
  • Netlify へホストする

WordPress + Nuxt.js でポートフォリオサイトを作る その1

WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その1

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt

サイト構成

下記のシンプルな構成で行う

  • トップページ (/)
    • Works一覧(クリックで詳細ページへ)
    • カテゴリーごとの絞り込み機能
  • Works詳細ページ (/work/_slug.vue)
    • サイト名などの情報、画面キャプチャ等

インストールと起動

# create-nuxt-app
$ npx create-nuxt-app [ProjectFolderName]
# 起動
$ cd [ProjectFolderName]
$ npm run dev

ページ/コンポーネント

root
|
└ pages/
|   └ index.vue
|   └ work/
|      └ _slug.vue
└ components/
    └ Logo.vue
    └ Filter.vue
    └ WorksList.vue
    └ WorksItem.vue
    └ WorksSingle.vue

スラッグベースのルーティング

前回もつまづきましたが、今回はWPの通常投稿をスラッグ形式でルーティングする。
エンドポイントは、 'https://hoge.com/wp-json/wp/v2/posts?slug=[SlugName] となり、これを async asyncData( { params } ) {... で取ってくる必要がある。

<template>
  <div>
    <WorksSingle
      :post="post"
    />
  </div>
</template>

<script>
import axios from 'axios'
import WorksSingle from '~/components/WorksSingle.vue'

export default {
  components: {
    WorksSingle
  },
  data () {
    return {
      post: {}
    }
  },
  async asyncData( { params } ) {
    const { data } = await axios.get('https://hoge.com/wp-json/wp/v2/posts?slug=' + params.slug)
    return {
      post: data[0]
    }
  }
}
</script>

参考:

次回はカテゴリーごとの絞り込み機能を実装する。

JAMstack と Headless CMS

Headless CMS について調べる用事があったのですが、関わりが深そうな JAMstack についても調べてみました。

f:id:jotaki:20200106110409j:plain

JAMstack とは?

JAMstackはテクノロジーではなく、JAMstackはWebサイトやアプリを構築する新しい方法です。クライアントサイドに基づいた最新のWeb開発アーキテクチャで、Webサーバーには依存しません。

引用元: クライアントサイドに基づいたWeb開発アーキテクチャ「JAMstack」がなぜ人気になっているのか | コリス

Netlify の創業者発の言葉で JavaScript / API / Markup の頭文字をとったものとのこと。
こういう名前のサービス名ではなく思想またはアーキテクチャのこと。

生成された静的HTMLのホスティングサービスとしては Netlify や Firebase を使うのが一般的のよう。

Headless CMS とは?

ヘッドレスの「ヘッド」は、ビュー(表示する画面)を指します。ヘッドレスなので、ビューの無いCMSということになります。


ではヘッドレスCMSの場合、ビューはどうするのか?
CMS外で、自作する必要があります。

引用元: ヘッドレスCMSとは何か?従来CMSとの違いやメリデメを解説!

管理画面(コンテンツ編集者側)とフロント表示(訪問者側)を切り離して、間にAPIを持たせるサイトにおける管理画面側が Headless CMS ということのようです。

管理画面側は WordPress 使ってフロントを REST API から受けても純粋な Headless CMS ではなさそうな感じですね。この場合は WordPress as a Headless CMS と定義したほうがわかりやすそう。

Headless CMS を使って作られたフロント表示は JavaScript / API / Markup が使われる(ことが大半)なので JAMstack アーキテクチャを採用したサイトと定義できるかと思います。

Headless CMS のメリット・デメリット

引用元: Headless CMS - Qiita

メリット

  • フロントエンド側の自由度が高まる
  • 配信対象の拡大
  • フロントとバックエンドの開発分離

デメリット

  • 開発が専門的になり、開発工数が増加する
  • APIの品質への要求が高い

いろいろ記事を読んでいたのですが、あまり小規模なWebサイトに向いていないという意見と、一部分にも適用できるから導入が楽、という見方が混在していました。
あとはデメリットとして開発コスト増につながりますが、下書きプレビューがしづらいという意見も多くありました。

主な Headless CMS サービス

Flamelink は Firebase で作られたCMSなのでちょっと毛色は違うと思いますが、海外では Contentful と Strapi のどっちがいいのみたいな話になっているようです。
参考: Contentful vs Strapi | 違いは何ですか?

microCMS は日本製で比較的新しいサービス。比較は下記記事などが詳しいです。

まとめ

2019年から熱気を帯びてきた感じのする JAMstack / Headless CMS というワードですが、概要などなんとなく掴めたので今度は実際になにか作ってみたいと思います。

個人的には管理画面や仕組み的にも WordPress に慣れているので Nuxt 使って構築してみたいと考えています。

その他 参考リンク

JAMstack

Headless CMS