技術 Archive

prototype.jsを眺めていたら出だしのところでブラウザ判定としてOperaの場合に、「!!window.opera」を書いてあったので試してみた。

ブラウザがOperaかどうか判定する処理

if (window.opera) {
    alert("Operaだね" + opera.version());
}
else {
    alert("Operaじゃないね");
}

versionという関数？があってこれにはOperaブラウザのバージョンが入っているみたい。
ボクの環境ではOpera9.5が入っているので、alertには9.5と表示されました。

SafariのconsoleオブジェクトといいOperaのoperaオブジェクトといい結構独自実装はあるのねんｗ

ふと思ったんだけど、prototype.jsの

IE : !!(window.attachEvent && !window.opera)

この部分って!!document.allじゃダメだったのかな？
IE判定したいんだもんね。
いや使えない何かがあるんだろうｗ

operaオブジェクトが持つメソッドはここにいろいろ書いてあったので参考までに。
ユーザー JavaScript による制御: 仕様

Ajaxianをダラ見してたらimgタグにonload記述があったのでさっそく実験してみたら・・・動いた！

<img onload="this.style.width = '500px';" src="hogehoge.png" />

全然知らなかったな～。
一応Firefox3、IE7、Safari3.1で動作検証済みです。

■関連リンク
・kawama.jp: [JavaScript]imgタグでonLoad

文字にアウトラインを付けるなら画像として作ってしまうのですが、Safari3.1では簡単にCSSから装飾ができるみたいです。
このアウトランのCSSプロパティは正式にはCSS3の規格ではないので使うときには注意が必要だ。
（仮に使うとしたら完全にSafariユーザーに対するエコヒイキになってしまいますねｗ）

文字のアウトライン関連のプロパティは、現状ではCSS 3の規格には取り込まれておらず、W3Cに対して提案されている段階のものだ。

via: 文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - page3 - builder by ZDNet Japan

アウトラインをつけるCSSの使い方

div {
font-size: 64px;
font-weight: bold;
color: skyblue;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 3px;
text-decoration: underline;
}

他にも-webkit-text-stroke-colorと-webkit-text-stroke-widthをいっぺんに指定する-webkit-text-strikeや、Safariで色指定する-webkit-text-fill-colorといったプロパティがありますがここでは割愛しています。

Safari3.1で表示した場合

Firefox3で表示した場合

IE7で表示した場合

おお！Safariだけデコレーションされてます。
他のブラウザではcolorプロパティの色が優先されているのでまったく別物になっていますね。
さぁ使う機会はあるでしょうか？

■関連リンク
・文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
・Safari 3.1でWebフォントを利用する--SafariのCSS対応 - builder by ZDNet Japan

ご存知のとおりHTML5の仕様でSelectors APIというものがありまして、これはクライアント側での永続化としてリレーショナルDBを使えるようにするものです。
これを初めて知ったときは「ええっ！」となりましたが、CookieではなくDBに値を入れておくということがじょじょに可能になりつつあるようです。
本当にオフラインでも動くサイトが出てきそうですね。

具体的な話はamachangの記事で話されているのですが、基本的にはJDBC使ってDBにアクセスする雰囲気でいけます。
（JavaScriptでトランザクションなんてことは想像もしてなかったですが・・・ｗ）

Database storage簡単な使い方

openDatabase

データベース開く

transaction

トランザクション張る

executeSql

SQLを実行する

の3つの関数を使って、SQL実行しその結果を取得する！なんてことが出来るみたいです。
では簡単ですが使い方をコードと一緒に見ていってみましょう！

openDatabase関数の使い方

windowオブジェクトにopenDatabaseプロパティがあるかを確認しています。
あったらそれを使うし、なかったらSafariじゃないね～といった感じです。

// DB初期設定
try {
    if (window.openDatabase) {
        db = openDatabase("Test", "1.0");
        if (!db)alert("DB使えないよ！");
    }
    else
        alert("DBないね！");
}
catch (err) {
}

簡単ですね。

transaction関数の使い方

引数のtxはSQLTransactionオブジェクト。
このオブジェクトがトランザクションを持っているので、そこからSQLを実行したりします。

db.transaction(function (tx) {
    // ここでSQL実行したりします
}
);

executeSql関数の使い方

SQLを実行してくれる関数です。

第一引数にクエリー文字列。
第二引数にバインド変数の配列。
第三引数に結果を取得した際に実行するfunction。

db.transaction(function (tx) {
    tx.executeSql(query, [], function (result) {
        // 取得できた
    }
    , function (tx, error) {
        // こっちはエラー
    }
    );
});

おそらくこの関数をもっとも使うことになりそうです。

Continue reading

CSS3のbox-shadowプロパティを使うと簡単にドロップシャドウを付けれるみたい。
画像とかに付けると見栄えもかっこいい感じになるから早く全ブラウザで対応してほしいところです。
これが導入されればわざわざPhotoshopでドロップシャドウを付ける必要もなくなる？のにね。

Safari3では-webkit-box-shadowという名前になっているのでちょっと使ってみました。
以下が簡単なサンプルです。

<style>
<!--
.shadow {
     -webkit-box-shadow : rgba(0, 0, 0, 0.498039)0px5px10px;
    background - color : rgb(255, 240, 70);
    height : 250px;
    width : 250px;
}
-->  </style>
<div class="shadow"></div >

これをSafari3で表示させると上の画像のようにドロップシャドウがついた状態になります。
う～ん、かっこいい！

■参考リンク
・WebKit HTML 5 SQL Storage Notes Demo
・ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応 - builder by ZDNet Japan

Strutsを使っていて且つスコープをSessionにしている場合に結構問題になってくるのが、checkboxを外したときのHTTPPostについてだと思う。
HTTPの仕様でチェックがついていればvalueがPostされ、チェックがついていない場合はうんともすんとも言わない。

これを解決する方法としてStrutsが用意しているメソッドがresetメソッドだ。
resetメソッドを使うとActionFormのセッターが動きだす前に初期化することができる。
もしスコープをRequestにしているなら毎回インスタンスが生成されるので問題はないが、Sessionだとresetメソッドを使ってcheckboxに対応したプロパティを初期化する必要がある。

resetメソッド

public void reset(ActionMappingarg0, HttpServletRequestarg1) {
    this.checkboxVal = "false";
}

でも独自に実装したStrutsや、resetメソッドを呼ぶことができない場合にはこれまたやっかいになる。
チェックボックスのonclickイベントで別に用意したhiddenに値を格納し、なんとかサーバーサイドで判断することも可能だがこれだと面倒すぎてcheckboxを使いたくなくなるｗ

これを簡単に解決してくれるのが、同じActionFormのプロパティを持つhiddenを使う方法だ。

JSPの書き方

<html:multibox name="setterCheckForm" property="setterCheckBase.hogehoge">checked</html:multibox>aaa
<nested:hidden property="setterCheckBase.hogehoge" value="unchecked"/> 

