Amazon S3で画像を直接アップロードするためのJSを書いた - 未踏作業日誌――余計なもの作るよ！

必要なスクリプトを読み込んでbodyでonloadすると，特定のdiv要素に対してアップロードボタンを貼り付ける物を作った．

最初はjQueryやAjaxで一生懸命作っていたものの，結局は使う場所と言えばタグを追加する部分だけで，非同期通信は夢のまた夢な機能だった．

と言うのも，JSで動的にタグを追加してフォームを作成し，そのパラメータをAjaxに渡してもどうやら上手く行かない．Ajax側のオプションが足りないのか，それともパラメータが欠損しているのかわからないけれど，Bad Requestが返ってくる．

既にAjaxでS3にアップロードするTypeScriptを作っている人がいて，GitHUB上で公開してはいるものの，システム側のソースコードがScalaで書かれていてRubyと互換性がない．

認証の仕組みやリクエストヘッダ等の知識はないため，今更ここで付け焼き刃で勉強しても役に立たないということがよくわかった．

と言うのも，最初はS3に対してPOSTリクエストを送るため，Ajaxを用いていたものの，JSのsubmitとAjaxで何らかのリクエストの情報が異なっていることに気がついた．

ほぼ同じ内容のリクエストを作っているはずなのにAjaxでどうしてもBad Requestが返ってくる．

Ajaxのオプションの付け方やパラメータが不適切だから，formをsubmitした場合と異なるリクエストが生成されていると解釈できるが，そもそもフォームの中身を展開してAjaxに丸投げしているのに，同じ動作にならないことに疑問を感じる．

ここからはAjaxとsubmitした場合とでリクエストヘッダの違いをよく読みながら，Ajax側のオプションへと落としこむ作業をしなければならない．

先にも書いたようにリクエストヘッダの知識はさっぱりなので，submitと同じなAjaxのリクエストを書く自信はない（物凄く時間をかけるのは別の話）．

Ajaxで実装できると，非同期通信ができるようになるため，他の人がプログレスバー等のUIを実装しやすくなる．

現状ではただのsubmitとなっているため，リダイレクトされるまで待たなければならない．

かなり気になるところではあるが，システム側に投稿が完了した通知をプッシュする必要があるため，勝手にリダイレクトしてくれたほうが，都合がいいかもしれない．（投稿を反映させるためのプッシュ通知用JSを読み込んでください，ということにはナリそうだが……）