続々続JavaScript! | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2012.3.21

続々続JavaScript!

引っ越したことによって生活習慣が良い方向にガラリと変わり、
健康街道まっしぐらなgood sunこと山口です。
すっかり肩こりも解消された感じです。
日々の軽い運動はデスクワークが中心となるプログラマーには素晴らしい効果をもたらします。
さて今回のJavaScriptネタはHTML5の中でも
私がグラフィック機能と並んで好きな
LocalStorageとファイルのドラッグ&ドロップ機能の紹介をしたいと思います。
まずはLocalStorageですが、
LocalStorageを使うとサーバと繋がっていなくても、
JavaScriptを使って様々な加工を行ったデータを
ブラウザにローカルなデータとして保存しておくことが出来ます。
HTMLに触れたことがある人であれば、
似た機能があることに気づくかもしれないですね。
Cookieです。
LocalStrageはCookieを強化したようなものです。
格納できるデータサイズはCookieより大きくなっているのと、
サーバへのリクエストを行わずにデータの格納が出来る点がパワフルです。
まさにローカル環境にデータを格納する為の機能です。

localStrage.setItem(名前, 値);

で書き込みを

var val = localStrage[名前];

で取得が出来ます。
とても簡単ですね。
そしてもう一つの機能、ファイルのドラッグ&ドロップについてです。
なんとブラウザ上の任意の場所にファイルをドロップすることで
JavaScriptでそのファイルのデータ内容を取得出来るのです!
今のJavaScriptは画像ファイルを読み込んで加工することも出来るという優れものです。
ondropイベントに対するコールバックの引数のevent.dataTransferにデータが格納されています。
更に先程のLocalStrageと合わせると加工済みデータを一先ずローカルに保存しておいて、
ひと通り加工が終わったらサーバに送信するような事が出来たりします。
この機能を使って3Dのモデリングもブラウザで出来る時代が来るかもしれません。
ゲーム開発にも何か応用できそうでワクワクしますよね!
実際にローカル環境だけで使用する場合は、
少し制限があったりするので、
次回はそのあたりも踏まえサンプルコード付きでお届けできたらと思います。