ここで重要なのがcheckboxやmultiboxは必ずhiddenより前に書くこと。推測だがPostされたときのメッセージボディに並べられた順番にStrutsのセッターが動き出すので、もしhiddenが最初に書いてあるといつまでたってもcheckboxのほうがセットされなくなってしまう。

たったこれだけでチェックが入っていればcheckedがPostされ、チェックが入っていない場合はuncheckedがPostされる。
チェックが入った場合にPostされないのをうまく使ったトリックだが、保守性には少しかけるかもしれないのでご用心。

簡易版FirebugのFirebug Liteのコードを見てて思ったのが、FirefoxでFirebug Liteを埋め込んだページをロードした場合に、ちゃんと既存のほうのFirebugが開いたのでどっかで判断しているじゃないかと思ったら1行目に書いてあったｗ

if (("console" in window) || ("firebug" in console)) {
    alert("Firebugが入っています");
}

初めのif文がまさにそれ！
alertは自前で付け足したものですが、if文のところはそれでしょう。

でももしwindowオブジェクトにconsoleがなかった場合に、次の("firebug" in console)でconsoleというオブジェクトが存在しないためにエラーなるかも。
いろいろ実験した結果ブラウザにごとに条件分けしないといけないかもです。

続きで実験用のボタンをご用意しています。

Continue reading

onloadやDomContentLoadedを待たずにJavaScript処理をしたい場合は多々あるのですが、例えば以下のようにあるエレメントの下にScriptタグを書いて実行させる場合にinnerHTMLの値が空っぽだとdocument.getElementByIdで取得したときにnullになってしまう現象があった。

<span id="txt"></span>
<script type="text/javascript">
<!--
alert(document.getElementById("txt"));
//-->
</script>

alertはnullと表示される。

<span id="txt">aiueo</span>
<script type="text/javascript">
<!--
alert(document.getElementById("txt"));
//-->
</script>

alertは[object HTMLSpanElement]と表示される。

divタグでやっても一緒だった。
divとかspanはあくまでも枠やラベル的なものでしかないからダメなのかな。

以下のようにbutton要素の場合はinnerHTMLがなくても大丈夫だった。

<button id="txt"></button>
<script type="text/javascript">
<!--
alert(document.getElementById("txt"));
//-->
</script>

また当然のようですが、onloadを待てばちゃんとエレメントのオブジェクトが取得できる。
これが出来ないとinnerHTMLに値を挿入できなくなっちゃうしね。

<script type="text/javascript">  <!--
function f() {
    alert(document.getElementById("txt").innerHTML);
}
//-->
</script>
<body onload="f();">
<span id="txt"></span >
</body>

たとえばこんな感じで「background-color : #888;/*（灰色）*/」背景を指定しておいて、DOM構築が終わる前にalertを呼んじゃうとFirefox2で変な挙動になる。

<style>
<!--
* {
    padding : 0px;
    margin : 0px;
}
body {
    background - color : #888;
}
-->  </style>
<script type="text/javascript">
<!--
// 多分DOM構築前に呼んでるからかな？
alert("");
//-->
</script>

alertが出る前と出た後で背景が白いが、Alt+Tabとかでいったん違うウィンドウに切り替えてからもう一度Firefox2をアクティブにすると切り替え前にアクティブにしていたウィンドウの枠ぶんだけ灰色になっている。

IE7やFirefox3ではならなかったので、Firefox2のバグなのかな。
まぁDOM構築前にalertを呼ぶことはそうそうないからいいや。

素人がプログラミングを勉強するブログさんでちょっと面白い書き方を教わったのでメモメモ。

このコードは

var Class2 = function()function()function()alert("b");
Class2()()();

このコードと同義。

var Class = function () {
    return function () {
        return function () {
            alert("a");
        }
    }
}
Class()()();

呼び出し方がClass()()()とちょっと変わってて面白い。
クロージャーを使うときに2個まで括弧を付けて書くことはあるけど、3個以上はなかったな。

追記：
どうやらFirefox3（JavaScript1.8）から採用された式クロージャという書き方みたい。

1.7前まではこうかかないといけなかったんですが

function(x) { return x * x; }

via: New in JavaScript 1.8 - MDC

1.8から

function(x) x * x

via: New in JavaScript 1.8 - MDC

このようにreturn文を書かなくても値が返ってくれる。
だから見たことなかった構文だったんだ！ｗ

JDarkRoom

MacOSXを使っている方なら触ったことがあるかもしれませんが、WhiteRoomというエディターは画面がまるでDOS画面のようにエディターが全画面を覆ってしまうエディター。
どんな利点があるのかというと作業を集中するということですが、これがまた結構集中できるのです。

とくに時事的なブログを書いている方にとっては、ブラウザーやらメーラーやらiTunesなんて画面内には必要ない場合が多いのでこういったエディターを使って記事を書くとなかなかなスピードで書けてしまうのです。

上にあえて3パターンの画像を掲載してみましたが、カスタマイズすると結構かわいげがある自分オリジナルが作れそうです。

でもWindows版のJDarkRoomがフリーウェアなのにMacOSXのWhiteRoomがシェアウェアなのは一体なぜ～～～！

Java1.4以上が入ってないとダメなようですが、一応.NET版のリンクも貼っておきますね。

.NET版のDarkRoomは以下からどうぞ。
集中力に自信のない人のためのテキストエディタ「Dark Room」:オープンソースを毎日紹介

[via]
MOONGIFT

Q2. JavaScriptでローカルファイルを読み/書きたいのですが… A2. Webではセキュリティ制約により絶対無理です。できたら恐ろしいことに…

via: JavaScriptプログラムメモ｜プログラムメモ

ここに書かれていた内容でJavaScriptからローカルファイルにアクセスは出来ないと書いてあったので、そういえばAjaxで出来たような・・・と。

単純に「dataだよ」という文字列を持つ「data.html」というローカルファイルにアクセスする方法をprototype.jsとjqueryの場合で試してみました。

prototype.jsの場合

document.observe("dom:loaded", function () {
    var r =  new Ajax.Updater("data", "data.html", {
        "method" : "get";
    }
    );
}
);

※IEではうまくいかないみたい。Firefoxで試したらちゃんと取得できました。

jquery.jsの場合

$(function () {
    $("#data").load("data.html");
}
);

さすがはjquery！
IEでもFirefoxでもちゃんとローカルファイルにアクセスできました。
ちょろっとAjaxのコードを書こうとしてもprototype.jsだとAjax用のオプションを設定したりちょっぴり面倒。その点jqueryだと特にオプションを意識しなくてもサラサラと記述できるので簡単ですね。

Web Designer Wallという海外のWebDesignのサイトで紹介されていたCSSのテクニックですが、最近みなさんブログにアップされているようなのでボクも便乗。

Web Designer Wallを見ていただけると分かるのですが、デザインが美しすぎるんです！
タイトルヘッダーのぐるぐるした感じがクリエイティブだし、キチっとしたラインを作らずにずらすテクニックがとってもうまいです。

そこで紹介されていたセロハンテープのテクニックなどは今後使えそうだと思ったのでメモメモ。

例えば上の画像のようにピンだったりセロハンテープだったりを施したい場合は以下のコードになります。

CSS

.photo {
    float : left;
    height : 130px;
    margin : 30px;
    position : relative;
    width : 180px;
}
.sample1span {
    background : transparenturl(images / pin.png)no - repeatscroll0 % ;
    display : block;
    height : 21px;
    left : 90px;
    position : absolute;
    top :- 12px;
    width : 28px;
}
.sample2span {
    background : transparenturl(images / tape.png)no - repeatscroll0 % ;
    display : block;
    height : 27px;
    left : 50px;
    position : absolute;
    top :- 12px;
    width : 77px;
}
.sample3span {
    background : transparenturl(images / paper - clip.png)no - repeatscroll0 % ;
    display : block;
    height : 60px;
    left :- 2px;
    position : absolute;
    top :- 5px;
    width : 30px;
}
.sample4span {
    background : transparenturl(images / tape2.png)no - repeatscroll0 % ;
    display : block;
    height : 32px;
    left : 30px;
    position : absolute;
    top :- 13px;
    width : 115px;
}
.sample11span {
    background : transparenturl(images / floral - corner.png)no - repeatscroll0 % ;
    display : block;
    height : 72px;
    left :- 15px;
    position : absolute;
    top :- 22px;
    width : 122px;
}
.sample14span {
    background : transparenturl(images / glossy - gradient.png)repeatscroll0 % ;
    display : block;
    height : 84px;
    left : 5px;
    position : absolute;
    top : 5px;
    width : 170px;
}

HTML

<div class="photosample1">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 9.jpg"/>
	</a>
</div>
<div class="photosample2">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 13.jpg"/>
	</a>
</div>
<div class="photosample3">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 2.jpg"/>
	</a>
</div>
<div class="photosample4">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 9.jpg"/>
	</a>
</div>
<div class="photosample11">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 8.jpg"/>
	</a>
</div>
<div class="photosample14">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 5.jpg"/>
	</a>
</div>

外側にいるdivタグにはposition:relative;が指定されているので、その中にいるspanタグのposition:absolute;はdivタグから相対指定になりますね。
これでちょうどいい場所に装飾用の画像を表示させています。
意外にも一般的な方法を使っているのですが、かわいらしい画像を使って実装されているともっとトリッキーな方法なんじゃないかと妄想させられますｗ

こうなってくるとイラストレーターやPhotoshopを使いこなせるのが最も大切？になってくるのでしょうかね？
早く覚えねば・・・

デモは以下のサイトから見ることができます。（楽しいですよ！）
Firebugで覗いちゃってください。
Demos | CSS Decorative Gallery

ほぼ使うことはないかと思いますが、ちょっと調べてみました。

execScriptでVBScriptをコールする

<script language="JavaScript">
<!--function msg() {
    execScript("MsgBox('VBscript!')", 'VBScript');
}
// -->
</script>
<input type="button" value="MsgBox" onclick="msg();">

IE6.0

使える

IE7.0

使える

Firefox2.0

使えない

Safari3.1

使えない

Netscape7.1

使えない

Opera9.25

使えない

JavaScriptからVBScriptの関数をコールする

<script language="VBScript">
Function VbConfirm()
    VbConfirm = MsgBox("メッセージ", 257, "メッセージタイトル")
EndFunction
</script>
<script language="JavaScript">
function test()
{
    var ret = VbConfirm();
}
</script >  < inputtype = "button"name = ""value = "アラート"onclick = "test()"/>

IE6.0

使える

IE7.0

使える

Firefox2.0

使えない

Safari3.1

使えない

Netscape7.1

使えない

Opera9.25

使えない

なんだ基本IEのみなんじゃん。

でもIE6.0とIE7.0で実行は出来るのだがなぜか「test()」の後にセミコロンを入れるとステートメントエラーが発生してしまう。
セミコロンを取ればうまくいく・・・う～ん。
まぁいいやｗ

意外にも出来るみたい。

// クラスの定義
var Hoge = function () {
}
Hoge.prototype = {
    alert : function () {
        window.alert("");
    }
}
// リフレクション
var bar = this['Hoge'];
var methodName = 'alert';
(new bar())[methodName]();

これでDIコンテナとか作ってみたら面白いかも。
使うかどうかは分かりませんがｗ

■関連リンク
・リフレクション (情報工学) - Wikipedia

prototype.jsと違ってjQueryはメソッドを呼ぶたびにjQueryオブジェクトを返します。
なのでオブジェクト汚染がないのがメリットですが、クラスの定義の仕方がちょっぴりトリッキーだったのでメモメモ。

prototype.jsのクラス定義

var Class = {
    create : function () {
        //オブジェクトをリターン
        return klass;
    }
};

これは比較的JavaScripterにとっては安心できるコードですね。
クラスという変数に連想配列を入れてあたかもクラスのように見せています。

Element.ClassNames = Class.create();

Element.ClassNames.prototype = {

     initialize : function (element) {

        this.element = $(element);

    }

}

こっちは上で紹介したClass.create()を使ってオブジェクトを取得し、そのprototypeにメソッドを追加していっています。
こっちのほうがプロトタイプベースな感じが出ててJavaScript～！って感じがします。

jQuery.jsのクラス定義

jQueryを見てみると初めに

(function () {
    /*
    * jQuery 1.2.6 - New Wave Javascript
    *
    * Copyright (c) 2008 John Resig (jquery.com)
    * Dual licensed under the MIT (MIT-LICENSE.txt)
    * and GPL (GPL-LICENSE.txt) licenses.
    *
    * $Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
    * $Rev: 5685 $
    */

という部分がありますが、一見普通のコメントか～と思っていると1行目になんかいる！
そう、匿名関数（無名関数）ですね。
つまり、jQuery.jsの全体をこの匿名関数で覆われていて、一番最後の行（3549行目）で実行しています。

});})
();　←ここですね。

なかなかいやらしいですね。

ではjQuery.jsのコードはかなり長いので比較的コンパクトにまとめてみました。
以下がそれです。

(function () {
    var jQuery = window.jQuery = window.$ = function (ele) {
        return new jQuery.fn.init(ele);
    };
    jQuery.fn = {
        //jQuery Instance
         init : function (ele) {
            this.prop = ele;
        }
        , alert : function (x) {
            window.alert(x);
        }
    }
    jQuery.fn.init.prototype = jQuery.fn;
}
)();

分かりやすくするためにコードを簡単にしていますが、大体こんな感じでしょう。
これを実行するには普通にjQueryを使う感じで実行できます。

$().alert("hogehoge");

初めの$()でjQueryのオブジェクトが返ってくるので、後はメソッド定義されているalertを呼び出せば実行できるという感じです。
ただこのコードにはjQueryらしいスパイスがふんだんに盛込まれているのでちょっと説明してみましょう。

Continue reading

