GAミント至上主義

Web Monomaniacal Developer.

このブログについて（先頭固定）

【お約束】 投稿内容は個人の見解であり、所属する（していた）組織の公式見解ではありません。

名前：uyamazak（昔いた会社で上司が開発用Linuxサーバーのユーザー名に「yuyamazaki」が長いので勝手に作ってくれた。読み方わからないけどウヤマザク）

高校あたりからWEBサイトをやったり趣味の延長でWEB系を仕事にした感じの人間。

2020年1月から株式会社シニアジョブにジョイン。
まだ開発者の社員は２人、これからの会社なのでインフラからきれいな設計をしたい

アズールレーン@竹敷でモバイルのUI、UX研究中（初嫁ジャベリン）

GitHub: https://github.com/uyamazak/

これまでの主なプロジェクト

続きを読む

TypeScriptでオプション的なオブジェクトをデフォルト値つきでいい感じに扱う

関数の引数や、クラスのコンストラクタとかでオプション系の値をオブジェクトで受け取るときに、いい感じに省略可能にする方法をよく忘れるのでメモ。

interface HogeFunctionOptions {
  optionFoo: string
  optionBar: string
  optionBuzz: string
}

const defaults = {
  optionFoo: 'default value',
  optionBar: 'default value',
  optionBuzz: 'default value',
}

function hogeFunction(options = {} as Partial<HogeFunctionOptions>) {
  const {
    optionFoo,
    optionBar,
    optionBuzz
  } = { ...defaults, ...options }
  // continue
}

ポイントは３つ

組み込みのPartialで省略可能にする

TypeScript: Handbook - Utility Types

スプレッド構文で上書き

キーが重複する場合は後ろの値（↓の例だとoptions）で上書きされる

{ ...defaults, ...options }

f:id:uyamazak:20201106142921p:plain

スプレッド構文 - JavaScript | MDN

分割代入で必要なものだけ取り出し

オプションのオブジェクトのまま使うより明示的で好み

const {
    optionFoo,
    optionBar,
    optionBuzz
}

分割代入 - JavaScript | MDN


速習 TypeScript 第2版 速習シリーズ

速習 TypeScript 第2版 速習シリーズ

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

  • 作者:Boris Cherny
  • 発売日: 2020/03/16
  • メディア: 単行本（ソフトカバー）

ブラウザだけでVtuber用動画をつくるツールをKonvaとVueでつくってる

動画サンプル

https://youtu.be/3t2l1OH00lU
youtu.be
声はまだない。

作ってるやつ（スマホ非対応）

uyamazak.github.io

使い方

STARTしていろんな操作して録画、STOPすると出てくるDOWNLOADボタンで落とせます。UIまじで並べただけ。

経緯

架空のVtuberを題材とした漫画を描くというのでツッコんでるうちにこうなった。声はまだない。


（断じてLive2Dはできない）

最初はJavaScriptで画像を指定した座標と時間で表示する紙芝居作るかぁと思いました。

でも、どうやらCanvasだと動画まで生成できることを知った。すごい。

MediaRecorder APIでCanvasを録画してみる | blog.kwst.site

画像の座標とかはVuetifyのSlidersでやるかぁと思いました。
vuetifyjs.com

リリースされたVue3使いたかったけどVuetifyや周辺がまだまだっぽいので2を使う。

うーんでもCanvasの操作は面倒だ、と思っていたらKonvaというライブラリがあり、さらにVue用の公式ライブラリもあるらしい。

konvajs.org

konvajs.org

使ってる技術

Canvas周りはKonva、データ周りはVue、UIはVuetify、録画にブラウザの」MediaRecorder API。
ブラウザだけでどこまでVtuber動画作成ツールを作れるかの技術検証でもある。

詳細はソース
GitHub - uyamazak/marika_kitada: 架空のVtuber、北田まりかの動画をつくるためのWEBアプリ

公開先もGitHub Pages。サーバーサイド不要のクソアプリに最適でした。

ハマりどころ

録画できるcanvasは一つだけ

HTMLを見る感じKonvaはレイヤーごとにcanvasを作るようなので、v-layerは一つだけにしました。
それぞれ画像にして一つのcanvasにすることもできそうだけど録画は厳しそうだし、やってみると1レイヤーでも大丈夫そう。

vue-konvaだと生成されるcanvasにrefやidを貼れない

普通にKonvaを使うと自分で書いたcanvasにidを振って使うけど、vue-konvaだと自動で生成され手出しできなかった。
なんかいい方法ありそうだけど、上述の理由からページ上に一つしかcanvasはないため一旦下記で取得。

this.stream = document.getElementsByTagName('canvas')[0].captureStream()

動画はwebmでしか書き出せない（MacやChromeOSのChromeの場合）

なのでTwitterにはそのままアップできない。変換ツールはいろいろあるので問題なさそう。
（Windowsだとできるのかな？）

filters()するとPCは大丈夫だけどスマホだと画像が消える

原因は未調査。重い処理だからかな？

フィルターデフォルトでいろいろあって遊べます。
Konva Namespace: Filters


Noise
f:id:uyamazak:20200928181321p:plain

Invert
f:id:uyamazak:20200928181217p:plain

Pixelate
f:id:uyamazak:20200928182935p:plain

白目の後ろが透けないようにおいた白い資格にfilter適応するの忘れてるのに気づいた。

これから

声まじでどうするの。
できたらブラウザでいっしょに動画に収めたい。
ブラウザでできることだけ、を貫く。
背景の株価とかも変動させたいなぁ。

北田まりかに興味がある人は
八神秋一＠八木崎銀座 (@yagami_shuichi) | Twitter
と
北田まりか (@marika_kitada) | Twitter


技術的に興味ある人はGitHubやTwitterで私になんかください。

このブログについて（先頭固定）

【お約束】 投稿内容は個人の見解であり、所属する（していた）組織の公式見解ではありません。

名前：uyamazak（昔いた会社で上司が開発用Linuxサーバーのユーザー名に「yuyamazaki」が長いので勝手に作ってくれた。読み方わからないけどウヤマザク）

高校あたりからWEBサイトをやったり趣味の延長でWEB系を仕事にした感じの人間。

2020年1月から株式会社シニアジョブにジョイン。
まだ開発者の社員は２人、これからの会社なのでインフラからきれいな設計をしたい

アズールレーン@竹敷でモバイルのUI、UX研究中（初嫁ジャベリン）

GitHub: https://github.com/uyamazak/

これまでの主なプロジェクト

続きを読む