初音ミクをChromeで動画で動かすための、お勉強ライブ２‐MMDを操作

　このシリーズの前回、初音ミクをChromeで動画で動かすための、お勉強ライブ１‐MMDをダウンロードで、ＭＭＤ(Miku MIku Dance)をいれた。で、次は、これを、操作する。

　どーも、これで、いいらしいが。。。

　題名に、「お勉強ライブ」とあるように、今お勉強して、即、その成果を書いている。
　なので、間違っていたり、別のいい方法があったりしたら、ごめん・・・

---

■結局、MMDの操作は、こんな感じのようだ・・・

（１）１つのフレームを作る
　　　　（１－１）視点の設定
　　　　（１－２）ボーンを動かし、登録
　　　　（１－３）表情を決める

（２）数フレーム先もつくる
　　　　・（１）と同じことを繰り返す

（３）出来上がり
　　　　・（２）を数回繰り返し、いくつかのフレームを作る
　　　　・再生をクリックして確認
　　　　・ＡＶＩに保存


以下、説明する。

---

■（１－１）視点の設定

　立ち上げると、こんな画面になる。

　そこで、まず視点を設定する。
　マウスの右ボタンをクリックしながら動かす（右ドラッグ）すると、視点が動く。
　これは、「視点」というボタンでも切り替えられる。

　近づいたり、遠ざかったりするのは、上のルーペをマウスで（ふつうの左ボタン）クリック後、ドラッグすると、変わる。
　上下左右は、その隣、十字矢印をクリックし、ドラッグすると、変わる。

---

■（１－２）ボーンを動かし、登録

　ミクを動かすには、ボーンというものの位置を動かすことになる。
　まず、「ボーン操作」の「選択」ボタンをクリックする。
　すると、以下のようにボーンが表示されるので、

　動かしたいボーンのところをクリックする。

　図では、股間のところが赤くなっている。ここは、ほかのボーンとちがい、
センターのボーンで（って、左上にちゃんと　ＢＯＮＥ：センターって書いてあるね）
全体を動かす。（回転させると全体が回転、移動させると、上下左右に全体が移動）

　選んだボーンによって、移動できるものと出来ないものがある。
　回転はできるのかしら。

　なので、移動、回転させたいときは、そのボタンをクリックし、回転・移動させたあとで、
フレーム登録をクリック。
　どうも、ボーン１つ動かしたら、登録、もひとつ動かしたらまた登録とやるみたい・・

---

■（１－３）表情を決める

　そのとなりに、目、リップ、まゆがある。
＜＜　＞＞で、言葉が変わり、スライダーを動かすと、適当に変わるので、よかったら、
登録ボタンをクリックするらしい・・・

---

■（２）数フレーム先もつくる

　１つ終わったら、数フレーム先にいって、上記（１－１）～（１－３）を繰り返し、ポーズをつくる。前のフレームと、そのフレーム間は、線形補間される。（左下にグラフが出るが、それにより、線形補間は変形できる）。例では１０フレーム目を作っている。

　なお、ちゃんとできたかどうか、再生することができる。
　「再生」ボタンのしたに、どのフレームからどのフレームまでを再生するかをいれて、
「再生」ボタンをクリックする。このとき、「くり返し」にチェックが入っていると繰り返す
その場合、もう一度「再生」ボタンをクリックすると、繰り返しをやめるみたい。

---

■（３）出来上がり

　そんなこんなで、すべてのポーズを作ったら、出来上がり。

　確認のために、再生を行う。しかたは、上記のとおり


　確認したら「ファイル」→「ＡＶＩファイルに出力」を選択すると、いくつかダイアログが出るので、適当にＯＫしておくと、ＡＶＩファイルが作られる。
　保存する場合は、「ファイル」→「名前をつけて保存」

---

ってことで、とりあえず、今回はここまで。

【ＨＴＭＬ５】Canvasを使ってＪａｖａｓｃｒｉｐｔで動画（動く絵？）

　前に、【ＨＴＭＬ５】ＳＶＧを使ってＪａｖａｓｃｒｉｐｔで動画（動く絵？）というのを書いたけど、Canvasを使ってもできるので、今回は、Canvasを使ってＪａｖａｓｃｒｉｐｔで動画（動く絵？）を書きます。

