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

Nuxt(Vue)のコンポーネントから環境変数を使う方法

サンプルコード

NUXT_ENV_IMG_URL='https://hoge.com:10000/v1/json'
export default {
    computed: {
        img: () => {
            return (
                process.env.NUXT_ENV_IMG_URL + "foo.png"
            );
        },
    }
}

解説

Nuxtでは、プロジェクトのルートフォルダに置く.envで、環境変数を設定できる。ただし、prefixでNUXT_ENV_を変数名に付けないと、コンポーネントから参照できない。

コンポーネントからは、process.env.NUXT_ENV_*の形で参照できる。

公式ドキュメント
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

Nuxt.jsでBodyタグにクラスを指定する方法

サンプルコード

export default {
    // ...
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: 'something',
        htmlAttrs: {
            lang: 'en'
        },
        bodyAttrs: {
            class: 'hoge-class'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    //...
}

解説

Nuxtでは、HTMLタグやBODYタグが自動生成されてしまうため、classを直接指定出来ないが、nuxt.config.js内でクラスを指定できる。

FullCalendar v5.xで曜日表記を変える方法

FullCalendarが5.xへバージョンアップした際に、いくつかのAPIが廃止されて、新しい設定方法が必要になっている。曜日の表記方法の指定の仕方も、変更されている。

曜日表記の指定方法

曜日を設定するには、dayHeaderFormatという設定項目に、ファンクションを渡す。

dayHeaderFormat: function (date) {
    const days = ["日", "月", "火", "水", "木", "金", "土"];
    return days[date.date.marker.getDay()];
},

daysという配列に、日曜からの表示したい文字列を入れていく。このメソッドに、渡されるdataの中に、該当の日付情報が入ってくるので、その中から何曜日かをdate.date.marker.getDay()から取得し、キーとして配列から文字列を取得し、返すようにする。

Nuxt.jsでFullCalendarを使う方法

コンポーネント

Nuxt(Vue)で、FullCalendarを使うには、vueコンポーネントの<template>内に、コンポーネントとして以下の様に読み込む。

<template>
    <div>
        <FullCalendar :options="config" >
    </div>
</template>

Vuexとの連携

Vuexと連携して、FullCalendarの内容を更新するには、optionsで指定するmodelをcomputedで動的に返す必要がある。

例えば、eventsというstoreの中にスケジュールデータが入っており、getterからスケジュールデータを取得する場合、configOptionsの返値の中のeventsで、storeのgetterを与えるようにする。

    computed: {
        config() {
            return {
                ...this.configOptions,
            };
        },
        configOptions() {
            return {
                firstDay: 1,
                editable: false,
                navLinks: false,
                selectable: false,
                events: this.events,
                weekends: this.weekendsVisible,
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
                initialView: "dayGridMonth",
            }
        }
        //...
        ...mapGetters("events", ["events"]),
   }

詳しくは、こちらのコードを参照
https://github.com/fullcalendar/fullcalendar-example-projects

RasiPiでブラウザを自動起動してキオスク端末にする方法

unclutterをインストール

マウスカーソルを一定時間の無操作後に消すユーティリティ

$ sudo apt install unclutter

設定ファイルのコピー

自動ログインするユーザのホームディレクトリに設定ファイルをコピーする。

$ cp /etc/xdg/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi/

ディレクトリがデフォルトでは無いので、自分でつくる必要あり

設定ファイルの編集

コピーしたautostartファイルを以下の様に編集

#@lxpanel --profile LXDE-pi
#@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
#point-rpi

@xset s off
@xset -dpms
@unclutter -display :0 -idol 3 -root -noevents
@chromium-browser --kiosk --start https://www.google.co.jp

例として、起動後、全画面でhttps://www.google.co.jpを表示するように設定。任意のURLに書き換える。

設定後、再起動

設定内容

autostartファイルの編集内容について

いらない画面表示を起動しないようにコメントアウト
#@lxpanel --profile LXDE-pi
#@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
#point-rpi
画面スリープをオフにする
@xset s off
@xset -dpms
マウスカーソルを一定操作が無かったら消す。
@unclutter -display :0 -idol 3 -root -noevents
ブラウザをキオスクモードで起動
@chromium-browser --kiosk --start https://www.google.co.jp

キオスクモードは、F11が押されても、全画面表示が終了しない

Via! https://gist.github.com/rampfox/085bf3ffb9ff51e114bf7afdf3ced71b

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