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

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:
error
fb-share-icon
Tweet
fb-share-icon

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/Vercel–Zeit-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:
error
fb-share-icon
Tweet
fb-share-icon

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:
error
fb-share-icon
Tweet
fb-share-icon

TypeScriptでlog4jsを使う方法

インストール

$ npm i -S log4js @types/log4js

使い方

コンソールとファイルに、ログを同時出力。

import { configure, getLogger } from "log4js";

configure({
  appenders: {
    console: {
      type: "console"
    },
    logfile: { type: "file", filename: "log/app.log" }
  },
  categories: { default: { appenders: ["console", "logfile"], level: "error" } }
});

const logger = getLogger();

logger.level = "debug";
logger.debug("Some debug messages");
logger.error("aha!");

出力結果

[2019-10-20T10:58:43.835] [DEBUG] default - Some debug messages
[2019-10-20T10:58:43.839] [ERROR] default - aha!

設定を変えると、ログレベルごとに出力先を変えたり、ログの出力のテンプレート（レイアウト）を変更できたりする。

log4jsのドキュメント
https://log4js-node.github.io/log4js-node/

日付の形式について
https://www.npmjs.com/package/date-format

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

TypeScript + node.js + VisualStudioCodeの開発環境

node.jsでアプリケーションをつくるのに、TypeScriptで書いて、Visual Studio Codeを開発環境とする方法を探る

参考になったサイト

https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49
https://qiita.com/kurogelee/items/cf7954f6c23294600ef2
https://github.com/TypeStrong/ts-node/issues/46#issuecomment-437758378

ここのボイラープレートをテンプレートにすると便利です。必要なnpmパッケージ、設定ファイルがはいっています。git cloneなどでローカルに。
https://github.com/notakaos/typescript-node-base

package.json

{
  "name": "typescript-node-base",
  "keywords": [],

  "version": "0.1.0",
  "main": "dist/index.js",
  "scripts": {
    "dev": "ts-node ./src/index.ts",
    "dev:watch": "ts-node-dev --respawn src/index.ts",
    "clean": "rimraf dist/*",
    "tsc": "tsc",
    "build": "npm-run-all clean tsc",
    "start": "node ."
  },
  "keywords": [],
  "author": "YOUR NAME",
  "license": "ISC",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "@types/node": "^12.7.4",
    "npm-run-all": "^4.1.5",
    "rimraf": "^2.7.1",
    "ts-node": "^8.3.0",
    "ts-node-dev": "^1.0.0-pre.42",
    "typescript": "^3.6.2"
  }
}

L9: --respawnを指定することで、サーバ型ではないスクリプトでも、実行後終了せずに待機させ、更新→再読み込み→再起動が可能に。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

sourceMapは有効にしましょう。Debugが効くようになります。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts-node[debug]",
      "type": "node",
      "request": "launch",
      "args": ["${workspaceFolder}/src/index.ts"],
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
      "sourceMaps": true,
      "cwd": "${workspaceRoot}",
      "restart": true,
      "protocol": "inspector"
    }
  ]
}

L8: 任意のファイルを指定

https://github.com/TypeStrong/ts-node/issues/46#issuecomment-437758378
の投稿が参考になりました。

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

nvm-windowsでnode.jsをインストールする

コマンドプロンプトか、PowerShellから

インストール可能なバージョンを表示する

 > nvm list available

実行結果

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   12.10.0    |   10.16.3    |   0.12.18    |   0.11.16    |
|    12.9.1    |   10.16.2    |   0.12.17    |   0.11.15    |
|    12.9.0    |   10.16.1    |   0.12.16    |   0.11.14    |
|    12.8.1    |   10.16.0    |   0.12.15    |   0.11.13    |
|    12.8.0    |   10.15.3    |   0.12.14    |   0.11.12    |
|    12.7.0    |   10.15.2    |   0.12.13    |   0.11.11    |
|    12.6.0    |   10.15.1    |   0.12.12    |   0.11.10    |
|    12.5.0    |   10.15.0    |   0.12.11    |    0.11.9    |
|    12.4.0    |   10.14.2    |   0.12.10    |    0.11.8    |
|    12.3.1    |   10.14.1    |    0.12.9    |    0.11.7    |
|    12.3.0    |   10.14.0    |    0.12.8    |    0.11.6    |
|    12.2.0    |   10.13.0    |    0.12.7    |    0.11.5    |
|    12.1.0    |    8.16.1    |    0.12.6    |    0.11.4    |
|    12.0.0    |    8.16.0    |    0.12.5    |    0.11.3    |
|   11.15.0    |    8.15.1    |    0.12.4    |    0.11.2    |
|   11.14.0    |    8.15.0    |    0.12.3    |    0.11.1    |
|   11.13.0    |    8.14.1    |    0.12.2    |    0.11.0    |
|   11.12.0    |    8.14.0    |    0.12.1    |    0.9.12    |
|   11.11.0    |    8.13.0    |    0.12.0    |    0.9.11    |
|   11.10.1    |    8.12.0    |   0.10.48    |    0.9.10    |

This is a partial list. For a complete list, visit https://nodejs.org/download/release

任意のバージョンをインストール

> nvm install 10.16.3

インストールされているバージョンを表示

> nvm ls

使用するバージョンを設定

 > nvm use 10.16.3

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

log4jsのConfigurationの書き方がv2で変更になった

Node.js環境でログ出力をするlog4jsのConfigurationがv1からv2以降で大きく変わった。

v2.0x以降の記述方法

{
    appenders: {
        default: {
            type: 'file',
            "filename": "log/server.log",
            "maxLogSize":104857600,
            "layout": {
                "type": "pattern",
                "pattern": "%d [%p] %m"}
        }

    },
    categories: { default: { appenders: ['default'], level: 'debug' } }
}

古い記述方法だと、must have property “appenders” of type objectというエラーが発生する。
詳細は、Migrating from log4js versions older than 2.x

Please follow and like us:
error
fb-share-icon

Tweet
fb-share-icon

node.jsで色解析

コメントを残す

node.jsで色解析できるnpmパッケージ

palette
https://www.npmjs.com/package/palette

color-thief
https://www.npmjs.com/package/color-thief

いずれも、canvasを利用して、色取得をさせる。color-thiefの方が画像ファイル→canvasへの変換もラップしてくれている。また、color-thifは、ドメナントカラーも返してくる。

Please follow and like us:
error
fb-share-icon

Tweet
fb-share-icon

node.jsでunderscore.jsを使う

コメントを残す

Java Scriptで配列、オブジェクトを扱いを便利にするunderscore.js。node.jsでも使える。

npmでインストール

$ npm install --save underscore

スクリプトで宣言、

var __ = require('underscore');

ここで気を付けなければならないのが、予約語の関係で、変数（インスタンス）名はブラウザで使う時のように、”_”とはせず、”__”(_を2個)にすること。

Via! node.jsでunderscore.jsを使う | okame-log

Please follow and like us:
error
fb-share-icon

Tweet
fb-share-icon