Edited at

Python で アニメGIF ダウンロード HTML を自動作成

More than 1 year has passed since last update.

アニメーション作成フリーソフト「 PEAS motch! 」 を使えば、4歳児から 1コマアニメーション を簡単に作成できます。

複数のパソコンをLAN接続すれば、作成した全員のアニメーションをその場で上映することが簡単にできます。(9VAeワークショップ)

ただ、作成したアニメを持ち帰りたいという要望には、上映画面をスマホで撮影する方法しかありませんでした。

今回、Pythonを使って、スマホにアニメGIFをダウンロードできるサイトを自動作成するプログラムを作りましたので、公開します。

Python プログラムが理解できるよう、順番に作成していきます。

001.gif


アニメーションをダウンロードする手順


  1. PEAS motch! もしくは、 9VAeきゅうべえでアニメを作成すると、EVAファイルができます。これを上映用のフォルダに保存します。

  2. Pythonを使って、上映フォルダの EVAアニメをアニメGIFに変換します。

  3. さらに、アニメGIFを表示するHTMLを自動作成します。

  4. スマホのブラウザで、作成した HTMLを表示すれば、アニメGIFをスマホに保存することができます。


必要なソフトの入手

ここでは、Windows の Python を使って説明します。Macintosh, Raspberry Pi でも同じプログラムが動作します。



  • Python はこちらから入手します。Python2 と、Python3 がありますが、日本語を使う場合は、Python3が使いやすいようです。


    1. 上からダウンロードした、インストーラを実行します。

    2. インストール画面の一番下の「Add Python to PATH」にはチェックを入れ、「Install Now」ボタンでインストールするとよいでしょう。コマンドプロンプトで、Pythonが使えるようになります。



  • EVAファイル からGIFアニメの変換には、PEAS motch! もしくは、 9VAeきゅうべえに付属する再生ソフト 9view を使います。


    1. PEAS motch!をダウンロードしたら、解凍してください。ダウンロードした場所で、右ボタンから「すべて展開」を実行してもかまいません。9vakid フォルダの中に 9view-full(.exe) があることを確認してください。




1. EVAファイルを順番に読み出す

まず、以下のように、EVAファイルをアニメGIFに変換する Python プログラムを作ってみましょう。


  • 指定したフォルダの中の、EVAアニメを全部取得する

  • EVAアニメから、GIFアニメの名前を作成する

  • EVAアニメをGIFアニメに変換する

項目
Pythonプログラムのポイント

文字コード
「UTF8」
メモ帳で保存する場合、「ファイル」>「名前を付けて保存」>下の「文字コード」を「UTF-8」にして保存。

拡張子
.py

実行1
IDLEを使う場合(Windows)
(1) 作成した .py ファイルを右ボタンでクリックし、メニューから「Edit with IDLE」を実行。
(2) Run > Run Module (F5キー)

実行2
コマンドプロンプト(Windows)
(1) .py ファイルのフォルダで、シフトキーを押しながら右ボタンでクリックし、メニューから「コマンドウィンドウをここで開く」を実行。
(2) コマンドプロンプトから、python xxx.py を実行(xxx.pyはファイル名)


  • 以下のテキストを、「test1.py」という名前で「UTF-8」で保存してください。※ Python2 の場合パスに日本語がはいると動作しないことがあるようです。c:\pytest といったフォルダを作って保存するとよいでしょう。


  • EVA_FOLDER, QVIEW_EXE は、自分の環境にあわせて修正してください。Windowsの場合は、QVIEW_EXE の最後に拡張子「.exe」が必要です。EVA_FOLDER は、PEAS motch! もしくは 9VAe の example フォルダを指定するとよいでしょう。※ただし、example フォルダの中に「_bgm20sec.eva」というファイルがあると、アニメGIFに変換できません。右ボタンでクリックし、メニューから「名前の変更」を実行し「bgm20sec.eva」にリネーム(先頭の「_」を削除)してください。


  • PEAS motch!の場合「9view」は「9view-full」という名前になっています。右ボタンでクリックし、メニューから「名前の変更」を実行し「9view」に変更してください。(名前に -full がある場合、画面全体で再生します。9view にすれば、普通サイズで再生します。)


  • 上の実行1、実行2の方法をつかって、実行してみてください。「指定されたパスが見つかりません。」というエラーが出た場合、EVA_FOLDER を正しく修正してください。パスの区切りは「/」です。



test1.py

import os   # ファイル操作

import subprocess # プログラム実行
EVA_FOLDER = 'C:/XXX/XXX/9vakid/example' #アニメを保存するフォルダ
QVIEW_EXE = 'C:/XXX/XXX/9vakid/9view.exe' #9view.exe のフルパス

