Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
5

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 3 years have passed since last update.

@danjiro(Danjiro Daiwa)

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

Last updated at Posted at 2018-06-18

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

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

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

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

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

001.gif

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

  1. PEAS motch! もしくは、 9VAeきゅうべえ でアニメを作成すると、EVAファイルができます。これを上映用のフォルダに保存します。
  2. Pythonを使って、上映フォルダの EVAアニメをアニメGIFに変換します。
  3. さらに、アニメGIFを表示するHTMLを自動作成します。
  4. スマホのブラウザで、作成した HTMLを表示すれば、アニメGIFをスマホに保存することができます。

必要なソフト(Python) の入手

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

Windows の場合

  • Python.jpの古インストーラ版からダウンロードするのが簡単。ここ（pythonlinks.python.jp）から32bit/64bitなどを選んでダウンロードできます。 Python2 と、Python3 がありますが、日本語を使う場合は、Python3が使いやすいようです。
    1. 上からダウンロードした、インストーラを実行します。
    2. インストール画面の一番下の「Add Python to PATH」にはチェックを入れ、「Install Now」ボタンでインストールするとよいでしょう。コマンドプロンプトで、Pythonが使えるようになります。

Mac の場合

  • python(Ver2), python3(Ver3) が最初からはいっています。ターミナルから使えます。
  • ターミナルは「アプリケーション＞ユーティリティ」の中にはいっています。ドックの上にターミナルアイコンをドラッグして登録しておくとよいでしょう。
  • ターミナルから「idle」を実行すれば、IDLEが起動します。
  • ※Mac版 9View は、まだ、Pythonから起動できません。

必要なソフト(9view) の入手

  • EVAファイル からGIFアニメの変換には、Windows版 または Mac版、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
実行１ IDLEを使う場合（Windows）
(1) 作成した .py ファイルを右ボタンでクリックし、メニューから「Edit with IDLE」を実行。
(2) Run ＞ Run Module (F5キー)
実行２ コマンドプロンプト（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 にすれば、普通サイズで再生します。）

  • 上の実行１、実行２の方法をつかって、実行してみてください。「指定されたパスが見つかりません。」というエラーが出た場合、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) １秒待つ
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%", '「１コマアニメーション」ダウンロード', 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 きゅうべえ）
  1. 書き順アニメーションの作り方
  2. 9VAeきゅうべえ：長いアニメを作る方法
5
5
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
Sign upLogin
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?