SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介(AD)

IE10で動くHTML5アプリ実装例
「File APIを利用したアプリ」

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介(1)

  • X ポスト
  • このエントリーをはてなブックマークに追加

ドラッグ&ドロップ

 File APIを使って任意のローカルファイルを読むためには、ユーザが明示的にWebアプリケーションに対してファイルを「読み込ませる」というアクションが必要になります。

 現在それらのアクションは、ファイル選択フォーム(<input type="file">)を用いるか、ドラッグ&ドロップを受け付けるか、の2つに限られています。このデモンストレーションでは、くじら(MOGUTARO)の大きく開いた口に対して、ファイルをドラッグ&ドロップすることができます。

 以下に示すのは、ファイルをドラッグ&ドロップによって受け取るためのコードを簡略化したものです。

 dragenter・dragover・dropのイベントを制御することで実現しています。dragenter、dragoverでは、デフォルトのイベント処理をキャンセルしています。これは、デフォルトではブラウザはドラッグ&ドロップを受け付け「ない」ため、そのデフォルト操作をキャンセルする必要があるためです。ondropイベントの処理において、ファイルの読み込みとそれに続く処理を実現しています。

$("#mouthOfWhale")
    .on("dragenter", function(e) {  // dragenter時 の ネイティブイベント無効化
        e.preventDefault();
    })
    .on("dragover", function(e) {   // dragover時 の ネイティブイベント無効化
        e.preventDefault();
    })
    .on("drop", function(e) {   // drop時 の イベントのバブリング無効化
        e.stopPropagation();
        
        /*
            ondropイベントのコールバック
            ファイル形式の振り分け
        */
        
    });

ファイル形式の振り分け

 ドラッグ&ドロップされたファイルはondropイベントから取得できます。さらに取得したファイルからファイルタイプを取得します。ファイル形式の振り分けには、このファイルタイプから判定、処理分岐させています。

 なお、jQueryを使用しているため、e.originalEvent.dataTransfer.filesから取得しています(jQueryは、独自のイベントオブジェクトでオリジナルのイベントをラップするためです)が、ネイティブのコードの場合は、e.dataTransfer.filesからの取得となるのでご注意ください。

    // e.originalEvent.dataTransfer.files に対象のファイル(FileList)がセットされる
    var files = e.originalEvent.dataTransfer.files;
    // FileListからFileを取得する
    var file = files[0] || null;
    // ファイルタイプを取得する
    var fileType = (file && file.type)? file.type: '';

    // テキストファイル判定
    if (fileType.indexOf('text/') === 0) {
        processTextFile(file);
    }
    // 画像ファイル判定
    else if (fileType.indexOf('image/') === 0) {
        processImageFile(file);
    }
    // 動画ファイル判定
    else if (fileType.indexOf('video/') === 0 &&
        /probably|maybe/.test($('#tv')[0].canPlayType(fileType))) {
            processVideoFile(file);
    }
    // 音楽ファイル判定
    else if (fileType.indexOf('audio/') === 0 &&
        /probably|maybe/.test($('#audioPlayer')[0].canPlayType(fileType))) {
            processAudioFile(file);
    }
    // etc file
    else {
        processOtherFile(file);
    }

canPlayType(type)による判定

 上のコードで使用しているcanPlayType(type)は、各ブラウザがそのメディアファイルを再生することができるかどうかを判定します。再生可能な場合は「probably」、再生できると確証を得られない場合は、「maybe」、再生不可の場合は「''」がリターンされます。

 メディア要素を扱う際には、ブラウザがどのフォーマットのファイルをを再生できるかというのも注意が必要です。IE10の場合、音楽ファイルであれば MP3 や AAC、動画ファイルであれば H.264形式でエンコードされたMPEGファイルが再生可能です。

次のページ
FileReaderの機能

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介連載記事一覧

もっと読む

この記事の著者

金井 健一(株式会社シーエー・モバイル デザイン室)(カナイ ケンイチ(カブシキガイシャシーエー・モバイル デザインシツ))

主にスマートフォン向けWEBサービスの、UI設計から開発までを担当。Androidアプリの設計/開発などもおこなう。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6500 2012/04/18 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング