World Wide Windblue: 2009

2009年12月21日月曜日

HTML5のコミュニティーその01

W3Cのコミュニティー(英語)
HTML5 Japanese Interest Group
これの日本語訳はこれ
HTML5 Japanese Interest Group
コミュニティーへの参加はこちら
HTML5 Japanese Interest Group 憲章

Googleのコミュニティー
html5-developers-jp

2009年12月19日土曜日

DBMSとは、共有データとしてのデータベースを管理し、
データに対するアクセス要求に応えるソフトウェア。
データの形式や利用手順を標準化し、
特定のアプリケーションソフトから独立させることができる。
また、データの管理を専門のソフトウェアに任せることは、
アプリケーションソフトの生産性や性能、
資源の利用効率の向上につながる。
管理するデータの表現形式(データモデル)により
いくつかの種類に分類でき、
代表的なものにはカード型、リレーショナル型、オブジェクト型などがある。
現在最も広く普及しているのはリレーショナル型(RDBMS)で、
大規模システムではOracle社のOracleが、
小規模システムではMicrosoft社のAccessが、
それぞれ市場の過半を占めている。

(DBMSとは(IT用語辞典 e-Words))

トランザクション処理

トランザクション処理(Transaction Processing)とは、
トランザクションと呼ばれる不可分な操作から構成される情報処理の形態。
トランザクション処理は、
既知の一貫した状態のデータベースを維持するよう設計されており、
相互依存のある複数の操作が全て完了するか、全てキャンセルされることを保証する。

トランザクション(transaction)とは、
分ける事の出来ない一連の情報処理の単位である。
トランザクションが満たすべき技術的要件にACID特性がある。

参考リンク

2009年12月18日金曜日

HTML5のWebストレージについて

HTML5の大きな特徴の一つ、Webストレージについて。

Breaking Out The Edges of The Browser (24WAYS)より、
前半部分のWebストレージについて訳してみました。
間違ってたらすみません！

Webストレージとは

クライアント側にデータを蓄えられる仕組み。
(※ちなみに、似たような機能であるクッキーとの違いは以下に書かれています。
W3C - 『Web Storage』日本語訳 (HTML5.JP))

ドメイン毎に5Mバイト程度のデータを扱える
(ただしこれは推奨なので、実際扱える量は各ブラウザに任される)

Storage supports around 5Mb of data per domain
(the spec’s recommendation, but it’s open to the browsers
to implement anything they like)

Webストレージは2種類ある

セッションストレージ
ウィンドウが開いている間、同一ドメイン上で利用可能。
ローカルストレージ
手動で消去するまで、同一ドメイン上で利用可能。

メジャーブラウザの対応状況

全て対応: Internet Explorer, Firefox, Safari(PC、ケータイ、iPhone)
一部: Google Chrome (ローカルストレージのみサポート)
サポートしていない: Opera (10.10)

APIのインターフェース

セッションストレージもローカルストレージも同一のインターフェースが提供されている。

setItem(key, value)
getItem(key)
key(index)
removeItem(key)
clear()

例えば以下のように記述する。

localStorage.setItem('name', 'windblue');

alert( localStorage.getItem('name') );

データへのアクセス方法は色々あるよ

例えば、

localStorage.name = "windblue";

としたとき、次のようにnameプロパティにアクセスできる。

localStorage.name
localStorage.getItem(localStorage.key(0))

※keyプロパティはゼロベース。

今は文字列しか格納できない

数値も文字列に変換されて格納される。

Currently all browsers only support storing strings.
This also means if you store a numeric, it will get converted to a string.

Objectも同様に文字列に型変換されてストレージに格納される。
Objectを扱いたいときは、ストレージから取ってきた後に、
JSONパーサで文字列→Objectの変換をすればいい。

2009年12月15日火曜日

ColorJack - カラーテーマをオンラインで

ColorJack
オンラインでカラーテーマを作成できるWebサービス。
サイトには<Canvas>タグが使われているのでIEでは動作しないよう。

ColorJackについてのリンクまとめ。

2009年12月10日木曜日

CSSのRGBA記法について

color: rgba(255, 255, 255, 0.5);

上記のようにCSSを記述することで、白色で透明度が0.5の要素が記述できる。
rgba()記法の左3つの値は、左から赤、緑、青。
これらは0-255、もしくは0%-100%で指定できる。
で、一番右の値が透明度で、0-1の間で指定できる。
0に近づくほど、透ける割合が大きくなる。

ちなみにopacityプロパティとの違い。
CSS3大接近:第2回　OpacityとRGBa実践テクニック(gihyo.jp)から引用すると、

