私が初めて作ったWebComponentsのご紹介

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を作って、それを公開してエンジニアみんなが、よりクリエイティブな事に専念できる世界を作っていきましょう！