Home > 技術
技術 Archive
Operaが持つwindow.operaオブジェクトについて
- 2008-07-02 (水)
- 技術
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オブジェクトといい結構独自実装はあるのねんw
ふと思ったんだけど、prototype.jsの
IE : !!(window.attachEvent && !window.opera)
この部分って!!document.allじゃダメだったのかな?
IE判定したいんだもんね。
いや使えない何かがあるんだろうw
operaオブジェクトが持つメソッドはここにいろいろ書いてあったので参考までに。
ユーザー JavaScript による制御: 仕様
imgタグでonloadイベントを使う
- 2008-07-01 (火)
- 技術
Ajaxianをダラ見してたらimgタグにonload記述があったのでさっそく実験してみたら・・・動いた!
<img onload="this.style.width = '500px';" src="hogehoge.png" />
全然知らなかったな~。
一応Firefox3、IE7、Safari3.1で動作検証済みです。
Safari3.1でCSSから文字にアウトラインをつける方法
- 2008-07-01 (火)
- 技術
文字にアウトラインを付けるなら画像として作ってしまうのですが、Safari3.1では簡単にCSSから装飾ができるみたいです。
このアウトランのCSSプロパティは正式にはCSS3の規格ではないので使うときには注意が必要だ。
(仮に使うとしたら完全にSafariユーザーに対するエコヒイキになってしまいますねw)
文字のアウトライン関連のプロパティは、現状では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
Safari3.1に搭載されたClient-side Database storageを試してみた
- 2008-06-30 (月)
- 技術

ご存知のとおりHTML5の仕様でSelectors APIというものがありまして、これはクライアント側での永続化としてリレーショナルDBを使えるようにするものです。
これを初めて知ったときは「ええっ!」となりましたが、CookieではなくDBに値を入れておくということがじょじょに可能になりつつあるようです。
本当にオフラインでも動くサイトが出てきそうですね。
具体的な話はamachangの記事で話されているのですが、基本的にはJDBC使ってDBにアクセスする雰囲気でいけます。
(JavaScriptでトランザクションなんてことは想像もしてなかったですが・・・w)
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) {
// こっちはエラー
}
);
});
おそらくこの関数をもっとも使うことになりそうです。
Safariを使って-webkit-box-shadowでシャドウを付ける
- 2008-06-27 (金)
- 技術

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でResetを使わずにCheckbox問題を解決する方法
- 2008-06-26 (木)
- 技術
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を使いたくなくなるw
これを簡単に解決してくれるのが、同じ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が入っているかをJavaScriptから判断する方法
- 2008-06-24 (火)
- 技術
簡易版FirebugのFirebug Liteのコードを見てて思ったのが、FirefoxでFirebug Liteを埋め込んだページをロードした場合に、ちゃんと既存のほうのFirebugが開いたのでどっかで判断しているじゃないかと思ったら1行目に書いてあったw
if (("console" in window) || ("firebug" in console)) {
alert("Firebugが入っています");
}
初めのif文がまさにそれ!
alertは自前で付け足したものですが、if文のところはそれでしょう。
でももしwindowオブジェクトにconsoleがなかった場合に、次の("firebug" in console)でconsoleというオブジェクトが存在しないためにエラーなるかも。
いろいろ実験した結果ブラウザにごとに条件分けしないといけないかもです。
続きで実験用のボタンをご用意しています。
innerHTMLに値がないとgetElementByIdでnullになるパターン
- 2008-06-24 (火)
- 技術
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>
Firefox2でonload前にalert呼ぶとstyleが崩れる
- 2008-06-24 (火)
- 技術
たとえばこんな感じで「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を呼ぶことはそうそうないからいいや。
JavaScriptでちょっと面白いコード - 式クロージャ
- 2008-06-18 (水)
- 技術
素人がプログラミングを勉強するブログさんでちょっと面白い書き方を教わったのでメモメモ。
このコードは
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文を書かなくても値が返ってくれる。
だから見たことなかった構文だったんだ!w
MacOSXのWhiteRoomのようなエディタ「JDarkRoom」
- 2008-06-17 (火)
- 技術



