この記事の内容
この記事には、「ブログ構築」に属する記事の
- コード、コマンドの修正
- バージョンの更新情報
を記載しています。
前提
記事に記載がある全てのコード、コマンドは、動くことを確認して公開しています。
しかし、よりベストな手法が見つかった場合、また新しいバージョンが公開された場合などに、随時デモアプリを更新していきます。
書いてある通りに実行したけどアプリが動かない、コードの記載が微妙に違うなどの、エラーや疑問にぶつかった場合は、過去の記事が更新されている場合があります。
一度ここでご確認ください。
なお、全ての記事の内容は修正後の最新の内容となっています。
コードの見方
「-」マーク => 削除したコード、変更前のコマンドを表します。
「+」マーク => 追加したコード、変更したコマンドを表します。
【2020/05/19】ブログ構築カテゴリーの記事更新を終了します。
皆様。お久しぶりです。@andouです。
皆様には大変申し訳ありませんが、この「ブログ構築」カテゴリーの記事更新を一旦終了といたします。
理由は、優先すべきことが増え、このカテゴリーに時間を割けなくなったためです。
今ままいつか更新するかもと思わせぶりな状況は、読者の皆様に迷惑をかけると思いまして、今回お伝えすることにしました。
なお、質問は随時承っております。下記リンクの「Slackで質問する」ボタンをクリックし、Slackにご参加ください。
「独学プログラマ」の内容についてSlackで質問できるようになりました
今まで「ブログ構築」のカテゴリー記事を読んでくださり、本当にありがとうございました。
完。
【2019/10/16】「Nuxt.jsにContentfulのブログ記事を表示する」を修正しました。
記事リンク
修正内容
目次「共通メソッドをVuexに追加する」の
(修正前)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の魔力で見た目をかっこよくする」の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"がない場合
class="mx-auto"がある場合
【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 バージョンアップに伴う変更点（１）
- Vuetifyモジュールを、公式に合わせ
buildModulesに書き換えました。
公式
nuxt.config.js
// 追記
buildModules: [
'@nuxtjs/vuetify'
],
// 追記終了
modules: [
// '@nuxtjs/vuetify', 削除
'@nuxtjs/axios',
'@nuxtjs/eslint-module',
'@nuxtjs/dotenv'
],
}
buildModulesはNuxt.js2.9から利用できるようになったプロパティです。
buildModules を使用すると、本番環境の起動を高速化し、本番環境のデプロイで node_modules のサイズを大幅に削減することができます。
引用
Nuxt.2.10.0 バージョンアップに伴う変更点（２）
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/vuetifyとfontawesomeのインストール先を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の違いがよくわかりました。
なんとなくで理解している方は、ぜひ読んでみてください。