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

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/

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は、各自のものに書き換える。

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

TDで、OPの名前を処理する方法

概要

Pythonで、OPの名前”base1″の数字やベース名を抽出したり、OPの名前を生成する方法。
OPの名前から数字（連番）をスクリプトから取得することで、繰り返し処理などが効率化できます。

サンプルファイル

https://github.com/arkwknsk/touchdesigner/tree/master/tips/op-name

OPの名前から連番を取得する方法

d = op('base1').digits
print(d) # 1

ここでは、digitsを使って、base1の連番を抽出しています。

OPの名前を生成する方法

TDF = op.TDModules.mod.TDFunctions
name = TDF.incrementStringDigits('foo',2)
print(name) #foo2

TDの標準ライブラリのincrementStringDigitsを使います。2個目の引数に、くっ付けたい数字を指定します。

OPの名前から連番前の文字列を取得する方法

b = op('base1').base
print(b) #base

baseを使って、連番前の文字列を抽出します。正規表現を書くより楽です。

TDで、スクリプトからConstant CHOPを書き換える方法

概要

Constant CHOPを参照するのと同じ形で値を変えようとするとエラーになるが、書き換えられる方法。

サンプルファイル

https://github.com/arkwknsk/touchdesigner/tree/master/tips/rewrite-upconstant-chop

Pythonコード

import random
op('constant1').par.value0 = random.uniform(0,100)

ここでは、1constant1を2text1のスクリプトから書き換えています。

chop_op.par.value0の形でアクセスすることで、値を書き換えられます。chop_op[0] = 1234 の形でアクセスするとエラーになります（Read Only）。

実行タイミング

最後に、このやり方で実行のタイミングはどうなるかを検証。結論は、同フレーム内で処理されるので安心です。

3text2のスクリプトから1constant1を書き換え、その変更で4chopexec1が実行されるサンプルを実行します。各実行タイミングでFrame数を出力しています。

import random
print( absTime.frame)
print( op('constant1')[0])
op('constant1').par.value0 = random.uniform(0,100)
print( op('constant1')[0])

4chopexec1で最後のFrame数を出力します。

def onValueChange(channel, sampleIndex, val, prev):
	print( absTime.frame)
	return

3text2のスクリプトから1constant1を書き換え、その変更で4chopexec1が実行されるサンプルを実行します。各実行タイミングでFrame数を出力しています。

実行結果は以下です。

python >>> 
29169
9.247329711914062
54.78358840942383
29169
python >>>

2行目で、最初のFrame数を出力。3行目で、古い値が表示されています。4行目で書き換わった値を1constant1から参照して出力しています。ということは、同スクリプト内で書き換えた値を再び参照できるようです。最後に、4chopexec1の実行タイミングのFrame数を出力しています。最初のFrame数と同じなので、同フレーム内で実行されていることを検証できました。

余談

スクリプトの計算結果から、CHOPのノードで処理するときに便利です。また、スクリプトの計算結果を環境変数にして、各ノードの設定を決めるのにも便利です。

スクリプトから、Table DATを更新して、CHOPに流し込む方法もありますが、ノードの数が増えてしまいます。

TDで、複数プロセスのデータを共有する方法

概要

ローカルPC内もしくはネットワークに接続されたPC間で動くTouchDesignerの複数のプロセスでデータを共有する方法。

TDのプロセスは、シングルスレッドで動作し同期型のため、高負荷の処理に弱く、マルチコアのCPUの性能をフル活用することができません。大まかな機能ごとにプロセスを分けて、同時起動すると、マルチスレッド的で動作し、負荷分散を図ることができます。また、モジュール化を図ったり、複数人の共同作業の分割にお役立ち！

サンプルファイル

https://github.com/arkwknsk/touchdesigner/tree/master/tips/touchin

Touch In / Out

TDには、プロセス間でデータを共有できるノードがいくつか用意されています。

  • Touch In / Out CHOP
  • Touch in / Out DAT
  • Touch in / Out TOP

また、Pro/Commercialライセンスのみで使えるもっと高度なノードもあります。

送信側

今回は、数値・文字列データを送れるDATとCHOPを送受信

送信側に、1Touch Out DATと2Touch Out CHOPを追加します。今回は、absTime.frameの値を送ります。

毎フレームごとの値を連番（シークエンス）で送れるので、後ほど遅延時間を確認できます。

受信側

送信側のTDを起動した状態のままで、別のTDで受信側の.toeファイルを新規作成し、1Touch In DATと2Touch In CHOPを追加します。追加すると、早速、受信側のノードの数字が変わります。

もし、送受信ができない場合は、

  • Touch InのParametersのNetwork Addressがlocalhostになっているかを確認
  • OSもしくはウィルスソフトのファイヤーウォールを一時的に全OFF

を試してみてください

遅延

気になる遅延ですが、DATの方は、デフォルトの設定でローカルPC内で1 frame程度の遅延です。これは、PC自体の処理能力に依存すると思われます。

CHOPの方はデフォルトの設定だと、ローカルPC内でも5 framesのズレが発生します。これは、デフォルトの設定では、通信のドロップのエラー処理のため、キャッシュを貯めているの原因の様です。

CHOPの遅延回避

Touch In CHOPのparameterをこれぐらいにすると、ローカルPC内でも1 frameのズレ程度にできます。

OSCと比較

同じように、異なるプロセスやPCでデータを共有するのに、OSCが一般的に使われますが、Touch In/Outと比べると、

  • それぞれにノードを1つだけ置いて送受信でき、すぐに他のCHOPノードに送れるので開発が楽
  • チャンネルネームも送信できる

という利点があります。ただし、OSCの場合は、TD以外で開発されたアプリと通信ができるので、ここは大きく違います。あくまでも、TD同士での通信に有効と言えます。

使い道

このノード群を使うと、以下のようなことができます。

  • 重たいCHOP系の処理と描画系処理を別な.toeで制作して、マルチスレッドで実行する
  • 制御系toeから、複数のPCで稼働するtoeプロセスを制御して、複数画面同期コンテンツを動かす

その他のノード

Pro/Commercialライセンスだと、さらに共有できるノードが用意されています。こちらは、次回に。