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

Webアニメコンテストについて紹介します。
今年は、コロナがあって、各地のアニメ教室が中止なったこともあり、応募者数は、８５名でした。それに対し、２７点の賞品、お楽しみプレゼントを贈りました。ローテクでサイトをつくると、環境変化につよく、サーバーがかわっても続けられるという事例紹介です。
 [![webcon150x54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e110bb5b-abac-a05a-0788-3bb827a639aa.gif)](https://webcon-kobe.jp/)

- [大賞作品を見る](https://webcon-kobe.jp/play_cc.htm)

![oubograph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/8b086e97-0e71-749e-b5ec-10237aebf223.png)



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



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

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



|年|TV部門作品賞|ネットワーク部門賞|Webアニメ募集条件|
|:--:|:--|:--|:--|
|1996|新世紀エヴァンゲリオン|ジャングルパーク||
|1997|少女革命ウテナ|新世紀エヴァンゲリオン 鋼鉄のガールフレンド||
|1998|カウボーイビバップ|||
|1999|∀ガンダム|||
|2000|無限のリヴァイアス|「ポケットモンスター金」「ポケットモンスター銀」||
|2001|機動天使エンジェリックレイヤー|ファンタシースターオンライン||
|2002|ラーゼフォン|ファイナルファンタジーXI||
|2003|機動戦士ガンダムSEED|Grand-Ma|800KB<br>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<br>GIF追加|
|2011|魔法少女まどか☆マギカ|ヘタリア World Series|2MB|
|2012|ゆるゆり|おさわり探偵 なめこ栽培キット|2MB|
|2013|進撃の巨人||2MB|
|2014|ラブライブ!||2MB|
|2015|SHIROBAKO||2MB|
|2016||==アニメーション神戸終了==|2MB|
|2017|||4MB|
|2018|||10MB|
|2019|||10MB <br>MP4追加|
|2020|||10MB<br>SWF(Flash)終了|
|2021|||10MB<br>MP4は無制限<br>事務局で圧縮|

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

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

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

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

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

- [広島国際アニメーションフェスティバル](https://www.hiroanim.org/)
- [ＣＧアニメコンテスト](http://cganime.jp/EX/contest)
- [東京アニメアワードフェスティバル](https://animefestival.jp/ja/)
- [アジアグラフ](http://asiagraph.jp/)
- [PEAS Webアニメコンテスト神戸](https://webcon-kobe.jp/)

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

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

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

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

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

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

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

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

# Flash (SWF) について

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

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




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

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

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

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

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

# 使っているツール

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


|アプリ|ジャンル|説明|
|:--|:--|:--|
|[xyzzy](https://xyzzy-022.github.io/)|エディタ|Windows版 emacs。キーボードマクロが使いやすい。 |
|[StructureT-Maker](https://freesoft-100.com/review/structuret-maker.php)|フォルダのテキスト化|一括応募のフォルダをテキストに変換する|
|[HandBrake](https://handbrake.fr/)|変換ツール|MP4動画を 10MB以下に圧縮する|
|[Swivel](https://www.ae-suck.com/amazing/archives/000622.html)|変換ツール|過去のFlash作品をMp4に変換|
|[9VAe](https://qiita.com/danjiro/items/253e5a33a38599098274)|変換ツール|EVAで応募された作品をMP4/GIFに変換|
|[Winmerge](https://winmergejp.bitbucket.io/)|比較|HTMLデータの差分|
|コマンド|ファイル操作|応募作品のリネーム、移動、不要ファイルの削除|
|[LibreOffice Calc](https://ja.libreoffice.org/)|表計算|受付番号、作者名、作品名管理。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
<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" により、上の例では「１０１秒」後に、A024 作品に移動します。この方法で作品の自動再生を実現しています。

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






# 作品掲載作業

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

## 1. 受付番号の割り当て

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

## 2. 作品フォルダの作成

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

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

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

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

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

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

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



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

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

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

# おわりに

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

募集は毎年、６月から９月。MP4, GIF, EVA で３分以内なら応募できますので、ご応募ください。
 [![webcon150x54.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e110bb5b-abac-a05a-0788-3bb827a639aa.gif)](https://webcon-kobe.jp/)