親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

2018-06-21から1日間の記事一覧

SPAサイトがGoogleにインデックスされない時の解決法

今回はSPAサイトがGoogleのSearch Consoleで「Fetch as Google」をしてもレンダリングされず、サイトがインデックスされない時の対応方法です。 Googleのbotがサイトのクロール時に使うブラウザは、Javascriptも動作するために、SPAサイトでも(ページの表示…

Vue.jsのv-bind:classで動的なクラス割り当て

Vue.jsで動的(条件を満たす場合)にクラスを割り当てる方法として、v-bind:classがあります(v-bindは省略可能)。 動的に割り当てるパターンとしては色々考えられますよね。 単純にある条件を満たした時にクラスを割り当てるパターン、条件Aを満たした時にクラ…

Vue.jsでScroll Depthが計測されない時の対処法

サイト分析において、ヘッダー内での読了率(つまりどこまで読まれたか)を分析することは重要ですよね。 そんな時に便利なライブラリはたくさんあるのですが、今回はその中の1つ、Scroll Depthについて、vue.js内で使用して上手く計測されない場合の対処法に…

Vue.jsのプロジェクトでGoogleAnalyticsの設置

プロジェクトをデプロイした後は、アナリティクスを設置してサイト分析をしますよね。 ここではそのための方法を2つほどご紹介したいと思います。まず1つ目は、vue-analyticsというモジュールを組み込む方法です。まずはモジュールをインストールしましょう…

Intellijでプロジェクトを開く時は、Import Project

Intellijで新規でプロジェクトを作る時ではなく、既存のソースを初めて開く時の話です。 Intellijを立ち上げた時にCreate New Project、Import Project、Open…とメニューが出て来ますが、フレームワークを使う時はImport Projectを選択しましょう。Openでも…

vue.jsで全ページ共通コンポーネントのまとめ方

コンポーネントでヘッダーやフッターなど、どのページでも共通となる部分をまとめることってありますよね。 Vue.jsではその時、どのようにまとめるのが良いのでしょうか。 全ページで毎回コンポーネントを書く方法 まずは全ページで毎回コンポーネントを書く…

vue.jsでheadの要素を設定する時はvue-headが便利!

SPAでサイトの実装をすべてJavascriptで行う場合、headの要素までもJavascriptで行わなければいけないですよね。 要素を挿入するだけなのでやり方は色々ありますが、やはりライブラリなどを使用して簡単に実装したいところ。 そこで、vue.jsを使用している場…

ELBでNginxを利用した場合の完全SSL化

AWSのAWS Certificate Manager (ACM)をELBに適用し、SSLを強制的に適用させたい場合の対応方法です。 ELBではリスナーの設定で、ポート80(http)でアクセスされた場合もポート443(https)でアクセスされた場合もポート80でEC2に転送される設定になっていること…