socket.io で HTML5 っぽくファイルをアップロードする
"How to Create a Resumable Video Uploader in Node.js | Nettuts+"
Node.js と socket.io 入門したかったので↑のサイトを見ながら書いてみた。どうしてもバイナリ転送してみたかったのだ。
udonchan/fileupload_via_ws · GitHub
元のコードはグローバル汚染がひどい感じだったり最新のChromeで動かなかったりだったので、自分がかっこいいと思う書き方で書きなおした。普段人のJavascriptのコードとか読まないからこれがかっこいいかはわからない。かっこいい書き方あったら教えてほしい。
あと、ファイルアップロードのフォームをどのブラウザで見てもかわいい感じになるようにした。Webkitのファイルアップロードフォームはまじで見た目がウンコ。それから、ドラッグアンドドロップでファイル指定できるようにもした。個人的にドラッグアンドドロップってUX的にどうかって思ってるんだけど、世の中的にはこれがCoolらしい。お前ら正気か?
困りごと
Blob.slice は String.slice とかとのセマンティクスの整合性の問題で一度ベンダプレフィックスがついた経緯があったはずだけど、Safariの Blob.webkitSlice が最新の仕様のBlob.sliceと同じ動きをしていたりして混乱した。結局深く考えるのはやめて↓のように書いた。SafariにBlob.sliceが無いのが悪い。
if(window.File.prototype.slice === undefined) { window.File.prototype.slice = (window.File.prototype.webkitSlice || window.File.prototype.mozSlice); }
多分古いFirefoxとかだと大きいファイルをアップロードしようとした時に死ぬと思う。最新のFirefoxだと問題なく動く。
あとlocation.hostname === "localhost"
だと socket.io の読み込みに何故か失敗するので(どういう訳か名前解決がぶっ壊れる)、対処療法的に
socket = io.connect(location.hostname === "localhost" ? "127.0.0.1:" + location.port : location.host);
とか書いたけれど、すごく気持ちが悪い。
というか、全然Javaと関係ないのに Javascript という名前なのがそもそも気持ちが悪い。ECMA Script と呼ぶのも現実に即していないので難しい。
Twitter Bootstrap
参考にしたサイトのコードだとFirefoxで表示が糞になるので、前から気になっていてなんとなく使ってなかったTwitter Bootstrap使ってみた。これが良かった。
エンジニアみんながデザインとかできるわけではないから、優れたサービスだけど見た目がウンコで誰も使わないみたいな問題があった(かも知れない)。Twitter Bootstrap によってそういう問題が解決した気がする。以前は jQueryUI とか jQuery Mobileを使っていたが、Twitter Bootstrap はそれらに比べて依存が少ないのが良い。今回はテキストのフォームとドラッグアンドドロップのエリアをくっつけるようなデザインにするCSSを書いているんだけど、jQueryUI とか jQuery Mobile の場合、こういうライブラリで用意されていないUIを実現しようとすると途端に大変になってしまう。その点 Twitter bootstrapは、初めは用意されたUIを組み合わせてサイトを構築して、その後徐々に自前のデザインに移行することを前提に設計されているのだと思った。