MacOSXを使っている方なら触ったことがあるかもしれませんが、WhiteRoomというエディターは画面がまるでDOS画面のようにエディターが全画面を覆ってしまうエディター。
どんな利点があるのかというと作業を集中するということですが、これがまた結構集中できるのです。
とくに時事的なブログを書いている方にとっては、ブラウザーやらメーラーやらiTunesなんて画面内には必要ない場合が多いのでこういったエディターを使って記事を書くとなかなかなスピードで書けてしまうのです。
上にあえて3パターンの画像を掲載してみましたが、カスタマイズすると結構かわいげがある自分オリジナルが作れそうです。
でもWindows版のJDarkRoomがフリーウェアなのにMacOSXのWhiteRoomがシェアウェアなのは一体なぜ~~~!
Java1.4以上が入ってないとダメなようですが、一応.NET版のリンクも貼っておきますね。
.NET版のDarkRoomは以下からどうぞ。
集中力に自信のない人のためのテキストエディタ「Dark Room」:オープンソースを毎日紹介
[via]
MOONGIFT
JavaScriptでローカルファイルにアクセスする方法
- 2008-06-16 (月)
- 技術
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だと特にオプションを意識しなくてもサラサラと記述できるので簡単ですね。
CSSでセロハンテープなどの装飾を施す方法
- 2008-06-13 (金)
- 技術

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タグから相対指定になりますね。
これでちょうどいい場所に装飾用の画像を表示させています。
意外にも一般的な方法を使っているのですが、かわいらしい画像を使って実装されているともっとトリッキーな方法なんじゃないかと妄想させられますw
こうなってくるとイラストレーターやPhotoshopを使いこなせるのが最も大切?になってくるのでしょうかね?
早く覚えねば・・・
デモは以下のサイトから見ることができます。(楽しいですよ!)
Firebugで覗いちゃってください。
Demos | CSS Decorative Gallery
JavaScriptからVBScriptを呼ぶ方法
- 2008-06-12 (木)
- 技術
ほぼ使うことはないかと思いますが、ちょっと調べてみました。
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()」の後にセミコロンを入れるとステートメントエラーが発生してしまう。
セミコロンを取ればうまくいく・・・う~ん。
まぁいいやw
JavaScriptでリフレクション
- 2008-06-11 (水)
- 技術
意外にも出来るみたい。
// クラスの定義
var Hoge = function () {
}
Hoge.prototype = {
alert : function () {
window.alert("");
}
}
// リフレクション
var bar = this['Hoge'];
var methodName = 'alert';
(new bar())[methodName]();
これでDIコンテナとか作ってみたら面白いかも。
使うかどうかは分かりませんがw
■関連リンク
・リフレクション (情報工学) - Wikipedia
jQueryのクラス定義はトリッキーでかっこいいよ
- 2008-06-11 (水)
- 技術
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らしいスパイスがふんだんに盛込まれているのでちょっと説明してみましょう。
ActionScriptでクロージャを使う方法
- 2008-06-10 (火)
- 技術
戻り値に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の再帰呼び出しはとってもトリッキー
- 2008-06-10 (火)
- 技術
再帰呼び出しは関数内で自分自身を何回か呼ぶことを指しますが、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);
}
)();
値の監視をとかをするときにこのトリックは使えそうですね。
UTF-8で保存されたMSゴシックはIE6.0で崩れる
- 2008-06-02 (月)
- 技術
MSゴシックでギュギュっと同じ幅にされちゃうから崩れるのかな?
なので基本的にはMSPゴシックを使うようにしています。
<style>
<!--
.small {
/* これは崩れる */
font - family : 'MS ゴシック';
/* これは崩れない */
/* font-family: 'MS Pゴシック'; */
}
-->
</style>
<!-- IE6.0で崩れる -->
<div class="small">
株式会社TEST<br /> うんたらかんたら </div>
なぜかIE6.0限定です。
SafariではCSSクラスの中括弧がないと無効になる
- 2008-06-02 (月)
- 技術
記述忘れとして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の年表
- 2008-05-31 (土)
- 技術
Ruby on Railsのリリース履歴(日付は日本時間) via: Strutsの知識を基に、Ruby on Railsを学ぶ方法 − @IT自分戦略研究所 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リリース(本稿執筆時点の最新バージョン)
Javaの年表
- 2008-05-31 (土)
- 技術
avaの年表
via: Javaエンジニアにこそ、Rubyの良さが分かる − @IT自分戦略研究所 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
クロージャのスコープは関数オブジェクト単位だよ
- 2008-05-31 (土)
- 技術
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オブジェクト
- 2008-05-31 (土)
- 技術
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
IEでliにpadding-bottomを入れたときに色が覆いかぶさる
- 2008-05-29 (木)
- 技術
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宣言は上記コードには含めていません。
CSSで画像の一部を使える「CSS Sprites」
- 2008-05-28 (水)
- 技術
第10回 CSS Spritesでサイトを高速化で紹介されていたCSS Spritesが気になった。
CSS Spritesとは例えばサイトアクセス時に各々の画像を別にするのではなく、1枚の大きな画像をダウンロードさせて使いたい部分を表示するという方法。
Mapを使って画像の一部を使うのではなく、background-positionプロパティで同じことを実現しているみたいです。
こんなこと出来たんですね。
続きでCSS Spritesを試してみたいと思います。
世界をアンダーグラウンドな世界に置換するブックマークレット
- 2008-05-11 (日)
- 技術
天才を変態に置き換えるブックマークレット - てっく煮ブログこちらで「天才」から「変態」に置換するブックマークレットが紹介されていたので、文字だけ変えて遊んでみた。
javascript:void(document.body.innerHTML=document.body.innerHTML.replace(/世界/gi,'アンダーグラウンドな世界'))
サイト内に「世界」というキーワードがあった場合に、「アンダーグラウンドな世界」と置換されます。
すんごいくだらないけど、なんか面白い。
自分のブログにこのリンク貼っとこうかな。
Mac OS X LeopardにTomcat6をインストールしてみた
- 2008-05-10 (土)
- 技術
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 環境変数として変数を設定する via: UNIXコマンドリファレンス 書式 export 変数名[=設定する値]
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でPerlのHello Worldしてみた
- 2008-05-10 (土)
- 技術

