LoginSignup
5

More than 1 year has passed since last update.

posted at

updated at

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

アニメーション作成フリーソフト「 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をスマホに保存することができます。

必要なソフト(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
実行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 を自動作成

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
What you can do with signing up
5