---

■例

　まず、例から。以下のＨＴＭＬは、小さい赤い四角形が動いていきます。
　(＜　＞を、置換したあと、chromeで見てね！）

＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"＞
＜head＞
 ＜title＞Canvasのサンプル＜/title＞
＜script language="JavaScript"＞
＜!--
count = 120;
timer;
	function zikko()
	{
		var canvas = document.getElementById('sample1'); 
 		var ctx = canvas.getContext('2d');
  		ctx.beginPath();
		if ( count ＞ 0 )
		{
			if ( count % 2 == 0 )
			{
				ctx.strokeStyle = 'rgb(255, 0, 0)';
				ctx.fillStyle = 'rgb(255, 0, 0)';
				ctx.fillRect(count/2, count/2, 10, 10);
				timer = setTimeout(zikko,50);
			}
			else
			{
				ctx.clearRect((count-1)/2, (count-1)/2, 11, 11);
				timer = setTimeout(zikko,0);
			}
			count --;
		}

	}
// --＞
＜/script＞
  ＜/head＞
  ＜body＞
    ＜h1＞Canvas＜/h1＞
    ＜canvas id="sample1" width="140" height="140"＞
    ＜/canvas＞
＜BUTTON onclick="zikko()"＞実行＜/BUTTON＞

  ＜/body＞
＜/html＞

（上記　＜　＞は、本当は半角）

---

■説明＆手順

canvasを使って書く手順

（１）canvasタグを書く
（２）なにかのイベント（onloadとかonclickとか）でJavascriptの関数を実行させる
（３）document.getElementByIdで、キャンパスを取得
（４）getContextして
（５）それに対して、beginPath()、fillRect（）とかして、図を書いていく。

書く図の関数にかんしては、以下の参考文献を参照
なお、消す際、１ピクセルほど大きくしておかないと(11のところ）、キレイに消えない。

---

■参考文献
・さまざまな図形を描く
http://www.html5.jp/canvas/how2.html
　ここに、さっきのfillRectなど、四角形、円の書き方が載っています。

・色を指定する
http://www.html5.jp/canvas/how3.html
　ここに、strokeStyleなど、色のつけ方が載っている

---

　でも、ちらつくんだよなあ・・・
　ＳＶＧでもそうだけど・・

初音ミクをChromeで動画で動かすための、お勉強ライブ１‐MMDをダウンロード

■はじめに

初音ミクをChromeで！と思いませんか？
思わない！終了・・・

・・・じゃなくって、思ってください。じゃないと話が続かない。

で、Chromeでなんか、動画を動かすためには、

・初音ミクのPVをMMDで作り、
・MMDのAVIファイルをOGGに変換して
・oggファイルを操作するvideoタグを書いてChromeでみればいい

ですよねえ。

ってことで、まずはじめの、「初音ミクのPVをMMDで作り」までを考えましょう。

---

■初音ミクのPVをMMDで作るには？

手順

（１）MMDのダウンロード

（２）MMDの操作学習

（３）MMDでなんか作成して、AVIファイル保存

ってかんじ。今回はまず（１）

---

■MMDのダウンロード

MMD（MikuMikuDance）をダウンロードするには、

http://www.geocities.jp/higuchuu4/

に行って、そこの




1.1　MikuMikuDance
　 初音ミク専用のPV作成用ツール

　　　　　　MikuMikuDance　（Ver.2.02 約1MB)




をクリックして、ダウンロードする。
ZIPファイルなので、解凍
解凍したフォルダの中に、MikuMikuDance.exeっていう、ミクがほほ笑んでるアイコンがあるので、それをダブルクリック・・・で起動する。最終的に、こんな画面



ダウンロードまできた。

---

■次回予告

MMDの動かし方を学習する。

上記サイト、そのツールの下に、ニコ動の説明サイトが載ってるし、

MMDのはじめかた
http://www6.atwiki.jp/vpvpwiki/pages/187.html

の「動かして楽しむ(ANIMATION)」にいろんなサイトが紹介されてるので、
それを参考に、ちょっとお勉強してみる。