Storageを説明します。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。従来、Webアプリケーションがデスクトップアプリケーションに劣る点として、操作性が悪い、ローカルファイルの読み込みができない、という点が挙げられます。Silverlightを用いた、リッチインターネットアプリケーション(RIA)も登場しています。プラグインを必要とするWebアプリケーションでは、以下のような問題もあります。iOSなど対応するプラグインが提供されていない環境が少なくない制作側にHTML(HTML、CSS、JavaScript)以外のスキルも要求されるHTML側からプラグインコンテンツにアクセスするのが困難HTML5とその周辺技術では、これらの問題も解決する新機能やAPIがいくつか策定されています。今回はそのうち以下のものについて説明します。(1)ドラッグ&ドロップAPIドラッグ&ドロップは、マウスでオブジェクトをつかみながら移動して(ドラッグ)、他の場所に置く(ドロップ)操作です。PCのデスクトップでは日常的に使用されますが、ブラウザでも同様の操作を利用しようというものです。APIを利用する事で、ローカルファイルの読み込みができます。type="file">要素や、ローカルファイルからブラウザへのドラッグ&ドロップによって、任意のファイルをJavaScriptで処理できるようになります。Storageブラウザにキーと値のセットで、データを保存するストレージです。クッキーとも似ていますが、より大きなサイズのデータを格納できる、有効期限がない、などの点で改善されています。ドラッグ&ドロップAPIドラッグ&ドロップは、デスクトップで、オブジェクトの移動操作を行う直観的なUIとしてよく利用されます。ドラッグ&ドロップAPIは、このドラッグ&ドロップ操作をWebページで実現するためのHTML5新機能です。HTML側での準備ドラッグ&ドロップを利用するには、まず、ドラッグされる要素のdraggable属性をtrueにします。draggable属性はほとんどの要素でfalse(ドラッグ無効)が既定ですが、画像とリンクのみtrue(ドラッグ有効)となっています。現時点でOperaはドラッグ&ドロップ未対応、IE9はdraggable属性未対応です。>デフォルト</div>図1:一番上のdivのみドラッグ可能(クリックで拡大)ドラッグ対象要素のイベントドラッグで何か処理をするためには、ドラッグ対象要素のイベントに対して、ハンドラを設定します。ドラッグ関連のイベントには、以下のようなものがあります。以下は、先ほどのサンプルに対してイベントを追加したものです。}サンプルでは、div要素には枠線が緑で背景色が黄緑となるように、スタイルシートがあたっています。ドラッグ開始時に、ドラッグ対象要素の枠線の色を赤に変更して、ドラッグ中には背景色を黄色にします。ドラッグ終了時にドラッグ対象要素を元の配色に戻しています。各イベントで中のテキストをそのイベントの種類を表すように変更しています。ドラッグ中にはマウスカーソル位置情報も表示しています。実行結果は以下の通りです。図2:ドラッグ中(クリックで拡大)ドラッグ中には、ドラッグ対象要素の色とテキストが変わっています。図3:ドラッグ終了(クリックで拡大)ドラッグ終了時には、ページロード時と同じ配色に戻しています。ドロップ先の要素のイベントドラッグイベントとセットで、ドロップイベントもあります。以下のようなイベントを利用する事で、ドロップ先のイベントに対して処理を行えます。以下のサンプルでは2つのdivをドロップ先として、ハンドラを追加してます。追加した各ハンドラでは、ドロップ先の要素の枠線や背景色や中のテキストを変更しています。}以下は、サンプルを実行し、先頭のdiv要素を2番目のdiv要素にドラッグした場合の結果です。図4:ドロップ先に入った時(クリックで拡大)2番目のdiv要素の枠線も赤く変化した事からdragenterが、背景色がオレンジ色に変わった事からdragoverが、それぞれ発生した事を確認できます。以下は、ドラッグ要素をそのままドラッグしながら2番目のdiv要素の上を通り、3番目のdiv要素の上でドロップした場合の結果です。図5:ドロップ先から離れた時とドロップした時(クリックで拡大)各要素の背景色は黄緑、枠線は緑に戻り、2番目のdiv要素には「dragleave」が、3番目のdiv要素に「ドロップ!」という文字列が表示されます。2番目のdiv要素のdragleaveイベントと3番目のdiv要素のdropイベントが発生した事が確認できます。全てのイベントハンドラで指定されているpreventDefaultはデフォルトのイベント処理をキャンセルするためのメソッドです。ブラウザのデフォルトのイベント処理では、ドロップを受け付けないため、preventDefaultメソッドでそれをキャンセルしないとドロップできません。WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。誠にありがとうございます。下記日程にて、メンテナンスを行います。ご理解いただけますよう、お願い申し上げます。状況により前後する場合がございます。※上記以外の会員機能(サイトへのログインなど)はご利用いただけます。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。