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

ある条件を満たした時にクラスを割り当てる方法 ある条件を満たした時にクラスを複数割り当てる方法 ある条件Aを満たした時にクラスAを割り当て、ある条件Bを満たした時にクラスBを割り当てるなど、複数のクラスを割り当てる方法 三項演算子で条件次第で別々…

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

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

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

全ページで毎回コンポーネントを書く方法 共通コンポーネントをrouterの外に出す方法 おまけ 複数のデザイン構成のサイトを作る場合 コンポーネントでヘッダーやフッターなど、どのページでも共通となる部分をまとめることってありますよね。 Vue.jsではその…

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

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