AREA

創作ログ

(11/13)VRChat・VTuber動向まとめログ1【 #一日一V】

お久しぶりです。三毛猫です
書いてたら記事が途中でぶっ飛んだので、今回は軽めにすぐ書き切ろうと思います…


突然ですが、一日一Vと称して、VRChatとVTuber関連で最近起きたことの記録を残そうと思います。

直近だと登録者数15万の企業VTuberの転生騒ぎや、
少し前はVRchatで斬首されたユーザーの実際の体調に異変が起きたことなど
センセーショナルな話題もありますが、初回なので明るい話題で行きます。
だって下手に語って怒られたくないし。

今日のVRChat: ジョイマン（ﾅﾅﾅﾅｰの方）大量発生

きっかけは配信プラットフォーム「SHOWROOM」で、誰でもジョイマンになって配信できるようになったことでした。

また３Dモデルが配布されたため、VRChatの住民が次々とジョイマンになっていきました。


しかも無駄に芸が細かい。

こちらはだれでもジョイマンになれるワールド。

増えすぎたため(?)早速葬られてしまうジョイマン。

また「ドレスコードはジョイマンであること」のジョイマンアバター交流会も早速開催されていました。


バーチャルジョイマン受肉、楽しそう。
レッツエンジョイマン…

今日のVTuber: 名取さなちゃん登録者数10万＆記念に「惑星ループ」歌ってみた

これは今日ではありませんが、良いと思ったので載せます。


www.youtube.com

そしてエモいのが、原曲では「宇宙（そら）」の部分が「病室（そら）」となっているところ。
f:id:hkarea:20181114001942p:plain
名取さなちゃんは「バーチャルサナトリウム」から配信していると語っており、
VTuberとリスナーの間の近くて遠い距離感、いわゆるVTuberらしさをを効果的に使ってくるような印象を受けます。

また、さなちゃん関連では他にも気になる点が。
Vティークなどの発言からサナトリウムからは出られないらしいことが分かっており、
本来の名取さなちゃんはナースではなくナースに憧れた患者であることを示唆するかのような動画も上がっています。
www.youtube.com
ここでツイッター開設初期のツイートがつながったり、


同じ医療系VTuberである薬袋カルテが過去から行った配信、
「白紙のカルテ」内で名取さなちゃんがしたコメントと連動しているようにも見えます。
これは”過去からの配信”なので、時系列的に二人ともまだVTuberやナースではありません。
f:id:hkarea:20181114004337p:plain
【LIVE録画】白紙のカルテ - YouTube


動画も表現形態の一つであり創作物なので
個人勢は特に、作者の意向がはっきりと現れるような気がしています。


さて、今日はこんな感じで終わります。
毎日はできるか分かりませんが、とりあえずなんとなく続けてみようと思います。

おまけ


今日も千洋ちゃんはかわいかった。

【GitHub Pages】GitHubでHTMLファイルをウェブサイトとして公開する【訂正版】

GitHub HTML ProjectAbyss Vtuber

GitHub Pagesで創作アイドルありえるちゃんのサイトを作ったので、
手順をシェアしておきます。
f:id:hkarea:20180508214731j:plain

出来上がったサイトがこちら。
nekoarea.github.io

GitHub Pagesとは？

GitHubのレポジトリ内容をサイトとして公開できるサービスです。
GitHubアカウントがあればサーバーを立てずに軽めのサイトが作れます。

ちなみに、Javascriptが動くのでJqueryも入れられました。

GitHub Pagesを使ったウェブサイトの公開方法

レポジトリを作成してcloneする

GitHub上でレポジトリを作成してcloneします。
f:id:hkarea:20180508215750p:plain

$ git clone git@github.com:nekoArea/site.git

HTMLファイルなどを追加する

cloneしたレポジトリに公開したいファイルを追加し、
add, commit,pushします。

$ git add *
$ git commit -m 'message'
$ git push

vimが開くとめんどくさいのでコミットメッセージを同時に記述しています。

branchを選んで公開する

GitHubで先ほどのレポジトリのSettingsを開きます。
f:id:hkarea:20180508221447p:plain
下の方にGitHub Pagesという項目があるので、公開したいブランチを選択してsaveします。
今回はmasterブランチしか作っていないのでそれを公開します。
f:id:hkarea:20180508221757p:plain
しばらくしたら表示されたアドレスに内容が反映されてます。

参考記事

qiita.com
www.tam-tam.co.jp

余談ですが、最近AfterEffectsをいじり始めたので、次はその記事になるかと思います。

【UTAU】自分の声を変えて音源化する【初心者向け・単独音】

UTAU

思い立って唐突にUTAU用の音源を作りました。
音響全く詳しくないのですが、色々こだわらなければ割と簡単に出来たのでシェアしておこうと思います。
（ログ残すつもりじゃなかったのでざっくりです）
※windows向けです。Macでやろうとしたらプラグイン導入が上手く行かなかった




用意するもの

ソフト（全てフリーソフト）
・UTAU
・OREMO
・Audacity（＋プラグインRovee）
・SetParam
機材
・PC接続できるマイク
・イヤホン
（OREMOでガイドBGMが流れるので、PCマイクは使わないほうが良いです）


1. oremoで音源を収録する

OREMOはUTAU用の音源の収録を補助してくれるソフトです。
音楽とソフト - OREMO
最新版をダウンロードしたら、oremo.exeを起動します。
ちなみに、今回ダウンロードしたソフトはことごとくセキュリティソフトに消されたので
exeファイルが無かったら復元してください。
f:id:hkarea:20180422174710p:plain
こんな画面が出るので、収録方法の設定をします。
メニューのOptionからRecording Style Settingsを選び、
f:id:hkarea:20180422174911p:plain
上から二番目のラジオボタンにチェック。
Rキーを押すと選択中のひらがなの録音が始まるようになります。
f:id:hkarea:20180422175114p:plain
三番目にチェックを入れることで連続的に収録もできますが、
音源化のためには一定の音の声を出さなければいけないため、
慣れてなければ二番目の方がいいと思います。


音の高さがずれていないか確認しながら収録していきます。
（難読文字やあまり使わない文字もあるため、
録る数を減らしたかったら音声リストを探して読み込む事もできます。）

生成されたwavファイルはOREMOの入ったフォルダー内にあるresultに入ります。
OREMO上で同じ音を取り直すことによって上書きもできます。


イメージが沸かなければこちらの動画の後の方でデモが見られます。
www.nicovideo.jp


2.（任意）Audacityで声を一括変換

Audacityでボイスチェンジができるように、以下のサイトからRoveeを導入します。
ソフトウェア - RoVee 1.21 | g200kg Music & Software
解凍したファイル内のdllをAudacityのPlug-Insフォルダに入れます。
Audacityを起動し、プラグインRoveeを有効にします。
（どこ押したか忘れちゃったので見つからなかったらググってください…）
収録した音源からどれか一つ適当に開き、
Roveeのパラメータを好きな声になるように設定しておきます。

次に一括編集の設定です。
メニューからファイル→Chains→チェインを編集をクリックします。
f:id:hkarea:20180422180917p:plain
適当な名前のチェイン（ここではFormantとしました）を追加して、コマンドを挿入していきます。
今回は声を変えてwav出力をするので、RoveeとExport as WAVを追加しました。
f:id:hkarea:20180422181842p:plain
OKを押してダイアログを閉じたら、
ファイル→Chains→チェインを適用でwav音源を全て選び、適用します。

他にもAudacityでノイズ除去などができます。


3. SetParamで原音設定をする

原音設定とは？
収録された音源の何秒から音が始まるかなどを伝える、
拡張子「.frq」のファイルを設定して生成することです。
イメージが沸かなければこちらのサイトの画像を見ると良いかもしれません。
www10.atwiki.jp

SetParam.exeを起動し、先程の音源を収録したフォルダを選択します。
以下のようなダイアログが出るので、初めて読み込む音源であれば
パラメータを自動的に生成するを押します。
f:id:hkarea:20180422180354p:plain

読み込めたら、このように文字毎にどこから音声が始まっているか指定します。
私も詳しいことは分かっていないので、
とりあえず緑のゾーンの終わりが波形の始まりになるようにだけ調整しました。
f:id:hkarea:20180422180614p:plain
Ctrl+sで保存して終了します。


4. UTAUに音源を読み込む

UTAUを開き、プロジェクト→プロジェクトのプロパティから声の設定をします。
f:id:hkarea:20180422182819p:plain
原音ファイルセットの横の…から先程編集した音源の入ったフォルダを選択します。
f:id:hkarea:20180422182931p:plain
読み込みができたら、自作音源で適当なustやmidiファイルをを歌わせることができるようになります。
足りない音や違和感のある音など適宜調整して完成です。

感想

印象としては、音質はよほど悪くない限り気になりませんでした。
ただ、撮った音と離れた音域の曲を歌わせたところ自分の声に聞こえなかった為、
人の声に近づけたい場合はいくつか音を変えて録るなり
マイクや収録環境の質を上げるなりしたほうが良さそうです。

また、収録が大変になりますが主流なのは連続音のようなので、
配布も考えるとなるともう少しいろいろ頑張る必要があります。

サイトにTwitterのシェアボタンを設置する

Twitter HTML

よくあるTwitterシェアボタンを、自分のサイトに設置する方法まとめ。

HTML埋め込むコードを作成

以下のサイトにアクセスします。
Twitter Publish

f:id:hkarea:20180405203021p:plain
f:id:hkarea:20180405203200p:plain
右のTwitter ButtonsからShare Buttonを選びます。

ツイート内容をカスタマイズ

f:id:hkarea:20180405203339p:plain

set customize optionsから
・シェアされるテキスト（内容）
・シェアされるURL
・シェアされた際にメンションしたいTwitterアカウントのID
・ツイートに含めたいハッシュタグ
・おすすめアカウント※
を入力し、updateを押して出た埋め込み要素をコピーします。
それを設置したいサイト内にペーストして終わり。

このカスタマイズ内容だと以下のようにシェアされます。
f:id:hkarea:20180405204100p:plain
f:id:hkarea:20180405204159p:plain

ざっくりまとめたら死ぬほど読みづらい記事になってしまった…
とりあえず最初のリンクにアクセスすればなんとなくわかるかと思います。

疑問※

recommend accountはツイート後にフォローを促すアカウントを表示するポップアップのカスタマイズだと思うのですが、
何故か一瞬でポップアップウィンドウが閉じているようです。
解決次第、記事を更新したいです。

KinectがPCに接続できない(認識されない)話と解決方法

Kinect Vtuber

※2018/4/5 Kinect for Windows v1ではMacのUSBポートでも動くことが確認できたため、記事を更新しました。

自分が調べた時リファレンスが少なくて困ったので、
当てはまる方は少ないかもしれませんがメモ程度に残しておきます。
（ちゃんとまとめるつもり無かったのでスクショとか無くてすみません）

発生した環境

・boot campによりwindowsの使えるMac book pro
・Kinect for Windows v2

エラーメッセージ１：No ready Kinect found

原因：usbポートにKinectを接続したままインストールしてしまった

まず、SDKやtoolkitを立ち上げて適当なプロジェクトを走らせたところ、

No ready Kinect found

というエラーメッセージが出ました。
そこでコントロールパネルから一度全てアンインストールして、
USBポートからKinectを外し再度インストールして繋いだところ解決。

エラーメッセージ２：Kinect not available

原因：USBポートがKinectに対応していない

今度は

Kinect not available

というエラーメッセージが出ました。
デバイスマネージャーを確認すると、接続されてはいるものの南京錠マークが出ている。
詳細情報を見ると、電源が足りない？みたいなメッセージが。
どうやらMacでは電力が足りないということらしい。

USB3.0(ポートが青い、もしくはマークにSSと書かれているもの)対応のPCを使って解決。
どんなマーク？という人は下記参照。
smartle-blog.com

もしくは、Kinect for Windows v1があればこちらを使うとUSB3.0でなくても動きます。

まとめ

Kinectは電源がついているとランプが付くので、それで気づけばよかったです…

もしかしたらこれからVtuberをやろうとしていてこの記事にたどり着く方もいるかもしれませんが、
どっちみちPC1台ではできないと思いますし(個人的な偏見)、PC増設の際は気をつけてください！

参考記事

qiita.com

【※更新済み・非推奨】gistでHTMLファイルをウェブサイトとして公開する

CSS HTML GitHub gist

2018/4/20追記：
求めていた方法がGithub Pagesだったことが判明したため、
そちらの方法で制作し直しました。

後でGitHub Pagesの記事も投稿します。
しました。
hkarea.hatenablog.jp

GitHub Pagesによるサイトのサンプル↓
nekoarea.github.io

Github Pagesの利点
・内容を更新したら同じURLに反映される
・URLが短くなる
・URLが分かりやすい


三毛猫です。ブログの更新が止まっておりましたが元気です。
UTAU動画制作シリーズはPCがぶっ壊れたりして完結させてませんでしたが、
もう完成するのでちゃんと終わらせようと思います。

この記事も例によって自分用メモなので、GitHub自体の説明は省略させていただきます。

gistって？

ブログに埋め込みたいコードとかちょっとしたファイルを共有するのに便利なGitHubの機能。
無料でもprivateなgistを作ることが可能です。（リンクが分かればprivateのgistでも見られます）

gistを利用してサイトを公開する

