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