node.jsでjsonファイルの読み込む方法を２つメモ
const json = require('../hoge.json');
この方法だと初回に１度読み込むだけなので、頻繁にjsonを書き換える場合は更新が反映されない。定数や設定ファイルに向いてる。
let json = JSON.parse(
fs.readFileSync(`${full_path}/hoge.json`, 'utf8')
);
この方法で関数の中で都度読み込んであげると、頻繁に書き込むするjsonも反映される
外部のサーバからGETでjsonを取ってくるときとかに使います。
yarn add request でモジュールを追加
const request = require("request");
request.get(
{
url:'https://xxx.com/api',
qs: {
key:'12345'
}
},
(error, response, body) => {
console.log(body);
}
);
こんにちは、フロントエンドのフレームワークを使っていたりすると設定したページタイトルがきちんとアナリティクスに送られているのか気になりますよね？
クローム拡張を使って簡単にチェックしましょう。
Tag assistant (by google)
https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk
追加したツールバーにスマイル君が横になった荷札みたいなアイコンが出てきます。
← これ
chromeに追加したら目的のサイトに移動
↓
緑色か青色になっていることを確認（なっていなければそもそもの計測タグまたはタグマネージャタグになにか不具合が発生している可能性大）
↓
Enable をクリックして有効にする
↓
以下gif参照（ポインタでURLバーを指してるところが始まりです）
google tag assistantの詳細はこちら↓
Tag Assistant Recordings を使用する
ライブラリを追加
yarn add ismobilejs
テンプレートで出し分けしたい場合
<template>
<div v-if="isMobile.phone">
<div>モバイルで表示</div>
</div>
</template>
import isMobile from "ismobilejs";
export default {
data:()=>{
isMobile
}
}
ライブラリを追加
yarn add vue-mq
テンプレートで出し分けしたい場合
<template>
<div v-if="$mq==='sp'">
<div>モバイルで表示</div>
</div>
</template>
<script>
import Vue from "vue";
import VueMq from "vue-mq";
const breakpoints = {
sp: 400,
pc: 1024
};
Vue.use(VueMq, { breakpoints });
</script>
Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。
Vue.use(VueScrollTo, {
offset: -80 //headerの高さの分
})
mounted () {
const hash = this.$route.hash
if (hash && hash.match(/^#.+$/)) {
this.$scrollTo(hash)
}
}
setTimeout()してみたら動きました。
mounted() {
setTimeout(this.scroll, 300);
},
methods: {
scroll() {
const hash = this.$route.hash;
if (hash && hash.match(/^#.+$/)) {
this.$scrollTo(hash);
}
}
}