SHOEISHA iD

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

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

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

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

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

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

 本連載は、「Developers Summit 2012」(デブサミ2012)において、2月16日に行われた日本マイクロソフト株式会社 春日井 良隆氏によるセッション「次期Internet Explorer、IE10とHTML5 API」(セッション資料はこちら)をもとに、Internet Explorer 10の新機能やHTML5 APIとの関連について、3回に分けて特集します。第1回目の今回は、File APIを利用したアプリ作成の方法について解説していきます。

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

はじめに

 HTML5とそれに関連するAPIの普及により、「Webのアプリケーションプラットフォーム化」への流れが大きく進んでいます。

 Internet Explorer 10(以下、IE10)では、そうしたHTML5と関連APIの数多くがサポートされています。今回の記事では、IE10が新たにサポートするFile APIを中心に解説していきます。

 File APIとは、今までJavaScriptが直接扱うことが出来なかったローカルファイルに対して、読み取り操作を実現可能にするものです。また、今後の展開としてローカルファイルの書き込みや保存、さらにはWebアプリに専用のファイルシステムをサポートするAPIも、W3Cで標準化作業が進行中です。

※注意

 書き込みについてはFile API: Writerで、ファイルシステムについてはFile API: Directories and Systemという仕様が対応しています。

 余談ですが、IE10ではFile APIだけではなく「BlobBuilder」という、File API: Writerに関する一部の機能もサポートされています。こちらのトピックについては、「BlobBuilder を使ってファイルを作成する」という記事に詳しく解説があります。

 今回は、File APIを解説するための題材として、「MOGUTARO eats files!」というデモンストレーションを取り上げます。このデモはIE Test Drive向けに我々が開発したもので、2012年2月16日に開催されたDevelopers Summit 2012においても、「次期Internet Explorer、IE10とHTML5 API」というセッションで紹介されました。

デモの説明

 このデモンストレーションは、ファイルを任意の要素(くじらの口)にドラッグ&ドロップすることでファイルを読み込むことができ、そのファイル形式によって異なる様々な動作をします。

 対象となるファイル形式と動作は以下の4つです。

  • テキストファイル:1行ごとにテキストファイルを読み上げる
  • 画像ファイル:画像の色を解析をして虹を表示後、canvas上に表示する
  • 動画ファイル:動画再生する
  • 音楽ファイル:音楽再生する

 このデモンストレーションのソースコードは、こちらからダウンロードすることができます。

※注意

 以下、掲載するコードはjQueryを利用しています。アニメーションについてはTween.jsをというJavaScriptライブラリを利用していますが本記事ではこちらについての説明は割愛します。

次のページ
ドラッグ&ドロップ

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング