たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

ブラウザUIにおける効率のよいファイルアップロード

icon February 10, 2006 6:35 PM by yuugo このエントリーを含むはてなブックマーク

山本ゆうごです。

ブラウザでファイルをアップロードするときには、<input type="file">を使います。開発者にとっては常識ですが、一般の人には「なぜこんなに面倒なのか」が伝わらず、業務アプリにおいては要件定義でもめる部分です。

面倒なわけ

通常のデスクトップアプリでは、ファイルの選択は次のように行われます。

  • ドラッグ&ドロップ
  • 右クリックから「送る」
  • そもそも固定のディレクトリにファイルを置いておけば処理をしてくれる

これに対して、<input type="file">を使うと、「ファイルの選択ダイアログ」が出てきます。ファイルの選択ダイアログで開かれる初期ディレクトリは、必ずしも固定ではなく、変わることもあります。主に二つの面倒さに分けることが出来ます。

  1. ディレクトリを移動する作業
  2. ディレクトリの中のファイルを探す作業

ディレクトリは「絶対IEではこのディレクトリしか見ない」と決めればそうそう変わることはないのですが、(例えばマイドキュメント)その中から「さっき編集していたファイル」を探すのはまぁまぁの手間です。

解決策1:ActiveXコントロール

BFupなどのActiveXコントロールを使ってしまうという手は、業務アプリではちょいちょい行ってしまっています。BFupであれば、ドラッグ&ドロップでファイルアップロードが可能です。ブラウザじゃぁダメだっていうんだから、普通のデスクトップアプリと同じように機能するActiveXを使えばいいじゃないかと。ただし、こういうことが通用するのは、企業内での閉じたシステムの場合のみです。一般ユーザに公開するシステムでは通用しないでしょうし、そもそも、既存のシステムに手を入れる必要があります。

解決策2:FTP

FTPクライアントであれば、専用アプリでどうにでもなりますから、FTPで上げるという手もあります。ただし、これはそのシステムの運用者がするようなことであり、一般ユーザがするものではないでしょう。既存のユーザ管理やセッション管理とはまったく別のレイヤーでの監理になります。一般ユーザにFTPのアップロードを公開するようなサービスもまずないと思います。

同様にWebDAVやSMBによるファイル共有も、「ファイルのアップロード」ではありますが、システムの根本のアーキテクチャ方針に手が入ります。

解決案3:ファイルのフルパスをコピー&ペースト

なんだと思われるかも知れませんが、結局「送りたいファイル」はフォルダを開いた目の前にあるので、そのフルパスを<input type=file>のテキストBOXに貼り付けることが出来ればそれでいいのです。

ファイルのフルパスコピーはwindows標準の機能では存在しないので、ドラッグ&ドロップでファイルのフルパスを取得するツールを作りました。

http://www.tatamilab.jp/~yuugo/files/fullpath.js

このjsファイルはwshとして動きます。ドラッグ&ドロップでさえ面倒なので、右クリックの「送る」に入れましょう。「送る」は各ユーザプロファイルの「SendTo」フォルダです。

こうすると、ファイルを右クリックして、fullpath.jsに送りますと。

次に、ファイルのアップロード画面に行って、「ペースト」。

あとは、参照ボタンさえクリックすることなく、サブミットすればファイルがアップロードされます。

まとめ

ちょっと大げさですが、従来の方法と比較してみます。

  • 従来の方法
    1. ファイルを編集後保存する
    2. 参照ボタンをクリックし、ファイルの選択ダイアログを開く
    3. 1で保存したフォルダに移動する
    4. 1で保存したファイルを探すために
      • 詳細一覧にし
      • 更新日順に並べ
      • 最も新しいタイムスタンプであることを確認し
      • ファイルを選択する
    5. サブミット
  • フルパスコピペ法
    1. ファイルを編集後保存する
    2. 1のファイルのフルパスをコピー
    3. ファイルのアップロードのテキストBOXにフルパスをペースト
    4. サブミット

フォルダを移動したり、ファイルを探したりする手順がなくなっているのがポイントです。「探す」行為は、何も生産していないので、100%ムダです。コストばかりではなく、「探す」行為には、「間違ったファイルを選ぶ」というリスクもあります。コストとリスクの両方が存在する「探す」行為は、たとえクリック数が増えたとしても追放すべきです。

COMMENTS

小ネタなのですが「Sendto」のフォルダは「スタート」→「ファイル名を指定して実行」→「sendto」と入力してEnterキーで行けますよー。

February 11, 2006 7:07 PM by 笹川%DTPオペ  

笹川さんありがとうございます。知りませんでした。

同じ列に並んでいるという理由で、「ファイル名を指定して実行」に「デスクトップ」と入れるとデスクトップフォルダが開かれました。実用度ゼロですが、あそこはそういう検索パスなんですね。

February 11, 2006 10:17 PM by 山本ゆうご  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.