Polymerアドベントカレンダー１日目を担当します、川上と申します。
今回は、私が初めて作って公開したWebComponentsを紹介させ頂きます。
split-upload
概要
動画ファイルなど、ファイル容量の大きなファイルをアップロードする際に、一定のサイズで分割してアップロードすることが出来ます。
インストール方法
はじめに、webcomponents.orgにアクセスし、検索BOXでuploadと検索してもらうと、uploadに関連する機能を持ったタグがリストアップされ、その中に、split-uploadがありますので、そちらを選択して下さい。
次に、画面の右パネルにINSTALLED VIA BOWERとありますので、そちらを選択しますと、Bower を使ったインストールコマンドが表示されますので、そのとおりに実行して下さい。
インストール後に、使いたい.htmlファイルを開き、<header>内に以下を記入して下さい。
<header>
...
<link rel="import" href="bower_components/split-upload/split-upload.html">
</header>
使い方
HTMLに以下のようにタグを入力します。
<upload-split id="uploadSplit" url="/foo/bar"></upload-split>
urlパラメーラーは、送信先を指定します。
このままではファイルを指定できないので、ファイルを選択するボタンと、ファイルを送信するボタンを追加します。
<upload-split id="uploadSplit" url="/foo/bar">
<button onClick="choice()">choice</button>
<button onClick="upload()">upload</button>
</upload-split>
<script>
function choice () {
const split = document.getElementById ('uploadSplit');
split.choiceButtonClick ();
}
function upload () {
const split = document.getElementById ('uploadSplit');
split.uploadButtonClick ();
}
</script>
choiceメソッドは、ファイルを指定するメソッドでクリックされた時に、split-uploadのchoiceButtonClickメソッドを実行するようにしています。
uploadメソッドは、ファイルを送信するメソッドでクリックされた時に、split-uploadのuploadButtonClickメソッドを実行するようにしています。
以上で、ファイルを送信先に分割して送ることが出来ます。分割サイズについては、デフォルトでは５MBで分割するようになっております。
※受け取った後に、サーバー側で分割されたものを合成する必要があります。そのサンプルコードはこちらに書いておりますので参考にして下さい。
感想
大きな動画ファイルをアップロードする事は、以前からなんとなくやり方はわかっておりましたが、いざとなると、「どうやって分割するの？」「分割して壊れないの？」「戻す時はどおするの？」など、色々とわからない点が出てきましたが、Google検索でなんとかなりました。
またWebComponentsにして良かったところは、今回のように「実装が複雑な機能」を、HTMLタグとして使えるようになるという事です。split-uploadは、ファイル選択とファイル送信にJSを使いましたが、このJSを無くしパラメーターのみにすることも可能です。そうなると、HTMLタグのみで複雑な機能なども動かせることになります。まさに、HTMLのエコシステムと言えると思います。
是非、ここまで読んで頂けた方は特に、WebComponentsを作って、それを公開してエンジニアみんなが、よりクリエイティブな事に専念できる世界を作っていきましょう！