AviUtlでグラフを作成しよう！
２日連続投稿です。
AviUtlの有能（？）スクリプト郡のaviutl_browserを拡張して使おう！というネタです。
aviutl_browserは、AviUtl上でブラウザがの画面を表示してくれるものです。
デフォルトでSVGやMarkdown等を表示できます。解説系動画の画面作成に使えそうですね！
使ってる人は確認できていませんが…
前回に続きこのaviutl_browserも機能拡張ができます。HTMLとJavaScriptがかければ
大体のものは作れます。できたものが以下の動画になります。（ボイロ注意）
https://youtu.be/YlwkukwVLoo
ということで…グラフを作成していこうと思います。
今回、使うライブラリは以下になります。
https://scrapbox.io/files/6396b87a44f1dc001d446f81.png
選んだ理由は、データの書く量が少なくなりそうだからです。あとMITLicence！！！
ということで、まずスクリプトの中身を見ましょう。
デフォルトで付属しているMarkdownの中身を真似しただけです。
code:Lua
-- 拡張編集の GUI 上で入力されたテキストは Shift_JIS の駄目文字への対策が行われるが、
-- そもそも文字列をダブルクォートで括っていない場合にはゴミになるので除去しておく
--track0:幅,1,4000,1600,1
--track1:高さ,1,4000,900,1
--track2:文字,1,200,16,1
--track3:tabid,0,20,0,1
--check0:DevTools,0
-- トラックバーで指定された大きさを元に画像サイズを決める
-- 設定によるサイズ上限もあるので、それを超えないようにする
local max_w, max_h = obj.getinfo("image_max")
local w = math.min(max_w, obj.track0)
local h = math.min(max_h, obj.track1)
-- 空の画像を用意する
obj.setoption("drawtarget", "tempbuffer", w, h)
obj.load("tempbuffer")
if Jscode == nil then
return
end
-- ブラウザーを起動し contents フォルダー内の JsGrafファルダのndex.html を表示用データとして読み込む
-- ここではJsonのテキストとデフォルトフォントサイズと更新フラグを渡しています。
local ok, ret require("browser").execute({
dir = "JsGraf", -- フォルダ名
tabid = obj.track3, -- ブラウザのタブid
param = "{\"obj\": {" .. Jscode .. "},\"Scale\": " .. obj.track2 .. ",\"flag\":" .. obj.frame .."}" ,
-- index.htmlに渡すパラメータ
dev = obj.check0, -- デバッグ用
});
次はindex.htmlの中身！
code:html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
//リセット用
html,
body {
margin: 0;
padding: 0;
}
//画面更新の検出のための一番左上のピクセルに余計なものを入れないためにマージンを1px取る
body {
margin-top: 1px;
overflow: hidden;
}
//画面サイズに合せるためにコンテナを用意
position: relative;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
//画面サイズいっぱいに表示するため
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="Container">
//キャンバスを準備
<canvas id="myChart"></canvas>
</div>
//chart.jsを読み込み
<script src="js/chart.js"></script>
<script>
code:JavaScript
//キャンバスのデータを入れるために準備
let myChart;
//paramsにはAviUtlから送られたデータが入っている
function render(params) {
if (params.param == undefined) {
return;
}
//Jsonをオブジェクトに変換
let obj;
try {
obj = JSON.parse(params.param);
console.log(obj);
} catch (e) {
console.error(e);
return Promise.reject(e);
}
let pro;
//更新フラグが「0」で
//myChartがundefinedでない時キャンバスのデータを削除
if (obj"flag" == 0 && myChart != undefined) { myChart.destroy();
}
//非同期処理
return (pro = new Promise((resolve, reject) => {
//キャンバスを取得
const ctx = document.getElementById("myChart");
//デフォルトフォントサイズを設定
Chart.defaults.font.size = obj"Scale" + 0; //キャンバスにチャートを生成
myChart = new Chart(ctx, obj"obj"); console.log(myChart);
//エラーがなければ処理成功
resolve("");
}));
}
//render関数を呼び出す
AviUtlBrowser.registerRenderer(render);
code:Html
</script>
</body>
</html>
以上の仕組みを使ってAviUtl上でグラフを表示することができました！やったね！
感想！
JavaScriptわっかんねー！！！！！
こだわったグラフ作るとそれなり書く必要ありましたね。
Jsonを書くときはVSCodeとFix JSON拡張機能必須です。
調べてて思ったこと
3Dモデルもbrowserで表示させれば面白いんじゃね？