気軽にアニメを描きたい

ペンの色は、個別のボタンで選択可能にした（カラーコードによる自由指定も可能）

canvasの画像は、Base64エンコードを使用してテキストに変換後、配列として保存しておく

（ページ切り替え時に対応ページのものに更新）

表示の構造とか

アニメを描く際には、1枚前のページを見れると便利なので、別レイヤー的なものを利用して実装していく

HTMLでは、Z軸（奥行き）を指定することで要素の上に別のものを表示するということができるので、描いているcanvasとは別に画像を表示させるようにしておく（編集中のページ内容には干渉しないようにするため）

描画のコピー機能

canvasに描いた線のデータは、背景が透過された状態の画像として取得できるため、すでに書いた内容の上に線を追加したりといったことも直感的にできる（重ねたときにcanvasの枠の大きさで隠れるとかいったことは起きない）

そのため任意のページに描いた内容を好きなページに転写（追加）するというようなこともやりやすい

画像を＜コピー＞するために、「クリップボード」のような役割の変数を定義、任意の画像を格納させる

追加したいページを開いた状態で、既存のcanvasの内容に新しく画像として重ねられるようにすれば完了だ

編集と再生

編集画面（デフォルトで表示）から「再生」を押すことで、一定間隔ごとに画像が切り替わりアニメーションのように見ることができる

（切り替わるタイミングはFPSで指定が可能）

・「再生」画面では画像の切り替えを停止・再開させることもできる

・「編集」ボタンで編集画面に復帰

・画面下部のUIからファイルやデータ共有に関する操作を行えるようになっている

編集ファイル保存・読み込み

ページ毎のBase64エンコードデータは配列にあるので、処理的にはそれをつなげてテキストファイルでダウンロードさせれば保存完了である

・「保存」ボタン横に入力欄を設けて、ファイル名を入力したのちにダウンロードできるように

編集

画面中央の枠に1フレーム分描く

ページの追加や移動は右側のボタンから行う

オレンジ枠で囲まれたボタンでフレームのコピペができる（表示されている1フレームの内容をコピーして、「追加描画」でペースト）

ペンの色ボタンは7色から選べる（「選択」からカラーコード指定も可能）

前フレームの内容を見ながら描くこともできる

閲覧

描いたアニメの再生やアニメのファイルに関わる操作を行う

編集画面から「再生」ボタンを押すと再生が始まり、途中での停止や再開も自由（ボタン横で表示中のフレーム数を確認）

「編集」ボタンから編集画面に戻れる

表示されているテキストボックスにファイル名を入力し、「保存」ボタンでファイルをダウンロード（拡張子は自動で追加される）

「読み込み」から既存のファイルを読み込める

※このアプリで扱うファイル拡張子は「.pgimg」