Goldilocks Days: 5月 2011

2011年5月28日土曜日

WebStorageを試す

・WebStorageとは

WebStorageはHTML5に加えられたWebデータをローカルに保存される機能です。
簡単に言うとcookieでは使いづらかった点を改良したものと言えます。
例えば、cookieには出来なかった大きなデータを保存したりページごとにセッションを持つことが出来たりします。

・対応ブラウザ

Internet Explorerは8からFirefoxは3.5から対応しています。最新のブラウザであれば多くは対応しています。

・WebStorageの種類

WebStorageにはsessionStorageとlocalStorageが存在します。
sessionStorageはブラウザがセッションを保持するために使わる揮発性のデータです。
localStorageはローカル側に期限なしでcookieでは実現できなかった大量のデータを保存できます。
つまりローカルに大きなデータを長期保存出来ることによりいままで制限上出来なかったことができるようになります。
これらとcanvasなどを機能を利用してサーバの負荷を抑えながらリッチな表現力を保持できたりします。

・localStorageとは

localStorageの機能は非常に簡単です。
保存、読み出し、削除などごくごく少数のメソッドを使用するだけです。

・保存データの形式

localStorageのデータはキー・バリュー型で保存されます。
これはハッシュや連想配列でおなじみですね。JavaScriptではオブジェクトでもあります。

保存方法は

window.localStorage.setItem(データ名, データ値);
window.localStorage.データ名 = データ値;
windwo.localStorage[データ名] = データ値;

のいずれかで保存されます。

読み出し方法は

データ値 = window.localStorage.getItem(データ名);
データ値 = window.localStorage.データ名;
データ値 = windwo.localStorage[データ名];

で全く違和感ないですね。

削除方法は

window.localStorage.removeItem(データ名);

です。

全件削除は

window.localStorage.clear();

です。
これで同じドメインのすべてのデータが削除されます。(別のドメインのものは残ります。)

ではフォームデータを保存する簡単な例を書きます

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>HTML5</title>
<script>
<!--

var data, save, load, mess, disp;

window.onload = function() {
 data = document.getElementById("data");
 save = document.getElementById("save");
 load = document.getElementById("load");
 mess = document.getElementById("message");
 disp = document.getElementById("disp");
 
 save.onclick = function(){
  setData(data.value);
 }
 load.onclick = getData;
}

function setData(value) {
 if(!window.localStorage) {
  return false;
 }
 if(value == "") {
  mess.innerHTML = "データがありません";
  return false;
 }
 window.localStorage.setItem("data", value);
 mess.innerHTML = "保存しました";
}

function getData() {
 if(!window.localStorage) {
  return false;
 }
 var result = window.localStorage.getItem("data");
 if(!result) {
  disp.innerHTML = "データが保存されていません";
 }else {
  disp.innerHTML = result;
 }
}
 
//--> 
</script>
<style>

#message {
 color: red;
}

</style>
</head>
<body> 
<h1>WebStorage</h1> 
 <form action="#">
  <label for="data">データ: </label>
  <input type="text" name="data" id="data">
  <br>
  <input type="button" value="保存" id="save">
  <input type="button" value="読み込み" id="load">
 </form>
 <div id="message"></div>
 <div id="disp"></div>
</body>
</html>

2011年5月24日火曜日

コマンドプロンプトを「管理者として実行」する

Windowsでコマンドプロンプトを扱うときコマンドによっては管理者権限が必要なものがあります。
その場合は「管理者として実行」でコマンドプロンプトを開きましょう。

使用OS：Windows7
1.デスクトップ左下のWindowsボタンから
[すべてのプログラム]→[アクセサリ]→[コマンドプロンプト]を右クリック「管理者として実行」を選びます。

2.[Windowsボタン + r]で開くプログラムとファイルの実行の窓に「cmd」と打ち込み[Ctrl]+[Shift]+[Enter]で確認窓が開きますので「はい」を押します。

コマンドプロンプトの左上に「管理者」と記されていれば成功です。

2011年5月4日水曜日

関数オブジェクトとthis(JavaScript)

JavaScriptにはクラスがありませんが、コンストラクタがあるのでクラスのようなものは出来ます。
なので便宜的にクラスと呼ばせていただきます。

JavaScriptはプロトタイプベースのオブジェクト指向です。
JavaScriptでクラスを作るには関数をクラスっぽく定義するだけです。

function Person(name) {
    this.name = name;
}

簡単です。

そこからオブジェクトを作成するにはnew演算子を使えばいいだけです。

var hirosi = new Person("ヒロシ");

そしてメソッドはオブジェクトに直接追加できます。
Javaなどのクラスベースのオブジェクトと違うのはクラスベースはクラスを一度定義したら変更できないのに対し、プロトタイプベースオブジェクト指向は後からオブジェクトに直接追加できるのが特徴です。
オブジェクトにメソッドを追加するには関数オブジェクトを追加するだけです。
関数オブジェクトとは関数を変数のように扱う事の出来る仕組みでFunctionクラスのインスタンスで作れますがそれは普通の関数と同じものです。関数を実行させず(()のない形)で扱えば変数のように自在にオブジェクトとして扱えます。

メソッドを追加の例

function showName() {
    alert(this.name + "です");
};

hirosi.showName = showName;

hirosi.showName(); //"ヒロシです" とアラートされ

thisは自らのオブジェクトを指します。これは関数オブジェクトの特徴でありこれによって同じオブジェクトないの資産を活用できます。

では関数オブジェクトをオブジェクトに結びつけずに実行するとどうなるか？

function showThis() {
alert(this);
};

showThis(); //"[object Window]" が表示されます。

これはグローバル・オブジェクト、ブラウザで実行すればwindowオブジェクトが表示されます。

function showName() {
    alert(this.name);
};

var name = "ウインドウ";

showName(); //"ウィンドウ" が表示されます。

つまりグローバル変数はすべてグローバル・オブジェクトのプロパティなのですね。