アニメの編集と閲覧のようなものができるアプリを作った。
アニメを描きたい、（特にアイデアとかとかあるわけじゃないけど…）
うごメモみたいなアプリはないのか？
まあ作ってしまえばいいか
GAS (Google Apps Script)
複数画像から構成されるアニメ（パラパラ漫画のイメージが近いかもしれない）を手軽に描ける
とりあえず絵を描けないと始まらないのでcanvas要素を配置していく
moveToとlineToの2種類の命令があって少々混乱したが…（描く線の始点・座標をそれぞれ指定する関数）
※消しゴムを実装する場合は、ラインの色ではなくcontextのプロパティを変更する処理が必要で、これが分かりにくかった（白色で塗りつぶしているわけではない）
ペンの色は、個別のボタンで選択可能にした（カラーコードによる自由指定も可能）
canvasの画像は、Base64エンコードを使用してテキストに変換後、配列として保存しておく
（ページ切り替え時に対応ページのものに更新）
アニメを描く際には、1枚前のページを見れると便利なので、別レイヤー的なものを利用して実装していく
HTMLでは、Z軸（奥行き）を指定することで要素の上に別のものを表示するということができるので、描いているcanvasとは別に画像を表示させるようにしておく（編集中のページ内容には干渉しないようにするため）
canvasを扱う際は、描画（特に更新）に注意が必要である
新しい画像などを表示する際に自動で内容を消去してくれるわけではないので指定を間違えるとうっとうしい
……逆に考えればこちらから消去するまで内容は消えないので、どんどん重ねていくことも可能だ
うまく使えば制作（利用時）の手間を省けるかもしれない
canvasに描いた線のデータは、背景が透過された状態の画像として取得できるため、すでに書いた内容の上に線を追加したりといったことも直感的にできる（重ねたときにcanvasの枠の大きさで隠れるとかいったことは起きない）
そのため任意のページに描いた内容を好きなページに転写（追加）するというようなこともやりやすい
画像を＜コピー＞するために、「クリップボード」のような役割の変数を定義、任意の画像を格納させる
追加したいページを開いた状態で、既存のcanvasの内容に新しく画像として重ねられるようにすれば完了だ
編集画面（デフォルトで表示）から「再生」を押すことで、一定間隔ごとに画像が切り替わりアニメーションのように見ることができる
（切り替わるタイミングはFPSで指定が可能）
・「再生」画面では画像の切り替えを停止・再開させることもできる
・「編集」ボタンで編集画面に復帰
・画面下部のUIからファイルやデータ共有に関する操作を行えるようになっている
ページ毎のBase64エンコードデータは配列にあるので、処理的にはそれをつなげてテキストファイルでダウンロードさせれば保存完了である
・「保存」ボタン横に入力欄を設けて、ファイル名を入力したのちにダウンロードできるように
※操作画面は編集時と再生/閲覧時の2つに分けられ大きく異なるが、起動（アプリへの最初のアクセス）時にはファイルの読み込み・描画の両方が可能な状態になる（どちらからでもすぐに始められる）
画面中央の枠に1フレーム分描く
ページの追加や移動は右側のボタンから行う
オレンジ枠で囲まれたボタンでフレームのコピペができる（表示されている1フレームの内容をコピーして、「追加描画」でペースト）
ペンの色ボタンは7色から選べる（「選択」からカラーコード指定も可能）
前フレームの内容を見ながら描くこともできる
描いたアニメの再生やアニメのファイルに関わる操作を行う
編集画面から「再生」ボタンを押すと再生が始まり、途中での停止や再開も自由（ボタン横で表示中のフレーム数を確認）
「編集」ボタンから編集画面に戻れる
表示されているテキストボックスにファイル名を入力し、「保存」ボタンでファイルをダウンロード（拡張子は自動で追加される）
「読み込み」から既存のファイルを読み込める
※このアプリで扱うファイル拡張子は「.pgimg」
以下のリンクからアプリにアクセスできます。
tag: