ブログ構築 0. 更新情報 #01
2019年10月16日に更新

ブログ構築カテゴリーの記事修正、更新情報

この記事の内容

この記事には、「ブログ構築」に属する記事の

  • コード、コマンドの修正
  • バージョンの更新情報

を記載しています。

前提

記事に記載がある全てのコード、コマンドは、動くことを確認して公開しています。

しかし、よりベストな手法が見つかった場合、また新しいバージョンが公開された場合などに、随時デモアプリを更新していきます。

デモアプリ

書いてある通りに実行したけどアプリが動かない、コードの記載が微妙に違うなどの、エラーや疑問にぶつかった場合は、過去の記事が更新されている場合があります。

一度ここでご確認ください。

なお、全ての記事の内容は修正後の最新の内容となっています。

コードの見方

「-」マーク => 削除したコード、変更前のコマンドを表します。

「+」マーク => 追加したコード、変更したコマンドを表します。

【2019/10/16】「Nuxt.jsにContentfulのブログ記事を表示する」を修正しました。

記事リンク

Nuxt.jsにContentfulのブログ記事を表示する

修正内容

目次「共通メソッドをVuexに追加する」のstore/index.jsファイルの画像URLに"https:"を付けました。

(修正前)store/index.js
import defaultEyeCatch from '~/assets/images/defaultEyeCatch.png'

export const getters = {
  setEyeCatch: () => (post) => {
    if (!!post.fields.image && !!post.fields.image.fields) return {
      url: post.fields.image.fields.file.url, 
      title: post.fields.image.fields.title 
    }
    else return { url: defaultEyeCatch, title: 'defaultImage' }
  }
}

(修正後)store/index.js
import defaultEyeCatch from '~/assets/images/defaultEyeCatch.png'

export const getters = {
  setEyeCatch: () => (post) => {
    if (!!post.fields.image && !!post.fields.image.fields) return {
      url: `https:${post.fields.image.fields.file.url}`, // ここにhttps:を付けました
      title: post.fields.image.fields.title 
    }
    else return { url: defaultEyeCatch, title: 'defaultImage' }
  }
}

修正理由

Google Chromeが混合コンテンツをブロックすると発表があったためです。

混合コンテンツとは、SSL化したページに含まれる、「http」から始まるURLのコンテンツのことです。

Contentfulからイメージを取得する場合、デフォルトのイメージURLは「http」となっています。

SSL化したURLでイメージを取得するには、明示的に「https」を付ける必要があります。

参考

日本語の記事ではこの方がすごく分かりやすく説明してくれています。
【SEO】Chromeが「混合コンテンツ」をブロックする件【期限あり】

images - Contentful
混合コンテンツとは - Google
HTTPSに関する混合メッセージ - Google Blog


【2019/10/08】「ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する」を修正しました。

記事リンク

ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する

修正内容

目次「Vuetifyの魔力で見た目をかっこよくする」のindex.vueファイルにclass="mx-auto"を追加しました。

(目次)Vuetifyの魔力で見た目をかっこよくする

(修正前) pages/index.vue
<template>
  <v-container fluid>
    <v-row
      justify="center"
    >
      <v-col
        cols="12"
        sm="11"
        md="10"
        xl="8"
      >
        <v-row v-if="posts.length">
          <v-col
            v-for="(post, i) in posts"
            :key="i"
            cols="12"
            sm="6"
            lg="4"
            xl="3"
          >
            <v-card
              max-width="400"
            >
             ...
(修正後) pages/index.vue
<template>
  <v-container fluid>
    <v-row
      justify="center"
    >
      <v-col
        cols="12"
        sm="11"
        md="10"
        xl="8"
      >
        <v-row v-if="posts.length">
          <v-col
            v-for="(post, i) in posts"
            :key="i"
            cols="12"
            sm="6"
            lg="4"
            xl="3"
          >
            <v-card
              max-width="400"
              class="mx-auto"	<!-- 追記しました -->
            >
             ...

修正理由

記事を表示するカードを、中央寄せにするためです。

記事をアップロードした段階では、中央寄せできていないことに気付いていませんでした。申し訳ありません。

class="mx-auto"がない場合

2019-10-08 10-37-30

class="mx-auto"がある場合

2019-10-08 10-35-22


【2019/10/04】デモブログをNuxt.js2.10.0にバージョンアップしました

デモブログのリンク

