Matplotlib Animation embed on web page：アニメーションのWebページ上への埋め込み

これまでMatplotlibでつくったアニメーションはGIF動画としてWebページ上にアップロードしていましたが、Jupyter Notebook上で表示されるボタン操作付きのアニメーションとして表示できる方法がわかったのでメモ（いまさら）。

Once Loop Reflect

この動画はJupyter Notebook上でも表示可能で、再生速度調整、反転再生など可能で便利です。Matplotlibで制作したアニメーションをto_jshtml()でJavaScriptに変換して、それをhtmlファイルとして外部保存して、このページにJavascriptとして埋め込んでいます。

%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np
import matplotlib.animation as animation
from IPython.display import HTML

x = np.linspace(-2,2,50)
y = np.sin(x)

fig = plt.figure(figsize=(6, 6))
plt.axis([-2,2,-2,2], 'equal')

ims = []
for i in range(len(x)):
    ln = plt.plot(x,y, color='#377eb8', linestyle='--')
    dot = plt.plot(x[i], y[i], color='red', marker='o')
    ims.append(ln + dot)

ani = animation.ArtistAnimation(fig,ims,interval=50)
#ani.save("ani.gif", writer = "imagemagick") # save as GIF Animation
plt.close()

# save as JavaScript/Html file
f = open("ani.html", "w")
f.write(ani.to_jshtml())
f.close()

#HTML(ani.to_html5_video())
HTML(ani.to_jshtml())

方法：（Python 3.6、Jupyter Notebook使用）
・アニメーション（変数：ani）をつくったら、ani.to_jshtml()でJavascriptに変換。
・f=open(), f.write()でJavaScript/htmlファイルとして外部保存。
・外部保存したani.htmlファイルをエディタで開きJavaScriptをWebページにコピペ。

制作された動画は「base64」というデータ形式に変換されているようです。画像などをbase64に変換してそのままHTML内に埋め込むことができるようですが、このbase64データというのは以下のような記号の羅列で、この動画のデータだと約10000行もありかなり膨大です。

frames[0] = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbAAAAGwCAYAAADITjAqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz\
AAALEgAACxIB0t1+/AAAADh0RVh0U29mdHdhcmUAbWF0cGxvdGxpYiB2ZXJzaW9uMy4xLjAsIGh0\
dHA6Ly9tYXRwbG90bGliLm9yZy+17YcXAAAgAElEQVR4nO3deVxVZeI/8M8VRMUV10BMM1wQRFIu\
4FqNIm5hLplmo40lo9m3PYdvTfOzma8TbaM11BjTZpvM5EySJigqWq6IimmUkWGyCZiau8Dl/v54\

ページをスクロールしてもなかなか下へ辿りつけないので、この点だけ注意。上の場合はpng画像50枚分が埋め込んでいるのでアップロードするときもやや時間がかかります。
あと、コード内のコメント欄などに日本語が含まれているとエンコード/デコードでエラーがでるかもしれません。