アニメーション・動画の作り方

アニメーションの作り方

アニメーション・動画をホームページにアップする方法

　アニメーションや動画を作る方法はいくつかあります。

• gifアニメを作る
• JavaScriptでアニメ作成
• Ajaxでアニメ作成
• Java Appletでアニメ作成
• JavaFXでアニメ作成
• Flashでアニメ作成
• その他動画作成ソフトを利用
• YouTubeを利用
• ニコニコ動画を利用
• ...etc.

　アニメーションや動画をウェブ上に公開する場合には、大別するとアニメーションや動画を自分で作るか、または、デジタルビデオムービーで撮影したものをウェブ上にアップするか、両方を組み合わせる方法があります。

アニメーション・動画を自分で作る

　アニメーション・動画を自分で作る場合には、

1. 【パラパラ漫画タイプ】「パラパラ漫画のような作り方」
2. 【パーツ分割タイプ】「背景と動作対象物など複数のパーツに分割して動きが必要な部分だけ動かす作り方」
3. 【分割処理タイプ】「前後の画像(コマ)で(色などの)変更のある部分だけをプログラムで変化させる作り方」

※パラパラ漫画タイプ・パーツ分割タイプ・分割処理タイプというフレーズは、このページの説明の便宜上の言葉であり一般的なものではありません。

があり、PCばかりではなく、携帯電話やPDA(携帯情報端末)もありますし、いずれもブロードバンドが当たり前になってきたとはいえウェブ環境の通信速度などへの依存を考えると複雑なアニメや、なめらかなアニメーションを作ろうと思うと1よりも2または3の方法が往々にして負担が少なく軽快に動作するアニメーションを作る事ができます。

【パラパラ漫画タイプ】

　自分で作る場合に一番簡単なアニメーションの作り方はパラパラ漫画の作り方で、コマ数(画像ファイル数)を増やすほど細かなアニメーションになります。特にgif画像を入れ替えるgifアニメやJavaScriptは作り方そのものがパラパラ漫画と同じなので直観的にわかり易いかもしれません。

　但し、この方法では、1コマの画像ファイルサイズが小さく、かつ、コマ数が少ない場合には有効ですが、コマ数が増えるほど画像ファイルサイズが大きくなり、処理も重くなるので注意が必要です。それぞれのメリット・デメリットは下記参照。

gifアニメ

　gifアニメを一から自分で作る場合には、画像処理の知識が必要になり、結果的にその為のソフトやプログラムを自作する事になりますが、gifアニメを作成するフリーウェアやシェアウェアを利用すると簡単に作成できます。

　但し、gifアニメは、次のJavaScriptと比べても、小さな画像数枚でもファイルサイズが相当に大きくなりがちです。

JavaScriptアニメーション

　JavaScriptでのアニメーションの作り方で解説している通り、JavaScriptで作るアニメーションは比較的簡単に作る事ができ、1枚1枚の画像ファイルサイズを小さくする事でシンプルなアニメなら比較的軽快に動作します。

　JavaScriptでもリンク先の作成例とは違う作り方、パラパラ漫画タイプではなくパーツ分割タイプ、分割処理タイプとなるようにコーディングすれば、先の作成例よりも負荷を低減したアプリケーションとなりますが、もしその場合にも「JavaScriptならトコトン追及するけど他の言語覚える気にならない！！！」「どうしてもJavaScriptじゃないと！！！」という理由がない限りは、他のより簡易なテクニックを利用するといいでしょう。

　但し、閲覧する方がJavaScriptをOFFにしているとせっかくのアニメーションも見てもらう事ができません。また、1枚の画像ファイルサイズが大きい場合はもちろん、カラフルな画像を数十枚、数百枚・・・とか、比較的長い長編アニメーションを作る場合には、処理速度が著しく低下します。

　Ajaxは、XMLとJavaScriptまたは、XMLチックな形式(JSON他)とJavaScriptを利用するものでアニメーションに関しては基本的にJavaScriptでの作り方と同様です。

【パーツ分割タイプ】

　次に自分で作る方法としては、「背景と動作対象物など複数のパーツに分割して動きが必要な部分だけ動かす作り方」があり、この手法で広く知られているアプリケーションソフトとしては、AdobeのFlashがありますが、作成開発する為のキットは有償です。