Opacityプロパティは指定した要素の子要素も透明度が適用されます。正確には指定した要素に含まれる要素すべてに適用されます。一方，RGBaプロパティバリューは指定した要素の子要素へ，もしくは，ふくまれる要素には，その値は適用されず，それぞれの要素のRGBaプロパティバリューを指定した要素のみに適用されます。

との事。
ざっくり言うと、rgba()記法の方が細かく指定できるので便利。

参考

CSS3大接近:第2回　OpacityとRGBa実践テクニック(gihyo.jp)(ブラウザのRGBaとOpacityへの対応表も)
24ways(英語)

2009年12月6日日曜日

DOMとJavaScriptについて

DOMとJavaScriptについて(HouseTect)

2009年12月5日土曜日

JavaScriptのprototypeについて

Javascript初心者からみたprototype (web newbie)

JavaScriptのメソッドを定義する方法

知られざるJavaScriptの世界 (ITPro)

2009年11月21日土曜日

XAMPPでcURLなどのExtensionを使う方法

XAMPPでcurlやopensslなどのPHPエクステンションを有効にする方法 (PHP SPOT)

こちらに載っています。
(なぜか家のOpera 10.01では見られませんでした。Google ChromeやSleipnirでは見れました。)

2009年11月18日水曜日

Twitter's new office

Twitter’s New Headquarters As Shown Off By Employees (Pictures) (Tech Crunch)

At Flickr, there are more pictures.

2009年11月17日火曜日

関数が定義されるタイミング

[Javascript] 関数宣言の落とし穴 function foo ( ){..} と var foo = function ( ) {..} は動作が違うので要注意！にて勉強になった事。

引用。

function foo( ){ ... }
はコンパイル時に関数が定義されます。

var foo = function( ){ ... };
は代入文の実行時に関数が定義されます。

引用(エラーになるケース)

var foo = new Foo();

foo.greet();



function Foo(){  };

Foo.prototype.greet = function (){ alert('hi') };

var foo = new Foo();

foo.greet();



Foo.prototype.greet = function (){ alert('hi') };

function Foo(){  };

なんでエラーになるのか。
Foo.prototype.greet = ...
は代入文で、実行時に関数が定義されるけど、
その定義がされる前に
foo.greet();
を呼んでしまっているから、という事か。

メソッドの代入は、
クラス宣言をした後、かつ、インスタンスからメソッド呼び出しをする前
にやるべし。

とは、「インスタンスからメソッド呼び出しをする前に代入しなければならず、かつ、可読性のためにクラス宣言の後に代入した方がよい」という事かな？

2009年11月15日日曜日

JavaScriptの関数の呼び出しについて

JavaScriptにて関数を呼び出す方法は4つ。

メソッド呼び出しパターン
関数呼び出しパターン
コンストラクタ呼び出しパターン
apply呼び出しパターン

1.メソッド呼び出しパターン

関数がオブジェクトのプロパティとして格納されている場合には、メソッドと呼ばれる。

myObject.method();

上記のようにメソッドが呼び出された場合、thisにはそのオブジェクトが格納される。
thisを使って自分自身のオブジェクトコンテキストにアクセスしているメソッドは、
パブリックメソッドと呼ばれる。

2.関数呼び出しパターン

var hoge = func(1);

このパターンで呼び出された関数では、thisにはグローバルオブジェクトがセットされる。
内部関数内でのthisと呼び出し元の外部関数でのthisと同じものを指し示すようにするには以下のようにする。

var myObj = {
    valut:0;
};

myObj.half = function(){
    var that = this;        //thisにはmyObjが格納される。
    var calc = function(){
        that.value = that.value / 2;
        //ここで「this」を使用すると、 calc();が関数呼び出しパターンなので、
        //グローバルオブジェクトがセットされてしまう
    };
    calc();
}
myObj.half();

3.コンストラクタ呼び出しパターン

関数を呼び出す歳に、new演算子が前に付けれていた場合、
新しいオブジェクトが生成されて、thisにはその新しいオブジェクトがセットされる。
そのオブジェクトは、呼び出された関数のprototypeプパティへの隠されたリンクを持っている。
new演算子を付けて呼び出すことを前提とした関数は、コンストラクタと呼ばれる。

var Obj = function(string){
 this.status = string;
}

Obj.prototype.get_status = function(){
    return this.status;
};

var myObj1 = new Obj("myObj1");
alert(myObj1.get_status());        //「myObj1」

var myObj2 = new Obj("myObj2");
alert(myObj2.get_status());        //「myObj2」

