JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

IEのHTML5 File API対応状況とドラッグ＆ドロップ（DnD）APIの実装例

Internet ExplorerとHTML5 File APIの対応

HTML5のFile APIは、ブラウザ上でローカルファイルを扱うための重要な機能ですが、旧バージョンのInternet Explorerでは利用できませんでした。具体的には、IE9ではFile APIがサポートされておらず、IE10から正式に対応しています。

そのため、IE9以前のブラウザにも対応させるWebアプリケーションを開発する場合は、File APIが使用可能かどうかを事前に判定し、非対応環境向けのフォールバック処理を用意することが推奨されます。

File APIの活用例：ドラッグ＆ドロップ（DnD）

File APIと組み合わせてよく使われるのが、HTML5で新たに導入されたドラッグ＆ドロップ（DnD）APIです。このAPIにより、ブラウザにネイティブなドラッグ＆ドロップ機能が備わり、従来のように複雑なJavaScriptコードを書かなくても、はるかに簡単に実装できるようになりました。

以下は、紫のボックス（boxA）をドラッグして移動させるシンプルなデモのサンプルコードです。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; }
            #boxA { background-color: #6633FF; width:75px; height:75px; }
            #boxB { background-color: #FF6699; width:150px; height:150px; }
        </style>
        <script>
            function dragStart(ev) {
                ev.dataTransfer.effectAllowed='move';
                ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
                ev.dataTransfer.setDragImage(ev.target,0,0);
                return true;
            }
        </script>
    </head>

    <body>
        <center>
            <h2>Drag and drop HTML5 demo</h2>
            <div>Try to drag the purple box around.</div>
            <div id = "boxA" draggable = "true"
                ondragstart = "return dragStart(ev)">
                <p>Drag Me</p>
            </div>
            <div id = "boxB">Dustbin</div>
        </center>
    </body>
</html>

コードのポイント

  • draggable属性：要素をドラッグ可能にするには、対象の要素に「draggable = "true"」を設定します。
  • dragstartイベント：ドラッグ開始時に発生するイベントで、ここでdataTransferオブジェクトを使って転送するデータを設定します。
  • setData()メソッド：ドラッグするデータの形式（Textなど）と値（ここでは要素のID）を指定します。
  • setDragImage()メソッド：ドラッグ中に表示されるイメージをカスタマイズできます。

このように、HTML5のDnD APIを利用すれば、ネイティブアプリのような直感的なユーザーインターフェースを比較的少ないコード量で実現できます。IE10以降やモダンブラウザでの動作を前提とすることで、ファイルのアップロードUIなどにも応用可能です。

  1. HTML5のlocalStorage APIを使ってブラウザにデータを保存する方法

    HTML5 localStorageとは HTML5のlocalStorageは、文字列データをブラウザ内に保存し、現在のセッションが終了してもデータを保持し続けることができる仕組みです。localStorageは有効期限なしでデータを保存します。一方、sessionStorageはセッション中のみ有効であり、ブラウザを閉じると保存されたデータは失われます。 localStorageの用途と特徴 ローカルストレージは、複数のウィンドウ間で共有でき、セッションをまたいでもデータが持続するストレージとして設計されています。特に、Webアプリケーションではパフォーマンス向上のために、ユーザーが作成

  2. HTML5のレスポンシブ対応とは？Webデザインにおける応答性の重要性を解説

    HTML5は、最新かつ人気の高いWebデザイン言語として、デザイン業界に大きな変革をもたらしました。従来のHTMLと比較したとき、HTML5を特別な存在にしている最大の要因こそが「レスポンシブ（応答性）」です。 Webページのレスポンシブ性とは、ページがブラウザ上に読み込まれた後、閲覧に使われたデバイス（PC、スマートフォン、タブレットなど）に応じて、適切な出力・表示を行う能力のことを指します。 旧来のHTMLには多くの制約があり、それが新バージョン誕生のきっかけとなりました。当時のWebデザイナーには、変化するテクノロジーに合わせて柔軟にページを作り込む自由度がなかったのです。 最新のテ