簡単に必要最低限の手順をまとめていきます。
PHPも使えないことはないみたいですが、簡易的なサイトを気軽に公開したいだけなので今回は使いません。
（PHPに関しては私が調べてもわからなかっただけなので、もし使えないようならすいません）

1.HTMLファイルをアップロード

f:id:hkarea:20180326222530p:plain
右上のNew Gistからgistを作成する。
公開したいHTMLファイルをアップロードまたはコピペして、ファイル名に.htmlを付けて保存する。
public gistとして保存すると自分のgist一覧に公開されます。

2.CSSファイルをアップロード

f:id:hkarea:20180326222705p:plain
1.と同様にcssファイルをアップロードする。

3.HTMLファイルにCSSを読み込む

作成したCSSのgistの右上のRawを押し、表示されたRawファイルのURLをコピーする。


cartman0.hatenablog.com
こちらの記事を参考に、先程のURLを書き換える。

取得した物
https://gist.githubusercontent.com/username/xxx/raw/xxx/style.css
書き換えたもの
https://rawgit.com/username/xxx/raw/xxx/style.css

このリンクをスタイルシートとしてHTMLに適用する。

<!--HTML内に記述-->
<link rel="stylesheet" href="https://rawgit.com/username/xxx/raw/xxx/style.css">

4.公開用のリンクを取得する

CSSと同様にHTMLファイルのURLを取得する。

qiita.com
こちらの記事を参考に、先程のURLを書き換える。

取得した物
https://gist.githubusercontent.com/username/xxx/raw/xxx/index.html
書き換えたもの
https://gist.githack.com/username/xxx/raw/xxx/index.html


このリンクを公開することでHTMLファイルがウェブサイトとして公開できます。
ただ、更新したりするとリンクが変わるようなので更新状況は反映されません。


次回は画像の読み込みとフォントの読み込みをやりたい。

おまけ


gistを色々いじっていたらGitHubに垢BAN食らいました。
表示されたフォームから英語で
「原因わからないんですけどBANされたので対応はよ（要約）」
と連絡したら、軽快なメールと共に速やかに解除されました。

割とよくあることみたいです。

ボカロ曲用手書きアニメーションPVを作る②

動画制作 WalkYourLoad

こちらの前回の記事の続きです。
hkarea.hatenablog.jp


f:id:hkarea:20171115035749p:plain

今回はタイトルとスクロールする背景、歩く人のアニメーション（簡易版）を作っていきます。


4. タイトルロゴを作る

タイトルはAviUtlを使って作ります。
音楽に合わせて、水たまりに雨の波紋が広がるように文字が浮き出るようにしていきます。



※音に合わせて作っていますが、この動画は音無しです


5. スクロールする背景を作る

上で説明に使った動画と時系列が前後してしまいますが、
背景の作り方を説明します。

背景はスクロールしつつも模様が動かないようにすると決めました。
横長の背景線画を、キーイングで抜きやすい色で塗りつぶした素材を描きます。
f:id:hkarea:20171111021953p:plain


これをファイナルカットでキーイングした後、模様の素材を後ろに重ねます。
f:id:hkarea:20171111022557p:plain


背景素材の開始位置と終了位置を指定すると、こんな感じになります。

出来たものを見てみると建物と奥行きが足りない気がします。
一旦書き出した今の映像をキーイングして
後ろにも先程のビル群を縮小したものを色を変えて配置します。

ちなみに、遠くの景色は見え方として移動速度が遅いので、
縮小しても左右に背景を描き足さずに済みますよ！


6. 歩く人のアニメーションを作る

歩くアニメーションは、一連の動作を描いてしまえば使いまわせる点は良いですが
自然に見せるのにかなり苦労しそうです。
時間もないので今回は手を抜いて、簡易的にそれっぽく見えるものを作っていこうと思います。

ちなみに、高校生のときに作った違和感てんこ盛りのアニメーションはこちら

久しぶりに見てみたら意外と絵が上手だったのでむかつきますね。
この話はやめましょう。（一人相撲）


では、今回はどのようにそれっぽくするかというとずばり
「足元をフレームアウトさせて上下動で歩く動作を表現」します。
人形劇みたいな感じです。

あと、調べたところ宣伝した場合のみトレース可の分かりやすい記事がありました。
aniduku.com

トレースはしませんでしたが、頭の高さはこれを参考にしたのでリンクしておきました。
これにより、腕が塞がっているポーズにすれば
１枚絵（髪など揺れそうなキャラデザの場合３枚）で済むという超コスパ設計になりました。

完成したのがこちら。



２番も似たように作っていくので説明したところは割愛して、
次回の記事でざっくりと大枠の完成を目処にしたいと思います…！