5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

完全に理解したTalkAdvent Calendar 2021

Day 23

Webアニメコンテストを完全に理解した

Last updated at Posted at 2021-12-22

Webアニメコンテストについて紹介します。
今年は、コロナがあって、各地のアニメ教室が中止なったこともあり、応募者数は、85名でした。それに対し、27点の賞品、お楽しみプレゼントを贈りました。ローテクでサイトをつくると、環境変化につよく、サーバーがかわっても続けられるという事例紹介です。
webcon150x54.gif

oubograph.png

Webアニメコンテストは、2003年から「アニメーション神戸」という神戸市主催のアニメーションコンテストの中で市民が参加できる関連イベントとしてスタートしました。アニメーション神戸は、阪神淡路大震災からの復興事業で、神戸に新しい産業をおこす目的でスタートし、20回で終了したのですが、Webアニメコンテストは、最小限のスタッフのボランティア運営により「PEAS Webアニメコンテスト神戸」として継続しています。

アニメーション神戸と、Webアニメコンテスト

当時、アニメーション制作会社は東京に集中しており、トップレベルのクリエイターに神戸にきてもらおうと、新世紀エヴァンゲリオンなど、時代を代表する作品を選び、毎年授賞式を行いました。TVや映画作品だけにとどまらず、Flashアニメや、セカンドライフなど、新しい映像コンテンツに賞を与えているのも特長です。

TV部門作品賞 ネットワーク部門賞 Webアニメ募集条件
1996 新世紀エヴァンゲリオン ジャングルパーク
1997 少女革命ウテナ 新世紀エヴァンゲリオン 鋼鉄のガールフレンド
1998 カウボーイビバップ
1999 ∀ガンダム
2000 無限のリヴァイアス 「ポケットモンスター金」「ポケットモンスター銀」
2001 機動天使エンジェリックレイヤー ファンタシースターオンライン
2002 ラーゼフォン ファイナルファンタジーXI
2003 機動戦士ガンダムSEED Grand-Ma 800KB
EVA,SWF
2004 鋼の錬金術師 スキージャンプ・ペア 800KB
2005 巌窟王 まゆとろ THE TOONS 800KB
2006 涼宮ハルヒの憂鬱 やわらか戦車 800KB
2007 コードギアス 反逆のルルーシュ Second Life 1MB
2008 コードギアス 反逆のルルーシュ R2 初音ミク 1MB
2009 東のエデン 涼宮ハルヒちゃんの憂鬱&にょろーん☆ちゅるやさん 1MB
2010 けいおん!! ミクの日感謝祭 39's Giving Day 2MB
GIF追加
2011 魔法少女まどか☆マギカ ヘタリア World Series 2MB
2012 ゆるゆり おさわり探偵 なめこ栽培キット 2MB
2013 進撃の巨人 2MB
2014 ラブライブ! 2MB
2015 SHIROBAKO 2MB
2016 ==アニメーション神戸終了== 2MB
2017 4MB
2018 10MB
2019 10MB
MP4追加
2020 10MB
SWF(Flash)終了
2021 10MB
MP4は無制限
事務局で圧縮

Webアニメコンテストは、ベクトルアニメーション技術である Flash(当時Macromedia社)と同種のアニメ制作ソフト「EVAアニメータ」の普及の目的で、実施された「EVAアニメータコンテスト」(2001年、2002年)がベースになっています。その後、Flash が普及したため、企業コンテストから、公共のアニメーション神戸に移しました。一般部門は Flash 作品、小中学生からは EVAアニメータ作品が多く応募されています。

上表右列は、募集作品の最大容量の変遷です。2003年は フロッピーディスクにはいる容量として800KB に決められました。

現在、Youtubeではるかに大容量の動画を投稿できますが、Flash や EVAといったベクトルアニメーションはデータサイズが小さいのが特徴で、2006年アニメーション神戸で賞を受賞した 「やわらか戦車」は、音入りFlashアニメーションが2MB程度でした。

他のアニメーションコンテスト

国内で行われている主なアニメーションコンテストには、以下のものがあります。

広島国際アニメーションフェスティバルは、もっとも有名で、国際的に権威あるアニメーションコンテストです。最初の受賞作品は手塚治虫です。2020年で終了したらしい。コロナの影響で海外から作者を呼ぶのが難しかったのでしょう。

CGアニメコンテストは、Webアニメコンテストがお手本にしているコンテストです。最初CGを作るソフトがなかっため、関西の学生が X68000 用のCGソフトを開発し、その作品を上映するためにはじまったコンテストですが、どのソフトで作成した作品でもOKで、クリエイター側にたったコンテストです。「君の名は。」「ほしのこえ」の新海誠など、多くの有名クリエイターがここで作品を発表しています。

