About

みんなのアイドル「初音ミク」をブラウザ上で躍らせる「MMD.js」がktkr

Share on FriendFeed
[`tweetmeme` not found]

はい・・・・タイトルひどいですね。
まぁそんなことはどうでもいいんですよ。

今日は、初音ミクやリンちゃんなどのボーカロイドのキャラクターをcanvasタグで描画できるJavaScriptライブラリ「MMD.js」のご紹介をします。

WS000000

WS000001

やばいですね!やばいです!かわいいですよこれ!

え?よくわからない?
もう一回見せますよ!

WS000002

かわいいっすね!
ブラウザ上でミクが踊ってるなんて夢みたい・・・

サンプルです。

え?この使い方が知りたい?

しかたないなー。どうしても知りたいっていうそこのあなた!のために特別のお教えしましょう!

必要なもの一式

  • MMD.js一式(Github上でライブラリが公開されています。)

使い方

上記サイトの中央部分に「zip」というボタンがありますのでそこをクリックしてください。
必要なライブラリが入っていますので解凍します。

解凍して出来たフォルダの中に「index.html」がありますのでこれを開けば、天使のミクさんがダンスをしてあなたを迎えてくれます。

このライブラリはまだ開発途中で、細かい設定(音楽を流したりダンスを設定したい)はできないみたいですが、キャラクターを変えて楽しむことができるみたいです。

キャラクターの変え方

「index.html」と同じ階層にある「main.js」を開きます。

15行目に以下の記述があると思うのでそれを変更します。

var miku = new MMD.Model('model', 'Miku_Hatsune_Ver2.pmd');

‘model’, ‘Miku_Hatsune_Ver2.pmd’となっている部分の「’Miku_Hatsune_Ver2.pmd’」部分を「model」ディレクトリの中に入っている拡張子「.pmd」のファイルに差し替えると、ほかのキャラクターに変更することができます。

例)

var miku = new MMD.Model('model', 'Neru_Akita.pmd');

WS000003

簡単ですね。
繰り返しになりますが、細かいカスタマイズはできないみたいです。

それでも、JavaScriptでこういうことができるのは、新しい試みとしてとても意義がありますね!

動画が作れなくてもミクを躍らせられる!そう思うといてもたってもいられません(笑)

以上ですー

関連記事

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

no image

jQueryでロールオーバーを実装する2つの方法

世界中のakiファンの皆様、おはようございます。今回はjQueryで画...

記事を読む

no image

チェックボックスやラジオボタンのデザインを簡単に変える方法(jQuery使用)

こんにちは、秋永です。 超久しぶりにjQuery案件で重いものがあり...

記事を読む

no image

今すぐ使える!?jQueryプラグイン紹介-part1-

はい、こんばんはです~ 3ヶ月ぶりですが、読者様は果たしているのだろ...

記事を読む

新着記事

no image

WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

記事を読む

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

記事を読む

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

記事を読む

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

記事を読む

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます

no image
WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

no image
YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

→もっと見る

PAGE TOP ↑