　因みに2008年には、JavaFXというデスクトップ・ウェブ・モバイル・テレビ・情報家電等の用途用のアプリケーション作成プログラムが発表されており、開発環境もオープンソース(条件付きで基本的に無償)となっています。

　こうしたアプリケーションは、RIA(リッチ・インターネット・アプリケーション)と呼ばれ、ブラウザ上で視覚的にも操作性や表現力にも優れたアプリケーションとして注目を集めています。

Flashアニメーション

　FlashやFlashのようなその他フリーウェア・シェアウェア・商用アプリを利用すると比較的簡単にグラフィカルなインタフェースを利用してアニメーションを作る事ができます。

　但し、従来のFlashは、比較的動作が重いという短所があります。

JavaFXアニメーション

　JavaFXは、Sun Microsystems社のJava系のウェブアプリケーション、特にユーザーインタフェース部分の作成において前述のようにデスクトップ・ウェブ・モバイル・テレビ・情報家電等の用途を想定したRIAです。

　2008年12月4日(米国時間)に発表されたJavaFX 1.0 ではモバイル用のエミュレータ(疑似実行環境)が付属していなかったようですが、2009年2月に発表された JavaFX 1.1では、通常の携帯電話画面とiPhoneチックな画面のエミュレータが搭載されています。

　JavaFXもオブジェクト指向であり、クラスを取り込む事によって複雑なアニメーションがシンプルなコードで実現できますし、NetBeans IDE 6.5 を利用するとかなりの点で自動的に作られる関数やサンプルコードを部分修正して作る事ができ、JavaEE、JavaSE、JavaMEのクラスやコードを使う事もでき、唯一オリジナリティが高いとは言えない画像アプリは、JavaFX ImageはもちろんPhotoShopやIllustratorのファイルを取り込む事ができる JavaFX 1.1 Production Suite を利用するとPhotoShopやIllustratorの資産を活かす事もできます。

　JavaFXでは、アニメーションやデジタルビデオムービー、画像サムネイルを表示再生するQuickTimeやMediaPlayer、YouTubeやニコニコ動画と同様のインタフェース自体も比較的容易に作成できます。

　但し、閲覧者が(JavaScriptとは別に)Javaを利用不可としている場合、Javaに対応していないブラウザの場合には、閲覧できませんし、これとは別に(疑似証明書はあるものの)公式な証明書がないと動作時に警告や注意を促すポップアップがでる場合があります。

　また、まだ発表されたばかりという事もあり、モバイルに関しては、ほとんどの携帯電話で利用できる環境になるまでには多少時間がかかるかもしれませんが、アニメーションを自分で作りたいという場合には最有力候補と言ってもいいと思います。

　JavaFX 1.1でもテレビや情報家電用の実装はまだ先のようです。

　次期バージョンで実装されるのかどうか不明ですが、単純なアンカーを設定する事ができません。

　例えば、メディアブラウザ風の写真リストと各写真の拡大縮小はできますが、各写真から<a href=""></a>を設定してウェブページに遷移する手法がないようです。

　RIAというアーキテクチャを画面遷移のない自己完結型のアプリケーションと捉えるとするなら、<a href=""></a>を利用可能にする事は不要なのかもしれませんが。。。管理人としてはぜひ欲しい機能です。。。

　処理の重さに関しては、1枚の画像のファイルサイズを小さくする事はもちろんですが、作り込み方で軽快にする事ができそうです。

