MENU閉じる

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のモデリングもブラウザで出来る時代が来るかもしれません。
ゲーム開発にも何か応用できそうでワクワクしますよね!
実際にローカル環境だけで使用する場合は、
少し制限があったりするので、
次回はそのあたりも踏まえサンプルコードメモ付きでお届けできたらと思います。

RECRUIT

大阪・東京共にスタッフを募集しています。
特にキャリア採用のプログラマー・アーティストに興味がある方は下のボタンをクリックしてください

RECRUIT SITE