こんにちわ。毎朝ブログを書いているので本当は、「おはようございます」なのですが、夜に読んでいる人のために「こんばんわ」バージョンも必要かもしれません・・・こういう時、英語の「Hello」って便利でいいですね。
最近WEBページで使えるライブラリを自作する事が増えてきましたが、世の中OSS天国になりつつあるのに、ファイルアップローダーで便利に使えそうなのが無かったので、車輪の再発明と言われても仕方がありませんが、無いものは再発明ではないと言い聞かせて作り込んでいます。
ていうか、ライブラリ作るのってめちゃくちゃ面白いし、その後の自分の仕事が一気に捗るので、作れば作るだけ将来的な貯蓄をしているような感覚です。
技術レベルも上がるし、商用プログラムスキルなどもアップしてくるし、ユーザー視点も向上してくるし、イイコトズクシです・・・
音声ファイル(mp3)のアップロード対応
今回のバージョン(ver1.3)でsound.jsを追加して、mp3ファイルのアップロードをサポートするようにしました。
普通にmp3ファイルをアップロードするだけではなく、音声ファイルの内容を聴いて確認できたり、phpで取得しづらいサウンドデータの再生時間数の取得などの情報を同時にサーバーに送るようにしています。
ただ、今回「ID3タグ」という、mp3に格納されている、音楽データ（任意タイトルやアルバム名、アーティスト名など）は取得できていないので、どうやらjavascriptでも十分に取得できると書かれたページを見つけたので、次回対応してみたいと思います。
(Qiita) Javascriptでmp3ファイルのID3タグを表示
とりあえず、アップロード時の画面サンプルは以下のようになります。
再生コントロールパネルはブラウザ標準のものを使っているので、使用するブラウザによって表示が違ってしまいますが、操作機能と情報は同じになるはずです。（PCブラウザ以外は未検証）
受け取りのサーバー側では、画像を受け取るよりもシンプルにデータ保存ができるので、この辺はサンプルphpを参照してください。
使い方
githubで取得したファイル群をフォルダ毎使用環境に設置して、音声ファイルをアップロードしたHTMLページに以下の2点を記述するだけで、この機能を取り入れることができます。
1. headにライブラリを読み込み
<script src="sound.js"></script>
src属性のファイルパスは環境に合わせて、変更してください。
2. ページ内に起動オプションを実行
<script>
new $$fileupload_sound({
url : "http://example.com/fileupload/sample_sound.php",
querys : {
exit : true,
size : 300
},
flg_icon_comment : false,
contentTypes : ["audio/mpeg"],
btn_selector : "#btn_sound",
file_select : function(res , options){console.log(res)},
post_finish : function(res){console.log(res)} // すべてのファイル送信完了後の任意イベント処理
});
</script>
option設定の解説
url :
アップロードするサーバーのCGIへのURLを記載
querys :
サーバーに送信する際の任意のクエリ情報を登録できます。
flg_icon_comment :
コメント機能の表示（デフォルトは非表示にしています）
btn_selector :
アップローダを起動するボタンのcss-selectorを記載（class名にすると、ページ内に複数設置することも可能）
file_select :
ファイルを選択した時に実行する任意コード
今後の展開
記事内にも書きましたが、IDv3タグの対応と、コントロールパネルのどのブラウザを使っても同じUIになるように統一デザインを適用したいですね。
また、画像アップロードも同様に、アップロード前の確認画面でのテンプレートを表示ページ個別に変更できるようにする機能も今後必要になるかもしれません。
あとは、まだ予定してはいませんが、ブラウザへのドロップ＆ドラッグによる、ファイルアップロードも操作できるブラウザは限られてしまいますが、きっとこれを使うユーザーなどから要望されることは目に見えているので、予定しておいたほうが良さそうですね。
画像と音声以外のファイルタイプも必要かもしれません。
・テキストファイル
・Officeファイル
・svg
・プログラムソースコード
・csvデータのカラム取捨選択機能
...
このように考えると、ファイルアップロードは手作業でコーディングすると時間がかかりますが、ライブラリでこの辺の構築作業がショートカットできると非常に便利ですね。
Github
https://github.com/yugeta/fileupload
