それからデザイン スタッフブログ

現在導入されているHTML5機能API

• WebStorage

  HTML5登場以前は、自動ログインの情報や、ショッピングカートのカート内の情報などはCookieを使用して保存していました。 しかし、Cookieには容量制限やセキュリティ面やデータを保持しておける時間が決まっているなど不安な点が多々ありました。 HTML5では、Cookieに変わるデータ保存の仕組みとしてつくられたのが「WebStorage」です。 「WebStorage」はCookieの後継技術と言っても過言ではなくまず容量に関してはCookieが4KBに対して、WebStorageは5MBと大容量になっています。 またセキュリティ面も向上しており、リクエストがあればサーバーに自動的に送信するCookieとは異なり、WebStorageは自動送信は行わないという特徴もあります。 WebStorageは、目的に応じて使い分けられるように、2つの種類あり、 永続的にデータを保有しておきたい場合に使う「localStorage」とブラウザのウィンドウ・タブ毎が閉じられるとデータ消える「sessionStorage」があります。 ユーザーログインのできるサイトであれば、自動ログインで使うユーザー情報を「localStorage」に保存したり、、 ショッピングサイトであれば「あなたが最近みた商品」といった一時的（ブラウザを閉じるまで）に出したものは 「sessionStorage」を利用するといった使いわけができます。 WebStorageを使っているサイト

  Twitter Amazon

• Geolocation

  GPSなどから位置情報を取得するAPIです。今までもフィーチャーフォン（日本国内で使われいる通称ガラケー）で 位置情報を取得することは可能でしたが、各キャリアともに独自のため、コードが異なっていたのが 正式にHTMLに導入され、全てのデバイスで同じ機能が実現できるようになりました。 また、スマートフォンに限らず、GPSが搭載されていないデスクトップ等でも　無線LAN、Wifi、IPアドレスから位置情報が取得できます。 こちらは、デモを用意しました。 モダンブラウザであれば特に問題ありませんが、スマートフォン等でみるとちょっと感動します Geolocation DEMO ※有線LANで接続している場合など対応ブラウザの場合でも取得出来ない場合があります。  

• Web Workers

  HTMLで読み込まれているJavascriptの処理は、原則として記述されている順に1ファイルずつ処理を進めていきます。 一つのファイルの処理が終わったら、次のファイルと続き、全ての処理が完了して始めてWebページに反映されます。 これは、GoogleChromeだろうが、IEだろうが変わりません。 PC自体の性能やブラウザ性能も向上しているため、なかなかイメージし難いのですが 例えば途中に難しい処理が発生するファイルが一つあった場合、記述されている順番に処理をする原則があるため その難しい処理が終らないと次に進めず、結果として表示が遅かったり、「表示はされたけどボタンが押せない！」といった現象が起こります。 そのような問題点を解決的する為の方法が「Web Workers」となります。 仕組みは至ってシンプルで、1ファイルずつファイルを処理していくのではなく、「同時に複数のファイルを処理する」ことで Webページが表示される時間を短縮するという仕組みです。

  

   

• Drag and Drop API

  ブラウザ内の要素のドラッグ&ドロップができるようになるAPIとなります。 またドラッグ＆ドロップはほぼ全ての要素で導入できます。 こちらは既に取り上げているFileAPIとの連携も可能ですので、そちらを用いたデモを準備しました。 PCでご覧頂ければと思います。 サンプルDEMO ※サーバ等にデータを送信していませんのでご安心ください。

• Canvas API

  本来、画像はPhotoshopなどで、jpegやGif、PNGとして書き出してファイルとして使うのが当たり前でした。 Canvas　APIとはJavascriptで絵を描画する事できる仕組みです！ ちょっとサイバーチックな感じですが、他のブログでも紹介されておりましたので、みたことあるかもしれませんが いくつかサンプルとなるデモサイトのURLを紹介します。

  http://designinstruct.com/web-design/examples-html5-canvas/ ※(英語サイト)　Canvasの作品集、Canvasのサンプルといえば「お絵かきツール」を作ってみた系が多いのですが、 デザイン面でも本格的なお絵かきツール系のデモもあります。→https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch http://roxik.com/mona/ ※少し前に話題になった、「モナリザ」と「写楽」をグニグニ動かす、Canvasデモです。

• History　API

  History APIは、ブラウザの「戻る」や「進む」の機能を拡張したAPIです。 HTML5で追加されたAPIとしてではなくとも、「戻る」・「進む」といった操作はJavascriptでも可能でした。 History　APIとして機能が強化されたことにより、今まではURLを切り替える際に必ず読込しないと切り替える事ができませんでしたが このAPIを利用することで、URLを読み込まずにブラウザのアドレスバーを操作したりすることができるようになります。 勿論、HistoryAPIなので、それで切替えた場合にもブラウザの履歴に反映されています。 概要だけの説明となり恐縮ですが、この技術はAjax等の技術との親和性の高い技術として注目されています。