https://demo-blog.cloud-acct.com/

更新内容

Nuxt.jsのバージョンをv2.8.1からv2.10.0へバージョンアップしました。

バージョンアップ方法

Nuxt.jsのプロジェクトディレクトリで、下記コマンドを実行してください。

$ yarn upgrade nuxt

バージョンアップを確認するには下記コマンドを実行します。

$ yarn list nuxt
...
└─ nuxt@2.10.0

Nuxt.2.10.0 バージョンアップに伴う変更点(1)

  • Vuetifyモジュールを、公式に合わせbuildModulesに書き換えました。

公式

@nuxtjs/vuetify - npm

nuxt.config.js
	// 追記
	buildModules: [
    '@nuxtjs/vuetify'
  ],
	// 追記終了
    
  modules: [
//    '@nuxtjs/vuetify',  削除
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module',
    '@nuxtjs/dotenv'
  ],
    
} 

buildModulesはNuxt.js2.9から利用できるようになったプロパティです。

buildModules を使用すると、本番環境の起動を高速化し、本番環境のデプロイで node_modules のサイズを大幅に削減することができます。

引用

modulesプロパティ - Nuxt.js

Nuxt.2.10.0 バージョンアップに伴う変更点(2)

  • no-ssrタグをclient-onlyに書き換えました。

修正内容

<template>
<!--  <no-ssr>  削除 -->
<!--  </no-ssr>  削除 -->
	<client-only>
    ...
  </client-only>
</template>

no-ssrタグはNuxt.js3.0以降、削除されます。

コンソールに下記の警告が出た場合、すべてclient-onlyに書き換えてください。

 <no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead

以上、Nuxt.js2.10.0 バージョンアップに伴う変更点でした。


【2019/10/04】「ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する」を修正しました。

記事リンク

ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する

修正内容

目次「.envファイルの環境変数をNuxtに登録する」でenvプロパティに登録した、CTF_PREVIEW_ACCESS_TOKENを削除しました。

(目次).envファイルの環境変数をNuxtに登録する

nuxt.config.js
{
  ...
  ],
    
	// 追記
  env: {
    // contentful
    CTF_SPACE_ID: process.env.CTF_SPACE_ID,
    CTF_BLOG_POST_TYPE_ID: process.env.CTF_BLOG_POST_TYPE_ID,
    CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN,
		// CTF_PREVIEW_ACCESS_TOKEN: process.env.CTF_PREVIEW_ACCESS_TOKEN  削除しました
  },
	// 追記終了
    
  axios: {},
  ...
}

修正理由

CTF_PREVIEW_ACCESS_TOKENは、本番環境で必要としないため、登録する必要がありません。

当初、必要だと勘違いしていた筆者のミスです。

申し訳ありません。

修正後の内容

記事上の修正後のenvプロパティはこのようになります。

next.config.js
export default{
  
  env: {
    CTF_SPACE_ID: process.env.CTF_SPACE_ID,
    CTF_BLOG_POST_TYPE_ID: process.env.CTF_BLOG_POST_TYPE_ID,
    CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN
  },
  
}

【2019/09/27】「【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう」の記事の修正をしました

記事リンク

【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう

修正内容

@nuxtjs/vuetifyfontawesomeのインストール先をdevDependenciesに変更しました。

- $ yarn add @nuxtjs/vuetify

+ $ yarn add @nuxtjs/vuetify -D
- yarn add @fortawesome/fontawesome-free

+ yarn add @fortawesome/fontawesome-free -D

修正理由

公式サイトに合わせるためです。

既にdependenciesにインストールしている場合

アプリを自分だけで利用する場合や、別プロジェクトに組み込む予定がない場合、dependenciesとdevDependencies、どちらにインストールしても構いません。

よって今回の修正は無理にしなくても大丈夫です。

修正する場合

  • 一度モジュールを削除します
$ yarn remove @fortawesome/fontawesome-free @nuxtjs/vuetify
  • 再度 -D オプションをつけてインストールします。
$ yarn add  @fortawesome/fontawesome-free @nuxtjs/vuetify -D

package.jsonのdevDependencies内にインストールされていれば成功です。

参考

この記事は、dependenciesとdevDependenciesの違いがよくわかりました。

なんとなくで理解している方は、ぜひ読んでみてください。

ちゃんと使い分けてる? dependenciesいろいろ。- Qiita

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告