Mac OS X Leopardには開発環境がめちゃくちゃ整っている。
以下のAppleの仕様に書いてあるとおり、オープンソース系の言語が標準だからこれは溜まらん。
アップル - Mac OS X Leopard - 技術仕様
開発
via: アップル - 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
なので今まで勉強していなかったPerlもRubyといっしょに勉強していこうと思う。
だって環境があるのに使わないのはもったいないですもんね。
ちょうどTextMateという最高のEditorもあるので合わせて勉強!
まずはPerlのバージョン
perl -version
どうやら5.8.8。
Perlコードの作成(HelloWorld)
#! /usr/bin/perlprint "こんにちは!¥n";
これをhello.plとして保存、そして実行。
perl hello.pl
こんにちはと表示される。
よし、まずはHelloWorldをクリアした。
後は地道に遊んでいこう。
なおPerlの勉強にはカテゴリ別詳細目次 - サンプルコードによる Perl 入門ここがめちゃくちゃ読みやすい。
ちなみにTextMateには、PerlMateという機能があって「Command + R」でTextMate上でPerlを実行できる。
なのでターミナルからいちいち実行しなくてもいいみたい。
TextMate〜〜。

TextMateのBundle(拡張)を簡単に導入する方法
- 2008-05-04 (日)
- 技術

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とMySQL連携で文字化けする場合の対処
- 2008-05-02 (金)
- 技術
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]via: MySQL 文字化けを防ぐ、文字コードの確認と設定 | 渋谷生活
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
ボクは/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 » 忙しい・・・
本日はハマりまくりな1日でした〜。
疲れた・・・w
■参考リンク
・sunadaaの日記 : my.cnfを無視させないようにする - livedoor Blog(ブログ)
・文字化け対策のためのあれこれ | Katawara.*
・MySQL 文字化けを防ぐ、文字コードの確認と設定 | 渋谷生活
Mac OS X LeopardでRailsで遊べる環境を構築するまで
- 2008-05-02 (金)
- 技術
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で遊べる環境が整った。
次でちょこちょこコードを書いていこう。
IEとFirefoxでテキストボックス上でのEnterの挙動について
- 2008-04-30 (水)
- 技術
テキストボックス上にカーソルがある場合に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用プラグイン「JSEclipse」で快適JavaScript生活
- 2008-04-28 (月)
- 技術
EclipseでJavaScriptのコードを書く機会が増えてきたので、便利なプラグインはないものかと探していたらありました。いい感じのが!
AptanaのEclipseプラグイン版を本当は使いたいのですが、現在開発で使っているマシンのメモリが足らず入れられないので軽めだけど、入力補完があるやつが見つかったのでメモメモ。
(とはいってももう開発が終わりそうなので使うのは次のプロジェクトからっぽいですw)
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を起動してね。
JavaScript用Unitテスト「JsUnit」を使ってみた
- 2008-04-23 (水)
- 技術
JavaScriptのコーディング量が多いこともあって、次回からはJsUnitを使ってテストを自動化したいな~と考えています。
ちょこっとした修正をしても再テストをしないといけない場合もあり、やっぱりそのあたりは自動化されていると助かる。
JsUnitのダウンロード
JsUnitは以下からダウンロード可能です。
JsUnit
Eclipse用のプラグインもあるので合わせてダウンロードしてみました。
JsUnitを使ってみる
- ダウンロードした圧縮ファイルを解凍するとtestRunner.htmlというファイルがあるのでとりあえずブラウザで開いてみる。
- 参照ボタンをクリックしてtestsフォルダの中にあるサンプルを選ぶ。
- Runボタンをクリックすると?!
- 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オブジェクトを使うと簡単に要素に値を挿入できる
- 2008-04-22 (火)
- 技術
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のどのあたりに上記内容が記述されているかを解説しています。
jQueryのtoggleメソッドって気持ちいい
- 2008-04-18 (金)
- 技術
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>
動きは続きからどうぞ。
Aptana Eclipseプラグインを入れてみた
- 2008-04-18 (金)
- 技術

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の勉強は一向に進んでいないのが現状ですw
MySQLのストアドプロシージャでループしてみた
- 2008-04-17 (木)
- 技術
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