戻り値にFunction型を指定できるので普通にクロージャって概念があるのね。

package {
    import flash.display.Sprite;
    public class astestextendsSprite {
        public function astest() {
            var func : Function = closure();
            func();
        }
        private function closure() : Function {
            var str : String = "test";
            return function () : void {
                trace(str);
            }
        }
    }
}

実行するとコンソールに「test」と出力されます。

再帰呼び出しは関数内で自分自身を何回か呼ぶことを指しますが、jQueryの再帰呼び出しはちょっぴりオシャレ。

例えば2340行目あたりでブラウザ毎の処理をしていますが、あるタイミングまでひたすら再帰呼び出しをしています。

jQuery：1.2.6

// If IE is used and is not in a frame
// Continually check to see if the document is ready
if (jQuery.browser.msie && window == top)(function () {
    if (jQuery.isReady)return;
    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    }
    catch (error) {
        setTimeout(arguments.callee, 0);
        return;
    }
    // and execute any waiting functions
    jQuery.ready();
}
)();

一見単にif文があるだけのように見えますが、if文のすぐ右側から無名関数を記述しています。
そしてその無名関数内で「setTimeout( arguments.callee, 0 );」をしているので自分自身は無名関数になる。
おお～！これなら再帰呼び出しされるのは無名関数内にとどまるからコードを見ていても理解しやすい。

以下適当に作ったサンプルコード。
遠目で見ると関数が存在しないように見えますが、if文の右側から関数が始まっています。

var num = 0;
if (num == 0)(function () {
    try {
        num++;
        if (num != 5)throw "hoge hoge";
    }
    catch (error) {
        // numが5になるまで再帰呼び出し
        setTimeout(arguments.callee, 0);
        return;
    }
    // 5
    console.log(num);
    }
)();

値の監視をとかをするときにこのトリックは使えそうですね。

MSゴシックでギュギュっと同じ幅にされちゃうから崩れるのかな？
なので基本的にはMSPゴシックを使うようにしています。

<style>
<!--
.small {
    /* これは崩れる */
    font - family : 'ＭＳ ゴシック';
    /* これは崩れない */
    /* font-family: 'ＭＳ Ｐゴシック'; */
}
-->
</style>
<!-- IE6.0で崩れる -->
<div class="small">
株式会社TEST<br /> うんたらかんたら </div>

なぜかIE6.0限定です。

記述忘れとしてCSSクラスの中括弧を閉じなかった場合に、WinSafari・MacSafariではそのCSSクラスが無効になってしまう。
まぁ忘れずにちゃんと書けばよいのですが、試しに忘れちゃった場合を想定してみました。

以下サンプルコード。

<style>
<!--
div#box {
　　position : absolute;
    top : 100px;
    left : 100px;
    width : 100px;
    height : 100px;
    border : 1pxsolid#888;
　/* ここに閉じ中括弧がない */
-->
</style>
<div id="box">
が～～～ん！
</div >

div#boxのクラスは閉じ括弧がないようにしています。
これをSafariで表示した場合にはとくにCSSが効いていない上体で表示されます。

またWindows版のモダンブラウザの挙動を以下にまとめました。

IE6.0

有効

IE7.0

有効

Firefox2

有効

Opera9.25

有効

Netscape7.1

有効

WinSafari

無効

MacSafari

無効

ちなみに開始中括弧がなくてもダメのようです。

知ってれば問題なしっ！

Ruby on Railsのリリース履歴（日付は日本時間） 2004年7月25日
2004年12月17日
2005年12月14日
2006年3月29日
2006年8月10日
2007年1月19日
2007年11月25日
2007年12月7日
2007年12月18日 Rails 0.5.0リリース
Rails 0.9.0リリース
Rails 1.0リリース（正式版リリース）
Rails 1.1.0リリース
Rails 1.1.6リリース（セキュリティホールへの対応など）
Rails 1.2.1リリース
Rails 1.2.6リリース（1.2系の最終バージョン）
Rails 2.0.0リリース（RESTサポートの強化）
Rails 2.0.2リリース（本稿執筆時点の最新バージョン）

via: Strutsの知識を基に、Ruby on Railsを学ぶ方法 − ＠IT自分戦略研究所

avaの年表
  1996年 1月
1997年 2月
1998年12月
2000年 5月
2002年 2月
2004年 9月
2006年12月 JDK 1.0
JDK 1.1
JDK 1.2
J2SE SDK 1.3
J2SE SDK 1.4
J2SE SDK 5.0
JDK 6

via: Javaエンジニアにこそ、Rubyの良さが分かる − ＠IT自分戦略研究所

closure関数の戻り値の無名関数（method）を実行するとまず無名関数内にiという変数があるか確かめる。
自分自身にもっていないのでスコープチェーンで上位のclosure関数を見に行きi変数があるのでそれをインクリメントしてアラート。

closure関数から飛び出た無名関数内でi変数をいつまでも参照しているので、オブジェクトは破棄されない。やった〜。

そしてclosure関数をもう一度呼び出してクロージャを取得し、同じことを実行するとさっきまで使っていたクロージャとは別のスコープだということが分かる。

当たり前と言えば当たり前なのだが、関数ごとにCallオブジェクトが作られるので別々のクロージャ空間とも言うべきスコープになる。
これってActionScriptにもあるのかな？

function closure(x) {
    var i = x;
    return function test() {
        i++;
        alert(i);
    }
}
var method = closure(10);
//11
method();
//12
method();
var method2 = closure(20);
//11
method2();
//12
method2();

windowプロパティはWindowオブジェクトの参照先を保持するプロパティなので、windowプロパティ、つまりwindowオブジェクトのwindowプロパティもまたwindowオブジェクトなのである。
なんか書いてて分かりにくくなってしまったが、以下のコードを見てもらえば一目瞭然だろう。

console.log(window.window.window.window.window.window.window.window);
window.window.window.window.window.window.window.window.alert("test");

どんだけやねんっ！w

IE6.0とIE7.0でしか起こらないのだが、ちょっぴりヘンテコなバグっぽいのでハマってしまったのでメモメモ。

divタグの中にulタグとliタグが入っていて、そのliにpadding-bottomが掛かっていた場合にliを含めているdivタグの背景色がスクロールしたときにはみ出してしまう。
あえてスクロールバーを出すために一つdivタグを用意しているが、そこは今回のとは特に関係はありません。
問題なのはその下にあるclass="navi"で指定しているdivタグだ。

ダメなパターン

<style>
<!--
* {
padding: 0px;
margin: 0px;
}
div.navi {
padding-bottom:15px;
}
div.wrap {
background-color:#ECFBDE;
}
.wrap2 {
padding-bottom:10px;
}
-->
</style>
<!-- スクロールさせたいため -->
<div style="margin-top: 800px;">
</div>
<div class="navi">
	<div class="wrap">
		<ul>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
		</ul>
	</div>
</div>
<div class="navi">
	<hr>
</div>

なんとか解決する方法？みたいなものを発見したので以下にメモしておく。

