Cntlog > contiの記事

Nuxt.jsのトラブル解決方法

今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。

Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。

インストール方法

まずは一番基本のインストール方法。

npm install -g vue-cli vue init nuxt-community/starter-template <project-name> 

project-nameの部分は自分の好きなものに書き換えてください。

これで、Nuxt.jsの基本テンプレートが作成されます。

scss 読み込み設定

まずはnpmでインストール。

npm install --save-dev node-sass sass-loader 

それから、@/assers/scss/*の中に.scssを置きます。(今回は参考までにstyle.scssというのを置く想定で書きます)

続いて、nuxt.config.jsにCSSの読み込みを追記します。

module.exports = { css: [ // プロジェクト内の SASS ファイル { src: '@/assets/scss/style.css', lang: 'scss' } ] } 

SCSSで設定したmixinやvaliableをVueファイルでも使う

下記をインストール(sass-loaderをインストールしてない人はこちらもインストールしてくださいね)

npm install --save-dev nuxt-sass-resources-loader 

nuxt.config.jsに下記を追記します。

module.exports = { modules: [ ['nuxt-sass-resources-loader', [ '@/assets/sass/congig/variable.scss', '@/assets/sass/congig/mixin.scss', ]], ], } 

bulma使う時

Nuxt.jsでframeworkを使う場合、JSの内frameworkだからかbulmaが良いと聞いたので、これをメインに使ってます。

npm i @nuxtjs/bulma --save-dev 

nuxt.config.jsに下記2つを追加

{ modules: [ '@nuxtjs/bulma' ] } 
build: { /* ** You can extend webpack config here */ postcss: { plugins: { 'postcss-cssnext': { features: { customProperties: false } } } }, extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } } 

google tag manager を使う

下記のパッケージをインストール

npm add @nuxtjs/google-tag-manager 

nuxt.config.jsに下記を追記

module.exports = { modules: [ ['@nuxtjs/google-tag-manager', {id: 'GTM-XXXXX'}] ] } 

このとき、GTMは NODE_ENV=production の環境でしか動かないことに注意が必要です。

netlifyでNuxt.jsを利用する

Nuxt.jsには静的ページを書き出すganerate というコマンドがあるのでそれを利用します。

netlifyでは、githubやgitlabのリポジトリと連携して、対象のブランチに変化があった場合に自動デプロイする設定があります。

そこで、ビルドコマンドとして、npm run ganerate を使い、ドメインの直下をdistにすると静的に吐き出されたページで運用ができます。

scrollToTop が効かない

pageごとにscrollToTop: true と設定すれば、ページのTOPが表示されるはずなのですが、これが効かない状況のときは、nuxt.config.js に下記の内容を追記します。

module.exports = { router: { scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { let position = {}; if (to.matched.length < 2) { position = { x: 0, y: 0 } } else if (to.matched.some(r => r.components.default.options.scrollToTop)) { position = { x: 0, y: 0 } } if (to.hash) { position = { selector: to.hash } } return position; } }, }, }; 
Cntlog > contiの記事

副業・フリーランスWebデザイナーが注意している地雷案件の見分け方

副業をしているので、お問い合わせから案件の相談などをいただくのですが、時々あー避けたほうがいいなーと思うような案件の問い合わせがあります。

正直慣れな部分もあるのですが、私が地雷案件の香りがすると思うときの判断材料を本記事でご紹介します。
“副業・フリーランスWebデザイナーが注意している地雷案件の見分け方” の続きを読む

Cntlog > contiの記事

Udemyで学ぶWebデザイナーのスキルアップに役立つおすすめの講座紹介

近年Webデザイナはデザイン以外のスキルも求められる事が増えてきました。
例えば、プログラミングやマーケティングなどです。

これらは、書籍などで学ぶのが難しく、独学でやるにしてもモチベーションの維持とかも大変です。

そんな中で私はUdemyの動画が書籍などに比べて身になりやすかったので好んで利用しています。

“Udemyで学ぶWebデザイナーのスキルアップに役立つおすすめの講座紹介” の続きを読む

Cntlog > contiの記事

積読消化!記憶に残って身につきやすい私の本の読み方

どうもkindleの積読が溜まってきたので,なんとか気軽に読む癖を身に着けようと思い、本を読むスタイルを変えました。

じっくり時間をかけて読むことから、一度サクッと読んでどのくらい身になるかの感触を見てから時間を掛けるか判断するしてます。