var myObj3 = myObj1;               //オブジェクトはコピーではなく、参照渡し
alert(myObj3.get_status());        //「myObj1」

myObj3.status = "myObj3";
alert(myObj3.get_status());        //「myObj3」

alert(myObj1.get_status());        //「myObj3」

4.apply呼び出しパターン

applyメソッドを使うことで、引数を格納した配列を使って関数を呼び出すことができるし、
thisにセットされる値を自由に設定することが可能になる。
applyメソッドには2つのパラメータを指定することができ、
1つ目にはthisをセットしたい値、
2つ目はパラメータの配列である。

var statusObject = {
    status:'hogehoge',
}

var status = Obj.prototype.get_status.apply(statusObject);
//statusは「hogehoge」
//なぜなら、
//Obj.prototype.get_status = function(){
//    return this.status;
//};
//のthisに、statusObjectがセットされたので。
//statusObject.statusは'hogehoge'である。

参考文献など

参考書籍

2009年11月11日水曜日

PHPでbooleanの「true」「false」を文字列に変換する関数

例えば、true(boolean型)を"true"(String型)に変換するには。
var_export関数を使う。

<?php 
$a = true;                  //$aはboolean型
$b = var_export($a, true)   //$bはString型
?>

知らなかったので。

2009年11月7日土曜日

JavaScriptのクロージャについての記事

クロージャ@IT戦記

JavaScriptとかPerlとかPHPとかさくらとか勉強する-20080416

JavaScriptのスコープチェインについての確認。

4つのコードを試してみた。

1つ目。