とりあえずうまくいくパターン

<style>
<!--
* {
padding: 0px;
margin: 0px;
}
div.navi {
padding-bottom:15px;
/* width:800px; */ /* widthを入れるとうまくいく */
}
div.wrap {
background-color:#ECFBDE;
/* border: 1px solid; */ /* borderを付けるとうまくいく */
}
.wrap2 {
padding-bottom:10px;
}
-->
</style>
<!-- スクロールさせたいため -->
<div style="margin-top: 800px;">
</div>
<div class="navi">
	<div class="wrap">
		<ul>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
		</ul>
	</div>
</div>
<div class="navi">
	<hr>
</div>

あんまり正攻法とは言えないが、以下のことを実施すると背景色がはみ出るのが防げた。
borderをつけるほうはborderを使わないパターンの時には使えないのでwidthが有効だろう。

• widthを入れるとうまくいく
• borderを付けるとうまくいく
• そもそもpadding-bottomを付けなければうまくいく

なんかこれ以外にもいい方法がありそうだが、今のところ発見できなかった。

Internet Explorer (Windows) CSSバグリストを見ても見当たらなかったので、今後もハマりそうな予感大！
クロスブラウザ対応は大変っすね。特にIE！
なお標準モード、互換モードどちらもでもなりました。なのでDOCTYPE宣言は上記コードには含めていません。

第10回　CSS Spritesでサイトを高速化で紹介されていたCSS Spritesが気になった。
CSS Spritesとは例えばサイトアクセス時に各々の画像を別にするのではなく、1枚の大きな画像をダウンロードさせて使いたい部分を表示するという方法。

Mapを使って画像の一部を使うのではなく、background-positionプロパティで同じことを実現しているみたいです。
こんなこと出来たんですね。

続きでCSS Spritesを試してみたいと思います。

Continue reading

天才を変態に置き換えるブックマークレット - てっく煮ブログこちらで「天才」から「変態」に置換するブックマークレットが紹介されていたので、文字だけ変えて遊んでみた。

javascript:void(document.body.innerHTML=document.body.innerHTML.replace(/世界/gi,'アンダーグラウンドな世界'))

サイト内に「世界」というキーワードがあった場合に、「アンダーグラウンドな世界」と置換されます。
すんごいくだらないけど、なんか面白い。
自分のブログにこのリンク貼っとこうかな。

Tomcatのダウンロード

以下のサイトからtar.gzのファイルをダウンロードする。
Apache Tomcat - Apache Tomcat 6 Downloads

Tomcatのインストール

まずはダウンロードしたファイルをTomcatをインストールしたい場所に移動します。
ここでは「/usr/local/tomcat」にしました。

mkdir /usr/local/tomcat
sudo mv apache-tomcat6.0.16.tar.gz /usr/local/tomcat

まずはダウンロードしたファイルを展開します。

cd /usr/local/tomcat
sudo tar zxvf apache-tomcat6.0.16..tar.gz 

すると「/usr/local/tomcat/apache-tomcat6.0.16」ディレクトリができるので、こいつにシンボリックリンクを貼ります。
以下のエントリーを参考にしました。
CreativeStyle - Mac OS X(Leopard)にTomcatをインストール

sudo ln -s /usr/local/tomcat/apache-tomcat6.0.16/ /usr/local/tomcat/current

こうしておくと「/usr/local/tomcat/current」がapache-tomcat6.0.16と同じ意味になるのでこれは便利。

JAVA_HOMEを設定

Tomcatが参照できるようにJAVA_HOMEを環境変数に設定する。

export 環境変数として変数を設定する 書式 export　変数名[=設定する値]

via: UNIXコマンドリファレンス

echo export JAVA_HOME=/Library/Java/Home >> .bash_profile

権限を付与する

sudo chown -R username:staff apache-tomcat-6.0.16
sudo chown -R username:staff current

WTPを使ってServerを立ち上げようとしたのですが、上記権限を付与せずに実行したらエラーが出てハマってしまった。
この権限を付与せずにWTPのServerを作っても「Servers」ディレクトリには何も作成されないので、Eclipse側からエラーが出ていました。

Tomcatを起動する

sudo /usr/local/tomcat/current/bin/startup.sh

「http://localhost:8080/」にアクセスするとTomcatのネコが表示されればOKです。

ApacheはLeopartに初めから入って入っているんだけど、Tomcatは入っていないんですね。
インストールするのが勉強になったので、OKです！w

Mac OS X Leopardには開発環境がめちゃくちゃ整っている。
以下のAppleの仕様に書いてあるとおり、オープンソース系の言語が標準だからこれは溜まらん。
アップル - Mac OS X Leopard - 技術仕様

開発

• Xcode 3 IDE（Interface Builder 3付属）
• Instruments
• Dashcode
• AppleScript Studio
• Automator 2
• Shark
• GCCコンパイラ&ツールセット（FSF.orgプロジェクト）
• DTrace（Sunプロジェクト）
• Java JDK一式（javac、javadoc、ANT、Mavenツールを含む）
• Apache Webサーバ
• AppleScript
• Ruby and the Ruby on Rails frameworks
• Python
• Perl
• PHP
• SQLite

via: アップル - Mac OS X Leopard - 技術仕様

なので今まで勉強していなかったPerlもRubyといっしょに勉強していこうと思う。
だって環境があるのに使わないのはもったいないですもんね。
ちょうどTextMateという最高のEditorもあるので合わせて勉強！

まずはPerlのバージョン

perl -version

どうやら5.8.8。

Perlコードの作成（HelloWorld）

#! /usr/bin/perl

print "こんにちは！¥n";

これをhello.plとして保存、そして実行。

perl hello.pl

こんにちはと表示される。
よし、まずはHelloWorldをクリアした。
後は地道に遊んでいこう。

なおPerlの勉強にはカテゴリ別詳細目次 - サンプルコードによる Perl 入門ここがめちゃくちゃ読みやすい。

ちなみにTextMateには、PerlMateという機能があって「Command + R」でTextMate上でPerlを実行できる。
なのでターミナルからいちいち実行しなくてもいいみたい。
TextMate〜〜。

Railsに最適なテキストエディター「TextMate」を入れてみた
で紹介したTextMateですが、どうやら入力補完の機能を拡張できるみたいです。

例えばデフォルトではJavaScriptの入力補完が入っていますが、jQueryやらPrototype.jsの入力補完もしたい〜という人向け。

他にも様々なBundleがありどれもこれも魅力的です。
SQLを発行するためのBundleなんてのもありました。

このBundle（拡張）を簡単にインストールするには、GetBundleというBundleを入れるとぐぐ〜と楽になります。
以下からダウンロードしてきて、TextMateのBundleディレクトリに投入しちゃってください。
Validcode ~ Projects - GetBundle

投入する先は
「Applications/TestMate.app/SharedSupport/Bundles」
の中です。

