Java Script」カテゴリーアーカイブ

D3.jsでUTCの0時を取得する方法

Ver.3.xと最新のVer.6.xで違いがあったのでメモ

Ver.6.x

const now = new Date();
const midnight = d3.utcDay.floor(now);

Ver 3.x

const now = new Date();
const midnight = d3.time.day.utc.floor(now);

APIの使用が変わったらしく、最新バージョンでは、d3.time.*は使えない

Please follow and like us:

terser-webpack-pluginを使う

NPMインストール

$ npm install terser-webpack-plugin --save-dev

webpack.config.js

ライブラリの読み込み

const TerserPlugin = require('terser-webpack-plugin');

プラグインの読み込み

module.exports = {
//module.exports = ( env, argv ) => ({
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};
Please follow and like us:

Vueで、Vimeoのプレイヤーを埋め込む方法

Vimeoプレイヤーのインストール

$ npm install -D @vimeo/player

.vueファイル

<template>
    <iframe
        src="https://player.vimeo.com/video/vimeoid"
        width="640"
        height="360"
        frameborder="0"
        allowfullscreen
    ></iframe>
</template>

vimeid部分は任意で指定

<script>
import Player from "@vimeo/player";

export default {
    mounted: function() {
        var iframe = document.querySelector("iframe");
        var player = new Player(iframe);

        player.on("play", function() {
            console.log("Played the video");
        });

        player.on("ended", function() {
            console.log("Ended the video");
        });

        player.getVideoTitle().then(function(title) {
            console.log("title:", title);
        });
    }
};
</script>

モジュールのインポート

import Player from "@vimeo/player";

Vimeoプレイヤーへのアクセス
<iframe>タグからSDK経由でプレイヤーを取得する

var iframe = document.querySelector("iframe");
var player = new Player(iframe);

イベントの設定とメソッド実行

player.on("play", function() {
    console.log("Played the video");
});

player.on("ended", function() {
    console.log("Ended the video");
});

player.getVideoTitle().then(function(title) {
    console.log("title:", title);
});
Please follow and like us:

Nuxt.jsでFirebaseからサインアウトさせる方法

.vueファイル内で

methods: {
    signOut() {
        firebase
            .auth()
            .signOut()
            .then(() => {
                this.$router.push("/login");
                this.$store.commit("/user/setIsLogin", false);
            });
    },
},

firebase.auth().signOut()でサインアウトできる。
上の例では、処理後、

  • サインイン(ログイン)ページに自動遷移
  • Vuexのサインインフラグをfalse

にしている。

Please follow and like us:

Vuetifyのボタンにnuxt-linkをつくる

HTML

<template v-slot:item.actions="{ item }">
    <v-btn :to="`desserts/${item.id}`" nuxt icon>
        <v-icon small>mdi-pencil</v-icon>
    </v-btn>
</template>

解説

:to
<v-btn>に、Vue Routerのリンクをつくるには、:toスロットを使う
上の例では、/dessets/_id.vueへのリンクを生成している。(_idの部分は、${item.id}が自動的に置換される)

nuxt
nuxt-linkを有効にする

icon
icon表示型のボタンを生成する

Please follow and like us:

VuetifyのDataTableの列幅を指定する

DataTableの列幅は、slotで流し込むheadersの中で指定できる。

HTML

<v-data-table :headers="headers" :items="itemlist">

JavaScript

data() {
    return {
        headers: [
            { text: "ColA", value: "cola", width: "10%" },
            { text: "ColB", value: "colb", width: "80%" },
            { text: "ColC", value: "cols", width: "10%" },
        ],
    }
}

ここでは、%で指定しているが、ピクセルでも指定できるらしい。レスポンシブを考えると、%の方が良いかもしれない。

Via! https://sugimotonote.com/2019/03/12/post-1336/

Please follow and like us:

Nuxt.jsでGoogle Analyticsを使う方法