アニメーション神戸が20回で終了したように、コンテストを長く続けるのは、資金やスタッフの確保などが難しい。

Webアニメコンテストの目的

Flash や EVAアニメータが登場し、パソコンによって、アニメーションは誰でも作れるようになりました。パソコンがあればひとりでアニメーションが作れることがわかりましたが、一般の人がアニメーションを作る状況にはなっていません。

「アニメが作れるようになったのに、作る人があまり増えない状況をかえたい」これが Webアニメコンテストの開催を続けている理由です。

とくに、小中学生から応募できるコンテスト、また、一般の初心者が応募できるコンテストは、他にあまりないので、そういうコンテストになりたい。

そのために、データ容量を10MBに制限しています。応募データは、MP4の場合、サイズ無制限ですが、サイトに掲載するときに、HandBreak をつかって10MBに削減します。作りこみが細かい映像は画質が悪くなります。初心者が持っている性能の低い機材でも制作できる程度の映像がきれいになります。これに不満な応募者は、Webアニメコンテストは卒業して、CGアニメコンテストを目指すのがよいと思います。

Flash (SWF) について

Flashは、2MBでも「やわらか戦車」のようなヒット作を表現できるすぐれた技術でした。それが世の中から消えるきっかけを作ったのは、スティーブジョブズです。Flash は、マウス操作(ボタンを押さなくてもカーソル位置を指定できるホバー操作)前提につくられていたため、画面をさわらないと位置が認識できない指タッチの iPhone で操作するのに不適切でした。そのため、Flash がiPhone で動かないように宣言し、世の中のWebサイトを、小さな画面の指タッチで操作できるように作り変えをせまったのです。この方針はよいとして、その結果、2次元のベクトルアニメーションを記録する共通フォーマットが存在しない状態になりました。

その影響をうけ、Webアニメコンテストの初期の多くのFlash作品, EVA作品が見えなくなりました。Webアニメコンテストでは、大賞作品など、一部の Flash 作品、EVA 作品だけ、MP4 動画に変換して掲載しています。

Webアニメコンテストサイトの作り方

小中学生の作品を集めようとした場合、小中学生は自分で応募することが難しいので、教室や、学校の授業の作品の応募の受付を考えないといけません。

まず、作品の応募受付サイトを設置し、そこに、作品名や作者名などの情報をいれてもらう方法が考えられますが、教室や学校の先生が複数の生徒の作品を応募するときに、全部の作品の情報を個別に入力していくのはとても大変です。

教室や学校では、独自の形式で作品を管理しているはずですから、そのデータをそのまま応募できるようにしたいところです。

そういうフリーフォーマットでの応募を、Webアニメコンテストは実現しており、500名を超える応募にも対応できています。

使っているツール

Webアニメコンテストサイト作成で使っているツールを紹介。Windows の無料アプリで作成してます。

アプリ ジャンル 説明
xyzzy エディタ Windows版 emacs。キーボードマクロが使いやすい。
StructureT-Maker フォルダのテキスト化 一括応募のフォルダをテキストに変換する
HandBrake 変換ツール MP4動画を 10MB以下に圧縮する
Swivel 変換ツール 過去のFlash作品をMp4に変換
9VAe 変換ツール EVAで応募された作品をMP4/GIFに変換
Winmerge 比較 HTMLデータの差分
コマンド ファイル操作 応募作品のリネーム、移動、不要ファイルの削除
LibreOffice Calc 表計算 受付番号、作者名、作品名管理。CSVファイル作成
  • Webアニメコンテストサイトは、HTML文書をテキストエディタで直接作成しています。サイト作成ツールやデータベースは使っていません。
  • これは、最初、そう作られたのが一番の理由ですが、フリーフォーマットの一括応募作品データを変換しやすいというメリットがあります。
  • また、Flashがつかえなくなったとか、主催が神戸市からPEASに移ったとか、サーバーがかわったとか、いろんな環境変化に対し、問題なく対応できました。
  • ただサイトデザインが古いという欠点があります。

サイトの構造

以下の構造のHTMLです

webcon-kobe.jp
+ 2021         2021年のデータ
  + anm
    + a        小中学生部門
      + 001    受付番号001の作品
      + 002    受付番号002の作品
    + c        高校学生一般部門
      + 001
      + 002
+ 2020
+ 2019  

作品フォルダ 001, 002... の中には、以下のようなデータがはいっています。
小中学生部門の作品A025フォルダの例