これによって、同じ時間を読書の時間にあてていても、読んだことが無い本はどんどん減っていきますし、ほんの読み始めの敷居が下がりインプットの量が増えたのを実感しています。

内容を覚えるために気をつける事

本は読んだだけではよほど記憶力の良い人でないと、すぐに忘れてしまいます。

学生の頃のテスト勉強のときに経験があるかもしれませんが、読んだものを覚えておくには、以下の3つの要素が重要です

  • 強い印象を残す
  • 関連のある事と紐付ける
  • 反復して五感に残す

記憶って溜めてあるだけで、引き出せないと知識は役に立てませんので、覚えるというのは使えるということが大事になってきます。

というわけで、何かに紐づけたりさせると大体が思い出しやすくなりますので本で得る知識にも同じ事をします。

記憶に残せる本の読み方

具体的に私がやってることは下記になります。

  • 目次をざっと読む
  • 見出しと最初の2〜3行を読む
  • そのブロックの最後の2〜3行(結論)を読む
  • 上記で一通り雑に読む
  • 面白かった部分・気になった部分を重点的に再読する
  • 得た知識を実際に使ってみる

この読み方の気に入ってる点は、本の気になってる部分だけ読めるので、時間的なパフォーマンスが高いことです。
デメリットとしては読み漏れが発生するのですが、そもそも全文記憶できないのでそこは結果に重点をおいて割り切っています。

Cntlog > contiの記事

Webデザイナの私が転職を考えたきっかけとタイミング

私は転職を過去3回経験しています。

すべてが転職してよかったわけではなかったのですが、そのまま残っていたら、今の自分はないしもっとひどいことになっていたと思うので、転職はしてよかったなーと思っています。

初めての転職のときってぼんやりと転職したいなーくらいに考えていたのですが、実際に動き出すまでにはモチベーションと時間が結構必要になります。

私の場合、きっかけと市場価値を見て「やばい」と思ったからはじめ転職しました。

本記事では、「転職しようかな?」と考えてる人に、「転職しなきゃ!」「まだいいかな?」の判断ができような考え方をご紹介したいと思います。

“Webデザイナの私が転職を考えたきっかけとタイミング” の続きを読む

Cntlog > contiの記事

WordPressのテーマをアップデートさせない方法

CSSでキャンセルする方法

テーマが古いかどうかは、style.cssに記載のあるバージョンでWordPressが判定しています。
ですので、ここの記述を最新版のテーマより上にしてしまえば、アップデートの通知が来ることはなくなります。

基本的に、style.cssの一番上にVersionの表記があります。

参考までにTwenty SixteenのCSSのキャプチャです

変更前

 /* … Version: 1.3 … */ 

変更後

 /* … Version: 10000.0 … */ 

こんな感じに変更してファイルを保存・上書きすれば大丈夫です。

PHPでキャンセルする方法

テーマファイルの中にあるfunction.phpに下記を追加すれば、アップデートの表示が消えます。

 /////////////////////////////////////// //テーマファイルのアップデートを非通知にする /////////////////////////////////////// remove_action( 'load-update-core.php', 'wp_update_themes' ); add_filter( 'pre_site_transient_update_themes', create_function( '$a', "return null;" ) ); 
Cntlog > contiの記事

Zenlogicから乗り換えるのにオススメのサーバー

2018年6月19日からZenlogicで大規模な障害が起きています。
サーバー会社での障害自体は珍しいものではありませんが、今回は時間がかかりすぎており結構大きな話題になっています。

私もZenlogicで契約していますが、幸い私の使っている部分は今回のサーバー障害の範囲外のようなので、普通に表示されていました。

今回みなさんがzenlogicから乗り換えを考えてるみなさんに似たスペック/価格帯でサーバーの乗り換えが出来るレンタルサーバーをご紹介します。

“Zenlogicから乗り換えるのにオススメのサーバー” の続きを読む

Cntlog > contiの記事

HTMLからPUGに変換するWebサービス(Html2Jadeの代わり)

普段私はコーディングをpugで行っています。
ですが、新規の案件などでHTMLを渡されるときはHTMLからpugに変換する必要がありそういったときはWebサービスのhttp://html2jade.org/を使っていたのですが、2018年07月02日時点でアクセスできなくなってしまったので、急遽別のサービスを探しました。

“HTMLからPUGに変換するWebサービス(Html2Jadeの代わり)” の続きを読む