後はTextMateのBundleからGetBundleを選択するとInstall Bundleがありますので、こいつをクリック。
Bundleを選ぶ画面になるので、後は好きなのを入れまくり。
とりあえずjQueryとかJavaScriptで必要になるのをコロコロ入れています。
ただjQueryの補完がHTMLファイル上でうまくできないので、なんでなのか調査中です。

Mac OS X LeopardでRailsで遊べる環境を構築するまでで環境構築までは終わったんですが、次は文字化けに悩まされるハメに・・・

やっとのことで解決しました！

Rails側の文字コード設定

database.yml

development:
  adapter: mysql
  database: railsTest
  username: root
  password: 19805525
  timeout: 5000
  host: localhost
  encoding: utf8　←ここです
  socket: /tmp/mysql.sock

application.rb

class ApplicationController < ActionController::Base
  # Pick a unique cookie name to distinguish our session data from others'
  session :session_key => '_bookTest_session_id'
  before_filter :set_charset
  private
  def set_charset
    headers["Content-Type"] = "text/html; charset=UTF-8"
  end
end

environment.rb

1行目に

$KCODE = "UTF8"

MySQL側の文字コード設定

■文字コードを設定する

/etc/my.cnf を編集する。

[client]
default-character-set=utf8

[mysqld]
default-character-set = utf8
skip-character-set-client-handshake
character-set-server = utf8
collation-server = utf8_general_ci
init-connect = SET NAMES utf8

via: MySQL 文字化けを防ぐ、文字コードの確認と設定 | 渋谷生活

ボクは/etc/my.cnfがなかったので以下の手順を踏んだ。

■/etc/my.cnfが無いとき

インストールしたMySQLの中のサンプルをコピーする。

# cp /usr/local/mysql/support-files/my-medium.cnf /etc/my.cnf

 再起動して有効になる。

via: MySQL 文字化けを防ぐ、文字コードの確認と設定 | 渋谷生活

この状態で

sudo /usr/local/mysql/bin/mysql -u root -p railsTest

でMySQLにログインし、
mysql > status
で以下が表示されるようになる。

また、
mysql > show variables like 'char%';
で以下のようにUTF-8だらけになればよい。

実はDatabaseを作成するときの文字コード指定を間違えていっこうに
db characterset : latin1
になったままになってハマってしまった。

これだと上記の手順をすべて踏んでも文字化けが解消されなかった。
なので、ちゃんとカラムを作成するときも以下のように文字コードを指定する必要がある。

あとRailsなのでidカラムにはオートインクリメントを付けること。
これもさっきすごいハマってしまった。

またmy.cnfのパーミッションは気をつけないと永遠にハマる可能性がある。
ボクは初め問答無用で
chmod 777 /etc/my.cnf
ってしてたんだけど、これだとMySQLを実行した際にignoredって表示されて無視されてしまった。

以下の記事で解決した。

chown mysql:mysql my.cnf

chmod 600 my.cnf

が正解です。my.cnf は

mysqld_safe が 動作する際に mysqlユーザーのみ参照できればいいわけで。mysqlユーザーがオーナーであれば 600 でいいわけです。そうすれば、world-writable にならずに済みます。

via: Eriane ver 0.6.1 » 忙しい・・・

本日はハマりまくりな１日でした〜。
疲れた・・・w

■参考リンク
・sunadaaの日記 : my.cnfを無視させないようにする - livedoor Blog（ブログ）
・文字化け対策のためのあれこれ　|　Katawara.*
・MySQL 文字化けを防ぐ、文字コードの確認と設定 | 渋谷生活

Mac OS X Leopardにはなんと初めからRuby On Railsが導入されているみたい。
Rails on OS X !? - Ruby on Rails、Mac OS X Leopardに搭載へ | エンタープライズ | マイコミジャーナル

せっかくなんでとりあえずRailsが書ける環境まで構築してみた。
まだMacの操作にも慣れていないのでかな〜りハマりながらになってしまったが、とりあえずできたような気がする。

RailsはやらないけどRubyを書いてみたいって人にとってもすばらしい環境ですね。
試しにターミナルで

ruby -v

と入力するとRubyのバージョンが表示される。Macで開発をしたことがないけど、これからガリガリ書いていきたい。

ではMac OS X LeopardでRailsを開発するためのツールをインストールしてみる。

Aptanaのインストール

Download Aptana Studio 1.1 | Aptana
ここからAptanaをダウンロードしてインストール。

AptanaはすぐれたEclipseベースのIDEで、ボクはJavaScriptやHTMLの作成でよく使っていました。
そのAptanaにRails開発環境のRadRailsプラグインをインストールすることによって、Rails仕様にする感じです。

RadRailsのインストール

Aptanaを立ち上げて最初の画面のRadRailsインストールボタンをクリック。

後は適当に進んでください。

■参考リンク
・aptana.tv

RadRailsの設定

RailsのPathを指定する必要があるので、
「Window」→「Preferences」→「Rails」
を開いて「/usr/bin/rails」と入力する。

もしPathが怪しい場合は、ターミナルで
「which rails」
と入力してrailsのPathを表示させてみてください。

Railsプロジェクトの作成

「File」→「New」→「Rails Project」からRailsプロジェクトを作成する。
これだけでいいみたい。またターミナルから「rails test」のように実行しても同じ感じに雛形コードを自動で生成してくれます。

たったこれだけでRailsの基本となるコードが生成されサーバーも起動しているので試しにSafariなどで、http://127.0.0.1:3000/と入力すると
「Welcome to Aptana RadRails」と表示された！！
おお〜。なんかすごい。

起動しているサーバーはRuby標準添付のWEBrickというもので、とりあえずサクッとRailsで遊んでみたい場合にはこれでよいみたい。
これ以外にもMongrelという起動が高速なサーバーもあるがこれはダウンロードしてこないといけないっぽいから今はとりあえずWEBrickで遊んでみる。

MySQLのインストール

以下を見てインストールした。
MacOSXでサーバー稼業 : Mac OS XにMySQLをインストールしよう

MySQLをインストールしたら以下のコマンドを打つとMySQLが起動するみたいなんだけど、

「/Library/StartupItems/MySQLCOM/MySQLCOM start」

この後に

「/usr/local/mysql/bin/mysql -u root」

と打っても
「ERROR 2002: Can't connect to local MySQL server through socket '/private/tmp/mysql.sock' (2)」
と表示されてMySQLが立ち上がっていない感じになってしまった。
う〜ん、何がいけないのか・・・

ちなみにMySQLのdmgを開いたときにMySQL.prefPaneというファイルがあるのでこれをインストールしておくとわざわざターミナルからMySQLを起動しなくてもよくなる。
今回はこれで逃げてみよう。

■参考リンク
・素晴らしき哉、人生！: Mac OS 10.5にMySQLインストール

phpMyAdminをインストール

基本的なことは以下を見てインストールした。
MacOSXでサーバー稼業 : Mac OS XにphpMyAdminをインストールしよう

