2011-05-21
■jQuery File Upload + ASP.NET MVC
ブラウザ上へのDrag & DropでファイルをアップロードできるjQueryプラグイン「jQuery File Upload」をASP.NET MVCで使ってみています。
「jQuery File Upload」本体のソースとデモはこちら。
・ソース
blueimp / jQuery-File-Upload - GitHub
https://github.com/blueimp/jQuery-File-Upload
・デモ
http://aquantum-demo.appspot.com/file-upload
Firefox4、Chrome10、Mac版Safari5ではブラウザ上へDrag & Dropしてファイルをサーバーにアップロードできます。
IEなどHTML5のDrag & Drop機能とFile API機能をサポートしないブラウザ*1では「Add File」というボタンをクリックするとダイアログが開いてファイルをアップできます。これはjavascriptでiframeを生成して処理している様子。ここまで面倒見てくれるのがうれしいですね。
上記のGitHubのサイトからソース一式をダウンロードすると中に「example」というフォルダがあり、これがすぐ使えるサンプルになっています。
ただしサーバー側のソースコードがphpなので、自分用にC#のASP.NET MVCのコードを書きました。メモ代わりに載せておきます。*2
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.IO; namespace jQueryFileUploadTest.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public ActionResult FileUpload() { if (this.Request.Files.Count == 0) { return Content("No files received.", "text/plain"); } else { HttpPostedFileBase uploadedfile = this.Request.Files[0]; string fileName = Path.GetFileName(uploadedfile.FileName); string fileType = uploadedfile.ContentType; int fileSize = uploadedfile.ContentLength; uploadedfile.SaveAs(this.HttpContext.Server.MapPath("/Upload") + "\\" + fileName); JsonResult result = Json( new object[]{ new{ name = fileName, size = fileSize, url = "//Your Site/Upload/" + fileName, thumbnail_url = "//Yoor Site/Content/img_arrow.png", delete_url = "//Your Site/Home/FileDelete?filename=" + HttpUtility.UrlEncode(fileName), delete_type = "Delete" } } ); // ifreme対策 result.ContentType = "text/plain"; return result; } } public ActionResult FileDelete(string fileName) { if (String.IsNullOrEmpty(fileName)) { return Json(false); } bool result = false; FileInfo fi = new FileInfo(this.HttpContext.Server.MapPath("/Upload") + "\\" + HttpUtility.UrlDecode(fileName)); if (fi.Exists) { fi.Delete(); result = true; } return Json(result); } } }
「example」のhtmlの方はformのaction属性のurlを変えるだけで、ほぼそのまま使えます。
VisualStudio 10用のプロジェクト一式はこちら。
https://bitbucket.org/hayashih/jqueryfileuploadtest/downloads
実は最近になって「jQuery File Upload」は根本的に書き換えられたんですよねー。
現在のバージョンと以前のバージョン(v.4)はUIもAPIもOptionもがさっと変わってます。
特にUIは激変。以前のバージョンのUIはこちらにスクリーンショットが載っています。
http://phpspot.org/blog/archives/2011/03/jqueryjquery_fi.html
「Upload File」という緑色の枠にファイルを近づけると枠がびよーん！と伸びてファイルをDropできるというUIでした。これはHTML5 Drag & DropのサンプルコードでよくみかけるUIでいかにもな感じです。
ですが、実はこのUIは実際にサイトに組み込んで使ってみるといまひとつだったりもします。HTML5 Drag & Dropはまだまだ一般的ではありません。多くの人たちは枠の中にファイルをドロップするという動作自体に気がつかないため、とっつきにくいUIなのです。現状はDrag & Drop対応のブラウザでも「Add File」というボタンがあったほうが使いやすいと思います。
なので新バージョン「jQuery File Upload」のUIはより実用的な方に進化してGood Jobだと思います(^^)
■ついでに
ASP.NET WebForm用のサンプルは旧バージョン(v.4)用ですが、以下のページで紹介されています。
https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-for-C%23-%28Forms%29
サーバー側のコードは現バージョンのjQueryFileUploadでもほとんど変わりなく使えるはずです。たぶんアップロード成功後に戻すJSONを少し書き換えればいいと思う。
■Chim↑Pom展「REAL TIMES」
---------------------------------------
会期：2011年5月20日（金）〜25日（水）期間中無休
会場：無人島プロダクション
東京都江東区三好2-12-6 SNAC内
オープン：平日（月〜金）13:00-21:00 ／（土・日）11:00 -21:00
入場料：500円
TEL：03-6458-8225
www.mujin-to.com
※来場者にはChim↑Pom新作音声CDを進呈
※入場料の一部は義援金として寄附
---------------------------------------
5/1に渋谷駅構内に展示されている岡本太郎の版画「明日の神話」に福島第一原発爆発事故の風刺画が追加されるという出来事がありました。
岡本太郎「明日の神話」に原発風刺画が追加される - hara19.jp
http://hara19.jp/archives/6327
5/18になってアーティスト集団「Chim↑Pom」が風刺画を追加した事を表明。
芸術家グループが表明＝岡本太郎氏の壁画いたずら―福島第1原発事故の絵
http://headlines.yahoo.co.jp/hl?a=20110518-00000165-jij-soci
この人たちだったのか。素人のいたずらにしては手が込んでると思った。
「Chim↑Pom」は以前にこんなパフォーマンスを行って物議をかもしたグループです。
Chim↑Pom 広島上空にピカッを描き問題になり展覧会を自粛し中止に - WebDICE
http://www.webdice.jp/dice/detail/1020/
清澄白河で開催されている展覧会で原発風刺画の原画が見られるというので行ってきました。
商店街の一角をギャラリー化している小さなスペースでしたが、結構人があつまってました。ギャラリー内では風刺画を渋谷駅の「明日の神話」に貼付ける様子を撮ったビデオが流されていました。まさに白昼堂々と貼付けてたw あんなに堂々とやってたら誰も怪しむまい。
それにしても、駅の壁画にいたずら→ニュースに→折りをみて実行表明→展覧会で展示、ってカンペキな流れですね！なんて手慣れたパフォーマーなんだろうか。唖然。
原発の絵とビデオ以外に展示されていたのは、
・「Chim↑Pom」メンバーが福島第一原発の展望台に登り、煙を吐く原発を撮り、その場で旗を書く、そして降りてきて麓の田んぼのカカシに放射線防護服を着せて帰るというビデオ
・「Chim↑Pom」メンバーが相馬市へ行き、現地の人たちと一緒にがれきだらけの荒野の中で円陣を組んで100回気勢をあげるというビデオ
・福島第一原発半径30キロ以内の草花をあつめてつくったオブジェ
などでした。
これらがアートなのかパフォーマンスなのか、いいのかわるいのかは私はよくわかりません。
■SmartAR
統合型 拡張現実感 技術 “SmartAR(スマートAR)”を開発
http://www.sony.co.jp/SonyInfo/News/Press/201105/11-058/
マーカー不要のAR技術「SmartAR」、ソニーが開発 - ITMedia
http://www.itmedia.co.jp/news/articles/1105/19/news116.html
22日まで銀座ソニービルで体験イベントをやっていたので覗いてきました。
---------------------------------------
＜イベント情報＞
5月20日(金)〜22日(日)まで、東京・銀座 ソニービル8階 コミュニケーションゾーンOPUS（オーパス）にて“SmartAR”技術を体験して頂けるイベントを開催します。
開催概要
開催期間 ： 2011年5月20日（金）〜5月22日（日）
開催時間 ： 11:00 〜 19:00
開催場所 ： ソニービル 東京都中央区銀座5-3-1
03-3573-2371
---------------------------------------
カフェのメニュー、壁に吊るした衣服、看板などをすばやく認識。角度を変えてもOK。カメラやライトのような物体を3次元で認識する事もできてました。
もう実用寸前かも？という感じでしたねー。
■「帰ってきたザリガニワークス展」
コレジャナイロボ
http://www.zariganiworks.co.jp/korejanairobo/
どういうわけかグッドデザイン賞まで受賞しているそうですがw、
展覧会が開催されていたので覗いてきました。
---------------------------------------
帰ってきたザリガニワークス展
コレジャナイロボ幻の建設計画
日時：2011年5月21日（土）〜6月12日（日）
場所：Paul Smith SPACE GALLERY
東京都渋谷区神宮前5-46-14 3F／12：00〜20：00／水曜定休／TEL:03-5766-1788
---------------------------------------
会場は南青山のPaul Smith SPACE GALLERYというオサレスポットです♪