# メインループ
inpFolder = EVA_FOLDER #入力フォルダ
files = [f for f in os.listdir(inpFolder)] #入力
for fn in files:
if(os.path.splitext(fn)[1] != '.eva'):
continue
gif = fn + '.gif' #GIFファイル名
gif = os.path.join(inpFolder,gif)
eva = os.path.join(inpFolder,fn)
cmd = (QVIEW_EXE , eva , '-gif')
print(cmd)
subprocess.run(cmd) #gif作成


それぞれ、以下の意味です。

項目
使用例
説明

ファイル操作
import os
ファイル操作を使う

プログラム実行
import subprocess
プログラム実行を使う

EVAフォルダ
EVA_FOLDER ='xxx'
ファイル、パス名に日本語は使えない、パスの区切は「/」

9viewの場所
QVIEW_EXE ='xxx'
ファイル、パス名に日本語は使えない、パスの区切は「/」

フォルダのファイル取得
files = [f for f in os.listdir(inpFolder)]
inpFolderの中のファイルをfilesに取り出す

Forループ
for cnt in files:
filesの中身を全部処理。Forの中は、一段下げる。

拡張子取得
os.path.splitext(fn)
ファイル名fnを拡張子とそれ以外に分ける。拡張子はos.path.splitext(fn)[1]、名前はos.path.splitext(fn)[0]

次のループ処理に移る
if(xxx):continue
xxxの場合、次のループ処理に移る

文字の結合
gif = fn + '.gif'
文字の結合は「+」

ファイルパスの結合
os.path.join(inpFolder,gif)
フォルダとファイル名をつなげる

文字配列
cmd = (QVIEW_EXE , eva , '-gif')
文字配列作成

出力
print()
なんでも表示できる。Python2では()が不要

プログラム実行
subprocess.run(cmd)
プログラムと引数を文字配列で渡す


  • 正しく動作すれば、EVA_FOLDERで指定したフォルダに、アニメGIFファイルが作成されます。


2. フォルダをチェックし、新しい EVAを見つけたら、アニメGIFを作成する

上のプログラムに、以下の機能を追加しましょう。


  • 1秒ごとに、EVAフォルダを調べる。

  • GIFアニメが存在しない場合は変換する。

  • GIFアニメより、EVAアニメが新しい場合は変換する。

  • 自動保存のEVAファイルは変換しない。


  • 以下のテキストを、「test2.py」という名前で「UTF-8」で保存してください。


  • EVA_FOLDER, QVIEW_EXE は自分の環境にあわせて修正してください。9view-full は、9view にリネームしてください。


  • 上にあげた方法で実行してみましょう。



test2.py

import os   # ファイル操作

import subprocess # プログラム実行
import time # 時間処理

EVA_FOLDER = 'C:/XXX/XXX/9vakid/example' #アニメを保存するフォルダ
QVIEW_EXE = 'C:/XXX/XXX/9vakid/9view.exe' #9view.exe のフルパス

# メインループ
inpFolder = EVA_FOLDER #入力フォルダ
print ('Type Ctrl+C to exit.')
while True:
files = [f for f in os.listdir(inpFolder)] #入力
for fn in files:
if(os.path.splitext(fn)[1] != '.eva'):
continue
gif = fn + '.gif' #GIFファイル名
gif = os.path.join(inpFolder,gif)
eva = os.path.join(inpFolder,fn)
if( '_編集中' in eva): #自動保存ファイルは無視
continue
if( '_とちゅう' in eva):
continue
if( '_autosave' in eva):
continue
if(os.path.exists(gif)): #gifが存在,作成すみチェック
if(os.path.getmtime(gif) > os.path.getmtime(eva)):
continue
cmd = (QVIEW_EXE , eva , '-gif')
print(cmd)
subprocess.run(cmd) #gif作成
time.sleep(1.0) #sleep(秒指定)


それぞれ、以下の意味です。

項目
使用例
説明

時間処理
import time
時間処理を使う

時間待ち
time.sleep(1.0)
1秒待つ

Whileループ
while True:
処理を繰り返す。ループの中身は、一段下げる。

プログラムの中断
Ctrl+C
Ctrl と C キーを同時に押せばプログラムを中断する

文字が含まれるか
if( '_編集中' in eva):
文字列 eva に、'_編集中'が含まれているか調べる

ファイルの存在
if(os.path.exists(gif)):
gifというファイルが存在するか調べる

ファイルの更新時間
os.path.getmtime(gif)
gifというファイルの更新時間を取得


  • 自動バックアップファイルには「_編集中」「_とちゅう」「_autosave」が含まれるので、その場合、GIFアニメを作成しないようにします。


3. GIFアニメを表示するHTMLを自動作成する。

上のプログラムに、HTML作成機能を追加して、完成させましょう。


  • 以下のテキストを、「qva2gif.py」という名前で「UTF-8」で保存してください。

  • EVA_FOLDER, QVIEW_EXE は自分の環境にあわせて修正してください。9view-full は、9view にリネームしてください。

  • HTMLファイルのヘッダは、「header.txt」 という別ファイルにまとめています。下にサンプルを掲載していますので、「qva2gif.py」と同じフォルダに作成してください。