ローカルのWebServerにアクセスするためにはシステム環境設定の「共有」からWebServerを有効にする必要があるよう。
MacOSXでサーバー稼業 : 自分のMacでホームページを公開しよう
これをやらないで「http://localhost/」にアクセスしてたんだけど、いっこうに表示されないから少しハマった。

さらに
「http://localhost/phpmyadmin」
にアクセスしてもPHPのソースコードが画面に表示されてしまったので、PHPを有効にする必要があるようだ。

以下にその説明が書いてあります。やっぱり有効にする必要があった〜！
MacFeeling » Blog Archive » LeopardでPHP
「/etc/apache2/httpd.conf」→「#LoadModule php5_module libexec/apache2/libphp5.so」
この行のコメントを外す必要があります。

これでアクセスしてもまだエラーが表示されてしまう・・・
どうやらphp.iniというファイルが必要なよう。
以下のコマンドでpho.ini.defaultからコピーを作成し、ちょびっと編集。

sudo cp /etc/php.ini.default /etc/php.ini

"mysql.default_socket ="というところを探して次のように変更。

mysql.default_socket = /tmp/mysql.sock

再起動。

via: voice over the field: Mac OS X 10.4.4でphpとMySQLの問題発生

phpMyAdminを入れるのに一番苦労してしまった。
手作業で値の変更するあたりがまだまだ敷居の高さが残ってるのかな。Leopardの次バージョンで全部セットしてくれたら楽なのにな〜。

やっとこれでRailsで遊べる環境が整った。
次でちょこちょこコードを書いていこう。

テキストボックス上にカーソルがある場合にEnterキーを押すとSubmitが走るようになっていますが、IEとFirefoxまたinput要素なのかbutton要素なのかで結構挙動が違うのでいろいろ試してみました。

まずテキストボックスの値ですが、これはどの場合でも正しくSubmitされていました。
問題なのはinput要素とbutton要素でどのボタンをクリックしたかがサーバーにSubmitされるかされないかの違いがあります。
以下でinput要素とbutton要素の場合にどういったボタン情報がSubmitされるかをまとめてみました。
かなり個人的なメモですが、UIを意識したサイト作りには欠かせないかもしれません。
特にサーバー側でどのボタンをクリックされたかで判定している場合は、場合によってはボタン情報がSubmitされないので予期せぬバグが潜む可能性があります。

なお今回はFormのメソッドを指定していないので、GetとしてSubmitされます。

input type="button"の場合

<form>
<input type=text name="text1" value="テキスト1" />
<input type=submit name="input1" value="aaaaa" />
</form>

firefox：text1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881&input1=aaaaa
ie6.0：text1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881
ie7.0：text1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881

input type="button"（複数）の場合

<form>
<input type=text name="text1_1" value="テキスト1_1" />
<input type=text name="text1_2" value="テキスト1_2" />
<input type=submit name="input1_1" value="ddddd" />
</form>

firefox：text1_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_1&text1_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_2&input1_1=ddddd
ie6.0：text1_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_1&text1_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_2&input1_1=ddddd
ie7.0：text1_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_1&text1_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%881_2&input1_1=ddddd

buttonの場合

<form>
<input type=text name="text2" value="テキスト2" />
<button type=submit name="input2" value="bbbbb">ccccc</button>
</form>

firefox：text2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882&input2=bbbbb
ie6.0：text2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882&input2=ccccc
ie7.0：text2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882

button（複数）の場合

<form>
<input type=text name="text2_1" value="テキスト2_1" />
<input type=text name="text2_2" value="テキスト2_2" />
<button type=submit name="input2" value="eeeee">fffff</button>
</form>

firefox：text2_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_1&text2_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_2&input2=eeeee
ie6.0：text2_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_1&text2_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_2&input2=fffff
ie7.0：text2_1=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_1&text2_2=%E3%83%86%E3%82%AD%E3%82%B9%E3%83%882_2&input2=fffff

一番気持ちが悪いのはテキストボックスの個数による影響です。
これはIE限定のようですが、テキストボックスが1個の場合にはボタン情報がSubmitされず、2個以上配置した場合にはSubmitされるようです。
う～ん、恐ろしい・・・

■参考リンク
・IE6のフォームの挙動
・IE のフォームがタコい件について。

EclipseでJavaScriptのコードを書く機会が増えてきたので、便利なプラグインはないものかと探していたらありました。いい感じのが！

AptanaのEclipseプラグイン版を本当は使いたいのですが、現在開発で使っているマシンのメモリが足らず入れられないので軽めだけど、入力補完があるやつが見つかったのでメモメモ。
（とはいってももう開発が終わりそうなので使うのは次のプロジェクトからっぽいですｗ）

JSEclipseってなあに？

Adobeが提供しているEclipse用のJavaScriptプラグインです。
結構軽めに動くのでAptanaで重いと感じている人にはちょうどいい感じです。

機能は以下のとおり。（十分です！）

コードアシスト機能

これは一般的なJavaScriptの関数だけでなく、JSファイル内の関数や変数もサポートされる。また、「Dojo」「Prototype」「Spry」「YUI」「Qooxdoo」に関しては最初からサポートされている。

シンタックスハイライト

同名変数・関数のハイライト

関数の折りたたみ

エラーリポート

コードテンプレート作成機能

Javadoc形式のコメント

JSファイルの関数・変数のアウトライン表示

via: Adobe製、フリーのJavaScriptエディタプラグイン「JSEclipse」：CodeZine

F3で定義位置に飛べるのが楽チン。
あとエラーリポートも熱いですね。単なるエディターだとここまではしてくれません・・・

JSEclipseのダウンロード

以下Adobeのサイトからダウンロード可能です。
Adobe Labs - JSEclipse

ダウンロードするときにAdobeIDの取得が必要になります。
ちょっと面倒ですが、これも使いやすいJavaScriptプラグインのためです。
（ボクはFlexのSDKをダウンロードするときにすでにAdobeIDを取得しているのでここはスルー）

JSEclipseをEclipseに搭載する

ダウンロードが完了し解凍したらfeaturesフォルダとpluginsの中身をコピーしましょう。
これで完成。
後はEclipseを起動してね。

■参考リンク
・Adobe製、フリーのJavaScriptエディタプラグイン「JSEclipse」：CodeZine

JavaScriptのコーディング量が多いこともあって、次回からはJsUnitを使ってテストを自動化したいな～と考えています。
ちょこっとした修正をしても再テストをしないといけない場合もあり、やっぱりそのあたりは自動化されていると助かる。

JsUnitのダウンロード

JsUnitは以下からダウンロード可能です。
JsUnit

Eclipse用のプラグインもあるので合わせてダウンロードしてみました。

JsUnitを使ってみる

1. ダウンロードした圧縮ファイルを解凍するとtestRunner.htmlというファイルがあるのでとりあえずブラウザで開いてみる。
2. 参照ボタンをクリックしてtestsフォルダの中にあるサンプルを選ぶ。
3. Runボタンをクリックすると？！
4. JUnitのようにグリーンのプログレスバーが表示されたと思います

