AREA

創作ログ

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

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

サンプル

(恥ずかしいのでそのうち消します。)

地声を使った音源

Dropbox - オリジナル曲feat地声UTAU.wav

Roveeでフォルマント+50したもの

Dropbox - オリジナル曲featチヒロ.wav
※曲は恵中さん(TwitterID:@poroco_user)が
私のオリジナルキャラクターのイメージソングとして作ってくれたものです。



用意するもの

ソフト(全てフリーソフト
・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出力をするので、RoveeExport 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 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に接続できない(認識されない)話と解決方法

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

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

発生した環境

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

エラーメッセージ1:No ready Kinect found

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

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

No ready Kinect found

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

エラーメッセージ2: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ファイルをウェブサイトとして公開する

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を作る②

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


f:id:hkarea:20171115035749p:plain

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


4. タイトルロゴを作る

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



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


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

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

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


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


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

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

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


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

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

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

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


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

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

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

完成したのがこちら。



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

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

友人の制作したボカロ曲のPVを作ることになったので、
流れをざっくりまとめながら作っていこうと思います。

f:id:hkarea:20171110014050p:plain


☆今回使うもの☆

  • Aviutl

今回使う中で唯一無料のソフト。Windows用です。
ボカロ用の動画制作では定番(たぶん)。

通称クリスタと呼ばれているお絵かきソフトです。
EXではアニメーションも作ることができます。

  • Final Cut Pro

Mac用有料動画制作ソフト。
有料だけあってUIやら書き出し時間やらクロマキーの精度やらが良いので、
手抜きするために積極的に使っていこうと思います。

  • 画力

無料で使えます!!


私はWindowsのBootされたMacを使っているのでこんなことになっていますが、
ここまで用意しなくても動画は作れます。
では作っていきます。



1. 全体の構成を考える

ここは曲を作った友人と、イメージをすり合わせながら相談して色々決めました。
お互いのイメージに似た作品を持ち寄ると話が進みやすいです。
以下は決めたことの例:

  • 絵柄(アニメ風・イラスト風)
  • 登場キャラごとの雰囲気やテーマカラー
  • フォントの雰囲気


また、曲の構成と場面を考えて用意すべき画像素材などを決めます。
全部書くと長いので途中まで表にしました。

場面 要るもの 使用ソフト
前奏 手描きアニメーション クリスタ
間奏1 歩くアニメーション、背景、雨、タイトル クリスタ、Aviutl
1番:Aメロ 歩くアニメーション、背景、雨 クリスタ、Aviutl


2. 歌詞を入れる

フォントは温かみのある映像にするために
漢字も使える手書き風フォントをお借りしました。
(ちなみに残念ながら弱ペダは知りません…)
booth.pm

また、暫定でファイナルカットのタイムライン上に適当な動きをつけて歌詞を置いておきます。

ここで、お借りしたフォントだと4つぐらい漢字が足りないことが判明したため
フォント作成ソフトをDLしたりして寄り道し始めます。
(フォント作成奮闘記は別でまとめるかもしれません…)
f:id:hkarea:20171110013706p:plain
※追記:フォントが足りない部分は、フレーズのまとまり毎に足りない文字も書いた画像を作って貼り付け、ごまかすことにしました。
手書き風フォント作るの難しいですね

また、完成のイメージをつかむために、
拾ってきた適当な素材を仮でおいて雰囲気を確かめます。
後で差し替えるので作業画像は割愛。


3. 前奏のアニメーションを作る

次に絵を描いていきます。
今回、主人公と「君」のイメージカラーは青とオレンジなので、
どちらにも使えて雰囲気の合いそうなフリー素材を探してお借りします。
www.pixiv.net

クリスタで手書きアニメーションを1フレーズ分作ります。


これをファイナルカットに持ってきて速さを調整したりします。
f:id:hkarea:20171110013911p:plain

うーん先が長い。


とりあえず今回はここまでです。
読んでくれてありがとうございました。
次回は背景と歩くアニメーションを作ります。