　因みにJavaScriptで日付と時間を表示するにあるサンプルはJavaFXで作った動くアナログ時計です(表示されない場合には、AppleのQuickTimeがインストールされていれば、ブラウザで http://javafx.com/ を許可するとたぶん見られます)。

Silverlightアニメーション

　Silverlightは、Microsoft社の開発したRIA開発環境で、やはり、様々なメディアに対応していますし、更なる拡張も検討されています。

　また、.NET クラスライブラリを活用する事ができ、.NET開発者であれば抵抗なく導入できる上、ユーザーインタフェースデザイナとロジック開発者の作業を明確に分けつつ共同作業ができる利便性があり、画像についてはPhotoShopで作成した既存資産(.psd)も利用できます。

　開発言語としては、JScript、IronRuby、IronPython、VB.NET、C#が利用できます。

　Silverlightにおける.NET APIは、.NET Frameworkと互換性があり、LINQ、WCF、およびADO.NETなどもサポートしており、SilverlightのAPIでHTMLやAJAXを.NET と統合することもできるとの事なので前述のJavaFXの<a href=""></a>もシンプルに利用できそう？な雰囲気です。

　開発環境としては、Visual Web Developer/Silverlight Tools for Visual Studio/Microsoft Expression Blendが必要なようです。

　Visual Web Developerは、ウェブ用のVisual Studio開発環境で(評価版は無償)、Silverlight Tools for Visual Studioは、Visual StudioにおけるSilverlightプラグイン、Microsoft Expression Blendは、Silverlightの表現を設計する為の代表的なツールという位置づけのようです。

　表示時間や処理に関しては、Flash並みにかなり遅い印象です。

【分割処理タイプ】

　自分で作る場合に、最も知識とテクニックを必要とするアニメーションの作り方は、「前後の画像(コマ)で(色などの)変更のある部分だけをプログラムで変化させる作り方」です。

　画像そのものにおける知識としては『2値画像』『濃淡画像』『閾値処理』『ラベリング処理』『エッジ処理』『雑音処理』『最近傍法』『4-近傍』『8-近傍』『線形補間法』・・・といったキーワードとその内容の概念は少なくとも抑えておく必要があります。

　更にこれらを理解する中で、基礎解析、代数幾何、微分積分、サイン、コサイン、タンジェントなど高校数学を彷彿とさせるものも多々出てきますので(管理人も含め)文系の方はギョッとする事もあるかもしれません。

　ただ、こうした高校数学分野の処理に関しては、Visual C#等を利用するとほとんどクラス化されているのでVisual C#等のプログラミング言語を習得していれば、どのクラスを使うとどうなるのかという部分は残りますが、知識量としては比較的軽減されるでしょう。

　逆にVisual C#は、これらをクラス化して開発しやすくしてくれるプログラミング言語であり、JavaFXやJavaScriptは、更に開発しやすくしてくれる簡易言語であり、Flashは、更により広くアニメーションを作り易くしたソフトウェアであり、YouTubeやニコニコ動画は、ソフトウェアを作成するという視点ではなく、利用する側の視点でより一般に幅広く触れられるものと言えるでしょう。

　プログラムを自作して画像のサムネイルを作りたい、画像を拡大・縮小したい、画像を回転させたいという場合にもこの分割処理タイプになります。サムネイルについては、自作にこだわらなければURL指定でそのサイトのサムネイル画像を自動生成してくれるSimpleAPIというサービスもあるようです。

余談

　HTMLの単一のimgタグを利用した静止画の世界にこうした技術やツールによって動きのある動的なアニメーションや動画を公開できるようになったのですね。

　もっとも過去にはJava Appletという技術もありましたが、当時は大勢を占めていたユーザーのマシンスペックでは動画やアニメーションを再生するには無理があり、凝ったアニメーションなどが実質受け入れられなかったこともあり、浸透していません。

　ここ数年ブログ人口が急増し、ブログパーツやウィジェットなどでもリッチなインタフェースはある程度認知されています。

　今はマシン自体がハイスペックになり、シンプルを追及しているブラウザ環境でRIAを実現しようと経済の競争原理から各社躍起になっていますが、「多くのマシンがハイスペックになった」にも関わらずそれ以上に「リッチなアプリケーションを実現したい」という思いからあれもこれもと取り込んでしまい結局処理が重くなっている感があり、ハードを忘れてソフトが独り歩きしているようにも思えます。

　今こそJava AppletくらいがちょうどよいのかもしれませんがこれらのRIAを見てしまった後では物足りない感は否めませんよね。(優れた技術をいち早く実現した事は当然驚くべきことですが)Java Appletのように優れた技術にも関わらずリリースのタイミングが早すぎた為に時代(やマシンスペック)がついてこれず、ついてきたときには「ああ、あれ。。。そんなのもあったよね。。。」と埋没してしまうような事がないといいのですが。

　現代はITを筆頭に時代の流れが速すぎてついていこうとすると追い立てまくられ、ちょっとよそ見をしただけでおいていかれた感にさいなまれ、結果多くの人がついていけなくなっている気もします。

　(現代経済原理は許さないでしょうが)もっと肩の力を抜いてゆったりとした時の中で過ごすのもいいと思うんですけどね。

• レベル別メニュー
• 一覧メニュー
• ホームページ作成レベル別メニュー
• ウェブ開発レベル別メニュー