コーディング不要のHTML5アニメ作成サイト Moonbase オープン、共有・派生も対応

HTML/CSS や JavaScript が書けなくても手軽にHTML5アニメーションを作成できるサイト Moonbase がオープンしました。ドラッグ＆ドロップで直接アップロードできる画像やテキストなどの部品と、コンテナになる「BOX」、ポインタ入力や波発生器「WAVE」(後述)を自由に配置して線でつなぐことで、複雑な繰り返しアニメーションを簡単に作成できます。実際の作成の様子は続きの解説動画をどうぞ。

作成したアニメーションは Moonbase 上にホストされ、embed コードでウェブサイトやSNSなどに貼りつけて共有が可能。また誰かが作成したアニメーションをクローンして、さらに派生作を作ることもできます。




Moonbase を制作したのは、かつて動画サイト Vimeo やコメディサイト CollegeHumor の開発にかかわったウェブ開発者 Jake Lodwick 氏。Lodwick 氏の新企業 Elepath の最初の一般公開プロジェクトにあたります。

Moonbase のエディターで特徴的なのは、「BOX」(動きや形状を定義するコンテナ) や「COLOR」(彩度やアルファなどの属性)、波を数値で出力する「WAVE」など、さまざまな部品の入力・出力を自由に接続して組み合わせられること。

たとえば「WAVE」部品はサイン波や矩形波などの波を出力する部品ですが、接続先によって「BOX」の座標や大きさ、回転などに入力できるだけでなく、「COLOR」部品に入力して色調や明るさを変化させることにも使えます。

さらに二つの値を入力にとって四則演算後に出力する汎用の「MATH」部品もあり、組み合わせることで複雑なアニメーションの作成ができます。

Moonbase の利用は無料。セーブと共有にはアカウント作成が必要ですが、なくても編集を試すことはできます。Elepath では今後さらに高度なプロ向けのツールを有償で提供することを検討中とのこと。