qva2gif.py

import os   # ファイル操作

import subprocess # プログラム実行
import time # 時間処理
import re # 文字置換
import webbrowser # ブラウザ

EVA_FOLDER = 'C:/XXX/XXX/9vakid/example' #アニメを保存するフォルダ
QVIEW_EXE = 'C:/XXX/XXX/9vakid/9view.exe' #9view.exe のフルパス

HTML_OUTPUT = 'index.html' #アニメGIFダウンロードサイト
FILE_HEADER = 'header.txt' #HTML ヘッダーファイル

#HTML作成
def makeHTMLdoc(html):
fw = open(html,"w")
outstr = open(FILE_HEADER).read()
#GIF 画像を挿入
files = [f for f in os.listdir(inpFolder)] #入力フォルダ
files.sort(key=os.path.basename) #ファイル名でソート
for fn in files:
if(os.path.splitext(fn)[1] != '.gif'):
continue;
outstr += '<br>' + fn + '<br>'
outstr += '<img src="' + fn + '"><br>\n'
outstr += '</body></html>'
outstr = re.sub("%title%", '「1コマアニメーション」ダウンロード', outstr)
fw.write(outstr)
fw.close()

# メインループ
openWeb = True #HTMLを開く
inpFolder = EVA_FOLDER #入力フォルダ
print ('Type Ctrl+C to exit.')
while True:
files = [f for f in os.listdir(inpFolder)] #入力
makeHTML = False #HTML作成するフラグ
for fn in files:
if(os.path.splitext(fn)[1] != '.eva'):
continue
gif = fn + '.gif' #GIFファイル名
gif = os.path.join(inpFolder,gif)
eva = os.path.join(inpFolder,fn)
if( '_編集中' in eva): #自動保存ファイルは無視
continue
if( '_とちゅう' in eva):
continue
if( '_autosave' in eva):
continue
if(os.path.exists(gif)): #gifが存在,作成すみチェック
if(os.path.getmtime(gif) > os.path.getmtime(eva)):
continue
cmd = (QVIEW_EXE , eva , '-gif')
print(cmd)
subprocess.run(cmd) #gif作成
makeHTML = True #HTMLを更新する
html = os.path.join(inpFolder,HTML_OUTPUT)
if(makeHTML):
makeHTMLdoc(html)
if(openWeb):
webbrowser.open(html)
openWeb = False
time.sleep(1.0) #sleep(秒指定)


それぞれ、以下の意味です。

項目
使用例
説明

文字置換
import re
文字置換を使う

ブラウザ
import webbrowser
ブラウザ起動

関数定義
def makeHTMLdoc(html):
HTML作成する関数の定義。htmlは引数(ファイル名)関数の中身は、一段下げる。

ファイル出力
fw = open(html,"w")
書き込みファイルを開く。htmlはファイル名

テキスト読み出し
open(XXX).read()
ファイル名XXXから文字列を取得

ソート
files.sort(key=os.path.basename)
ファイル名でソート

改行
'<br>'
HTMLの改行

画像表示
'<img src="' + fn + '"><br>\n'
HTMLの画像表示

HTML終了
'</body></html>'
HTMLの最後のタグ

文字の置換
re.sub("%title%", 'XXXX', outstr)
文字列の中の"%title%"を、XXXXで置き換える

ファイル書き込み
fw.write(outstr)
文字列のファイル書き込み

ファイル書き込み
fw.close()
ファイル書き込み終了

関数の実行
makeHTMLdoc(html)
HTML作成関数を呼ぶ

ブラウザ起動
webbrowser.open(html)
作成したHTMLを開く

HTMLファイルのヘッダのサンプルです。

- qva2gif.py と同じ場所に入れてください。


header.txt

<?xml version="1.0" encoding="Shift_Jis"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>%title%</title>
</head>
<body>


  • 実行してから、EVAファイルを修正してみてください。アニメGIFが自動的に作成され、HTMLファイルを作り直します。



関連記事


  1. 無料ソフトでアニメを作ってみよう(9VAe きゅうべえ)

  2. スクラッチ、ビスケットの次は 9VAe=第3のプログラミング学習環境

  3. 書き順アニメーションの作り方

  4. 9VAeきゅうべえ:長いアニメを作る方法

  5. 動くLINEスタンプのAPNG作成:無料ソフト9VAeきゅうべえ

  6. 9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ

  7. 9VAeきゅうべえで作成したSVGアニメーション

  8. アニメソフト 9VAe をカスタマイズする方法

  9. 9VAeをキッズプラザ大阪向けに改造する

  10. 9VAe / 9svg データフォーマット解説

  11. OpenCV と Python を使ったアニメーション動画用紙のスキャン画像位置合わせ

  12. Python で アニメGIF ダウンロード HTML を自動作成