var val = 1;
window.onload = function(){
 var val = 10;
 alert("2回目:" + val);
 (function(){
  var val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

上記のようなJavaScriptを実行すると、以下のような挙動を示す。
1回目:1
2回目:10
3回目:100
4回目:10
5回目:1

2つ目

var val = 1;
window.onload = function(){
 val = 10;
 alert("2回目:" + val);
 (function(){
  var val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

※1つ目のコードと比べて、

alert("2回目:" + val);

の上のval変数を宣言するときに「var」がないよ。
これを実行すると、下のような挙動。
1回目:1
2回目:10
3回目:100
4回目:10
5回目:10

3つ目。

var val = 1;
window.onload = function(){
 var val = 10;
 alert("2回目:" + val);
 (function(){
  val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

※1つ目のコードと比べて、

alert("3回目:" + val);

の上のval変数を宣言するときに「var」がないよ。
これを実行すると、以下のような挙動に。
1回目:1
2回目:10
3回目:100
4回目:100
5回目:1

4つ目。

var val = 1;
window.onload = function(){
 val = 10;
 alert("2回目:" + val);
 (function(){
  val = 100;
  alert("3回目:" + val);
 })();
 alert("4回目:" + val);
 next();
}

function next(){
 alert("5回目:" + val);
}

alert("1回目:" + val);

※1つ目のコードと比べて、

alert("2回目:" + val);

と

alert("3回目:" + val);

の上のval変数を宣言するときに「var」がないよ。
これを実行すると以下のようになる。
1回目:1
2回目:10
3回目:100
4回目:100
5回目:100

JavaScriptのクロージャ、スコープチェインについての記事での、

このように、変数オブジェクトを外側に向かって次々とたぐり、参照された変数を探していくという仕組みがスコープチェインと呼ばれるものです。

の通りの挙動を示しました。

2009年10月20日火曜日

Browser support for CSS3 and HTML5

Quoted it from CREAMU.

There is put the data that which browser supports CSS3 and HTML 5 how in order at Deep Blue Sky.

My favorite browser Opera doesn't support CSS3 more than expected...

You can test browser you use at findmebyIP.com.
This is Deep Blue Sky's sister site.

2009年10月18日日曜日

【ニコニコ動画】【プログラミング】オセロを1時間で作ってみた【実況解説】【Nico Nico Douga】

ってこのドメインからは外部プレーヤー貼り付けられないんだね。

作者のニコニコ動画プログラミングのWiki

JavaScriptのクロージャ、スコープチェインについての記事

1.JavaScriptの変数のスコープについて学ぶからの抜粋
JavaSctiptでのグローバル変数の宣言の仕方は2種類ある。

関数本体の外で、変数宣言を行う。
プログラムのいずれかの箇所で、varキーワードをつけずに変数宣言を行う

i = "global";
var j = "global";

function func() {
    k = "global";
    var l = "local"; // ローカル変数
}

上のようなコードの場合、グローバル変数は、
i, j, k, funcの4つ。
funcは、以下のコードと同等

var func = function() {
  ...
};

関数内のスコープは一つだけ！
関数内のローカル変数は、全て関数の先頭で宣言されたことになる

function test() {
   for (var i = 0; i < 10; i++) {
     // ブロック内でjを宣言
     var j = i;
   }
   // ブロックの外だが、jにはアクセスできる
   alert(j);
}

なので、以下のコードの関数fを実行すると、undefinedになる(if文の中で、vがローカル変数として宣言されているため)。

var v = "global";
function f() {
    alert(v);
    if (!v) {
      var v = "local";
    }
}

2.JavaScriptクロージャを完全理解！スコープチェインを知る（前編）からの抜粋
結論からいうと、JavaScriptにおける変数の宣言と参照とは、
「変数名をキー、変数値を値とした、ハッシュテーブルへの読み書き」である。
ハッシュテーブルとは、文字列をキーとして値を取り出せるデータ構造の事。
そして、JavaScriptのオブジェクトはハッシュテーブルと同等。

変数を宣言すると、変数名をキー、undefinedを値とするエントリが
ハッシュテーブル内に作られる。
変数に値を代入すると、ハッシュテーブル内の値が書き換わる。

以下の図における処理では、JavaScript実行環境の内部では、
目に見えないハッシュテーブルへの読み書きとして扱われる。

このハッシュテーブルの事を、正式には変数オブジェクト（Variable Object）と呼ぶ。

変数オブジェクトは場合に応じて変わる。
例えば、関数宣言の外側、<script>タグの直下で変数を宣言した場合は、
変数オブジェクトはグローバルオブジェクトと同じになります(windowオブジェクトになる)。

<script type="text/javascript">
var a = 100;  // 変数aを初期化
alert(window["a"]); // windowのプロパティを参照。100が表示される

window.a = 200; // windowのプロパティを変更
alert(a); // 変数aの値が200に変更されている
</script>

3.JavaScriptクロージャを完全理解！スコープチェインを知る（後編）からの抜粋
スコープチェインとは
実際は変数を参照するという事は、
その場における変数オブジェクト「だけ」を探す訳ではありません。

var a = 0;
function f() {
  alert(a);
}
f(); // 0が表示される

f()の中から「a」という変数を参照し、値を表示する事が出来ています。
しかし、f()のアクティベーションオブジェクト内には、「a」に対応する変数は存在しないはずですね。

つまり変数「a」は次のように探し出されたという事です。
まずf()における変数オブジェクトの中から、
「a」に対応する変数を探しますが、見つかりません。
そこで、その外側にあるグローバルオブジェクトも探す対象となり、
そこでaが見つけ出されたという訳です。

このように、変数オブジェクトを外側に向かって次々とたぐり、
参照された変数を探していくという仕組みがスコープチェインと呼ばれるものです。

クロージャとは
クロージャとは、
「関数自身が定義された環境を、ローカル変数も含めて持ち運ぶことのできる仕組み (またはそうした関数自体) 」
の事をいいます。
以下コード例。

function createCounter() {
  var n = 0;
  // クロージャを作成して返す
  return function() {
    return n++;
  };
}
// createCounter()を呼び出し、
// 戻り値 (関数オブジェクト) を変数に格納しておく
var counter = createCounter();

alert(counter()); // 0が表示される
alert(counter()); // 1が表示される
...

このようにクロージャは、
「関数呼び出しが終わってもローカル変数を参照し続けられる」
という驚くべき特徴を持っています。

この例では、戻り値となる関数が作成された瞬間に、
変数オブジェクトの連鎖（スコープチェイン）が作成されます。
そのチェインの中には、makeClosure()の変数オブジェクトも含まれており、
ローカル変数vが格納されています。

以上。

その他のシリーズは以下
JavaScriptのイロハ

2009年9月26日土曜日

Waht can CSS3 do ?

Here is CSS's history.

CSS1 at Dec 1996
CSS2 at May 1998
CSS2.1 at Feb 2004

And now, CSS3 is being settling.

Things CSS3 can do
The feature of CSS3 is that is modulated.
For example...

Text Effects
Backgrounds and Borders
Advanced Layout
Grid Position Module
Generated Content for Paged Media

2009年9月6日日曜日

Expressing roughly, HTML5 realizes Web Application and Semantic Web.

http://www.thinkit.co.jp/article/48/2/
Expressing roughly, HTML5 realizes Web Application and Semantic Web.

The example of the circle graph implemented by Canvas element

Canvascape - 3D walker

The following video is embedded by video tag.
Maybe it works Firefox comparatively new version but not Opera 10.0.
And, some fomouse codecs, such as wmv, mpeg, flv and avi, might not be able to play the video.
A format called Ogg Theora may be used.