@nuxtjs/google-analytics
https://www.npmjs.com/package/@nuxtjs/google-analytics
というモジュールを使う

google-analyticsのインストール

yarn add --dev @nuxtjs/google-analytics

nuxt.config.jsの設定

以下、追加

export default {
  build: {
    buildModules: ["@nuxtjs/google-analytics"],
    googleAnalytics: {
      id: "UA-12301-2"
    }
  }
}

idは、各自のものに書き換える。

Please follow and like us:

Nuxt.JSで開発・本番の環境変数を切り替える方法(Vercel編)

Nuxt.JSのSPAなコンテンツをVercelで公開するのを前提に、環境変数を設定する方法。callbackのURLを開発環境とProduction(本番)環境で自動的に切り替えるのに便利。

例えば、callbackされるURLを以下のように切り替える場合など

#開発環境
http://localhost:8080/callback
#本番環境
http://foobar.app/callback

dotenvのインストール

開発環境と本番環境で切り替えたい内容は、dotenvというライブラリで管理する。yarnでインストール(npmでもOK)

$ yarn add --dev @nuxtjs/dotenv

dotenvの設定(開発環境)

プロジェクトのルートディレクトリに、.envファイルを作り、開発環境時の環境変数を指定する。本番環境用の値は、後ほど、Vercelの設定画面で設定する。

REDIRECT_URI="http://localhost:8080/callback"

.envファイルを複数作り、環境によって切り替える方法もあるが、Nuxt.jsの公式では、単一の.envファイルの使用を推奨。

.gitignoreに追加

.envで設定した値は、セキュリティー上、公開されない方が良い場合も考えられるので、git管理下には置かない。

#以下、追加
.env

nuxt.config.jsの設定

以下、追加

require("dotenv").config();
const { REDIRECT_URI } = process.env; #使用する環境変数名

#以下は、export default 内に
export default {
  buildModules: ["@nuxtjs/dotenv"],
  env: {
    REDIRECT_URI #使用する環境変数名
  }
}

.vueファイルからの参照

export default {
  data() {
    return {
      redirectURI: process.env.REDIRECT_URI
    };
  }
}

Vercel(本番環境)の設定

Vercelでは、環境変数の値を設定し、build時に自動的に埋め込める機能がある。これを使って、本番環境の値を入れ込む。

設定したいプロジェクトの「Settings」を選ぶ。

画面後半にあるEnvironment Variablesで、環境変数名と値を登録する。なお、登録された値は暗号化されるので、表示&確認することはできないので注意。

次回ビルドされたときに、登録した値に置換される。

参考

https://crieit.net/posts/VercelZeit-Now-Nuxt-js-2020

https://qiita.com/taichi0514/items/3939af222dee21a44413https://blog.ikedaosushi.com/entry/2019/04/17/220317

https://qiita.com/yfujii1127/items/c77bff6f0177b4ff219e

Please follow and like us:

Webpackで静的なファイルをコピーする方法

CopyWebpackPluginを使って、build時に、JSONファイルなどをバンドルせずに、単体でコピーする方法。

インストール方法

$ npm i -S copy-webpack-plugin write-file-webpack-plugin

file-webpack-pluginを入れることで、debug時に、実際のdistディレクトリにも書き出されるようになります。

webpack.config.js

importを追加

const CopyFilePlugin = require("copy-webpack-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");

pluginの項目に追加

new CopyFilePlugin(
    [
        {
            context: "src",
            from: "**/*.json",
            to: path.resolve(__dirname, "dist")
        }
    ],
    { copyUnmodified: true }
),
new WriteFilePlugin()

src以下のJSONファイルをdist以下にコピーするという設定。contextで、対象となるディレクトリ/ファイルの親ディレクトリを指定。

参考にしたサイト

https://qiita.com/pepoipod/items/e41105e8f3afd47dc01c
https://codeday.me/jp/qa/20190515/828253.html

Please follow and like us: