Vue.js にGoogle Analyticsのイベントトラッキングを設定する

やりたいこと

Vue.jsで、ボタンクリックイベントのトラッキングをしたい。

方法

vue-analytics を使うと簡単にいけた

github.com

実装方法は公式に書いてある通りなんだけど、一応下記の要領で実装した。

Setting

app.js

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import router from '@js/router/index'

Vue.use(VueAnalytics, {
  id: UA-xxxxxxxxx,
  router
})

ボタンにトラッキングを仕込む

component.js

<button
  class="btn"
  :v-ga="$ga.event('category', 'action', 'label', 'value')"
  @click="doSomething()">
  this is a button
</button>

実装後にログ送信を確認するには、chrome extensionのgoogle tag assitantを使うと簡単に調べることができる。

chrome.google.com

2017年に読んだ本たち

2017年に読了した本*1

増補改訂版Java言語で学ぶデザインパターン入門

増補改訂版Java言語で学ぶデザインパターン入門

古典。今更感はあるが、読みながら実際に全部のデザインパターンを自分で書いたりしてみた。

Soft Skills: The Software Developer's Life Manual

Soft Skills: The Software Developer's Life Manual

翻訳版では無く洋書の方。洋書を全部読むのは辛くかなり時間がかかったが、非常にためになった。 エンジニアは技術ブログを書いて、エンジニアコミュニティに入り、ゲームは辞めて、健康に気を使え!という感じの内容。ごもっとも。

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

10月から実務でフロントエンドを担当していたのでフロントエンドパフォーマンスを調べるために買った。

超速!  Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

同上。

サピエンス全史(上)文明の構造と人類の幸福

サピエンス全史(上)文明の構造と人類の幸福

人類の足跡をたどる。教養としての読書。

ヒトラーの経済政策-世界恐慌からの奇跡的な復興 (祥伝社新書151)

ヒトラーの経済政策-世界恐慌からの奇跡的な復興 (祥伝社新書151)

同僚からの勧めで読む。

フェルマーの最終定理 (新潮文庫)

フェルマーの最終定理 (新潮文庫)

何年も積ん読していた本。やっと読んだ。 数学はそもそも好きだし、何より読み物として面白かった。

プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)

プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)

文字コードについて案外ふんわりとした理解だったので購入。 文字コードについて、とても詳しくかかれている。Webエンジニア必読だと思う。

完全独習 ベイズ統計学入門

完全独習 ベイズ統計学入門

興味本位で買った本。 ベイズ統計についてわかったようで、本質はよくわからないけど、ちょっとわかった気になれた。

マイクロサービスアーキテクチャ

マイクロサービスアーキテクチャ

一時期話題になったマイクロサービスについて体系的にまとめられている本。 結局どうすればいいの?実際実装どうすればいいの?って思うところはある(実践的な本ではない、あくまで理論の解説)。 マイクロサービスを理解するために良い本。

初めての自動テスト ―Webシステムのための自動テスト基礎

初めての自動テスト ―Webシステムのための自動テスト基礎

フロントエンドの最新の自動テストについて知りたかったが、ちょっとこれは初級者向けな内容だったかな。 少し物足りなかった。自動テスト自体が本当に初めてという人向け。

愛を伝える5つの方法

愛を伝える5つの方法

対人関係が苦手なので、社会性を身につけるために読んだ。 パートナーと円満にコミュニケーションをする方法がかかれている。

GO WILD 野生の体を取り戻せ!  科学が教えるトレイルラン、低炭水化物食、マインドフルネス

GO WILD 野生の体を取り戻せ! 科学が教えるトレイルラン、低炭水化物食、マインドフルネス

炭水化物は摂取せずにトレイルランをしろ!

買ったけどまだ全部読んでない

言語が違えば、世界も違って見えるわけ

言語が違えば、世界も違って見えるわけ

sed & awkプログラミング 改訂版 (A nutshell handbook)

sed & awkプログラミング 改訂版 (A nutshell handbook)

PythonによるWebスクレイピング

PythonによるWebスクレイピング

GitHubツールビルディング ―GitHub APIを活用したワークフローの拡張とカスタマイズ

GitHubツールビルディング ―GitHub APIを活用したワークフローの拡張とカスタマイズ

統計クイックリファレンス 第2版

統計クイックリファレンス 第2版

プログラミングのための線形代数

プログラミングのための線形代数

集合知プログラミング

集合知プログラミング

深層学習 (機械学習プロフェッショナルシリーズ)

深層学習 (機械学習プロフェッショナルシリーズ)

虐殺器官 (ハヤカワ文庫JA)

虐殺器官 (ハヤカワ文庫JA)

UML モデリングのエッセンス 第3版 (Object Oriented SELECTION)

UML モデリングのエッセンス 第3版 (Object Oriented SELECTION)

感想

月1.2冊ペース。思ったより本を読んでない年だった。来年はもっと読書をしよう

*1:マンガは除く

error while loading shared libraries: libfontconfig.so.1

環境

CentOS release 6.5

事象

karmaでPhantomJSを起動しようとするとエラーでこけた。エラーは以下。

ERROR [launcher]: Cannot start PhantomJS
    xx/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs: error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory

解決

fontconfig をインストールすることで正常に起動するようになった。

$ yum -y install fontconfig-devel
15 12 2017 15:16:49.997:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
15 12 2017 15:16:50.035:INFO [launcher]: Starting browser PhantomJS

vue-cliのwebpack productionビルド時にconsoleログ出力を削除したい

vue-cliでwebpackでproductionビルドを行う際に、以下のように

UglifyJsPluginにcompress.drop_console オプションを追加するとconsole.log, console.errorなどのconsole.xのコードを削除できる

build/webpack.prod.conf.js

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true // added
      },
      sourceMap: true
    }),

オプション一覧はこちらを参照

https://github.com/mishoo/UglifyJS2/tree/harmony#minify-options

moment.jsでマシン依存しないサーバ時間を扱いたい

moment.jsを扱っていて、クライアントサイドアプリケーションでマシン依存しない時間を扱いたい場合の方法。

サーバからタイムスタンプを予め取得し、マシン時間との差分を保持しておく。 以降はその差分を計算することで正確な現在時刻を求める。

// timestampを返すAPI
axios.get('/timestamp').then(timestamp => {
    serverTimeOffset = moment(timestamp, 'X').diff(moment(), 'seconds')
})
let currentTime = moment()
currentTime.add(serverTimeOffset, 'seconds')

nodejsで簡単なAPIモックサーバを作る

フロントエンド開発をしていて、API実装前にさらっと動きを確認したいときなど、モックAPIがあると便利。

json-serverを使っていたけど、意外と細かいところに手が届かなかった*1の自分用に前でモックAPIのテンプレートを作った。

source

// api mock server
const fs = require('fs')
const https = require('https')
const express = require('express')
const bodyParser = require('body-parser')
const server = express()
const log4js = require('log4js')
const cors = require('cors')
const port = 8081

// allow cors
server.use(cors())
// logging
log4js.configure ({
  appenders: {
    access: { type: 'console' }
  },
  categories: {
    default: { appenders: ['access'], level: 'info' }
  }
})
const accessLogger = log4js.getLogger('access')
server.use(log4js.connectLogger(accessLogger))

// ssl support
const sslOptions = {
  key: fs.readFileSync('cert/server.key'),
  cert: fs.readFileSync('cert/server.crt')
}

const readJson = (filePath) => {
  return new Promise(resolve => {
    fs.readFile(filePath, (err, data) => {
      resolve(JSON.parse(data))
    })
  })
}

server.get ('/test', (req, res) => {
  readJson('db/test.json').then(data => { res.json(data) })
})

https.createServer (sslOptions, server).listen(port, () => {
  console.log('api server started on port ' + port)
})

github.com

使用しているツール

github.com github.com github.com

*1:RESTでない独自な実装してるものとか...

error: [vuex] vuex requires a promise polyfill in this browser

現象

Vuexで構築したアプリケーションをIE11で動かすとエラーになった。

error:  [vuex] vuex requires a promise polyfill in this browser

promise がIEだと使えないようだ。

解決

babel-polyfill を入れる

babeljs.io

npm install --save-dev babel-polyfill

Vuexのbuild設定を変更

build/webpack.base.conf.js

module.exports = {
  entry: {
+    app: ['babel-polyfill', './src/js/app.ts']
-    app: './src/js/app.ts'
 },

it works!