025.mp4
a.htm
aa.htm

受付番号A025 の aa.htm の内容の一部

<HTML>
<HEAD>
<TITLE>Webアニメコンテスト作品</TITLE>
<META http-equiv="Refresh" content="101;URL=../../a/024/aa.htm">
</HEAD>
<video controls autoplay src="025.mp4" type="video/mp4">
</video>
この下に受付番号、作者名、作品名、コメントなどを記載

aa.htm は、http-equiv="Refresh" により、上の例では「101秒」後に、A024 作品に移動します。この方法で作品の自動再生を実現しています。

a.htm は、自動送りをしないバージョンで、aa.htmを複製したあと、<META http-equiv="Refresh" タグをコメントアウトして作成します。

作品掲載作業

一括応募の作品を受け付けた後、サイト作成までの作業を紹介します。個別応募の場合はテンプレートフォルダを複製し、作品をいれて、作者名などを置き換えるだけなので簡単です。

1. 受付番号の割り当て

  • 一括応募の場合、フォルダを解凍し、中の作品を確認。StructureT-Maker でフォルダの中身をテキスト化、応募作品の上から順番に受付番号を割り当てる。
  • 作者フォルダに作品がはいっている場合、フォルダの中に複数の作品がはいっている場合があるので注意。
  • 作者、作品名、受付番号の対応表を作成。StructureT-Maker のテキストから必要な情報を取り出し、TAB区切りのデータを作成し、LibreOffice Calcで読み込む。

2. 作品フォルダの作成

  • 一括応募のフォルダをリネームして作品フォルダを作成する。
  • 1つのフォルダに複数作品がはいっている場合は1フォルダ1作品になるようにフォルダを追加して作品を移動する
  • フォルダのリネームは、バッチファイルで行う。StructureT-Makerのテキストを利用し、応募フォルダ名を受け付け作品番号にリネームするバッチファイルを作成し、実行する。
  • テンプレートの aa.htm, (高校学生一般の場合は cc.htm) を作品フォルダにコピーする。これもバッチファイルで行う。
  • 受付番号名のフォルダの中に、同じテンプレートの aa.htm がはいった状態ができる

2. 作者名、作品名などの情報をLibreOffice Calc にまとめる

  • 作品の情報は、LibreOffice Calc に入れる。一番左の列は受付番号
  • 作品の再生時間を、LibreOffice Calc に入れる。作品の自動送り時間をマクロで計算。余裕8秒を追加し、その時間が20秒以下なら20秒にする。
  • コメント文、制作ソフトなども表にいれる。これらの情報は応募用紙からコピペする

3. 作者名、作品名などの情報をサイトに反映する

  • 受付情報を、CSVファイルで出力する
  • xyzzy で、CSVファイルと、作品フォルダの中の aa.htm (テンプレート)をひらく
  • xyzzy の fgrep 命令で、aa.htm の中の作品番号をいれかえたい文字列を検索する。複数フォルダの中の同じ文字列の場所が grep というウィンドウに取得される。この行を選択して、その文字列の場所をひらく(タグジャンプ)ができる。
  • 作品番号がフォルダ名になっているので、xyzzy で、grep のフォルダ名から作品番号を取得し、タグジャンプしてから、テンプレートの作品番号を差し替え、grepにもどり、次の行に移動する、までをキーボードマクロに登録
  • キーボードマクロを必要な回数だけ実行
  • 作者名、作品名は、CSVファイルにはいっており、「,」を検索すると、その文字列をコピーすることができる。テンプレートの作者名を、 fgrep 命令で、複数フォルダから検索し、タグジャンプでそこを読みだして、文字列を置き換えるキーボードマクロを作成し、必要な回数だけ実行する。

4. 目次、作品リストの作成

  • CSV ファイルの情報をキーボードマクロをつかって、順次取り出しながら、目次、作品リストのページも作っています。

xyzzy のキーボードマクロをつかって文字列を置き換える方法は、JSON などで取得した、作品情報を、サイトに反映させるPHPプログラム作成に相当すると考えられます。

xyzzy を使う利点は、実際に実行結果が見えるため、エラーが発生したときの対処がしやすい。入力情報によって、正常に動作しないとき(作者名の中に「,」が使われている)など、作業手順を変更するのも簡単で、かなり使いやすいです。

いまのところ、このやり方に落ち着いています。

おわりに

Webアニメコンテストのメンテ方法を紹介しました。

募集は毎年、6月から9月。MP4, GIF, EVA で3分以内なら応募できますので、ご応募ください。
webcon150x54.gif

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?