JS Web Console - JavaScript をブラウザ上で実行
「実行」を押すと、式を評価した結果が出力されます。echo() で値を出力することもできます。

正月だし帰省中でマルチモニタじゃないので軽いネタで。
一人前の JSer になるなら、自作プレゼンツールだけでなく自作コンソールも必要でしょ、ということで、今度は kou1okada 氏や dankogai 氏にインスパイヤされて自作コンソール作ってみた。

使い方がわかりやすいように、四則演算と正規表現置換、モンテカルロ法で円周率を計算するプログラムをサンプルとして入れておいた。

・CSSslide - CSS と JavaScript で動くウェブプレゼンツール
Web ブラウザで動くプレゼンツール。実装が単純な反面、CSS を変更するだけで簡単にレイアウトを変更できます。

・就活のしかた (プレゼン版)

このように、 Web ブラウザ上で動くプレゼンツールを作りたかったから。プレゼン = PowerPoint という誤った解釈を否定しておくために、プレゼンツールを自作した。

Balloon.js - Google マップ風の吹き出しでダイアログ表示 JavaScript ライブラリ
Google マップや Google カレンダー風の吹き出し型 (バルーン) ダイアログを表示する JavaScript ライブラリ

ポップアップなんていまどきダサいよね、ということで Google マップや Google カレンダーでよく見かける吹き出し型のダイアログを簡単に作成できる JavaScript を作った。

タブブラウザ全盛の時代なのに、大したことのない情報を表示するのにポップアップウインドウを使うのはすごくナンセンス。
「Balloon.js」を使えばリンク部分にちょっと細工するだけで簡単にバルーンを表示できる！

一つのオブジェクトにしているので、導入も楽ちん。
それから、CSS Sprite を使って画像を 1 枚の GIF にまとめて軽量化 & 高速化してみた。

IE 8.0 Beta1 でもテストしたけど、CSS のバグ (?) で × ボタンが動作しないみたい。おそらくこちらのせいではないので、「IE 8 では 動作しません」 とか不利益になることはわざわざ書かない。

詳しい使用方法は下記、リンクを参照。
・Balloon.js - Google マップ風の吹き出しでダイアログ表示 JavaScript ライブラリ

JSON (JavaScript Object Notation) のシンタックスチェック (syntax check? validation? validator?)を行う方法。

JSON は所詮 JavaScript のオブジェクトにすぎないので、JavaScript としてチェックすればよい。
手軽な方法としては、Firebug のコンソールのコマンドラインから実行し、エラーがあった場合、コンソールにエラー箇所が出力される。

例えば、
以下のような JSON のシンタックスチェックを行う場合、

{
  "name": "thira",
  "age": "21",
  "live": "ube",
  "affiliation": "Yamaguchi University"
}

このようにオブジェクトにすればよい

var user={
  "name": "thira",
  "age": "21",
  "live": "ube",
  "affiliation": "Yamaguchi University"
}

Firebug のコンソールのコマンドラインから実行するところ

Firebug が使えない場合は、add workbench のブックマークレットを使用すると便利。エラーは Firefox のエラーコンソールで見る。

あと数時間で博多へ行きます。

追記 (2008.05.25)
この方法だと、Firefox は以下の両方とも通しちゃう。

正 { "name": "thira" }
誤 { name: "thira" }

この場合はチェックできないみたい。
はてブで教えてもらいました。id:kgbu さんありがとうございます。

参考
・今日の「僕は馬鹿でした」 - kgbu?

smartdialog.js
「Yahoo!画像検索」や「Lightbox」のように、画面全体にレイヤーを重ねてダイアログを表示するJavaScriptのライブラリです。
他のライブラリと比較して、任意の色を背景色に選ぶことができ、CSSファイルや透過画像が不要だという長所があります。

必要だったから作ったので、ついでに公開。
JavaScriptのライブラリを作ったのも、JavaScriptでオブジェクト指向プログラミングを実践したのも初めてなので、バグが残っているかも。glayer.jsを一部参考にさせていただきました。

Yahoo!画像検索では、LightBox風UIを実装してから使い勝手がよくなった。
Flickrに登録されている画像が優先されて表示されるっぽいけど、日本語版も登場する予兆かな。しかし、FlickrでCCライセンスで公開している画像を「(C) All right reserved.」と著作権表示するのはまずい気がするんだが。

ライツアウト - Wikipedia
ライツアウトは、5×5の形に並んだライトをある法則にしたがってすべて消灯させる(lights out)ことを目的としたパズル。

こんなのがあるらしいので、JavaScriptを書いてみました。
Lights-out Game

問題1
問題2

暇つぶしにどうぞ。