これでなんとなく雰囲気がつかめると思います。

Test用のファイルを作ってみる

testsフォルダの中に適当にHTMLファイルを作成し（どれかをコピーしたほうが速いかも？）、testプレフィックスが付いているメソッドを1つ作ります。
これはJUnit同様、テストメソッドの先頭にはtestというプレフィックスをつけないといけない感じですね。

またscriptタグに「../app/jsUnitCore.js」というJSファイルをインクルードしていますが、これがJsUnitのコアとなるJSファイルのようです。
これをインクルードすればとりあえずOK！！

< scriptlanguage = "JavaScript"type = "text/javascript"src = "../app/jsUnitCore.js" ></script>

<script language="JavaScript" type="text/javascript">

function testToJsonFired() {

	var test = "test";

	info(test);

	assertEquals("test", test);

}

</script>

Eclipse用のJsUnit Pluginを入れてみる

圧縮ファイルを解凍してできたフォルダをEclipseのPluginフォルダに放り込みます。
Eclipseを再起動してメニューバーから「ウィンドウ」→「設定」へ。

左のペインにJsUnitが追加されているので、ちょこっとだけ設定する。

JsUnit installation directory:
ここはtestRunner.htmlがあるフォルダまでのパスを設定します。
普通ならjsunitフォルダですね。

Browser executables:
ここは使いたいブラウザーを設定します。
Firefoxなら「C:\Program Files\Mozilla Firefox\firefox.exe」。

これでOKを押して設定画面を閉じます。

Eclipse用のJsUnit Pluginからテストしてみる

testRunner.htmlを右クリックし実行から「JsUnit Test Page」を選択すればブラウザが起動してテストが開始されます。
ビューからJsUnitを表示するようにしていればコンソールとかがある場所にテスト結果が表示されます。

これ以外にもAntを使ってBuild.xmlでテストを実行する方法もあるみたいですが、どうやらボクのローカル環境ではうまく実行されなかったので今のところは無視。
でも便利そうだから実際の開発に入ったらAntを使ったほうがよいでしょうね。

JavaScripのUnitテストの必要性は今後高まってくるとは思いますが、結局2倍分のソースコードを書かないといけないのはやっぱり手間ですね。
とはいっても自動化のメリットも大きい・・・う～ん。

■参考URL
・JsUnit を使った JavaScript のユニットテスト - WebOS Goodies
・Javascript/JsUnit - Bobchin's Wiki

prototype.jsのInsertionオブジェクトを使うと出力したい文字をElementオブジェクトの前とか後ろとかに自由に挿入できる。

Insertion.Top（Elementオブジェクトの最初に値を追加したい場合）

<div id="div1">あああ</div>

を

<div id="div1">いいいあああ</div>

にしたい場合は

new Insertion.Top("div1"," いいい");

Insertion.Bottom（Elementオブジェクトの末尾に値を追加したい場合）

<div id="div1">あああ</div>

を

<div id="div1">あああいいい</div>

にしたい場合は

new Insertion.Bottom("div1"," いいい");

これは結構使えそうです。
例えばGoogle Readerのようにある一定の場所までスクロールしたときに、AjaxでFeedを追加読み込みしたい場合はInsertion.Bottomで末尾に追加しちゃえばいい感じ。

Insertion.After（Elementオブジェクト終了タグの直後に値を追加したい場合）

<div id="div1">あああ</div>

を

<div id="div1">あああ</div>いいい

にしたい場合は

new Insertion.After("div1"," いいい");

Insertion.Before（Elementオブジェクト開始タグの直前に値を追加したい場合）

<div id="div1">あああ</div>

を

いいい<div id="div1">あああ</div>

にしたい場合は

new Insertion.Before("div1"," いいい");

続きでprototype.jsのどのあたりに上記内容が記述されているかを解説しています。

Continue reading

jQueryのtoggleメソッドはElementをフェードアウト、フェードインする感じでなんかかわいらしい。

しかもこれを実現しているのは、たったのこれだけ。

$("#f").toggle("slow");

以下サンプルソースコード。

<script  type="text/javascript" src="http://hisasann.com/housetect/js/jquery.js"></script>
<script type="text/javascript">
    function func(){
        $("#fade").toggle("slow");
    }
</script>
<div id="fade" style="border:1px dotted #888888;width:200px;height:50px;">
	少しづつフェードアウトするよ
</div>
<button onclick="func();">toggle</button>

動きは続きからどうぞ。

Continue reading

Aptana単体でも使えますが、Java開発者がクライアントサイドのコーディングをする際にとっても便利そうなので、Eclipse用のプラグインをインストールしてみました。

こちらに手順が書いてあります。
Plugging Aptana into an existing Eclipse configuration - Aptana

Eclipse上のヘルプからプラグインの新規検索を選んで以下を入力すればOK。
http://update.aptana.com/install/studio/3.2/
後はひたすらダウンロードを待つだけ（結構時間が掛かります）

ただバージョンが3.2となっていますが、ボクが実験的に使っているEclipseは最新の3.3・・・
大丈夫なんだろうか。

まぁHTMLとかJavaScriptのエディターが使えればいいのでたぶん大丈夫だろう！

またRadRailsはEclipseのプラグインとしてではなく単体で使っています。
EclipseはJava用でRadRailsはRails専用のIDE。

とはいってもRailsの勉強は一向に進んでいないのが現状ですｗ

OracleのPL/SQLでストアドプロシージャを書いたことはあったのですが、MySQLでの文法が分からなかったので簡単なSQLを書いてみた。

内容は大量にデータを作りたい場合に有効なInsertのループとそれを削除するためのDeleteのループです。

Insert文をループするストアドプロシージャ

create procedure insertEmp()
reads sql data
modifies sql data
begin
  declare counter int;
  set counter = 0;
  while counter < 100 do
    insert into
		EMPLOYEE
	(
		EMPLOYEE_ID
	)
    values
	(
		counter
	);
    set counter = counter + 1;
  end while;
end

Delete文をループするストアドプロシージャ

create procedure deleteEmp()
reads sql data
modifies sql data
begin
  declare counter int;
  set counter = 0;
  while counter < 100 do
    delete from
		EMPLOYEE
	where
		EMPLOYEE_ID = counter;
    set counter = counter + 1;
  end while;
end

続きでPL/SQLで書いた場合のSQLを載せておきます。
結構文法が違うんですよね。う～～ん。
あんまりストアドプロシージャを作る機会がなかったので、チャンスがあれば勉強していこうと思います。

またNavicatというMySQL用のツールでGUIからストアドプロシージャを作ろうとしたのですが、以下のエラーが出て作成できなかったので、CUI上で作成したらうまくいきました。

あんまりネットで調べてみても解決策がなかったです・・・
ストアドプロシージャ作成時のエラーについて -OKWave

■関連リンク
・＠IT：エンタープライズ市場に向かうMySQL 5.0［後編］（1/3）

Continue reading

なんだこの動きは！
ちょっと