GitHub Pagesで創作アイドルありえるちゃんのサイトを作ったので、
手順をシェアしておきます。
出来上がったサイトがこちら。
nekoarea.github.io
GitHubのレポジトリ内容をサイトとして公開できるサービスです。
GitHubアカウントがあればサーバーを立てずに軽めのサイトが作れます。
ちなみに、Javascriptが動くのでJqueryも入れられました。
cloneしたレポジトリに公開したいファイルを追加し、
add, commit,pushします。
$ git add * $ git commit -m 'message' $ git push
vimが開くとめんどくさいのでコミットメッセージを同時に記述しています。
思い立って唐突にUTAU用の音源を作りました。
音響全く詳しくないのですが、色々こだわらなければ割と簡単に出来たのでシェアしておこうと思います。
（ログ残すつもりじゃなかったのでざっくりです）
※windows向けです。Macでやろうとしたらプラグイン導入が上手く行かなかった
（恥ずかしいのでそのうち消します。）
音の高さがずれていないか確認しながら収録していきます。
（難読文字やあまり使わない文字もあるため、
録る数を減らしたかったら音声リストを探して読み込む事もできます。）
生成されたwavファイルはOREMOの入ったフォルダー内にあるresultに入ります。
OREMO上で同じ音を取り直すことによって上書きもできます。
イメージが沸かなければこちらの動画の後の方でデモが見られます。
www.nicovideo.jp
次に一括編集の設定です。
メニューからファイル→Chains→チェインを編集をクリックします。
適当な名前のチェイン（ここではFormantとしました）を追加して、コマンドを挿入していきます。
今回は声を変えてwav出力をするので、RoveeとExport as WAVを追加しました。
OKを押してダイアログを閉じたら、
ファイル→Chains→チェインを適用でwav音源を全て選び、適用します。
他にもAudacityでノイズ除去などができます。
SetParam.exeを起動し、先程の音源を収録したフォルダを選択します。
以下のようなダイアログが出るので、初めて読み込む音源であれば
パラメータを自動的に生成するを押します。
読み込めたら、このように文字毎にどこから音声が始まっているか指定します。
私も詳しいことは分かっていないので、
とりあえず緑のゾーンの終わりが波形の始まりになるようにだけ調整しました。
Ctrl+sで保存して終了します。
印象としては、音質はよほど悪くない限り気になりませんでした。
ただ、撮った音と離れた音域の曲を歌わせたところ自分の声に聞こえなかった為、
人の声に近づけたい場合はいくつか音を変えて録るなり
マイクや収録環境の質を上げるなりしたほうが良さそうです。
また、収録が大変になりますが主流なのは連続音のようなので、
配布も考えるとなるともう少しいろいろ頑張る必要があります。
よくあるTwitterシェアボタンを、自分のサイトに設置する方法まとめ。
set customize optionsから
・シェアされるテキスト（内容）
・シェアされるURL
・シェアされた際にメンションしたいTwitterアカウントのID
・ツイートに含めたいハッシュタグ
・おすすめアカウント※
を入力し、updateを押して出た埋め込み要素をコピーします。
それを設置したいサイト内にペーストして終わり。
このカスタマイズ内容だと以下のようにシェアされます。
ざっくりまとめたら死ぬほど読みづらい記事になってしまった…
とりあえず最初のリンクにアクセスすればなんとなくわかるかと思います。
recommend accountはツイート後にフォローを促すアカウントを表示するポップアップのカスタマイズだと思うのですが、
何故か一瞬でポップアップウィンドウが閉じているようです。
解決次第、記事を更新したいです。
2018/4/20追記：
求めていた方法がGithub Pagesだったことが判明したため、
そちらの方法で制作し直しました。
後でGitHub Pagesの記事も投稿します。
しました。
hkarea.hatenablog.jp
GitHub Pagesによるサイトのサンプル↓
nekoarea.github.io
Github Pagesの利点
・内容を更新したら同じURLに反映される
・URLが短くなる
・URLが分かりやすい
三毛猫です。ブログの更新が止まっておりましたが元気です。
UTAU動画制作シリーズはPCがぶっ壊れたりして完結させてませんでしたが、
もう完成するのでちゃんと終わらせようと思います。
この記事も例によって自分用メモなので、GitHub自体の説明は省略させていただきます。
ブログに埋め込みたいコードとかちょっとしたファイルを共有するのに便利なGitHubの機能。
無料でもprivateなgistを作ることが可能です。（リンクが分かればprivateのgistでも見られます）
簡単に必要最低限の手順をまとめていきます。
PHPも使えないことはないみたいですが、簡易的なサイトを気軽に公開したいだけなので今回は使いません。
（PHPに関しては私が調べてもわからなかっただけなので、もし使えないようならすいません）
右上のNew Gistからgistを作成する。
公開したいHTMLファイルをアップロードまたはコピペして、ファイル名に.htmlを付けて保存する。
public gistとして保存すると自分のgist一覧に公開されます。
作成したCSSのgistの右上のRawを押し、表示されたRawファイルのURLをコピーする。
cartman0.hatenablog.com
こちらの記事を参考に、先程のURLを書き換える。
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ファイルがウェブサイトとして公開できます。
ただ、更新したりするとリンクが変わるようなので更新状況は反映されません。
次回は画像の読み込みとフォントの読み込みをやりたい。
— 三毛猫 (@neko_area) 2018年3月26日
割とよくあることみたいです。
こちらの前回の記事の続きです。
hkarea.hatenablog.jp
今回はタイトルとスクロールする背景、歩く人のアニメーション（簡易版）を作っていきます。
タイトルはAviUtlを使って作ります。
音楽に合わせて、水たまりに雨の波紋が広がるように文字が浮き出るようにしていきます。
ありがちなやつ pic.twitter.com/YHZaPruDBw
— 三毛猫 (@neko_area) 2017年11月13日
タイトルロゴ暫定 pic.twitter.com/V2nSpRPMaI
— 三毛猫 (@neko_area) 2017年11月13日
上で説明に使った動画と時系列が前後してしまいますが、
背景の作り方を説明します。
背景はスクロールしつつも模様が動かないようにすると決めました。
横長の背景線画を、キーイングで抜きやすい色で塗りつぶした素材を描きます。
これをファイナルカットでキーイングした後、模様の素材を後ろに重ねます。
背景素材の開始位置と終了位置を指定すると、こんな感じになります。
許可ちゃんと取ってないのでとりあえず音無し。
— 三毛猫 (@neko_area) 2017年11月10日
これで前に人が歩くアニメーション置いて（最優先）、背景の建物を増やして、グラデーションのフィルタ作って暗めにする pic.twitter.com/t0XXHmDOXU
出来たものを見てみると建物と奥行きが足りない気がします。
一旦書き出した今の映像をキーイングして
後ろにも先程のビル群を縮小したものを色を変えて配置します。
微調整 pic.twitter.com/aarDwdzTCR
— 三毛猫 (@neko_area) 2017年11月13日
ちなみに、遠くの景色は見え方として移動速度が遅いので、
縮小しても左右に背景を描き足さずに済みますよ！
歩くアニメーションは、一連の動作を描いてしまえば使いまわせる点は良いですが
自然に見せるのにかなり苦労しそうです。
時間もないので今回は手を抜いて、簡易的にそれっぽく見えるものを作っていこうと思います。
ちなみに、高校生のときに作った違和感てんこ盛りのアニメーションはこちら
これは高校の時の pic.twitter.com/kUBNuhVKW8
— 三毛猫 (@neko_area) 2017年11月10日
久しぶりに見てみたら意外と絵が上手だったのでむかつきますね。
この話はやめましょう。（一人相撲）
では、今回はどのようにそれっぽくするかというとずばり
「足元をフレームアウトさせて上下動で歩く動作を表現」します。
人形劇みたいな感じです。
あと、調べたところ宣伝した場合のみトレース可の分かりやすい記事がありました。
aniduku.com
トレースはしませんでしたが、頭の高さはこれを参考にしたのでリンクしておきました。
これにより、腕が塞がっているポーズにすれば
１枚絵（髪など揺れそうなキャラデザの場合３枚）で済むという超コスパ設計になりました。
完成したのがこちら。
タイトルできた pic.twitter.com/8Pgkg5fOzN
— 三毛猫 (@neko_area) 2017年11月14日
２番も似たように作っていくので説明したところは割愛して、
次回の記事でざっくりと大枠の完成を目処にしたいと思います…！
友人の制作したボカロ曲のPVを作ることになったので、
流れをざっくりまとめながら作っていこうと思います。
☆今回使うもの☆
今回使う中で唯一無料のソフト。Windows用です。
ボカロ用の動画制作では定番（たぶん）。
通称クリスタと呼ばれているお絵かきソフトです。
EXではアニメーションも作ることができます。
Mac用有料動画制作ソフト。
有料だけあってUIやら書き出し時間やらクロマキーの精度やらが良いので、
手抜きするために積極的に使っていこうと思います。
無料で使えます！！
私はWindowsのBootされたMacを使っているのでこんなことになっていますが、
ここまで用意しなくても動画は作れます。
では作っていきます。
また、曲の構成と場面を考えて用意すべき画像素材などを決めます。
全部書くと長いので途中まで表にしました。
| 場面 | 要るもの | 使用ソフト |
|---|---|---|
| 前奏 | 手描きアニメーション | クリスタ |
| 間奏１ | 歩くアニメーション、背景、雨、タイトル | クリスタ、Aviutl |
| １番：Aメロ | 歩くアニメーション、背景、雨 | クリスタ、Aviutl |
| … | … | … |
また、暫定でファイナルカットのタイムライン上に適当な動きをつけて歌詞を置いておきます。
ここで、お借りしたフォントだと４つぐらい漢字が足りないことが判明したため
フォント作成ソフトをDLしたりして寄り道し始めます。
（フォント作成奮闘記は別でまとめるかもしれません…）
※追記：フォントが足りない部分は、フレーズのまとまり毎に足りない文字も書いた画像を作って貼り付け、ごまかすことにしました。
手書き風フォント作るの難しいですね
また、完成のイメージをつかむために、
拾ってきた適当な素材を仮でおいて雰囲気を確かめます。
後で差し替えるので作業画像は割愛。
クリスタで手書きアニメーションを１フレーズ分作ります。
それっぽい pic.twitter.com/s3Oi6X0TVF
— 三毛猫 (@neko_area) 2017年11月9日
これをファイナルカットに持ってきて速さを調整したりします。
うーん先が長い。
とりあえず今回はここまでです。
読んでくれてありがとうございました。
次回は背景と歩くアニメーションを作ります。
