HTML5 FileAPIの不満な点

category-icon

 こんにちは、martinです。なかなかまとまった時間が取れないので、ppBlogの最新版をリリースできずにいます(--)

 最新版のバージョンとしては、v1.9.0を予定しています。新機能としては、コメント認証機能だとか、HTML5を意識したppBlogエンジンでしょうか(ちなみにテーマBasicのソースはHTML5仕様ですよ)。

 で、このHTML5なんですが。過去のエントリーでいくつかあるように、最新版では、記事投稿の際に複数ファイルアップロードが可能になっています。HTML5のFileAPILink を積極的に採り入れたものにしようか、それとも「レガシーな」もので実現させるか迷いましたが、とりあえず「レガシー」なバージョンで行こうと思います。理由はいくつかありますが、一番の理由は、どうもHTML5のFileAPIの使い勝手が悪い点です。

 ブログでの写真投稿において、一度に複数枚の写真を選択してアップロードできる点は、HTML5を使う魅力のひとつですが、この「複数枚のファイルを選択」というのが、どうも洗練されていない印象です。例えば、アップする写真を複数枚決めてそれをアップロードする場合を考えてみます。頭の中では、大まかに写真をのせる順番が決まっていて、ファイル選択画面から、コントールキー(CTRL)を押しながら、順序良く写真をいくつか選んだとします。最新のブラウザなら以下のように、multipleを指定するだけで、この複数枚選択という動作が可能になります。

<input type="file" name="src[]" multiple />

でも、残念なことに、この選んだ順序というのは、FileListLink には反映されないのです。否応なしに、ファイル選択画面上で表示されている通りの順序になるようです。何か、選んだ順序を紐付けするような属性が欲しくなります。

 もうひとつ。選んだ複数枚のファイルは、FileList配列に収められて、あたかも配列のようにDOM操作が可能ですが、この配列は、readonly、つまり読み取り専用Link のようです。たとえば、ちょっと余分に画像を選んじゃったよ、という場合に、その余分なファイルだけをリストから除きたいというケースは、間違いなく出てくると思いますが、そういう操作は出来ないようです。再度、すべてのファイルを選び直す必要があります。これは、ユーザーには使い勝手が悪いですね。

 というわけで、上記の理由により、ppBlogではW3C FileAPIの積極的な採用は見送りました。でも、HTML5に頼らずとも、一度に複数枚のファイルのアップロードは可能です。Stickmanさんが、2005年に、すでにそういうギミックを見付けていましたLink 。最初見たときは、目から鱗でした。やってることはすごくシンプルなんですが、まさにコロンブスの卵ですね。で、彼のスクリプトは、ppBlogにはちょっと冗長でしたので、参考にしつつ、ppBlog仕様にしました。実際のデモを見てみましょう。尚、デモでは「アップロード」ボタンは、文字通りただのボタンなので、実際にはファイルはアップロードされませんが、雰囲気は十分に伝わると思います。

レガシーな複数ファイルアップロードのデモ →http://p2b.jp/demo/EasyFileUpload.htmlLink

 また、Firefox最新版など、File APIに十分対応しているブラウザでは、選んだ画像をサムネイル表示するようにしています。Firefoxだと以下のようなスクリーンショットです。Firefox以外では、普通に選んだ画像のファイル名が選んだ順にリスト表示されます。

MFU-shot
Firefox3.6でのスクリーンショットです。

この部分のスクリプトは以下の感じ。

 if(window.File && window.FileList && window.FileReader){ // FileAPIに対応しているなら
  var file = el.files[0];
  if(file.type.match(/image.*/)){
   var reader = new FileReader(); // FileReader オブジェクト!
   reader.onload = function(){
    var span = d.createElement("span");
    span.innerHTML = '<img class="thumb" src="' + this.result + '" alt="preview" /> (' + Math.round(file.size / 1000) + ' KB)';
    li.insertBefore(span, li.lastChild);
   };
   reader.readAsDataURL(file); // 画像データの読み込み
  }
 }

 レガシーなインターフェイスですが、任意のリストを削除出来ますし、HTML5仕様より却って高機能(=使い勝手が良い)な気がします。

 ちなみに、デモのソースを見ていただけると分かりますが、INPUT[type=file]要素に、レガシーにonchangeイベントハンドラを仕込んでいます。document.addEventListerで監視しても良いのですが、IEでは、onchangeイベントがバブルしないようで:(

 余談ですが、「目から鱗」の語源は、新約聖書の「使徒行伝(しとぎょうでん)」中のエピソード、見えなくなっていたパウロLink (サウロ)の目からうろこのようなもの(コンタクトレンズ?)が外れて再度見えるようになったという「パウロの回心」からですね。「豚に真珠」と同様、日本とか中国由来と思いきや、新約聖書からの諺です。

   

— posted by martin at 09:28 pm   commentComment [4]  pingTrackBack [0]

この記事に対するコメント・トラックバック [4件]

scrollUp1. ぷらむ — 2010/07/29@21:12:20

このコメント欄を開いて、少し気になった点ですが、「管理者の認証」と「画像認識」です。ダブリにも見えるし、役割の違ったものでそうではないかも知れないし。そこの点を整理してから、導入の検討をお願いしたいと思います。
それぞれの機能を適用する、適用しないの選択ができるなら別ですが。

Owner Comment martin Website  2010/07/29@22:53:06

 ご無沙汰してます。画像認証に関してはこれまで通りで、コメント認証機能については、管理画面でオンオフの切り替えが出来ます。このサイトでは、動作確認も兼ねて有効にしていますが、落ち着いたら解除する予定です。
 ダブっているか、に関しては、個人的にはダブルものではないと考えています。もともと画像認証は、海外からのスパムコメントを主なターゲットとして導入したものです。非日本語環境で、ひらがな画像を認識してひらがなを打ち込むのは、それだけで敷居が高いので。コメント認証は、そういう要望があったので採用しました。オンオフの切り替えが出来れば、問題ないだろうということで。

3. ちらみ Website — 2010/10/11@22:56:28

ごぶさたしてます、ちらみです。

本記事とは関係ない話題で恐縮ですが、類似懸案として質問させて下さい。
先日、ちょっと暇つぶしにIE9ベータをインストールしてみたのですが、ppblogでの写真表示で写真効果を入れているものが白枠と写真効果が消えて表示されるようになってしまいました。
あと、ログインボタンによる管理画面へのログインができません。
(上からヌルっと出てくるやつが出てこない)
IE9+Sleipnirだと、そもそも写真効果を付けている写真は写真すら表示されませんが、ログインボタンによるログインは正常に動きました。まぁSleipnir側がIE9に対応してないからだとは思いますが。。

以上ですが、何か解決方法がないでしょうか?

日本は少しずつ肌寒い季節になってきました。そちらはどうですか?お体には気をつけて下さいね:)

Owner Comment martin Website  2010/10/13@20:18:48

ちらみさん、ご無沙汰です。ご報告ありがとうございます。確かに、photoEffect.jsは、IE9向けに修正が必要ですね。「ログイン」アイコンも、うまく作動しないようで。久しぶりにppBlogをいじる時間が取れそうなので、ちょっと調べておきます。
 パリは、最近は朝晩の気温差が大きく過ごしにくい時季ですが、確実に冬に向かってますねぇ。テロ警戒注意報が出たり、なんとも物騒な世の中です。ちらみさんも、お体には気を付けて。新居は、新しい木の匂いなどしそうですね。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0177 sec.
prev
2017.9
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30