投稿者「araken」のアーカイブ

RasPi4のGPUを有効にする

RasPiのGPUを有効にする方法。
インストール初期状態のRasPiはGPUが有効になっていないため、ブラウザベースでも10FPSぐらいしか出ない。

raspi-config

RasPiの設定画面を開く

$ sudo raspi-config

　”6 Advanced Options”を選択

“A2 GL Driver”を選択

デフォルトでは、Legacyが選択されているので、G2 GL (Fake KMS) OpenGL desktop driver with fake KMSを選択。

Chromiumで設定を確認

GPUが有効になって、アクセレーションが有効になっているかは、Chromiumから確認できる。以下のURLを開くと、設定状況が表示される

chrome://gpu/

nodist環境にて、npmでインストールできずに、エラーが出る

Windows環境にて、nodistでnode.jsを管理している際に、npmのインストールが失敗してエラーが出るときの対処方法

エラー内容

$ nodist npm 6.14.10
npm 6.14.10

$ npm -v
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'C:\Program Files (x86)\Nodist\npmv\6.14.10\bin\npm-cli.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15    5)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.    .js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

解決方法

ダウンロード&インストールに失敗しているようなので、nodistのnpmの展開先を削除する。

各バージョンのnpmのインストール先は、こちら
C:\Program Files (x86)\Nodist\npmv

エラーが出ていて、インストールしたいバージョンを削除する。

再度、npmをnodist経由でインストールする

$ nodist npm 6.14.10

もしくは、

$ nodist npm match

正常にインストールされていると、

$ npm -v
6.14.10

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.*は使えない

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()],
  },
};

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);
});

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

にしている。

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表示型のボタンを生成する