geta1972TweetPocketCheckこんにちわ。毎朝ブログを書いているので本当は、「おはようございます」なのですが、夜に読んでいる人のために「こんばんわ」バージョンも必要かもしれません・・・こういう時、英語の「Hello」って便利でいいですね。最近WEBページで使えるライブラリを自作する事が増えてきましたが、世の中OSS天国になりつつあるのに、ファイルアップローダーで便利に使えそうなのが無かったので、車輪の再発明と言われても仕方がありませんが、無いものは再発明ではないと言い聞かせて作り込んでいます。いうか、ライブラリ作るのってめちゃくちゃ面白いし、その後の自分の仕事が一気に捗るので、作れば作るだけ将来的な貯蓄をしているような感覚です。今回のバージョン(ver1.3)でsound.jsを追加して、mp3ファイルのアップロードをサポートするようにしました。普通にmp3ファイルをアップロードするだけではなく、音声ファイルの内容を聴いて確認できたり、phpで取得しづらいサウンドデータの再生時間数の取得などの情報を同時にサーバーに送るようにしています。今回「ID3タグ」という、mp3に格納されている、音楽データ(任意タイトルやアルバム名、アーティスト名など)は取得できていないので、どうやらjavascriptでも十分に取得できると書かれたページを見つけたので、次回対応してみたいと思います。Javascriptでmp3ファイルのID3タグを表示とりあえず、アップロード時の画面サンプルは以下のようになります。再生コントロールパネルはブラウザ標準のものを使っているので、使用するブラウザによって表示が違ってしまいますが、操作機能と情報は同じになるはずです。(PCブラウザ以外は未検証)受け取りのサーバー側では、画像を受け取るよりもシンプルにデータ保存ができるので、この辺はサンプルphpを参照してください。使い方githubで取得したファイル群をフォルダ毎使用環境に設置して、音声ファイルをアップロードしたHTMLページに以下の2点を記述するだけで、この機能を取り入れることができます。src="sound.js"></script>src属性のファイルパスは環境に合わせて、変更してください。:サーバーに送信する際の任意のクエリ情報を登録できます。記事内にも書きましたが、IDv3タグの対応と、コントロールパネルのどのブラウザを使っても同じUIになるように統一デザインを適用したいですね。画像アップロードも同様に、アップロード前の確認画面でのテンプレートを表示ページ個別に変更できるようにする機能も今後必要になるかもしれません。あとは、まだ予定してはいませんが、ブラウザへのドロップ&ドラッグによる、ファイルアップロードも操作できるブラウザは限られてしまいますが、きっとこれを使うユーザーなどから要望されることは目に見えているので、予定しておいたほうが良さそうですね。画像と音声以外のファイルタイプも必要かもしれません。・テキストファイル・Officeファイル・svg・プログラムソースコード・csvデータのカラム取捨選択機能...このように考えると、ファイルアップロードは手作業でコーディングすると時間がかかりますが、ライブラリでこの辺の構築作業がショートカットできると非常に便利ですね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。